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);
const answer = await saveAnswer(questionIndex);
console.log(questionIndex + 1 < prompts.length, questionIndex, prompts.length);
if (questionIndex + 1 < prompts.length) {
setQuestionIndex(questionIndex + 1);
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};
};
useEffect(() => {
console.log(answers);
}, [answers]);
useEffect(() => {
if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
// 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) {
const [isLoading, setIsLoading] = useState(false);
console.log(user.id);
const router = useRouter();

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

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

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

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