memecah komponen data table dan dropdown shadcnui

front_end_portserver/src/components/main/model/TableModel.ts

@@ -0,0 +1,24 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+export type PortServerData = {
+    id      : string;
+    info    : string;
+    date    : Date;
+    type    : 'status' | 'result' | 'query';
+}
+
+export type HeaderTableProps = {
+    data: PortServerData[];
+    columns: ColumnDef<PortServerData>[];
+  }
+  
+export type DropDownComponentProps = {
+    label: string ;
+    type : string ;
+}
+
+export type TableBodyProps = {
+    data: PortServerData[]; // Sesuaikan dengan tipe data sebenarnya
+    columns: ColumnDef<PortServerData>[]; // Sesuaikan dengan tipe data sebenarnya
+  }
+  

front_end_portserver/src/components/table/stories/BodyTable.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PortServerData } from "@/components/main/model/TableModel";
+import { TableBodyComponent } from "../tableComponent/BodyTableComponent";
+import { columns } from "../tableComponent/columns";
+
+const data:PortServerData[] = [
+    { id: "1", info: "Info 1", date: new Date("2023-10-30 15:26:04"), type: 'status' },
+    { id: "2", info: "Info 2", date: new Date("2023-10-30 15:26:04"), type: 'result' },
+    { id: "3", info: "Info 3", date: new Date("2023-10-30 15:26:04"), type: 'query' }
+];
+
+const meta = {
+    title: 'Component/Table/Body',
+    component: TableBodyComponent,
+    args: {
+        data: data,
+        columns: columns,
+    },
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+
+} satisfies Meta<typeof TableBodyComponent>
+
+export default meta;
+type Story = StoryObj<typeof meta>
+
+export const PortServerBodyTables = (args: Story ) => {
+    return (
+        <TableBodyComponent data={data} columns={columns} {...args} />
+    )
+}

front_end_portserver/src/components/table/stories/DataTables.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, StoryObj} from "@storybook/react";
 import { DataTableDemo, columns, data } from "../tableComponent/DataTable";
+import DataTable from "../tableComponent/newDataTable";
 
 const meta = {
     title: 'Component/Table',
     component: DataTableDemo,
     parameters: {
-        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
         layout: 'centered',
     },
     tags: ['autodocs'],
@@ -24,4 +24,10 @@ export const Datable = (args:Story) => {
     return(
         <DataTableDemo  data={data} columns={columns} {...args} />
     )
+}
+
+export const DataTable2 = (args: Story) => {
+    return (
+        <DataTable data={data} columns={columns} {...args}/>
+    )
 }

front_end_portserver/src/components/table/stories/DropDownMenu.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DropDownMenuComponent } from '../tableComponent/DropDownMenuComponent';
+
+
+const meta = {
+  title: 'Component/Table/DropdownOption',
+  component: DropDownMenuComponent,
+  argTypes:{
+    label: {
+        options: ["cog", "dot",],
+        control: { type: 'radio' },
+    },
+    type: {
+        options: ['status','query','result','head'],
+        control: {type: 'radio'},
+    },
+  },
+  tags: ['autodocs'],
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+},
+} satisfies Meta<typeof DropDownMenuComponent>;
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const CogDropDown = () => {
+    return(
+        <DropDownMenuComponent 
+            label=  "cog"
+            type= "head"
+        />
+    ) 
+}
+
+export const DotDropDownStatus = (args: Story) => {
+    return(
+        <DropDownMenuComponent 
+            label= "dot"
+            type= "status"
+            {...args}
+        />
+    ) 
+}
+
+export const DotDropDownQuery = (args: Story) => {
+    return(
+        <DropDownMenuComponent 
+            label= "dot"
+            type= "query"
+            {...args}
+        />
+    ) 
+}
+
+export const DotDropDownResult = (args: Story) => {
+    return(
+        <DropDownMenuComponent 
+            label= "dot"
+            type= "result"
+            {...args}
+        />
+    ) 
+}

front_end_portserver/src/components/table/stories/HeaderTable.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PortServerData } from "@/components/main/model/TableModel";
+import { TableHeaderComponent } from "../tableComponent/HeaderTableComponent";
+import { columns } from "../tableComponent/columns";
+
+const data:PortServerData[] = [
+    { id: "1", info: "Info 1", date: new Date("2023-10-30 15:26:04"), type: 'status' },
+    { id: "2", info: "Info 2", date: new Date("2023-10-30 15:26:04"), type: 'result' },
+    { id: "3", info: "Info 3", date: new Date("2023-10-30 15:26:04"), type: 'query' }
+];
+
+const meta = {
+    title: 'Component/Table/Header',
+    component: TableHeaderComponent,
+    
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    args: {
+        data: data,
+        columns: columns
+    }
+
+} satisfies Meta<typeof TableHeaderComponent>
+
+export default meta;
+type Story = StoryObj<typeof meta>
+
+export const PortServerHeadTables = (args: Story) => {
+    return (
+        <TableHeaderComponent data={data} columns={columns} {...args}/>
+    )
+}

