From d8a4387d7fdf5a217f050feedf6d5e16aa6c2b91 Mon Sep 17 00:00:00 2001 From: Advik Arora Date: Fri, 22 Mar 2024 16:48:31 -0400 Subject: [PATCH 01/17] table component created --- compass/app/admin/page.tsx | 8 ++++++ compass/components/Table.tsx | 47 ++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 compass/app/admin/page.tsx create mode 100644 compass/components/Table.tsx diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx new file mode 100644 index 0000000..f0d9d07 --- /dev/null +++ b/compass/app/admin/page.tsx @@ -0,0 +1,8 @@ +import Table from "@/components/Table"; + +export default function Page() { + return (<> + + ) + +} \ No newline at end of file diff --git a/compass/components/Table.tsx b/compass/components/Table.tsx new file mode 100644 index 0000000..2b8cb28 --- /dev/null +++ b/compass/components/Table.tsx @@ -0,0 +1,47 @@ +import { Component } from "react" + +interface TableProps { + headers: object; + rows: object; + } + +const Table: React.FC = ({headers, rows}) => { + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Front-end web developer course 2021 +
PersonMost interest inAge
ChrisHTML tables22
DennisWeb accessibility45
SarahJavaScript frameworks29
KarenWeb performance36
+ +} + +export default Table \ No newline at end of file From 14ae6efa46f8eac20e2d5f6fcff3fa1ed6d5f678 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Sat, 23 Mar 2024 15:16:25 -0400 Subject: [PATCH 02/17] rendering table from data i am going insane i love lists i love lists i love react i love lists i am oisdjghiuergihbenrjhloguehwirub --- .DS_Store => backend/.DS_Store | Bin 6148 -> 6148 bytes compass/app/admin/page.tsx | 28 ++++++++++-- compass/components/Table.tsx | 76 ++++++++++++++++----------------- 3 files changed, 61 insertions(+), 43 deletions(-) rename .DS_Store => backend/.DS_Store (73%) diff --git a/.DS_Store b/backend/.DS_Store similarity index 73% rename from .DS_Store rename to backend/.DS_Store index 2a70607eb952be7bf408f0ef6db8429721f9cb2a..059e395073932ab8c149300ed4aeb43c4ad87fed 100644 GIT binary patch literal 6148 zcmeHKy-ve05I)mTMKI8TfeB?}r4N7<6z|6qNz+*7*1iT0< zKi}DIY?BlrAt8kBB>PKzcfK#5YP%*P)w>vVi8@3SqcKKn=o*au+-kOBM>c^<&oQS{ z8q;iY-0jz*Wk3`V1^$`>ymn)(*)!s`>#g5mkxvcT)=g7PUS!!|QViI)_w>5cd4Ak) zjvIX|ZhF$~yPCUPx=lG1Gy=Pc*;AaK-J##-bNy2B3FgQP$7NYe$ivo|(U8ue&y?o8 zw>ciGx0;9N_jznwy)ATUQxM~LEQ<+wXgy-gF$RxIFc~iPS;s|lt;P6!w(lxF4RMas zS8*XPT{FV(2D|=eZQ^@)E1%Ef@Zo)-i|2RsoBUzjL>HFsM+)G~W{cMiN-qkC0-`{r z0Phb88e?j)G^n=@bovSaj4-SX&wQ8QoWx>ku`~z|Oqo=mNmcfWp-ei)6C0OWEDf4; zQugwpY-MF{C`wny{D}@Hl^T>@6c7bM1zP5{!{`6O^80_7ByXaCDDbZoP*K*;diW%J zw$?t5&)Nj-2#t;7N`pEDojs2A10Tg(XxiXQ_yL$&EDd4=CVvF94AO}LzpB6ohyAR< delta 355 zcmZoMXfc=|#>B)qu~2NHo}wr-0|Nsi1A_nqLn1>lLvd1haY0hf#=_-{^&lB`hGd3( zhFpdMWZC>Apv;b>f}G6a5(9&4j7-cdtZeKY>>S)2vB4Sn<-sM1C8fnqiAB*MUPyj^ zP7;irm=ucQXE~6B*VeU!5J?g zQC)3rsiRzY^I}NZe&nf%gG_CtZy9@pPiGNm)`|+91t)9Jp~55P#Q*c z0~u)EN-0jxNdh_(qy#P{1o3iNa8X`PeqK6IigB|bhZxJmhHIPIIruq%K?vl3XP(S2 R;>ZEg3AB)9bA-qmW&nPrSPuXI diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index f0d9d07..8ed0bd3 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -1,8 +1,28 @@ +"use client"; import Table from "@/components/Table"; +import { useState } from "react"; + +// TODO: Example data. Remove later. +const headersExample = ["username", "email", "role", "password"]; +const dataExample = [ + {id: 1, username: "example", email: "example@gmail.com", role: "role"}, + {id: 3, username: "erhgoejnrgexample", email: "example@gmail.com", role: "role"}, + {id: 2, username: "another one", email: "example@gmail.com", role: "role"}, + {id: 4, username: "examgoiadnfgople", email: "example@gmail.com", role: "role"}, + {id: 5, username: "edfhgiebroxample", email: "example@gmail.com", role: "role"}, + {id: 6, username: "examlsdfkjg", email: "example@gmail.com", role: "role"}, + {id: 7, username: "exkkkample", email: "example@gmail.com", role: "role"}, +] export default function Page() { - return (<> - + const [data, setData] = useState({ + headers: [...headersExample], + data: [...dataExample], + }); + + return ( + <> +
) - -} \ No newline at end of file + +} diff --git a/compass/components/Table.tsx b/compass/components/Table.tsx index 2b8cb28..ac55a42 100644 --- a/compass/components/Table.tsx +++ b/compass/components/Table.tsx @@ -1,47 +1,45 @@ import { Component } from "react" +// interface TableHeader { +// title: string, +// type: string +// } + +// interface TableRow { +// [key: string]: any, +// } interface TableProps { - headers: object; - rows: object; - } + headersData: string[]; + data: { [key: string]: any }[]; +} -const Table: React.FC = ({headers, rows}) => { +const Table: React.FC = ({ headersData, data }) => { + const headers = headersData.map((header, i) => { + return + }) -
{header}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Front-end web developer course 2021 -
PersonMost interest inAge
ChrisHTML tables22
DennisWeb accessibility45
SarahJavaScript frameworks29
KarenWeb performance36
+ console.log(data); + + const rows = data.map((item) => { + const row = headersData.map(key => { + return {item[key]} + }); + return {row} + }) + + return (<> + + + + {headers} + + + + {rows} + +
+ ); } -export default Table \ No newline at end of file +export default Table From b7e7046a88d10b84b59e616ffff85869491cc61d Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Sat, 23 Mar 2024 15:16:44 -0400 Subject: [PATCH 03/17] oops i forgot the page --- compass/app/admin/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index 8ed0bd3..18dda95 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -23,6 +23,6 @@ export default function Page() { return ( <> - ) + ); } From b5494a53d6adba3800876201cbd57261556ad3d4 Mon Sep 17 00:00:00 2001 From: Erica Birdsong <97683338+ermaria@users.noreply.github.com> Date: Tue, 26 Mar 2024 13:25:20 -0400 Subject: [PATCH 04/17] Added page interface --- compass/app/admin/layout.tsx | 0 compass/components/admin/PageLayout.tsx | 22 ++++++++++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 compass/app/admin/layout.tsx create mode 100644 compass/components/admin/PageLayout.tsx diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx new file mode 100644 index 0000000..e69de29 diff --git a/compass/components/admin/PageLayout.tsx b/compass/components/admin/PageLayout.tsx new file mode 100644 index 0000000..8ea9195 --- /dev/null +++ b/compass/components/admin/PageLayout.tsx @@ -0,0 +1,22 @@ + +interface PageLayoutProps{ + icon: React.ReactElement; + title: string; + table: React.ReactElement +} + +export const PageLayout: React.FC = ({ icon, title, table }) => { + return( +
+
+ + {icon} + + + {title} + +
+ {table} +
+ ); +}; \ No newline at end of file From eb8c7e8f2cb187631bb09de936106f2749954926 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Tue, 26 Mar 2024 15:55:29 -0400 Subject: [PATCH 05/17] Rewrite table with TanStack Table Not sure if this is the direction we want to go in, but... --- compass/app/admin/page.tsx | 85 +++++++++++++++++++++++++++++------- compass/app/admin/users.json | 1 + compass/package-lock.json | 32 ++++++++++++++ compass/package.json | 1 + 4 files changed, 104 insertions(+), 15 deletions(-) create mode 100644 compass/app/admin/users.json diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index 18dda95..ed6babe 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -1,28 +1,83 @@ "use client"; -import Table from "@/components/Table"; +// import Table from "@/components/Table"; +import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; import { useState } from "react"; +import usersImport from "./users.json"; + +const usersExample = usersImport as unknown as User[]; + +type User = { + id: number; + created_at: any; + username: string; + role: "ADMIN" | "EMPLOYEE" | "VOLUNTEER"; + email: string; + program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY"; + experience: number; + group?: string; +} // TODO: Example data. Remove later. -const headersExample = ["username", "email", "role", "password"]; -const dataExample = [ - {id: 1, username: "example", email: "example@gmail.com", role: "role"}, - {id: 3, username: "erhgoejnrgexample", email: "example@gmail.com", role: "role"}, - {id: 2, username: "another one", email: "example@gmail.com", role: "role"}, - {id: 4, username: "examgoiadnfgople", email: "example@gmail.com", role: "role"}, - {id: 5, username: "edfhgiebroxample", email: "example@gmail.com", role: "role"}, - {id: 6, username: "examlsdfkjg", email: "example@gmail.com", role: "role"}, - {id: 7, username: "exkkkample", email: "example@gmail.com", role: "role"}, -] export default function Page() { - const [data, setData] = useState({ - headers: [...headersExample], - data: [...dataExample], + const columnHelper = createColumnHelper(); + + const columns = [ + columnHelper.accessor("username", { + cell: info => info.getValue(), + }), + columnHelper.accessor("role", { + cell: info => info.renderValue(), + }), + columnHelper.accessor("email", { + cell: info => info.renderValue(), + }), + columnHelper.accessor("program", { + cell: info => info.renderValue(), + }) + ]; + + const [data, setData] = useState([...usersExample]); + + const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), }); return ( <> -
+

