fixed editmokcup, new manageorder table

Madrasda · Jan 20, 2024 · fed337c · fed337c
1 parent d837e00
commit fed337c
Show file tree

Hide file tree

Showing 6 changed files with 989 additions and 588 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.10.6",
     "@firebase/util": "^1.9.3",
     "@heroicons/react": "^2.0.17",
@@ -19,6 +19,7 @@
     "@mui/material": "^5.12.1",
     "@next/font": "^13.1.6",
     "@nextui-org/react": "^1.0.0-beta.12",
+    "@table-library/react-table-library": "^4.1.7",
     "all": "^0.0.0",
     "axios": "^1.3.5",
     "chart.js": "^4.2.1",

diff --git a/src/components/manageordertable.js b/src/components/manageordertable.js
@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import {
+    Table,
+    Header,
+    HeaderRow,
+    Body,
+    Row,
+    HeaderCell,
+    Cell,
+} from "@table-library/react-table-library/table";
+import { useTheme } from "@table-library/react-table-library/theme";
+
+import { nodes } from "@/utils/dummydata";
+
+const Component = () => {
+    const data = { nodes };
+
+    const theme = useTheme({
+        Table: `
+        --data-table-library_grid-template-columns:  250px 150px 25% 25% 50%;
+      `,
+        BaseCell: `
+        &:nth-of-type(1) {
+          left: 0px;
+        }
+
+        &:nth-of-type(2) {
+          left: 250px;
+        }
+      `,
+    });
+
+    return (
+        <Table data={data} theme={theme} layout={{ custom: true }}>
+            {(tableList) => (
+                <>
+                    <Header>
+                        <HeaderRow>
+                            <HeaderCell resize pinLeft>
+                                Task
+                            </HeaderCell>
+                            <HeaderCell resize pinLeft>
+                                Deadline
+                            </HeaderCell>
+                            <HeaderCell resize>Type</HeaderCell>
+                            <HeaderCell resize>Complete</HeaderCell>
+                            <HeaderCell resize>Tasks</HeaderCell>
+                        </HeaderRow>
+                    </Header>
+
+                    <Body>
+                        {tableList.map((item) => (
+                            <Row key={item.id} item={item}>
+                                <Cell pinLeft>{item.name}</Cell>
+                                <Cell pinLeft>
+                                    {new Date(item.deadline).toLocaleDateString("en-US", {
+                                        year: "numeric",
+                                        month: "2-digit",
+                                        day: "2-digit",
+                                    })}
+                                </Cell>
+                                <Cell>{item.type}</Cell>
+                                <Cell>{item.isComplete.toString()}</Cell>
+                                <Cell>{item.nodes?.length}</Cell>
+                            </Row>
+                        ))}
+                    </Body>
+                </>
+            )}
+        </Table>
+    );
+};
+
+export default Component;