front_end_portserver/src/components/table/tableComponent/BodyTableComponent.tsx

@@ -0,0 +1,43 @@
+import { TableBody, TableRow, TableCell } from '@/components/ui/table';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { TableBodyProps } from '@/components/main/model/TableModel';
+
+
+export const TableBodyComponent = ({ data, columns }:TableBodyProps) => {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+  return (
+    <TableBody>
+     {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )
+        }
+        </TableBody>
+  )
+};

front_end_portserver/src/components/table/tableComponent/DataTable.tsx

@@ -91,7 +91,7 @@ export const columns: ColumnDef<PortServer>[] = [
                     <CogIcon />
                 </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
+                <DropdownMenuContent align="end" >
                     <DropdownMenuItem
                         onClick={() => {}}
                     >

front_end_portserver/src/components/table/tableComponent/DropDownMenuComponent.tsx

@@ -0,0 +1,51 @@
+import { DropDownComponentProps } from "@/components/main/model/TableModel";
+import { CogIcon, DotIcon } from "../stories/Icon.stories"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+
+
+export const DropDownMenuComponent = ({label, type}:DropDownComponentProps) => {
+        return (
+          <>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                    {label.toLowerCase() === 'cog' && (
+                      <CogIcon />
+                    )}
+                    {label.toLowerCase() === 'dot' && (
+                      <DotIcon />
+                    )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {type.toLowerCase() === 'status' && (
+                <DropdownMenuItem
+                  onClick={() => {}}
+                >
+                  Info
+                </DropdownMenuItem>
+              )}
+              {type.toLowerCase() === 'result' && (
+                <>
+                  <DropdownMenuItem onClick={() => {}} >Raw Data</DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => {}}>Result</DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => {}}>Export</DropdownMenuItem>
+                </> 
+              )}
+              {type.toLowerCase() === 'query' &&  (
+                <>
+                  <DropdownMenuItem onClick={() => {}}>Raw Data</DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => {}}>Query Response</DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => {}}>Export</DropdownMenuItem>
+                </>
+              )}
+              {type.toLowerCase() === 'head'  && (
+                  <DropdownMenuItem onClick={() => {}}>Change Password</DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          </>
+          
+        );
+    };

front_end_portserver/src/components/table/tableComponent/HeaderTableComponent.tsx

@@ -0,0 +1,31 @@
+import { HeaderTableProps } from "@/components/main/model/TableModel";
+import { TableHeader, TableRow, TableHead } from "@/components/ui/table";
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+
+export const TableHeaderComponent = ({ data, columns }:HeaderTableProps) => {
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+      })
+
+    return (
+        <TableHeader>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+            <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header: any) => (
+                <TableHead key={header.id}>
+                    {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            typeof header.getContext === 'function' ? header.getContext() : {}
+                          )}
+                </TableHead>
+                ))}
+            </TableRow>
+            ))}
+        </TableHeader>
+    )
+};

front_end_portserver/src/components/table/tableComponent/columns.tsx

@@ -0,0 +1,41 @@
+import { PortServerData } from "@/components/main/model/TableModel"
+import { ColumnDef } from "@tanstack/react-table"
+import { DateDisplay } from "./DateDisplay"
+import { CogDropDown } from "../stories/DropDownMenu.stories"
+import { DropDownMenuComponent } from "./DropDownMenuComponent"
+
+export const columns: ColumnDef<PortServerData>[] = [
+    {
+        accessorKey: "date",
+        header: "Date",
+        cell: ({ row }) => {
+            const date = new Date(row.getValue("date"))
+            return(
+                <div className="text-[#637381] bg-[#919EAB29] rounded-md border-4 border-[#919EAB29]">
+                    <DateDisplay date={date}/>
+                </div>
+            )
+        }
+      },
+  {
+    accessorKey: "info",
+    header: "Info",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("info")}</div>
+    ),
+  },
+  {
+    id: "actions",
+    header:() => {
+        return(
+            <CogDropDown />
+        )
+    },
+    enableHiding: false,
+    cell: ({ row }) => {
+        const type = row.original
+        return ( 
+            <DropDownMenuComponent label="dot" type={type.type}/>
+        )}
+  },
+]

front_end_portserver/src/components/table/tableComponent/newDataTable.tsx

@@ -0,0 +1,26 @@
+import { Table} from "@/components/ui/table";
+import { TableBodyComponent } from "./BodyTableComponent";
+import { TableHeaderComponent } from "./HeaderTableComponent";
+import { PortServerData } from "@/components/main/model/TableModel";
+import { ColumnDef } from "@tanstack/react-table";
+
+interface DataTableprops {
+  data: PortServerData[];
+  columns: ColumnDef<PortServerData>[];
+}
+
+const DataTable = ({data, columns }:DataTableprops) => {
+
+  return (
+    <div className="w-full">
+      <div className="rounded-md border">
+        <Table>
+            <TableHeaderComponent data={data} columns={columns}  />
+            <TableBodyComponent data={data} columns={columns} />
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+export default DataTable;