This is example data!!

+ +
+ + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => ( + + ))} + + ))} + + + {table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
); } diff --git a/compass/app/admin/users.json b/compass/app/admin/users.json new file mode 100644 index 0000000..20caf99 --- /dev/null +++ b/compass/app/admin/users.json @@ -0,0 +1 @@ +[{"id":0,"created_at":1711482132230,"username":"Bo_Pfeffer","role":"ADMIN","email":"Bo.Pfeffer@gmail.com","program":"DOMESTIC","experience":2,"group":""},{"id":1,"created_at":1711482132231,"username":"Marianna_Heathcote76","role":"ADMIN","email":"Marianna_Heathcote14@yahoo.com","program":"DOMESTIC","experience":1,"group":""},{"id":2,"created_at":1711482132231,"username":"Queenie_Schroeder","role":"VOLUNTEER","email":"Queenie_Schroeder@yahoo.com","program":"COMMUNITY","experience":5,"group":""},{"id":3,"created_at":1711482132231,"username":"Arne.Bode","role":"VOLUNTEER","email":"Arne.Bode@hotmail.com","program":"DOMESTIC","experience":3,"group":""},{"id":4,"created_at":1711482132231,"username":"Maia.Zulauf9","role":"ADMIN","email":"Maia_Zulauf@gmail.com","program":"DOMESTIC","experience":5,"group":""},{"id":5,"created_at":1711482132231,"username":"River_Bauch","role":"EMPLOYEE","email":"River.Bauch@yahoo.com","program":"ECONOMIC","experience":2,"group":""},{"id":6,"created_at":1711482132231,"username":"Virgil.Hilll","role":"VOLUNTEER","email":"Virgil.Hilll@yahoo.com","program":"ECONOMIC","experience":3,"group":""},{"id":7,"created_at":1711482132231,"username":"Bridget_Cartwright","role":"ADMIN","email":"Bridget_Cartwright@yahoo.com","program":"ECONOMIC","experience":3,"group":""},{"id":8,"created_at":1711482132231,"username":"Glennie_Keebler64","role":"EMPLOYEE","email":"Glennie_Keebler60@yahoo.com","program":"DOMESTIC","experience":2,"group":""},{"id":9,"created_at":1711482132232,"username":"Orin.Jenkins53","role":"EMPLOYEE","email":"Orin.Jenkins@gmail.com","program":"ECONOMIC","experience":1,"group":""},{"id":10,"created_at":1711482132232,"username":"Zachery.Rosenbaum","role":"ADMIN","email":"Zachery.Rosenbaum@hotmail.com","program":"COMMUNITY","experience":3,"group":""},{"id":11,"created_at":1711482132232,"username":"Phoebe.Ziemann","role":"EMPLOYEE","email":"Phoebe_Ziemann92@gmail.com","program":"COMMUNITY","experience":2,"group":""},{"id":12,"created_at":1711482132232,"username":"Bradford_Conroy53","role":"VOLUNTEER","email":"Bradford_Conroy94@hotmail.com","program":"COMMUNITY","experience":2,"group":""},{"id":13,"created_at":1711482132232,"username":"Florine_Strosin55","role":"VOLUNTEER","email":"Florine.Strosin29@hotmail.com","program":"ECONOMIC","experience":1,"group":""},{"id":14,"created_at":1711482132232,"username":"Constance.Doyle59","role":"EMPLOYEE","email":"Constance_Doyle@hotmail.com","program":"DOMESTIC","experience":3,"group":""},{"id":15,"created_at":1711482132232,"username":"Chauncey_Lockman","role":"ADMIN","email":"Chauncey_Lockman@yahoo.com","program":"DOMESTIC","experience":5,"group":""},{"id":16,"created_at":1711482132232,"username":"Esther_Wuckert-Larson26","role":"EMPLOYEE","email":"Esther_Wuckert-Larson@gmail.com","program":"ECONOMIC","experience":0,"group":""},{"id":17,"created_at":1711482132232,"username":"Jewel.Kunde","role":"VOLUNTEER","email":"Jewel_Kunde29@gmail.com","program":"ECONOMIC","experience":5,"group":""},{"id":18,"created_at":1711482132232,"username":"Hildegard_Parker92","role":"ADMIN","email":"Hildegard_Parker74@yahoo.com","program":"ECONOMIC","experience":2,"group":""},{"id":19,"created_at":1711482132232,"username":"Jordane.Lakin2","role":"ADMIN","email":"Jordane_Lakin@hotmail.com","program":"COMMUNITY","experience":1,"group":""}] \ No newline at end of file diff --git a/compass/package-lock.json b/compass/package-lock.json index aa9dab8..fd7ab14 100644 --- a/compass/package-lock.json +++ b/compass/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18", "react-dom": "^18" @@ -401,6 +402,37 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/react-table": { + "version": "8.15.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.0.tgz", + "integrity": "sha512-8K4RSROUtXUtfiezV6Ehl8z99axFrkQnxXi0vjWBJv3Tsm5x4EyrgXI7d2tOOMoANykKZLB6S1sGZGemoMRt7Q==", + "dependencies": { + "@tanstack/table-core": "8.14.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.14.0.tgz", + "integrity": "sha512-wDhpKJahGHWhmRt4RxtV3pES63CoeadljGWS/xeS9OJr1HBl2NB+OO44ht3sxDH5j5TRDAbQzC0NvSlsUfn7lQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", diff --git a/compass/package.json b/compass/package.json index a748bbe..2fee5d7 100644 --- a/compass/package.json +++ b/compass/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18", "react-dom": "^18" From 01e73aa702b1cccc025ee9853eab83ad6162586d Mon Sep 17 00:00:00 2001 From: Meliora Ho Date: Wed, 27 Mar 2024 14:02:39 +0000 Subject: [PATCH 06/17] combined --- compass/app/admin/layout.tsx | 0 compass/app/admin/page.tsx | 14 +++++++++ compass/app/resource/page.tsx | 2 +- compass/components/admin/PageLayout.tsx | 39 +++++++++++++------------ compass/package-lock.json | 32 ++++++++++++++++++++ compass/package.json | 1 + 6 files changed, 68 insertions(+), 20 deletions(-) delete mode 100644 compass/app/admin/layout.tsx create mode 100644 compass/app/admin/page.tsx diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx new file mode 100644 index 0000000..7bc5451 --- /dev/null +++ b/compass/app/admin/page.tsx @@ -0,0 +1,14 @@ +"use client" + +import { PageLayout } from "@/components/admin/PageLayout" + +import { BookmarkIcon } from "@heroicons/react/24/solid" + +export default function Page() { + return ( +
+ {/* icon + title */} + } /> +
+ ) +} diff --git a/compass/app/resource/page.tsx b/compass/app/resource/page.tsx index ca68cdb..2e4f4cd 100644 --- a/compass/app/resource/page.tsx +++ b/compass/app/resource/page.tsx @@ -9,7 +9,7 @@ export default function Page() { return (
{/* icon + title */} -
+
= ({ icon, title, table }) => { - return( -
-
- - {icon} - - - {title} - +export const PageLayout: React.FC = ({ icon, title, children }) => { + return ( +
+ {/* icon + title */} +
+
+ {icon} +

{title}

+
- {table} -
- ); -}; \ No newline at end of file + {/* data */} +
+ {children} +
+
+ ); +}; diff --git a/compass/package-lock.json b/compass/package-lock.json index ae63674..57eb56c 100644 --- a/compass/package-lock.json +++ b/compass/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18", "react-dom": "^18" @@ -401,6 +402,37 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/react-table": { + "version": "8.15.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.0.tgz", + "integrity": "sha512-8K4RSROUtXUtfiezV6Ehl8z99axFrkQnxXi0vjWBJv3Tsm5x4EyrgXI7d2tOOMoANykKZLB6S1sGZGemoMRt7Q==", + "dependencies": { + "@tanstack/table-core": "8.14.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.14.0.tgz", + "integrity": "sha512-wDhpKJahGHWhmRt4RxtV3pES63CoeadljGWS/xeS9OJr1HBl2NB+OO44ht3sxDH5j5TRDAbQzC0NvSlsUfn7lQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", diff --git a/compass/package.json b/compass/package.json index 799aff9..ad436d0 100644 --- a/compass/package.json +++ b/compass/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18", "react-dom": "^18" From 80760c1f14ddcd364793d3a1b1744fe538b4917d Mon Sep 17 00:00:00 2001 From: Meliora Ho Date: Wed, 27 Mar 2024 14:13:57 +0000 Subject: [PATCH 07/17] Reorder code --- compass/app/admin/page.tsx | 108 +++++++++++------------- compass/components/admin/PageLayout.tsx | 2 +- 2 files changed, 52 insertions(+), 58 deletions(-) diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index e803aad..9307b93 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -1,7 +1,12 @@ - "use client"; // import Table from "@/components/Table"; -import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import { + ColumnDef, + createColumnHelper, + flexRender, + getCoreRowModel, + useReactTable, +} from "@tanstack/react-table"; import { useState } from "react"; import usersImport from "./users.json"; @@ -16,26 +21,28 @@ type User = { program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY"; experience: number; group?: string; -} +}; -// TODO: Example data. Remove later. +import { PageLayout } from "@/components/admin/PageLayout"; + +import { BookmarkIcon } from "@heroicons/react/24/solid"; export default function Page() { const columnHelper = createColumnHelper(); const columns = [ columnHelper.accessor("username", { - cell: info => info.getValue(), + cell: (info) => info.getValue(), }), columnHelper.accessor("role", { - cell: info => info.renderValue(), + cell: (info) => info.renderValue(), }), columnHelper.accessor("email", { - cell: info => info.renderValue(), + cell: (info) => info.renderValue(), }), columnHelper.accessor("program", { - cell: info => info.renderValue(), - }) + cell: (info) => info.renderValue(), + }), ]; const [data, setData] = useState([...usersExample]); @@ -45,53 +52,40 @@ export default function Page() { data, getCoreRowModel: getCoreRowModel(), }); - return ( - <> -

This is example data!!

- - - - {table.getHeaderGroups().map(headerGroup => ( - - {headerGroup.headers.map(header => ( - - ))} - - ))} - - - {table.getRowModel().rows.map(row => ( - - {row.getVisibleCells().map(cell => ( - - ))} - - ))} - -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
- ); - - - -import { PageLayout } from "@/components/admin/PageLayout" - -import { BookmarkIcon } from "@heroicons/react/24/solid" - -export default function Page() { - return ( -
- {/* icon + title */} - } /> -
- ) +
+ {/* icon + title */} + }> + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ +
+ ); } diff --git a/compass/components/admin/PageLayout.tsx b/compass/components/admin/PageLayout.tsx index f27a96a..80a96f5 100644 --- a/compass/components/admin/PageLayout.tsx +++ b/compass/components/admin/PageLayout.tsx @@ -1,7 +1,7 @@ interface PageLayoutProps { icon: React.ReactElement; title: string; - // table: React.ReactElement + children: React.ReactElement } export const PageLayout: React.FC = ({ icon, title, children }) => { From 6f18419a74edbf375ea291c8a09a49758139e5d9 Mon Sep 17 00:00:00 2001 From: Meliora Ho Date: Wed, 27 Mar 2024 15:47:44 +0000 Subject: [PATCH 08/17] Added drawer --- compass/app/admin/layout.tsx | 37 ++++++++ compass/app/admin/page.tsx | 87 ++---------------- compass/app/page.tsx | 86 ------------------ compass/app/pages/page/page.tsx | 26 ------ compass/components/admin/PageLayout.tsx | 2 +- compass/components/admin/Table/Index.tsx | 91 +++++++++++++++++++ compass/components/admin/Table/RowAction.tsx | 21 +++++ .../components/admin/Table/TableAction.tsx | 12 +++ .../admin/Table}/users.json | 0 compass/components/page/Drawer.tsx | 2 +- 10 files changed, 172 insertions(+), 192 deletions(-) create mode 100644 compass/app/admin/layout.tsx delete mode 100644 compass/app/page.tsx delete mode 100644 compass/app/pages/page/page.tsx create mode 100644 compass/components/admin/Table/Index.tsx create mode 100644 compass/components/admin/Table/RowAction.tsx create mode 100644 compass/components/admin/Table/TableAction.tsx rename compass/{app/admin => components/admin/Table}/users.json (100%) diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx new file mode 100644 index 0000000..bb7fddd --- /dev/null +++ b/compass/app/admin/layout.tsx @@ -0,0 +1,37 @@ +"use client" + +import Sidebar from '@/components/resource/Sidebar'; +import React, { useState } from 'react'; +import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline'; + +export default function RootLayout({ + + children, +}: { + children: React.ReactNode +}) { + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + + return ( +
+ {/* button to open sidebar */} + + {/* sidebar */} +
+ +
+ {/* page ui */} +
+ {children} +
+
+ ) +} \ No newline at end of file diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index 9307b93..8e4d918 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -1,90 +1,21 @@ "use client"; -// import Table from "@/components/Table"; -import { - ColumnDef, - createColumnHelper, - flexRender, - getCoreRowModel, - useReactTable, -} from "@tanstack/react-table"; -import { useState } from "react"; -import usersImport from "./users.json"; - -const usersExample = usersImport as unknown as User[]; - -type User = { - id: number; - created_at: any; - username: string; - role: "ADMIN" | "EMPLOYEE" | "VOLUNTEER"; - email: string; - program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY"; - experience: number; - group?: string; -}; import { PageLayout } from "@/components/admin/PageLayout"; +import { Table } from "@/components/admin/Table/Index"; + +import { UsersIcon } from "@heroicons/react/24/solid"; + + + -import { BookmarkIcon } from "@heroicons/react/24/solid"; export default function Page() { - const columnHelper = createColumnHelper(); - - const columns = [ - columnHelper.accessor("username", { - cell: (info) => info.getValue(), - }), - columnHelper.accessor("role", { - cell: (info) => info.renderValue(), - }), - columnHelper.accessor("email", { - cell: (info) => info.renderValue(), - }), - columnHelper.accessor("program", { - cell: (info) => info.renderValue(), - }), - ]; - - const [data, setData] = useState([...usersExample]); - - const table = useReactTable({ - columns, - data, - getCoreRowModel: getCoreRowModel(), - }); + return (
{/* icon + title */} - }> - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
+ }> + ); diff --git a/compass/app/page.tsx b/compass/app/page.tsx deleted file mode 100644 index dba820a..0000000 --- a/compass/app/page.tsx +++ /dev/null @@ -1,86 +0,0 @@ -// pages/index.tsx -"use client"; - -import Button from '@/components/Button'; -import Input from '@/components/Input' -import InlineLink from '@/components/InlineLink'; -import Paper from '@/components/auth/Paper'; -// import { Metadata } from 'next' -import Image from 'next/image'; -import {ChangeEvent, useState} from "react"; - -// export const metadata: Metadata = { -// title: 'Login', -// } - -export default function Page() { - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [error, setError] = useState(""); - - const handleEmailChange = (event: React.ChangeEvent) => { - setEmail(event.currentTarget.value); - console.log("email " + email); - } - - const handlePasswordChange = (event: React.ChangeEvent) => { - setPassword(event.currentTarget.value); - console.log("password " + password) - } - - const handleClick = (event: React.MouseEvent) => { - event.preventDefault(); - // Priority: Incorrect combo > Missing email > Missing password - - if (password.trim().length === 0) { - setError("Please enter your password.") - } - // This shouldn't happen, already provides validation, but just in case. - if (email.trim().length === 0) { - setError("Please enter your email.") - } - // Placeholder for incorrect email + password combo. - if (email === "incorrect@gmail.com" && password) { - setError("Incorrect password.") - } - } - - - - return ( - <> - -
- -

