diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx index a7f42ce0..e7b64736 100644 --- a/src/pages/(admin)/Lists/GroupList.tsx +++ b/src/pages/(admin)/Lists/GroupList.tsx @@ -110,6 +110,10 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => { className="w-full max-w-[200px] self-end" disabled={!name} onClick={() => { + if (name !== group?.name && (name === "Students" || name === "Teachers")) { + toast.error("That group name is reserved and cannot be used, please enter another one."); + return; + } onCreate({name: name!, admin, participants, id: group?.id || uuidv4()}); }}> {!group ? "Create" : "Update"} diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx index cd3ae5b6..7ade2583 100644 --- a/src/pages/(admin)/Lists/UserList.tsx +++ b/src/pages/(admin)/Lists/UserList.tsx @@ -9,13 +9,17 @@ import axios from "axios"; import clsx from "clsx"; import {capitalize} from "lodash"; import moment from "moment"; -import {Fragment} from "react"; +import {Fragment, useState} from "react"; import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs"; import {toast} from "react-toastify"; +import {countries, TCountries} from "countries-list"; +import countryCodes from "country-codes-list"; const columnHelper = createColumnHelper(); export default function UserList({user}: {user: User}) { + const [showDemographicInformation, setShowDemographicInformation] = useState(false); + const {users, reload} = useUsers(); const {groups} = useGroups(user.id); @@ -80,6 +84,122 @@ export default function UserList({user}: {user: User}) { }); }; + const actionColumn = ({row}: {row: {original: User}}) => { + return ( +
+ {PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( + + +
+ +
+
+ + +
+ + + + +
+
+
+
+ )} + {!row.original.isVerified && PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( +
verifyAccount(row.original)}> + +
+ )} + {PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( +
toggleDisableAccount(row.original)}> + {row.original.isDisabled ? ( + + ) : ( + + )} +
+ )} + {PERMISSIONS.deleteUser[row.original.type].includes(user.type) && ( +
deleteAccount(row.original)}> + +
+ )} +
+ ); + }; + + const demographicColumns = [ + columnHelper.accessor("name", { + header: "Name", + cell: (info) => info.getValue(), + enableSorting: true, + }), + columnHelper.accessor("demographicInformation.country", { + header: "Country", + cell: (info) => + info.getValue() + ? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${ + countries[info.getValue() as unknown as keyof TCountries].name + } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})` + : "Not available", + }), + columnHelper.accessor("demographicInformation.phone", { + header: "Phone", + cell: (info) => info.getValue() || "Not available", + enableSorting: true, + }), + columnHelper.accessor("demographicInformation.employment", { + header: "Employment", + cell: (info) => capitalize(info.getValue()) || "Not available", + enableSorting: true, + }), + columnHelper.accessor("demographicInformation.gender", { + header: "Gender", + cell: (info) => capitalize(info.getValue()) || "Not available", + enableSorting: true, + }), + { + header: ( + setShowDemographicInformation((prev) => !prev)}> + Switch + + ), + id: "actions", + cell: actionColumn, + }, + ]; + const defaultColumns = [ columnHelper.accessor("name", { header: "Name", @@ -114,92 +234,19 @@ export default function UserList({user}: {user: User}) { ), }), { - header: "", + header: ( + setShowDemographicInformation((prev) => !prev)}> + Switch + + ), id: "actions", - cell: ({row}: {row: {original: User}}) => { - return ( -
- {PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( - - -
- -
-
- - -
- - - - -
-
-
-
- )} - {!row.original.isVerified && PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( -
verifyAccount(row.original)}> - -
- )} - {PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( -
toggleDisableAccount(row.original)}> - {row.original.isDisabled ? ( - - ) : ( - - )} -
- )} - {PERMISSIONS.deleteUser[row.original.type].includes(user.type) && ( -
deleteAccount(row.original)}> - -
- )} -
- ); - }, + cell: actionColumn, }, ]; const table = useReactTable({ data: user.type === "admin" || user.type === "student" ? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id)) : users, - columns: defaultColumns, + columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any, getCoreRowModel: getCoreRowModel(), });