devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solved some small issues

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-07-22 23:35:22 +01:00
parent bd2efb0ef5
commit a1c7f70329
6 changed files with 579 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Exercises/InteractiveSpeaking.tsx
View File

@@ -60,7 +60,6 @@ export default function InteractiveSpeaking({
setIsLoading(true); setIsLoading(true);
const answer = await saveAnswer(questionIndex); const answer = await saveAnswer(questionIndex);
console.log(questionIndex + 1 < prompts.length, questionIndex, prompts.length);
if (questionIndex + 1 < prompts.length) { if (questionIndex + 1 < prompts.length) {
setQuestionIndex(questionIndex + 1); setQuestionIndex(questionIndex + 1);
setIsLoading(false); setIsLoading(false);

4
src/components/Exercises/MatchSentences.tsx
View File

@@ -87,10 +87,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
return {total, correct, missing}; return {total, correct, missing};
}; };
useEffect(() => {
console.log(answers);
}, [answers]);
useEffect(() => { useEffect(() => {
if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps

1
src/components/PaymobPayment.tsx
View File

@@ -20,7 +20,6 @@ interface Props {
export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) { export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
console.log(user.id);
const router = useRouter(); const router = useRouter();

2
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -46,8 +46,6 @@ export default function BatchCodeGenerator({user}: {user: User}) {
readAs: "ArrayBuffer", readAs: "ArrayBuffer",
}); });
useEffect(() => console.log(expiryDate), [expiryDate]);
useEffect(() => { useEffect(() => {
if (!isExpiryDateEnabled) setExpiryDate(null); if (!isExpiryDateEnabled) setExpiryDate(null);
}, [isExpiryDateEnabled]); }, [isExpiryDateEnabled]);

510
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -4,38 +4,19 @@ import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers"; import useUsers from "@/hooks/useUsers";
import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user"; import {Type, User, userTypes, CorporateUser, Group} from "@/interfaces/user";
import {Popover, Transition} from "@headlessui/react"; import {Popover, Transition} from "@headlessui/react";
import { import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
import axios from "axios"; import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
import {capitalize, reverse} from "lodash"; import {capitalize, reverse} from "lodash";
import moment from "moment"; import moment from "moment";
import {Fragment, useEffect, useState} from "react"; import {Fragment, useEffect, useState} from "react";
import { import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
BsArrowDown,
BsArrowDownUp,
BsArrowUp,
BsCheck,
BsCheckCircle,
BsEye,
BsFillExclamationOctagonFill,
BsPerson,
BsTrash,
} from "react-icons/bs";
import {toast} from "react-toastify"; import {toast} from "react-toastify";
import {countries, TCountries} from "countries-list"; import {countries, TCountries} from "countries-list";
import countryCodes from "country-codes-list"; import countryCodes from "country-codes-list";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import UserCard from "@/components/UserCard"; import UserCard from "@/components/UserCard";
import { import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
getUserCompanyName,
isAgentUser,
USER_TYPE_LABELS,
} from "@/resources/user";
import useFilterStore from "@/stores/listFilterStore"; import useFilterStore from "@/stores/listFilterStore";
import {useRouter} from "next/router"; import {useRouter} from "next/router";
import {isCorporateUser} from "@/resources/user"; import {isCorporateUser} from "@/resources/user";
@@ -45,21 +26,9 @@ import { asyncSorter } from "@/utils";
import {exportListToExcel, UserListRow} from "@/utils/users"; import {exportListToExcel, UserListRow} from "@/utils/users";
const columnHelper = createColumnHelper<User>(); const columnHelper = createColumnHelper<User>();
const searchFields = [ const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
["name"],
["email"],
["corporateInformation", "companyInformation", "name"],
];
const CompanyNameCell = ({ const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
users,
user,
groups,
}: {
user: User;
users: User[];
groups: Group[];
}) => {
const [companyName, setCompanyName] = useState(""); const [companyName, setCompanyName] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -68,11 +37,7 @@ const CompanyNameCell = ({
setCompanyName(name); setCompanyName(name);
}, [user, users, groups]); }, [user, users, groups]);
return isLoading ? ( return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
<span className="animate-pulse">Loading...</span>
) : (
<>{companyName}</>
);
}; };
export default function UserList({ export default function UserList({
@@ -84,18 +49,13 @@ export default function UserList({
filters?: ((user: User) => boolean)[]; filters?: ((user: User) => boolean)[];
renderHeader?: (total: number) => JSX.Element; renderHeader?: (total: number) => JSX.Element;
}) { }) {
const [showDemographicInformation, setShowDemographicInformation] = const [showDemographicInformation, setShowDemographicInformation] = useState(false);
useState(false);
const [sorter, setSorter] = useState<string>(); const [sorter, setSorter] = useState<string>();
const [displayUsers, setDisplayUsers] = useState<User[]>([]); const [displayUsers, setDisplayUsers] = useState<User[]>([]);
const [selectedUser, setSelectedUser] = useState<User>(); const [selectedUser, setSelectedUser] = useState<User>();
const {users, reload} = useUsers(); const {users, reload} = useUsers();
const { groups } = useGroups( const {groups} = useGroups(user && (user?.type === "corporate" || user?.type === "teacher") ? user.id : undefined);
user && (user?.type === "corporate" || user?.type === "teacher")
? user.id
: undefined
);
const appendUserFilters = useFilterStore((state) => state.appendUserFilter); const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
const router = useRouter(); const router = useRouter();
@@ -104,13 +64,10 @@ export default function UserList({
const momentDate = moment(date); const momentDate = moment(date);
const today = moment(new Date()); const today = moment(new Date());
if (today.isAfter(momentDate)) if (today.isAfter(momentDate)) return "!text-mti-red-light font-bold line-through";
return "!text-mti-red-light font-bold line-through";
if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light"; if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
if (today.add(2, "weeks").isAfter(momentDate)) if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
return "!text-mti-rose-light"; if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
if (today.add(1, "months").isAfter(momentDate))
return "!text-mti-orange-light";
}; };
useEffect(() => { useEffect(() => {
@@ -118,20 +75,11 @@ export default function UserList({
if (user && users) { if (user && users) {
const filterUsers = const filterUsers =
user.type === "corporate" || user.type === "teacher" user.type === "corporate" || user.type === "teacher"
? users.filter((u) => ? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
groups.flatMap((g) => g.participants).includes(u.id)
)
: users; : users;
const filteredUsers = filters.reduce( const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
(d, f) => d.filter(f), const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);
filterUsers
);
const sortedUsers = await asyncSorter<User>(
filteredUsers,
sortFunction
);
console.log(sortedUsers);
setDisplayUsers([...sortedUsers]); setDisplayUsers([...sortedUsers]);
} }
@@ -140,8 +88,7 @@ export default function UserList({
}, [user, users, sorter, groups]); }, [user, users, sorter, groups]);
const deleteAccount = (user: User) => { const deleteAccount = (user: User) => {
if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
return;
axios axios
.delete<{ok: boolean}>(`/api/user?id=${user.id}`) .delete<{ok: boolean}>(`/api/user?id=${user.id}`)
@@ -156,14 +103,7 @@ export default function UserList({
}; };
const updateAccountType = (user: User, type: Type) => { const updateAccountType = (user: User, type: Type) => {
if ( if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;
!confirm(
`Are you sure you want to update ${
user.name
}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`
)
)
return;
axios axios
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, { .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
@@ -197,11 +137,9 @@ export default function UserList({
const toggleDisableAccount = (user: User) => { const toggleDisableAccount = (user: User) => {
if ( if (
!confirm( !confirm(
`Are you sure you want to ${ `Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
user.status === "disabled" ? "enable" : "disable"
} ${
user.name user.name
}'s account? This change is usually related to their payment state.` }'s account? This change is usually related to their payment state.`,
) )
) )
return; return;
@@ -212,11 +150,7 @@ export default function UserList({
status: user.status === "disabled" ? "active" : "disabled", status: user.status === "disabled" ? "active" : "disabled",
}) })
.then(() => { .then(() => {
toast.success( toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
`User ${
user.status === "disabled" ? "enabled" : "disabled"
} successfully!`
);
reload(); reload();
}) })
.catch(() => { .catch(() => {
@@ -234,7 +168,7 @@ export default function UserList({
const actionColumn = ({row}: {row: {original: User}}) => { const actionColumn = ({row}: {row: {original: User}}) => {
return ( return (
<div className="flex gap-4"> <div className="flex gap-4">
{PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
<Popover className="relative"> <Popover className="relative">
<Popover.Button> <Popover.Button>
<div data-tip="Change Type" className="cursor-pointer tooltip"> <div data-tip="Change Type" className="cursor-pointer tooltip">
@@ -248,48 +182,31 @@ export default function UserList({
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1">
>
<Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm"> <Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
<div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl"> <div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
<Button <Button
onClick={() => updateAccountType(row.original, "student")} onClick={() => updateAccountType(row.original, "student")}
className="text-sm !py-2 !px-4" className="text-sm !py-2 !px-4"
disabled={ disabled={row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)}>
row.original.type === "student" ||
!PERMISSIONS.generateCode["student"].includes(user.type)
}
>
Student Student
</Button> </Button>
<Button <Button
onClick={() => updateAccountType(row.original, "teacher")} onClick={() => updateAccountType(row.original, "teacher")}
className="text-sm !py-2 !px-4" className="text-sm !py-2 !px-4"
disabled={ disabled={row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)}>
row.original.type === "teacher" ||
!PERMISSIONS.generateCode["teacher"].includes(user.type)
}
>
Teacher Teacher
</Button> </Button>
<Button <Button
onClick={() => updateAccountType(row.original, "corporate")} onClick={() => updateAccountType(row.original, "corporate")}
className="text-sm !py-2 !px-4" className="text-sm !py-2 !px-4"
disabled={ disabled={row.original.type === "corporate" || !PERMISSIONS.generateCode["corporate"].includes(user.type)}>
row.original.type === "corporate" ||
!PERMISSIONS.generateCode["corporate"].includes(user.type)
}
>
Corporate Corporate
</Button> </Button>
<Button <Button
onClick={() => updateAccountType(row.original, "admin")} onClick={() => updateAccountType(row.original, "admin")}
className="text-sm !py-2 !px-4" className="text-sm !py-2 !px-4"
disabled={ disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
row.original.type === "admin" ||
!PERMISSIONS.generateCode["admin"].includes(user.type)
}
>
Admin Admin
</Button> </Button>
</div> </div>
@@ -297,26 +214,16 @@ export default function UserList({
</Transition> </Transition>
</Popover> </Popover>
)} )}
{!row.original.isVerified && {!row.original.isVerified && PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( <div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
<div
data-tip="Verify User"
className="cursor-pointer tooltip"
onClick={() => verifyAccount(row.original)}
>
<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" /> <BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div> </div>
)} )}
{PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
<div <div
data-tip={ data-tip={row.original.status === "disabled" ? "Enable User" : "Disable User"}
row.original.status === "disabled"
? "Enable User"
: "Disable User"
}
className="cursor-pointer tooltip" className="cursor-pointer tooltip"
onClick={() => toggleDisableAccount(row.original)} onClick={() => toggleDisableAccount(row.original)}>
>
{row.original.status === "disabled" ? ( {row.original.status === "disabled" ? (
<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" /> <BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
) : ( ) : (
@@ -324,12 +231,8 @@ export default function UserList({
)} )}
</div> </div>
)} )}
{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && ( {PERMISSIONS.deleteUser[row.original.type]?.includes(user.type) && (
<div <div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
data-tip="Delete"
className="cursor-pointer tooltip"
onClick={() => deleteAccount(row.original)}
>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" /> <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div> </div>
)} )}
@@ -340,10 +243,7 @@ export default function UserList({
const demographicColumns = [ const demographicColumns = [
columnHelper.accessor("name", { columnHelper.accessor("name", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
>
<span>Name</span> <span>Name</span>
<SorterArrow name="name" /> <SorterArrow name="name" />
</button> </button>
@@ -351,49 +251,31 @@ export default function UserList({
cell: ({row, getValue}) => ( cell: ({row, getValue}) => (
<div <div
className={clsx( className={clsx(
PERMISSIONS.updateExpiryDate[row.original.type].includes( PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
user.type "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
)} )}
onClick={() => onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
? setSelectedUser(row.original)
: null
}
>
{getValue()} {getValue()}
</div> </div>
), ),
}), }),
columnHelper.accessor("demographicInformation.country", { columnHelper.accessor("demographicInformation.country", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "country"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "country"))}
>
<span>Country</span> <span>Country</span>
<SorterArrow name="country" /> <SorterArrow name="country" />
</button> </button>
) as any, ) as any,
cell: (info) => cell: (info) =>
info.getValue() info.getValue()
? `${ ? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
countryCodes.findOne("countryCode" as any, info.getValue()).flag
} ${
countries[info.getValue() as unknown as keyof TCountries].name countries[info.getValue() as unknown as keyof TCountries].name
} (+${ } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
countryCodes.findOne("countryCode" as any, info.getValue())
.countryCallingCode
})`
: "Not available", : "Not available",
}), }),
columnHelper.accessor("demographicInformation.phone", { columnHelper.accessor("demographicInformation.phone", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}
>
<span>Phone</span> <span>Phone</span>
<SorterArrow name="phone" /> <SorterArrow name="phone" />
</button> </button>
@@ -401,37 +283,20 @@ export default function UserList({
cell: (info) => info.getValue() || "Not available", cell: (info) => info.getValue() || "Not available",
enableSorting: true, enableSorting: true,
}), }),
columnHelper.accessor( columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), {
(x) =>
x.type === "corporate"
? x.demographicInformation?.position
: x.demographicInformation?.employment,
{
id: "employment", id: "employment",
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
className="flex gap-2 items-center"
onClick={() =>
setSorter((prev) => selectSorter(prev, "employment"))
}
>
<span>Employment/Position</span> <span>Employment/Position</span>
<SorterArrow name="employment" /> <SorterArrow name="employment" />
</button> </button>
) as any, ) as any,
cell: (info) => cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
(info.row.original.type === "corporate"
? info.getValue()
: capitalize(info.getValue())) || "Not available",
enableSorting: true, enableSorting: true,
} }),
),
columnHelper.accessor("demographicInformation.gender", { columnHelper.accessor("demographicInformation.gender", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}
>
<span>Gender</span> <span>Gender</span>
<SorterArrow name="gender" /> <SorterArrow name="gender" />
</button> </button>
@@ -441,10 +306,7 @@ export default function UserList({
}), }),
{ {
header: ( header: (
<span <span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
className="cursor-pointer"
onClick={() => setShowDemographicInformation((prev) => !prev)}
>
Switch Switch
</span> </span>
), ),
@@ -456,10 +318,7 @@ export default function UserList({
const defaultColumns = [ const defaultColumns = [
columnHelper.accessor("name", { columnHelper.accessor("name", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
>
<span>Name</span> <span>Name</span>
<SorterArrow name="name" /> <SorterArrow name="name" />
</button> </button>
@@ -467,30 +326,17 @@ export default function UserList({
cell: ({row, getValue}) => ( cell: ({row, getValue}) => (
<div <div
className={clsx( className={clsx(
PERMISSIONS.updateExpiryDate[row.original.type].includes( PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
user.type "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
)} )}
onClick={() => onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) {row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()}
? setSelectedUser(row.original)
: null
}
>
{row.original.type === "corporate"
? row.original.corporateInformation?.companyInformation?.name ||
getValue()
: getValue()}
</div> </div>
), ),
}), }),
columnHelper.accessor("email", { columnHelper.accessor("email", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "email"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "email"))}
>
<span>E-mail</span> <span>E-mail</span>
<SorterArrow name="email" /> <SorterArrow name="email" />
</button> </button>
@@ -498,27 +344,17 @@ export default function UserList({
cell: ({row, getValue}) => ( cell: ({row, getValue}) => (
<div <div
className={clsx( className={clsx(
PERMISSIONS.updateExpiryDate[row.original.type].includes( PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) &&
user.type "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
)} )}
onClick={() => onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type) ? setSelectedUser(row.original) : null)}>
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
? setSelectedUser(row.original)
: null
}
>
{getValue()} {getValue()}
</div> </div>
), ),
}), }),
columnHelper.accessor("type", { columnHelper.accessor("type", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "type"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "type"))}
>
<span>Type</span> <span>Type</span>
<SorterArrow name="type" /> <SorterArrow name="type" />
</button> </button>
@@ -527,54 +363,29 @@ export default function UserList({
}), }),
columnHelper.accessor("corporateInformation.companyInformation.name", { columnHelper.accessor("corporateInformation.companyInformation.name", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}
>
<span>Company Name</span> <span>Company Name</span>
<SorterArrow name="companyName" /> <SorterArrow name="companyName" />
</button> </button>
) as any, ) as any,
cell: (info) => ( cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
<CompanyNameCell
user={info.row.original}
users={users}
groups={groups}
/>
),
}), }),
columnHelper.accessor("subscriptionExpirationDate", { columnHelper.accessor("subscriptionExpirationDate", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
className="flex gap-2 items-center"
onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}
>
<span>Expiry Date</span> <span>Expiry Date</span>
<SorterArrow name="expiryDate" /> <SorterArrow name="expiryDate" />
</button> </button>
) as any, ) as any,
cell: (info) => ( cell: (info) => (
<span <span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
className={clsx( {!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
info.getValue()
? expirationDateColor(moment(info.getValue()).toDate())
: ""
)}
>
{!info.getValue()
? "No expiry date"
: moment(info.getValue()).format("DD/MM/YYYY")}
</span> </span>
), ),
}), }),
columnHelper.accessor("isVerified", { columnHelper.accessor("isVerified", {
header: ( header: (
<button <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "verification"))}>
className="flex gap-2 items-center"
onClick={() =>
setSorter((prev) => selectSorter(prev, "verification"))
}
>
<span>Verification</span> <span>Verification</span>
<SorterArrow name="verification" /> <SorterArrow name="verification" />
</button> </button>
@@ -585,9 +396,8 @@ export default function UserList({
className={clsx( className={clsx(
"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white", "w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
info.getValue() && "!bg-mti-purple-light " info.getValue() && "!bg-mti-purple-light ",
)} )}>
>
<BsCheck color="white" className="w-full h-full" /> <BsCheck color="white" className="w-full h-full" />
</div> </div>
</div> </div>
@@ -595,10 +405,7 @@ export default function UserList({
}), }),
{ {
header: ( header: (
<span <span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
className="cursor-pointer"
onClick={() => setShowDemographicInformation((prev) => !prev)}
>
Switch Switch
</span> </span>
), ),
@@ -618,21 +425,15 @@ export default function UserList({
const sortFunction = async (a: User, b: User) => { const sortFunction = async (a: User, b: User) => {
if (sorter === "name" || sorter === reverseString("name")) if (sorter === "name" || sorter === reverseString("name"))
return sorter === "name" return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
? a.name.localeCompare(b.name)
: b.name.localeCompare(a.name);
if (sorter === "email" || sorter === reverseString("email")) if (sorter === "email" || sorter === reverseString("email"))
return sorter === "email" return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email);
? a.email.localeCompare(b.email)
: b.email.localeCompare(a.email);
if (sorter === "type" || sorter === reverseString("type")) if (sorter === "type" || sorter === reverseString("type"))
return sorter === "type" return sorter === "type"
? userTypes.findIndex((t) => a.type === t) - ? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
userTypes.findIndex((t) => b.type === t) : userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);
: userTypes.findIndex((t) => b.type === t) -
userTypes.findIndex((t) => a.type === t);
if (sorter === "verification" || sorter === reverseString("verification")) if (sorter === "verification" || sorter === reverseString("verification"))
return sorter === "verification" return sorter === "verification"
@@ -640,138 +441,73 @@ export default function UserList({
: b.isVerified.toString().localeCompare(a.isVerified.toString()); : b.isVerified.toString().localeCompare(a.isVerified.toString());
if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) { if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1;
return sorter === "expiryDate" ? -1 : 1; if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1;
if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0;
return sorter === "expiryDate" ? 1 : -1; if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1;
if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1;
return 0;
if (
moment(a.subscriptionExpirationDate).isAfter(
b.subscriptionExpirationDate
)
)
return sorter === "expiryDate" ? -1 : 1;
if (
moment(b.subscriptionExpirationDate).isAfter(
a.subscriptionExpirationDate
)
)
return sorter === "expiryDate" ? 1 : -1;
return 0; return 0;
} }
if (sorter === "country" || sorter === reverseString("country")) { if (sorter === "country" || sorter === reverseString("country")) {
if ( if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
!a.demographicInformation?.country && if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;
b.demographicInformation?.country if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0;
)
return sorter === "country" ? -1 : 1;
if (
a.demographicInformation?.country &&
!b.demographicInformation?.country
)
return sorter === "country" ? 1 : -1;
if (
!a.demographicInformation?.country &&
!b.demographicInformation?.country
)
return 0;
return sorter === "country" return sorter === "country"
? a.demographicInformation!.country.localeCompare( ? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country)
b.demographicInformation!.country : b.demographicInformation!.country.localeCompare(a.demographicInformation!.country);
)
: b.demographicInformation!.country.localeCompare(
a.demographicInformation!.country
);
} }
if (sorter === "phone" || sorter === reverseString("phone")) { if (sorter === "phone" || sorter === reverseString("phone")) {
if (!a.demographicInformation?.phone && b.demographicInformation?.phone) if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1;
return sorter === "phone" ? -1 : 1; if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1;
if (a.demographicInformation?.phone && !b.demographicInformation?.phone) if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0;
return sorter === "phone" ? 1 : -1;
if (!a.demographicInformation?.phone && !b.demographicInformation?.phone)
return 0;
return sorter === "phone" return sorter === "phone"
? a.demographicInformation!.phone.localeCompare( ? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone)
b.demographicInformation!.phone : b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone);
)
: b.demographicInformation!.phone.localeCompare(
a.demographicInformation!.phone
);
} }
if (sorter === "employment" || sorter === reverseString("employment")) { if (sorter === "employment" || sorter === reverseString("employment")) {
const aSortingItem = const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
a.type === "corporate" const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
? a.demographicInformation?.position
: a.demographicInformation?.employment;
const bSortingItem =
b.type === "corporate"
? b.demographicInformation?.position
: b.demographicInformation?.employment;
if (!aSortingItem && bSortingItem) if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
return sorter === "employment" ? -1 : 1; if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
if (aSortingItem && !bSortingItem)
return sorter === "employment" ? 1 : -1;
if (!aSortingItem && !bSortingItem) return 0; if (!aSortingItem && !bSortingItem) return 0;
return sorter === "employment" return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
? aSortingItem!.localeCompare(bSortingItem!)
: bSortingItem!.localeCompare(aSortingItem!);
} }
if (sorter === "gender" || sorter === reverseString("gender")) { if (sorter === "gender" || sorter === reverseString("gender")) {
if (!a.demographicInformation?.gender && b.demographicInformation?.gender) if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1;
return sorter === "employment" ? -1 : 1; if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1;
if (a.demographicInformation?.gender && !b.demographicInformation?.gender) if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0;
return sorter === "employment" ? 1 : -1;
if (
!a.demographicInformation?.gender &&
!b.demographicInformation?.gender
)
return 0;
return sorter === "gender" return sorter === "gender"
? a.demographicInformation!.gender.localeCompare( ? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender)
b.demographicInformation!.gender : b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
)
: b.demographicInformation!.gender.localeCompare(
a.demographicInformation!.gender
);
} }
if (sorter === "companyName" || sorter === reverseString("companyName")) { if (sorter === "companyName" || sorter === reverseString("companyName")) {
const aCorporateName = getUserCompanyName(a, users, groups); const aCorporateName = getUserCompanyName(a, users, groups);
const bCorporateName = getUserCompanyName(b, users, groups); const bCorporateName = getUserCompanyName(b, users, groups);
if (!aCorporateName && bCorporateName) if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
return sorter === "companyName" ? -1 : 1; if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
if (aCorporateName && !bCorporateName)
return sorter === "companyName" ? 1 : -1;
if (!aCorporateName && !bCorporateName) return 0; if (!aCorporateName && !bCorporateName) return 0;
return sorter === "companyName" return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
? aCorporateName.localeCompare(bCorporateName)
: bCorporateName.localeCompare(aCorporateName);
} }
return a.id.localeCompare(b.id); return a.id.localeCompare(b.id);
}; };
const { rows: filteredRows, renderSearch } = useListSearch<User>( const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
searchFields,
displayUsers
);
const table = useReactTable({ const table = useReactTable({
data: filteredRows, data: filteredRows,
columns: (!showDemographicInformation columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
? defaultColumns
: demographicColumns) as any,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}); });
@@ -792,19 +528,13 @@ export default function UserList({
const belongsToAdminFilter = (x: User) => { const belongsToAdminFilter = (x: User) => {
if (!selectedUser) return false; if (!selectedUser) return false;
return groups return groups
.filter( .filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
(g) =>
g.admin === selectedUser.id ||
g.participants.includes(selectedUser.id)
)
.flatMap((g) => g.participants) .flatMap((g) => g.participants)
.includes(x.id); .includes(x.id);
}; };
const viewStudentFilterBelongsToAdmin = (x: User) => const viewStudentFilterBelongsToAdmin = (x: User) => x.type === "student" && belongsToAdminFilter(x);
x.type === "student" && belongsToAdminFilter(x); const viewTeacherFilterBelongsToAdmin = (x: User) => x.type === "teacher" && belongsToAdminFilter(x);
const viewTeacherFilterBelongsToAdmin = (x: User) =>
x.type === "teacher" && belongsToAdminFilter(x);
const renderUserCard = (selectedUser: User) => { const renderUserCard = (selectedUser: User) => {
const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin); const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
@@ -814,9 +544,7 @@ export default function UserList({
<UserCard <UserCard
loggedInUser={user} loggedInUser={user}
onViewStudents={ onViewStudents={
(selectedUser.type === "corporate" || (selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
selectedUser.type === "teacher") &&
studentsFromAdmin.length > 0
? () => { ? () => {
appendUserFilters({ appendUserFilters({
id: "view-students", id: "view-students",
@@ -832,9 +560,7 @@ export default function UserList({
: undefined : undefined
} }
onViewTeachers={ onViewTeachers={
(selectedUser.type === "corporate" || (selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
selectedUser.type === "student") &&
teachersFromAdmin.length > 0
? () => { ? () => {
appendUserFilters({ appendUserFilters({
id: "view-teachers", id: "view-teachers",
@@ -883,20 +609,13 @@ export default function UserList({
<> <>
{renderHeader && renderHeader(displayUsers.length)} {renderHeader && renderHeader(displayUsers.length)}
<div className="w-full"> <div className="w-full">
<Modal <Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
isOpen={!!selectedUser}
onClose={() => setSelectedUser(undefined)}
>
{selectedUser && renderUserCard(selectedUser)} {selectedUser && renderUserCard(selectedUser)}
</Modal> </Modal>
<div className="w-full flex flex-col gap-2"> <div className="w-full flex flex-col gap-2">
<div className="w-full flex gap-2 items-end"> <div className="w-full flex gap-2 items-end">
{renderSearch()} {renderSearch()}
<Button <Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
className="w-full max-w-[200px] mb-1"
variant="outline"
onClick={downloadExcel}
>
Download List Download List
</Button> </Button>
</div> </div>
@@ -906,12 +625,7 @@ export default function UserList({
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map((header) => ( {headerGroup.headers.map((header) => (
<th className="py-4 px-4 text-left" key={header.id}> <th className="py-4 px-4 text-left" key={header.id}>
{header.isPlaceholder {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th> </th>
))} ))}
</tr> </tr>
@@ -919,16 +633,10 @@ export default function UserList({
</thead> </thead>
<tbody className="px-2"> <tbody className="px-2">
{table.getRowModel().rows.map((row) => ( {table.getRowModel().rows.map((row) => (
<tr <tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
key={row.id}
>
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<td className="px-4 py-2 items-center w-fit" key={cell.id}> <td className="px-4 py-2 items-center w-fit" key={cell.id}>
{flexRender( {flexRender(cell.column.columnDef.cell, cell.getContext())}
cell.column.columnDef.cell,
cell.getContext()
)}
</td> </td>
))} ))}
</tr> </tr>

1
src/pages/(generation)/LevelGeneration.tsx
View File

@@ -86,7 +86,6 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelPart; difficulty: Dif
axios axios
.get(`/api/exam/level/generate/level?${url.toString()}`) .get(`/api/exam/level/generate/level?${url.toString()}`)
.then((result) => { .then((result) => {
console.log({data: result.data});
playSound(typeof result.data === "string" ? "error" : "check"); playSound(typeof result.data === "string" ? "error" : "check");
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again."); if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
setExam(result.data); setExam(result.data);