Login

-
- -
-
- -
-
- - Forgot password? - - - - -
- -

- © 2024 Compass Center -

- - - ); -}; \ No newline at end of file diff --git a/compass/app/pages/page/page.tsx b/compass/app/pages/page/page.tsx deleted file mode 100644 index dce1122..0000000 --- a/compass/app/pages/page/page.tsx +++ /dev/null @@ -1,26 +0,0 @@ -// pages/index.tsx -"use client"; - - -import Drawer from '@/components/page/Drawer'; -// import { Metadata } from 'next' -import {ChangeEvent, useState} from "react"; - -// export const metadata: Metadata = { -// title: 'Login', -// } - -export default function Page() { - const [pageContent, setPageContent] = useState("") - - const handleDrawerContentChange = (newContent) => { - setPageContent(newContent); - }; - - return ( - <> -

Resources

- {pageContent} - - ); -}; \ No newline at end of file diff --git a/compass/components/admin/PageLayout.tsx b/compass/components/admin/PageLayout.tsx index 80a96f5..c655296 100644 --- a/compass/components/admin/PageLayout.tsx +++ b/compass/components/admin/PageLayout.tsx @@ -15,7 +15,7 @@ export const PageLayout: React.FC = ({ icon, title, children }) {/* data */} -
+
{children}
diff --git a/compass/components/admin/Table/Index.tsx b/compass/components/admin/Table/Index.tsx new file mode 100644 index 0000000..5a12c1b --- /dev/null +++ b/compass/components/admin/Table/Index.tsx @@ -0,0 +1,91 @@ +// for showcasing to compass + +import usersImport from "./users.json"; +import { + ColumnDef, + createColumnHelper, + flexRender, + getCoreRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { useState } from "react"; +import { RowAction } from "./RowAction"; +import { TableAction } from "./TableAction"; + +const usersExample = usersImport as unknown as User[]; + +type User = { + id: number; + created_at: any; + username: string; + role: "ADMIN" | "EMPLOYEE" | "VOLUNTEER"; + email: string; + program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY"; + experience: number; + group?: string; +}; + + +export const Table = () => { + const columnHelper = createColumnHelper(); + + const columns = [ + columnHelper.accessor("username", { + cell: (info) => , + }), + columnHelper.accessor("role", { + cell: (info) => info.renderValue(), + }), + columnHelper.accessor("email", { + cell: (info) => info.renderValue(), + }), + columnHelper.accessor("program", { + cell: (info) => info.renderValue(), + }), + ]; + + const [data, setData] = useState([...usersExample]); + + const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), + }); + + return( +
+
+ +
+
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+
+ ) +} \ No newline at end of file diff --git a/compass/components/admin/Table/RowAction.tsx b/compass/components/admin/Table/RowAction.tsx new file mode 100644 index 0000000..37b0215 --- /dev/null +++ b/compass/components/admin/Table/RowAction.tsx @@ -0,0 +1,21 @@ +import Drawer from "@/components/page/Drawer"; +import {ChangeEvent, useState} from "react"; + +export const RowAction = ({ title }) => { + const [pageContent, setPageContent] = useState("") + + const handleDrawerContentChange = (newContent) => { + setPageContent(newContent); + }; + + + + return ( +
+ {title} + + {pageContent} + +
+ ); +}; diff --git a/compass/components/admin/Table/TableAction.tsx b/compass/components/admin/Table/TableAction.tsx new file mode 100644 index 0000000..be4a309 --- /dev/null +++ b/compass/components/admin/Table/TableAction.tsx @@ -0,0 +1,12 @@ +import { MagnifyingGlassIcon } from "@heroicons/react/24/solid"; + +export const TableAction = () => { + return ( +
+ Filter + Sort + +
+ ); + }; + \ No newline at end of file diff --git a/compass/app/admin/users.json b/compass/components/admin/Table/users.json similarity index 100% rename from compass/app/admin/users.json rename to compass/components/admin/Table/users.json diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx index 217fbd2..d80cd9f 100644 --- a/compass/components/page/Drawer.tsx +++ b/compass/components/page/Drawer.tsx @@ -44,7 +44,7 @@ const Drawer: FunctionComponent = ({ title, children, onSave, edita return (
- +

{title}

From 02c2e8932528bb38821f58fe09223198c2c07946 Mon Sep 17 00:00:00 2001 From: Meliora Ho Date: Fri, 29 Mar 2024 17:10:04 +0000 Subject: [PATCH 09/17] made more changes --- compass/app/admin/page.tsx | 4 ++-- compass/components/{admin => }/PageLayout.tsx | 0 compass/components/{admin => }/Table/Index.tsx | 0 compass/components/{admin => }/Table/RowAction.tsx | 0 compass/components/{admin => }/Table/TableAction.tsx | 0 compass/components/{admin => }/Table/users.json | 0 compass/components/resource/Sidebar.tsx | 2 +- compass/components/resource/SidebarItem.tsx | 5 +++-- 8 files changed, 6 insertions(+), 5 deletions(-) rename compass/components/{admin => }/PageLayout.tsx (100%) rename compass/components/{admin => }/Table/Index.tsx (100%) rename compass/components/{admin => }/Table/RowAction.tsx (100%) rename compass/components/{admin => }/Table/TableAction.tsx (100%) rename compass/components/{admin => }/Table/users.json (100%) diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index 8e4d918..b6461ae 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -1,7 +1,7 @@ "use client"; -import { PageLayout } from "@/components/admin/PageLayout"; -import { Table } from "@/components/admin/Table/Index"; +import { PageLayout } from "@/components/PageLayout"; +import { Table } from "@/components/Table/Index"; import { UsersIcon } from "@heroicons/react/24/solid"; diff --git a/compass/components/admin/PageLayout.tsx b/compass/components/PageLayout.tsx similarity index 100% rename from compass/components/admin/PageLayout.tsx rename to compass/components/PageLayout.tsx diff --git a/compass/components/admin/Table/Index.tsx b/compass/components/Table/Index.tsx similarity index 100% rename from compass/components/admin/Table/Index.tsx rename to compass/components/Table/Index.tsx diff --git a/compass/components/admin/Table/RowAction.tsx b/compass/components/Table/RowAction.tsx similarity index 100% rename from compass/components/admin/Table/RowAction.tsx rename to compass/components/Table/RowAction.tsx diff --git a/compass/components/admin/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx similarity index 100% rename from compass/components/admin/Table/TableAction.tsx rename to compass/components/Table/TableAction.tsx diff --git a/compass/components/admin/Table/users.json b/compass/components/Table/users.json similarity index 100% rename from compass/components/admin/Table/users.json rename to compass/components/Table/users.json diff --git a/compass/components/resource/Sidebar.tsx b/compass/components/resource/Sidebar.tsx index 97e59d4..187f4a9 100644 --- a/compass/components/resource/Sidebar.tsx +++ b/compass/components/resource/Sidebar.tsx @@ -31,7 +31,7 @@ const Sidebar: React.FC = ({ setIsSidebarOpen }) => {

Pages