From 8d99a6b03c922e1a9d091e8e847bc974d7cf0f3c Mon Sep 17 00:00:00 2001 From: mzerone Date: Mon, 29 Jul 2024 16:16:14 +0200 Subject: [PATCH] ui updates for permissions. --- package.json | 5 +- src/components/PermissionList.tsx | 77 +++++++++++++++++++++++++ src/dashboards/AssignmentCreator.tsx | 1 - src/pages/api/assignments/[id]/index.ts | 2 +- src/pages/permissions/[id].tsx | 43 ++++++++++---- src/pages/permissions/index.tsx | 22 ++----- 6 files changed, 116 insertions(+), 34 deletions(-) create mode 100644 src/components/PermissionList.tsx diff --git a/package.json b/package.json index 74a71187..936deba1 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@beam-australia/react-env": "^3.1.1", "@dnd-kit/core": "^6.1.0", + "@firebase/util": "^1.9.7", "@headlessui/react": "^1.7.13", "@mdi/js": "^7.1.96", "@mdi/react": "^1.6.1", @@ -67,6 +68,7 @@ "react-select": "^5.7.5", "react-string-replace": "^1.1.0", "react-toastify": "^9.1.2", + "react-tooltip": "^5.27.1", "react-xarrows": "^2.0.2", "read-excel-file": "^5.7.1", "short-unique-id": "5.0.2", @@ -77,8 +79,7 @@ "use-file-picker": "^2.1.0", "uuid": "^9.0.0", "wavesurfer.js": "^6.6.4", - "zustand": "^4.3.6", - "react-tooltip": "^5.27.1" + "zustand": "^4.3.6" }, "devDependencies": { "@types/blob-stream": "^0.1.33", diff --git a/src/components/PermissionList.tsx b/src/components/PermissionList.tsx new file mode 100644 index 00000000..a54b8541 --- /dev/null +++ b/src/components/PermissionList.tsx @@ -0,0 +1,77 @@ +import { Permission } from "@/interfaces/permissions"; +import { + createColumnHelper, + flexRender, + getCoreRowModel, + useReactTable, +} from "@tanstack/react-table"; +import Link from "next/link"; + + +interface Props{ + permissions: Permission[] +} + +const columnHelper = createColumnHelper(); + +const defaultColumns = [ + columnHelper.accessor('type', { + header: () => Type, + cell: ({row, getValue}) => ( + + {getValue() as string} + + ) + }) +]; + +export default function PermissionList({permissions}: Props) { + + const table = useReactTable({ + data: permissions, + columns: defaultColumns, + 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() + )} +
+
+
+ ) +} diff --git a/src/dashboards/AssignmentCreator.tsx b/src/dashboards/AssignmentCreator.tsx index e293fc94..4eea6685 100644 --- a/src/dashboards/AssignmentCreator.tsx +++ b/src/dashboards/AssignmentCreator.tsx @@ -16,7 +16,6 @@ import moment from "moment"; import axios from "axios"; import {getExam} from "@/utils/exams"; import {toast} from "react-toastify"; -import {uuidv4} from "@firebase/util"; import {Assignment} from "@/interfaces/results"; import Checkbox from "@/components/Low/Checkbox"; import {InstructorGender, Variant} from "@/interfaces/exam"; diff --git a/src/pages/api/assignments/[id]/index.ts b/src/pages/api/assignments/[id]/index.ts index 50236691..0b6213ef 100644 --- a/src/pages/api/assignments/[id]/index.ts +++ b/src/pages/api/assignments/[id]/index.ts @@ -4,7 +4,7 @@ import {app} from "@/firebase"; import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc, deleteDoc} from "firebase/firestore"; import {withIronSessionApiRoute} from "iron-session/next"; import {sessionOptions} from "@/lib/session"; -import {uuidv4} from "@firebase/util"; + const db = getFirestore(app); diff --git a/src/pages/permissions/[id].tsx b/src/pages/permissions/[id].tsx index 093c946b..bafcaaf8 100644 --- a/src/pages/permissions/[id].tsx +++ b/src/pages/permissions/[id].tsx @@ -14,10 +14,11 @@ import Select from "@/components/Low/Select"; import Button from "@/components/Low/Button"; import axios from "axios"; import { toast, ToastContainer } from "react-toastify"; - +import {Type as UserType} from '@/interfaces/user' interface BasicUser { id: string; name: string; + type: UserType } interface PermissionWithBasicUsers { @@ -61,11 +62,13 @@ export const getServerSideProps = withIronSessionSsr(async (context) => { const permission: Permission = await getPermissionDoc(params.id as string); const allUserData: User[] = await getUsers(); + const users = allUserData.map((u) => ({ id: u.id, name: u.name, + type: u.type })) as BasicUser[]; - + // const res = await fetch("api/permissions"); // const permissions: Permission[] = await res.json(); // Pass data to the page via props @@ -101,16 +104,15 @@ interface Props { } export default function Page(props: Props) { - console.log("Props", props); - const { permission, user, users } = props; - + + const [selectedUsers, setSelectedUsers] = useState(() => permission.users.map((u) => u.id) ); const onChange = (value: any) => { - console.log("value", value); + setSelectedUsers((prev) => { if (value?.value) { return [...prev, value?.value]; @@ -123,7 +125,7 @@ export default function Page(props: Props) { }; const update = async () => { - console.log("update", selectedUsers); + try { await axios.patch(`/api/permissions/${permission.id}`, { users: selectedUsers, @@ -133,7 +135,7 @@ export default function Page(props: Props) { toast.error("Failed to update permission"); } }; - + return ( <> @@ -156,24 +158,25 @@ export default function Page(props: Props) { options={users .filter((u) => !selectedUsers.includes(u.id)) .map((u) => ({ - label: u.name, + label: `${u?.type}-${u?.name}`, value: u.id, }))} onChange={onChange} /> -
+
+

Blacklisted Users

{selectedUsers.map((userId) => { - const name = users.find((u) => u.id === userId)?.name; + const user = users.find((u) => u.id === userId); return (
- {name} + {user?.type}-{user?.name} removeUser(userId)} @@ -184,6 +187,22 @@ export default function Page(props: Props) { })}
+
+

Whitelisted Users

+
+ {users.filter(user => !selectedUsers.includes(user.id)).map((user) => { + return ( +
+ {user?.type}-{user?.name} +
+ ); + })} +
+
+
); diff --git a/src/pages/permissions/index.tsx b/src/pages/permissions/index.tsx index 08c422db..1beeb146 100644 --- a/src/pages/permissions/index.tsx +++ b/src/pages/permissions/index.tsx @@ -7,7 +7,7 @@ import { Permission } from "@/interfaces/permissions"; import { getPermissionDocs } from "@/utils/permissions.be"; import { User } from "@/interfaces/user"; import Layout from "@/components/High/Layout"; -import Link from "next/link"; +import PermissionList from '@/components/PermissionList' export const getServerSideProps = withIronSessionSsr(async ({ req }) => { const user = req.session.user; @@ -33,7 +33,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req }) => { // Fetch data from external API const permissions: Permission[] = await getPermissionDocs(); - console.log("Permissions", permissions); // const res = await fetch("api/permissions"); // const permissions: Permission[] = await res.json(); @@ -56,10 +55,9 @@ interface Props { } export default function Page(props: Props) { - console.log("Props", props); - + const { permissions, user } = props; - + return ( <> @@ -74,19 +72,7 @@ export default function Page(props: Props) {

Permissions

- {permissions.map((permission: Permission) => { - const id = permission.id as string; - const type = permission.type as string; - return ( - -
-
-

{type}

-
-
- - ); - })} +