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

Remove unused imports and changed and improved layout design and responsiveness in some components and fixed some bugs.

Browse Source
This commit is contained in:
José Marques Lima
2025-02-02 23:58:23 +00:00
parent 54a9f6869a
commit 5a685ebe80
25 changed files with 1504 additions and 1031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ExamEditor/SettingsEditor/index.tsx
View File

@@ -95,7 +95,7 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
}, [updateLocalAndScheduleGlobal]);
return (
<div className={`flex flex-col gap-8 border bg-ielts-${module}/20 rounded-3xl p-8 w-1/3 h-fit`}>
<div className={`flex flex-col gap-8 border bg-ielts-${module}/20 rounded-3xl p-8 w-1/3 h-fit -2xl:w-full`}>
<div className={`w-full flex justify-center text-ielts-${module} font-bold text-xl`}>{sectionLabel} Settings</div>
<div className="flex flex-col gap-4">
<Dropdown

2
src/components/ExamEditor/SettingsEditor/listening/components.tsx
View File

@@ -233,7 +233,7 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isAudioContextOpen: isOpen }, false)}
contentWrapperClassName={level ? `border border-ielts-listening` : ''}
>
<div className="flex flex-row gap-2 items-center px-2 pb-4">
<div className="flex flex-row flex-wrap gap-2 items-center px-2 pb-4">
<div className="flex flex-col flex-grow gap-4 px-2">
<label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
<Input

83
src/components/ExamEditor/SettingsEditor/reading/components.tsx
View File

@@ -5,24 +5,36 @@ import ExercisePicker from "../../ExercisePicker";
import { generate } from "../Shared/Generate";
import GenerateBtn from "../Shared/GenerateBtn";
import { LevelPart, ReadingPart } from "@/interfaces/exam";
import { LevelSectionSettings, ReadingSectionSettings } from "@/stores/examEditor/types";
import {
LevelSectionSettings,
ReadingSectionSettings,
} from "@/stores/examEditor/types";
import useExamEditorStore from "@/stores/examEditor";
interface Props {
localSettings: ReadingSectionSettings | LevelSectionSettings;
updateLocalAndScheduleGlobal: (updates: Partial<ReadingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
updateLocalAndScheduleGlobal: (
updates: Partial<ReadingSectionSettings | LevelSectionSettings>,
schedule?: boolean
) => void;
currentSection: ReadingPart | LevelPart;
generatePassageDisabled?: boolean;
levelId?: number;
level?: boolean;
}
const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, currentSection, levelId, level = false, generatePassageDisabled = false}) => {
const ReadingComponents: React.FC<Props> = ({
localSettings,
updateLocalAndScheduleGlobal,
currentSection,
levelId,
level = false,
generatePassageDisabled = false,
}) => {
const { currentModule } = useExamEditorStore();
const {
focusedSection,
difficulty,
} = useExamEditorStore(state => state.modules[currentModule]);
const { focusedSection, difficulty } = useExamEditorStore(
(state) => state.modules[currentModule]
);
const generatePassage = useCallback(() => {
generate(
@@ -30,25 +42,32 @@ const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
"reading",
"passage",
{
method: 'GET',
method: "GET",
queryParams: {
difficulty,
...(localSettings.readingTopic && { topic: localSettings.readingTopic })
}
...(localSettings.readingTopic && {
topic: localSettings.readingTopic,
}),
},
(data: any) => [{
},
(data: any) => [
{
title: data.title,
text: data.text
}],
text: data.text,
},
],
level ? focusedSection : undefined,
level
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [localSettings.readingTopic, difficulty, focusedSection, levelId]);
const onTopicChange = useCallback((readingTopic: string) => {
const onTopicChange = useCallback(
(readingTopic: string) => {
updateLocalAndScheduleGlobal({ readingTopic });
}, [updateLocalAndScheduleGlobal]);
},
[updateLocalAndScheduleGlobal]
);
return (
<>
@@ -56,13 +75,19 @@ const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
title="Generate Passage"
module="reading"
open={localSettings.isPassageOpen}
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isPassageOpen: isOpen }, false)}
contentWrapperClassName={level ? `border border-ielts-reading`: ''}
setIsOpen={(isOpen: boolean) =>
updateLocalAndScheduleGlobal({ isPassageOpen: isOpen }, false)
}
contentWrapperClassName={level ? `border border-ielts-reading` : ""}
disabled={generatePassageDisabled}
>
<div className="flex flex-row gap-2 items-center px-2 pb-4">
<div
className="flex flex-row flex-wrap gap-2 items-center px-2 pb-4 "
>
<div className="flex flex-col flex-grow gap-4 px-2">
<label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
<label className="font-normal text-base text-mti-gray-dim">
Topic (Optional)
</label>
<Input
key={`section-${focusedSection}`}
type="text"
@@ -88,14 +113,26 @@ const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
title="Add Exercises"
module="reading"
open={localSettings.isReadingTopicOpean}
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isReadingTopicOpean: isOpen })}
contentWrapperClassName={level ? `border border-ielts-reading`: ''}
disabled={currentSection === undefined || currentSection.text === undefined || currentSection.text.content === "" || currentSection.text.title === ""}
setIsOpen={(isOpen: boolean) =>
updateLocalAndScheduleGlobal({ isReadingTopicOpean: isOpen })
}
contentWrapperClassName={level ? `border border-ielts-reading` : ""}
disabled={
currentSection === undefined ||
currentSection.text === undefined ||
currentSection.text.content === "" ||
currentSection.text.title === ""
}
>
<ExercisePicker
module="reading"
sectionId={levelId !== undefined ? levelId : focusedSection}
extraArgs={{ text: currentSection === undefined || currentSection.text === undefined ? "" : currentSection.text.content }}
extraArgs={{
text:
currentSection === undefined || currentSection.text === undefined
? ""
: currentSection.text.content,
}}
levelSectionId={focusedSection}
level={level}
/>

4
src/components/ExamEditor/Shared/ExerciseLabel.tsx
View File

@@ -19,8 +19,8 @@ const label = (type: string, firstId: string, lastId: string) => {
const ExerciseLabel: React.FC<Props> = ({type, firstId, lastId, prompt}) => {
return (
<div className="flex w-full justify-between items-center mr-4">
<span className="font-semibold">{label(type, firstId, lastId)}</span>
<div className="text-sm font-light italic">{previewLabel(prompt)}</div>
<span className="font-semibold ellipsis-2">{label(type, firstId, lastId)}</span>
<div className="text-sm font-light italic ellipsis-2">{previewLabel(prompt)}</div>
</div>
);
}

143
src/components/ExamEditor/index.tsx
View File

@@ -33,10 +33,12 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
isPrivate,
difficulty,
sectionLabels,
importModule
} = useExamEditorStore(state => state.modules[currentModule]);
importModule,
} = useExamEditorStore((state) => state.modules[currentModule]);
const [numberOfLevelParts, setNumberOfLevelParts] = useState(levelParts !== 0 ? levelParts : 1);
const [numberOfLevelParts, setNumberOfLevelParts] = useState(
levelParts !== 0 ? levelParts : 1
);
const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
// For exam edits
@@ -44,34 +46,39 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
if (levelParts !== 0) {
setNumberOfLevelParts(levelParts);
dispatch({
type: 'UPDATE_MODULE',
type: "UPDATE_MODULE",
payload: {
updates: {
sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
id: i + 1,
label: `Part ${i + 1}`
}))
label: `Part ${i + 1}`,
})),
},
module: "level"
}
})
module: "level",
},
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [levelParts])
}, [levelParts]);
useEffect(() => {
const currentSections = sections;
const currentLabels = sectionLabels;
let updatedSections: SectionState[];
let updatedLabels: any;
if (currentModule === "level" && currentSections.length !== currentLabels.length || numberOfLevelParts !== currentSections.length) {
if (
(currentModule === "level" &&
currentSections.length !== currentLabels.length) ||
numberOfLevelParts !== currentSections.length
) {
const newSections = [...currentSections];
const newLabels = [...currentLabels];
for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
if (currentSections.length !== numberOfLevelParts) newSections.push(defaultSectionSettings(currentModule, i + 1));
if (currentSections.length !== numberOfLevelParts)
newSections.push(defaultSectionSettings(currentModule, i + 1));
newLabels.push({
id: i + 1,
label: `Part ${i + 1}`
label: `Part ${i + 1}`,
});
}
updatedSections = newSections;
@@ -83,35 +90,38 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
return;
}
const updatedExpandedSections = expandedSections.filter(
sectionId => updatedSections.some(section => section.sectionId === sectionId)
const updatedExpandedSections = expandedSections.filter((sectionId) =>
updatedSections.some((section) => section.sectionId === sectionId)
);
dispatch({
type: 'UPDATE_MODULE',
type: "UPDATE_MODULE",
payload: {
updates: {
sections: updatedSections,
sectionLabels: updatedLabels,
expandedSections: updatedExpandedSections
}
}
expandedSections: updatedExpandedSections,
},
},
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [numberOfLevelParts]);
const sectionIds = sections.map((section) => section.sectionId)
const sectionIds = sections.map((section) => section.sectionId);
const updateModule = useCallback((updates: Partial<ModuleState>) => {
dispatch({ type: 'UPDATE_MODULE', payload: { updates } });
}, [dispatch]);
const updateModule = useCallback(
(updates: Partial<ModuleState>) => {
dispatch({ type: "UPDATE_MODULE", payload: { updates } });
},
[dispatch]
);
const toggleSection = (sectionId: number) => {
if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
toast.error("Include at least one section!");
return;
}
dispatch({ type: 'TOGGLE_SECTION', payload: { sectionId } });
dispatch({ type: "TOGGLE_SECTION", payload: { sectionId } });
};
const ModuleSettings: Record<Module, React.ComponentType> = {
@@ -119,57 +129,84 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
writing: WritingSettings,
speaking: SpeakingSettings,
listening: ListeningSettings,
level: LevelSettings
level: LevelSettings,
};
const Settings = ModuleSettings[currentModule];
const showImport = importModule && ["reading", "listening", "level"].includes(currentModule);
const showImport =
importModule && ["reading", "listening", "level"].includes(currentModule);
const updateLevelParts = (parts: number) => {
setNumberOfLevelParts(parts);
}
};
return (
<>
{showImport ? <ImportOrStartFromScratch module={currentModule} setNumberOfLevelParts={updateLevelParts} /> : (
{showImport ? (
<ImportOrStartFromScratch
module={currentModule}
setNumberOfLevelParts={updateLevelParts}
/>
) : (
<>
{isResetModuleOpen && <ResetModule module={currentModule} isOpen={isResetModuleOpen} setIsOpen={setIsResetModuleOpen} setNumberOfLevelParts={setNumberOfLevelParts}/>}
<div className="flex gap-4 w-full items-center">
{isResetModuleOpen && (
<ResetModule
module={currentModule}
isOpen={isResetModuleOpen}
setIsOpen={setIsResetModuleOpen}
setNumberOfLevelParts={setNumberOfLevelParts}
/>
)}
<div className="flex gap-4 w-full items-center -xl:flex-col">
<div className="flex flex-row gap-3 w-full">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
<label className="font-normal text-base text-mti-gray-dim">
Timer
</label>
<Input
type="number"
name="minTimer"
onChange={(e) => updateModule({ minTimer: parseInt(e) < 15 ? 15 : parseInt(e) })}
onChange={(e) =>
updateModule({
minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
})
}
value={minTimer}
className="max-w-[300px]"
/>
</div>
<div className="flex flex-col gap-3 flex-grow">
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
<label className="font-normal text-base text-mti-gray-dim">
Difficulty
</label>
<Select
isMulti={true}
options={DIFFICULTIES.map((x) => ({
value: x,
label: capitalize(x)
label: capitalize(x),
}))}
onChange={(values) => {
const selectedDifficulties = values ? values.map(v => v.value as Difficulty) : [];
const selectedDifficulties = values
? values.map((v) => v.value as Difficulty)
: [];
updateModule({ difficulty: selectedDifficulties });
}}
value={
difficulty
? difficulty.map(d => ({
? difficulty.map((d) => ({
value: d,
label: capitalize(d)
label: capitalize(d),
}))
: null
}
/>
</div>
{(sectionLabels.length != 0 && currentModule !== "level") ? (
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">{sectionLabels[0].label.split(" ")[0]}</label>
</div>
{sectionLabels.length != 0 && currentModule !== "level" ? (
<div className="flex flex-col gap-3 -xl:w-full">
<label className="font-normal text-base text-mti-gray-dim">
{sectionLabels[0].label.split(" ")[0]}
</label>
<div className="flex flex-row gap-8">
{sectionLabels.map(({ id, label }) => (
<span
@@ -188,23 +225,35 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
))}
</div>
</div>
) : (
<div className="flex flex-col gap-3 w-1/3">
<label className="font-normal text-base text-mti-gray-dim">Number of Parts</label>
<Input type="number" name="Number of Parts" min={1} onChange={(v) => setNumberOfLevelParts(parseInt(v))} value={numberOfLevelParts} />
<label className="font-normal text-base text-mti-gray-dim">
Number of Parts
</label>
<Input
type="number"
name="Number of Parts"
min={1}
onChange={(v) => setNumberOfLevelParts(parseInt(v))}
value={numberOfLevelParts}
/>
</div>
)}
<div className="flex flex-col gap-3 w-fit h-fit">
<div className="h-6" />
<Checkbox isChecked={isPrivate} onChange={(checked) => updateModule({ isPrivate: checked })}>
<Checkbox
isChecked={isPrivate}
onChange={(checked) => updateModule({ isPrivate: checked })}
>
Privacy (Only available for Assignments)
</Checkbox>
</div>
</div>
<div className="flex flex-row gap-3 w-full">
<div className="flex flex-col gap-3 flex-grow">
<label className="font-normal text-base text-mti-gray-dim">Exam Label *</label>
<label className="font-normal text-base text-mti-gray-dim">
Exam Label *
</label>
<Input
type="text"
placeholder="Exam Label"
@@ -224,9 +273,9 @@ const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
Reset Module
</Button>
</div>
<div className="flex flex-row gap-8">
<div className="flex flex-row gap-8 -2xl:flex-col">
<Settings />
<div className="flex-grow max-w-[66%]">
<div className="flex-grow max-w-[66%] -2xl:max-w-full">
<SectionRenderer />
</div>
</div>

2
src/components/Exercises/MatchSentences/DragNDrop.tsx
View File

@@ -24,7 +24,7 @@ const DroppableQuestionArea: React.FC<DroppableQuestionAreaProps> = ({ question,
</div>
<div
key={`answer_${question.id}_${answer}`}
className={clsx("w-48 h-10 border rounded-xl flex items-center justify-center", isOver && "border-mti-purple-light")}>
className={clsx("w-48 h-10 border-2 border-mti-purple-light self-center rounded-xl flex items-center justify-center", isOver && "border-mti-purple-dark")}>
{answer && `Paragraph ${answer}`}
</div>
</div>

2
src/components/High/CardList.tsx
View File

@@ -2,8 +2,6 @@ import {useListSearch} from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import { clsx } from "clsx";
import {ReactNode} from "react";
import Checkbox from "../Low/Checkbox";
import Separator from "../Low/Separator";
interface Props<T> {
list: T[];

106
src/components/High/Table.tsx
View File

@@ -1,27 +1,49 @@
import { useListSearch } from "@/hooks/useListSearch"
import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, PaginationState, useReactTable } from "@tanstack/react-table"
import clsx from "clsx"
import { useEffect, useState } from "react"
import { BsArrowDown, BsArrowUp } from "react-icons/bs"
import Button from "../Low/Button"
import { useListSearch } from "@/hooks/useListSearch";
import {
ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
getSortedRowModel,
PaginationState,
useReactTable,
} from "@tanstack/react-table";
import clsx from "clsx";
import { useEffect, useState } from "react";
import { BsArrowDown, BsArrowUp } from "react-icons/bs";
import Button from "../Low/Button";
interface Props<T> {
data: T[]
columns: ColumnDef<any, any>[]
searchFields: string[][]
size?: number
onDownload?: (rows: T[]) => void
isDownloadLoading?: boolean
searchPlaceholder?: string
data: T[];
columns: ColumnDef<any, any>[];
searchFields: string[][];
size?: number;
onDownload?: (rows: T[]) => void;
isDownloadLoading?: boolean;
searchPlaceholder?: string;
isLoading?: boolean;
}
export default function Table<T>({ data, columns, searchFields, size = 16, onDownload, isDownloadLoading, searchPlaceholder }: Props<T>) {
export default function Table<T>({
data,
columns,
searchFields,
size = 16,
onDownload,
isDownloadLoading,
searchPlaceholder,
isLoading,
}: Props<T>) {
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: size,
})
});
const { rows, renderSearch } = useListSearch<T>(searchFields, data, searchPlaceholder);
const { rows, renderSearch } = useListSearch<T>(
searchFields,
data,
searchPlaceholder
);
const table = useReactTable({
data: rows,
@@ -31,8 +53,8 @@ export default function Table<T>({ data, columns, searchFields, size = 16, onDow
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
state: {
pagination
}
pagination,
},
});
return (
@@ -40,16 +62,24 @@ export default function Table<T>({ data, columns, searchFields, size = 16, onDow
<div className="w-full flex gap-2 items-end">
{renderSearch()}
{onDownload && (
<Button isLoading={isDownloadLoading} className="w-full max-w-[200px] mb-1" variant="outline" onClick={() => onDownload(rows)}>
<Button
isLoading={isDownloadLoading}
className="w-full max-w-[200px] mb-1"
variant="outline"
onClick={() => onDownload(rows)}
>
Download
</Button>
)
}
)}
</div>
<div className="w-full flex gap-2 justify-between items-center">
<div className="flex items-center gap-4 w-fit">
<Button className="w-[200px] h-fit" disabled={!table.getCanPreviousPage()} onClick={() => table.previousPage()}>
<Button
className="w-[200px] h-fit"
disabled={!table.getCanPreviousPage()}
onClick={() => table.previousPage()}
>
Previous Page
</Button>
</div>
@@ -57,12 +87,16 @@ export default function Table<T>({ data, columns, searchFields, size = 16, onDow
<span className="flex items-center gap-1">
<div>Page</div>
<strong>
{table.getState().pagination.pageIndex + 1} of{' '}
{table.getState().pagination.pageIndex + 1} of{" "}
{table.getPageCount().toLocaleString()}
</strong>
<div>| Total: {table.getRowCount().toLocaleString()}</div>
</span>
<Button className="w-[200px]" disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}>
<Button
className="w-[200px]"
disabled={!table.getCanNextPage()}
onClick={() => table.nextPage()}
>
Next Page
</Button>
</div>
@@ -73,9 +107,17 @@ export default function Table<T>({ data, columns, searchFields, size = 16, onDow
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th className="py-4 px-4 text-left" key={header.id} colSpan={header.colSpan}>
<th
className="py-4 px-4 text-left"
key={header.id}
colSpan={header.colSpan}
>
<div
className={clsx(header.column.getCanSort() && 'cursor-pointer select-none', 'flex items-center gap-2')}
className={clsx(
header.column.getCanSort() &&
"cursor-pointer select-none",
"flex items-center gap-2"
)}
onClick={header.column.getToggleSortingHandler()}
>
{flexRender(
@@ -94,7 +136,10 @@ export default function Table<T>({ data, columns, searchFields, size = 16, onDow
</thead>
<tbody className="px-2 w-full">
{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())}
@@ -104,6 +149,11 @@ export default function Table<T>({ data, columns, searchFields, size = 16, onDow
))}
</tbody>
</table>
{isLoading && (
<div className="min-h-screen flex justify-center items-start">
<span className="loading loading-infinity w-32" />
</div>
)
)}
</div>
);
}

2
src/components/Sidebar.tsx
View File

@@ -260,7 +260,7 @@ export default function Sidebar({
<section
className={clsx(
"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
isMinimized ? "w-fit" : "-xl:w-20 w-1/6",
className
)}
>

2
src/components/Solutions/MatchSentences.tsx
View File

@@ -29,7 +29,7 @@ function QuestionSolutionArea({
</div>
<div
className={clsx(
"w-56 h-10 border rounded-xl items-center justify-center flex gap-3 px-2",
"w-56 h-10 border self-center rounded-xl items-center justify-center flex gap-3 px-2",
!userSolution
? "border-mti-gray-davy"
: userSolution.option.toString() === question.solution.toString()

10
src/exams/Selection.tsx
View File

@@ -89,7 +89,7 @@ export default function Selection({ user, page, onStart }: Props) {
<BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
),
label: "Reading",
value: reading,
value: reading || 0,
tooltip: "The amount of reading exams performed.",
},
{
@@ -97,7 +97,7 @@ export default function Selection({ user, page, onStart }: Props) {
<BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
),
label: "Listening",
value: listening,
value: listening || 0,
tooltip: "The amount of listening exams performed.",
},
{
@@ -105,7 +105,7 @@ export default function Selection({ user, page, onStart }: Props) {
<BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
),
label: "Writing",
value: writing,
value: writing || 0,
tooltip: "The amount of writing exams performed.",
},
{
@@ -113,7 +113,7 @@ export default function Selection({ user, page, onStart }: Props) {
<BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
),
label: "Speaking",
value: speaking,
value: speaking || 0,
tooltip: "The amount of speaking exams performed.",
},
{
@@ -121,7 +121,7 @@ export default function Selection({ user, page, onStart }: Props) {
<BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
),
label: "Level",
value: level,
value: level || 0,
tooltip: "The amount of level exams performed.",
},
]}

9
src/hooks/useEntitiesUsers.tsx
View File

@@ -1,6 +1,5 @@
import { EntityWithRoles, WithLabeledEntities } from "@/interfaces/entity";
import { Discount } from "@/interfaces/paypal";
import { Code, Group, Type, User } from "@/interfaces/user";
import { WithLabeledEntities } from "@/interfaces/entity";
import { Type, User } from "@/interfaces/user";
import axios from "axios";
import { useEffect, useState } from "react";
@@ -12,7 +11,9 @@ export default function useEntitiesUsers(type?: Type) {
const getData = () => {
setIsLoading(true);
axios
.get<WithLabeledEntities<User>[]>(`/api/entities/users${type ? "?type=" + type : ""}`)
.get<WithLabeledEntities<User>[]>(
`/api/entities/users${type ? "?type=" + type : ""}`
)
.then((response) => setUsers(response.data))
.finally(() => setIsLoading(false));
};

291
src/pages/(admin)/CorporateGradingSystem.tsx
View File

@@ -5,13 +5,23 @@ import Separator from "@/components/Low/Separator";
import { Grading, Step } from "@/interfaces";
import { Entity } from "@/interfaces/entity";
import { User } from "@/interfaces/user";
import { CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS } from "@/resources/grading";
import { mapBy } from "@/utils";
import {
CEFR_STEPS,
GENERAL_STEPS,
IELTS_STEPS,
TOFEL_STEPS,
} from "@/resources/grading";
import { checkAccess } from "@/utils/permissions";
import axios from "axios";
import clsx from "clsx";
import { Divider } from "primereact/divider";
import { useEffect, useState } from "react";
import {
Dispatch,
memo,
SetStateAction,
useCallback,
useEffect,
useState,
} from "react";
import { BsPlusCircle, BsTrash } from "react-icons/bs";
import { toast } from "react-toastify";
@@ -27,30 +37,149 @@ const areStepsOverlapped = (steps: Step[]) => {
return false;
};
interface RowProps {
min: number;
max: number;
index: number;
label: string;
isLast: boolean;
isLoading: boolean;
setSteps: Dispatch<SetStateAction<Step[]>>;
addRow: (index: number) => void;
}
function GradingRow({
min,
max,
label,
index,
isLoading,
isLast,
setSteps,
addRow,
}: RowProps) {
const onChangeMin = useCallback(
(e: string) => {
setSteps((prev) =>
prev.map((x, i) => (i === index ? { ...x, min: parseInt(e) } : x))
);
},
[index, setSteps]
);
const onChangeMax = useCallback(
(e: string) => {
setSteps((prev) =>
prev.map((x, i) => (i === index ? { ...x, max: parseInt(e) } : x))
);
},
[index, setSteps]
);
const onChangeLabel = useCallback(
(e: string) => {
setSteps((prev) =>
prev.map((x, i) => (i === index ? { ...x, label: e } : x))
);
},
[index, setSteps]
);
const onAddRow = useCallback(() => addRow(index), [addRow, index]);
const removeRow = useCallback(
() => setSteps((prev) => prev.filter((_, i) => i !== index)),
[index, setSteps]
);
return (
<>
<div className="flex items-center gap-4">
<div className="grid grid-cols-3 gap-4 w-full">
<Input
label="Min. Percentage"
value={min}
type="number"
disabled={index === 0 || isLoading}
onChange={onChangeMin}
name="min"
/>
<Input
label="Grade"
value={label}
type="text"
disabled={isLoading}
onChange={onChangeLabel}
name="min"
/>
<Input
label="Max. Percentage"
value={max}
type="number"
disabled={isLast || isLoading}
onChange={onChangeMax}
name="max"
/>
</div>
{index !== 0 && !isLast && (
<button
disabled={isLoading}
className="pt-9 text-xl group"
onClick={removeRow}
>
<div className="w-full h-full flex items-center justify-center group-hover:bg-neutral-200 rounded-full p-3 transition ease-in-out duration-300">
<BsTrash />
</div>
</button>
)}
</div>
{!isLast && (
<Button
className="w-full flex items-center justify-center"
disabled={isLoading}
onClick={onAddRow}
>
<BsPlusCircle />
</Button>
)}
</>
);
}
const GradingRowMemo = memo(GradingRow);
interface Props {
user: User;
entitiesGrading: Grading[];
entities: Entity[]
mutate: () => void
entities: Entity[];
mutate: () => void;
}
export default function CorporateGradingSystem({ user, entitiesGrading = [], entities = [], mutate }: Props) {
const [entity, setEntity] = useState(entitiesGrading[0]?.entity || undefined)
export default function CorporateGradingSystem({
user,
entitiesGrading = [],
entities = [],
mutate,
}: Props) {
const [entity, setEntity] = useState(entitiesGrading[0]?.entity || undefined);
const [isLoading, setIsLoading] = useState(false);
const [steps, setSteps] = useState<Step[]>([]);
const [otherEntities, setOtherEntities] = useState<string[]>([])
const [otherEntities, setOtherEntities] = useState<string[]>([]);
useEffect(() => {
if (entity) {
const entitySteps = entitiesGrading.find(e => e.entity === entity)!.steps
setSteps(entitySteps || [])
const entitySteps = entitiesGrading.find(
(e) => e.entity === entity
)!.steps;
setSteps(entitySteps || []);
}
}, [entitiesGrading, entity])
}, [entitiesGrading, entity]);
const saveGradingSystem = () => {
if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
if (!steps.every((x) => x.min < x.max))
return toast.error(
"One of your steps has a minimum threshold inferior to its superior threshold."
);
if (areStepsOverlapped(steps))
return toast.error("There seems to be an overlap in one of your steps.");
if (
steps.reduce((acc, curr) => {
return acc - (curr.max - curr.min + 1);
@@ -68,8 +197,12 @@ export default function CorporateGradingSystem({ user, entitiesGrading = [], ent
};
const applyToOtherEntities = () => {
if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
if (!steps.every((x) => x.min < x.max))
return toast.error(
"One of your steps has a minimum threshold inferior to its superior threshold."
);
if (areStepsOverlapped(steps))
return toast.error("There seems to be an overlap in one of your steps.");
if (
steps.reduce((acc, curr) => {
return acc - (curr.max - curr.min + 1);
@@ -77,24 +210,51 @@ export default function CorporateGradingSystem({ user, entitiesGrading = [], ent
)
return toast.error("There seems to be an open interval in your steps.");
if (otherEntities.length === 0) return toast.error("Select at least one entity")
if (otherEntities.length === 0)
return toast.error("Select at least one entity");
setIsLoading(true);
axios
.post("/api/grading/multiple", { user: user.id, entities: otherEntities, steps })
.post("/api/grading/multiple", {
user: user.id,
entities: otherEntities,
steps,
})
.then(() => toast.success("Your grading system has been saved!"))
.then(mutate)
.catch(() => toast.error("Something went wrong, please try again later"))
.finally(() => setIsLoading(false));
};
const addRow = useCallback((index: number) => {
setSteps((prev) => {
const item = {
min: prev[index === 0 ? 0 : index - 1].max + 1,
max: prev[index + 1].min - 1,
label: "",
};
return [
...prev.slice(0, index + 1),
item,
...prev.slice(index + 1, prev.length),
];
});
}, []);
return (
<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
<label className="font-normal text-base text-mti-gray-dim">Grading System</label>
<label className="font-normal text-base text-mti-gray-dim">
Grading System
</label>
<div className={clsx("flex flex-col gap-4")}>
<label className="font-normal text-base text-mti-gray-dim">Entity</label>
<label className="font-normal text-base text-mti-gray-dim">
Entity
</label>
<Select
defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
defaultValue={{
value: (entities || [])[0]?.id,
label: (entities || [])[0]?.label,
}}
options={entities.map((e) => ({ value: e.id, label: e.label }))}
onChange={(e) => setEntity(e?.value || undefined)}
isClearable={checkAccess(user, ["admin", "developer"])}
@@ -104,20 +264,33 @@ export default function CorporateGradingSystem({ user, entitiesGrading = [], ent
{entities.length > 1 && (
<>
<Separator />
<label className="font-normal text-base text-mti-gray-dim">Apply this grading system to other entities</label>
<label className="font-normal text-base text-mti-gray-dim">
Apply this grading system to other entities
</label>
<Select
options={entities.map((e) => ({ value: e.id, label: e.label }))}
onChange={(e) => !e ? setOtherEntities([]) : setOtherEntities(e.map(o => o.value!))}
onChange={(e) =>
!e
? setOtherEntities([])
: setOtherEntities(e.map((o) => o.value!))
}
isMulti
/>
<Button onClick={applyToOtherEntities} isLoading={isLoading} disabled={isLoading || otherEntities.length === 0} variant="outline">
<Button
onClick={applyToOtherEntities}
isLoading={isLoading}
disabled={isLoading || otherEntities.length === 0}
variant="outline"
>
Apply to {otherEntities.length} other entities
</Button>
<Separator />
</>
)}
<label className="font-normal text-base text-mti-gray-dim">Preset Systems</label>
<label className="font-normal text-base text-mti-gray-dim">
Preset Systems
</label>
<div className="grid grid-cols-4 gap-4">
<Button variant="outline" onClick={() => setSteps(CEFR_STEPS)}>
CEFR
@@ -134,61 +307,25 @@ export default function CorporateGradingSystem({ user, entitiesGrading = [], ent
</div>
{steps.map((step, index) => (
<>
<div className="flex items-center gap-4">
<div className="grid grid-cols-3 gap-4 w-full" key={step.min}>
<Input
label="Min. Percentage"
value={step.min}
type="number"
disabled={index === 0 || isLoading}
onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, min: parseInt(e) } : x)))}
name="min"
<GradingRowMemo
key={index}
min={step.min}
max={step.max}
label={step.label}
index={index}
isLoading={isLoading}
isLast={index === steps.length - 1}
setSteps={setSteps}
addRow={addRow}
/>
<Input
label="Grade"
value={step.label}
type="text"
disabled={isLoading}
onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, label: e } : x)))}
name="min"
/>
<Input
label="Max. Percentage"
value={step.max}
type="number"
disabled={index === steps.length - 1 || isLoading}
onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, max: parseInt(e) } : x)))}
name="max"
/>
</div>
{index !== 0 && index !== steps.length - 1 && (
<button
disabled={isLoading}
className="pt-9 text-xl group"
onClick={() => setSteps((prev) => prev.filter((_, i) => i !== index))}>
<div className="w-full h-full flex items-center justify-center group-hover:bg-neutral-200 rounded-full p-3 transition ease-in-out duration-300">
<BsTrash />
</div>
</button>
)}
</div>
{index < steps.length - 1 && (
<Button
className="w-full flex items-center justify-center"
disabled={isLoading}
onClick={() => {
const item = { min: steps[index === 0 ? 0 : index - 1].max + 1, max: steps[index + 1].min - 1, label: "" };
setSteps((prev) => [...prev.slice(0, index + 1), item, ...prev.slice(index + 1, steps.length)]);
}}>
<BsPlusCircle />
</Button>
)}
</>
))}
<Button onClick={saveGradingSystem} isLoading={isLoading} disabled={isLoading} className="mt-8">
<Button
onClick={saveGradingSystem}
isLoading={isLoading}
disabled={isLoading}
className="mt-8"
>
Save Grading System
</Button>
</div>

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

@@ -6,7 +6,12 @@ import clsx from "clsx";
import { capitalize } from "lodash";
import moment from "moment";
import { useEffect, useMemo, useState } from "react";
import { BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsTrash } from "react-icons/bs";
import {
BsCheck,
BsCheckCircle,
BsFillExclamationOctagonFill,
BsTrash,
} from "react-icons/bs";
import { toast } from "react-toastify";
import { countries, TCountries } from "countries-list";
import countryCodes from "country-codes-list";
@@ -24,7 +29,6 @@ import { WithLabeledEntities } from "@/interfaces/entity";
import Table from "@/components/High/Table";
import useEntities from "@/hooks/useEntities";
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
import { findAllowedEntities } from "@/utils/permissions";
const columnHelper = createColumnHelper<WithLabeledEntities<User>>();
const searchFields = [["name"], ["email"], ["entities", ""]];
@@ -40,31 +44,87 @@ export default function UserList({
type?: Type;
renderHeader?: (total: number) => JSX.Element;
}) {
const [showDemographicInformation, setShowDemographicInformation] = useState(false);
const [showDemographicInformation, setShowDemographicInformation] =
useState(false);
const [selectedUser, setSelectedUser] = useState<User>();
const { users, reload } = useEntitiesUsers(type)
const { entities } = useEntities()
const { users, isLoading, reload } = useEntitiesUsers(type);
const { entities } = useEntities();
const isAdmin = useMemo(() => ["admin", "developer"].includes(user?.type), [user?.type])
const isAdmin = useMemo(
() => ["admin", "developer"].includes(user?.type),
[user?.type]
);
const entitiesViewStudents = useAllowedEntities(user, entities, "view_students")
const entitiesEditStudents = useAllowedEntities(user, entities, "edit_students")
const entitiesDeleteStudents = useAllowedEntities(user, entities, "delete_students")
const entitiesViewStudents = useAllowedEntities(
user,
entities,
"view_students"
);
const entitiesEditStudents = useAllowedEntities(
user,
entities,
"edit_students"
);
const entitiesDeleteStudents = useAllowedEntities(
user,
entities,
"delete_students"
);
const entitiesViewTeachers = useAllowedEntities(user, entities, "view_teachers")
const entitiesEditTeachers = useAllowedEntities(user, entities, "edit_teachers")
const entitiesDeleteTeachers = useAllowedEntities(user, entities, "delete_teachers")
const entitiesViewTeachers = useAllowedEntities(
user,
entities,
"view_teachers"
);
const entitiesEditTeachers = useAllowedEntities(
user,
entities,
"edit_teachers"
);
const entitiesDeleteTeachers = useAllowedEntities(
user,
entities,
"delete_teachers"
);
const entitiesViewCorporates = useAllowedEntities(user, entities, "view_corporates")
const entitiesEditCorporates = useAllowedEntities(user, entities, "edit_corporates")
const entitiesDeleteCorporates = useAllowedEntities(user, entities, "delete_corporates")
const entitiesViewCorporates = useAllowedEntities(
user,
entities,
"view_corporates"
);
const entitiesEditCorporates = useAllowedEntities(
user,
entities,
"edit_corporates"
);
const entitiesDeleteCorporates = useAllowedEntities(
user,
entities,
"delete_corporates"
);
const entitiesViewMasterCorporates = useAllowedEntities(user, entities, "view_mastercorporates")
const entitiesEditMasterCorporates = useAllowedEntities(user, entities, "edit_mastercorporates")
const entitiesDeleteMasterCorporates = useAllowedEntities(user, entities, "delete_mastercorporates")
const entitiesViewMasterCorporates = useAllowedEntities(
user,
entities,
"view_mastercorporates"
);
const entitiesEditMasterCorporates = useAllowedEntities(
user,
entities,
"edit_mastercorporates"
);
const entitiesDeleteMasterCorporates = useAllowedEntities(
user,
entities,
"delete_mastercorporates"
);
const entitiesDownloadUsers = useAllowedEntities(user, entities, "download_user_list")
const entitiesDownloadUsers = useAllowedEntities(
user,
entities,
"download_user_list"
);
const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
const router = useRouter();
@@ -73,38 +133,70 @@ 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";
};
const allowedUsers = useMemo(() => users.filter((u) => {
if (isAdmin) return true
if (u.id === user?.id) return false
const allowedUsers = useMemo(
() =>
users.filter((u) => {
if (isAdmin) return true;
if (u.id === user?.id) return false;
switch (u.type) {
case "student": return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewStudents, 'id').includes(id))
case "teacher": return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewTeachers, 'id').includes(id))
case 'corporate': return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewCorporates, 'id').includes(id))
case 'mastercorporate': return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewMasterCorporates, 'id').includes(id))
default: return false
case "student":
return mapBy(u.entities || [], "id").some((id) =>
mapBy(entitiesViewStudents, "id").includes(id)
);
case "teacher":
return mapBy(u.entities || [], "id").some((id) =>
mapBy(entitiesViewTeachers, "id").includes(id)
);
case "corporate":
return mapBy(u.entities || [], "id").some((id) =>
mapBy(entitiesViewCorporates, "id").includes(id)
);
case "mastercorporate":
return mapBy(u.entities || [], "id").some((id) =>
mapBy(entitiesViewMasterCorporates, "id").includes(id)
);
default:
return false;
}
})
, [entitiesViewCorporates, entitiesViewMasterCorporates, entitiesViewStudents, entitiesViewTeachers, isAdmin, user?.id, users])
}),
[
entitiesViewCorporates,
entitiesViewMasterCorporates,
entitiesViewStudents,
entitiesViewTeachers,
isAdmin,
user?.id,
users,
]
);
const displayUsers = useMemo(() =>
filters.length > 0 ? filters.reduce((d, f) => d.filter(f), allowedUsers) : allowedUsers,
[filters, allowedUsers])
const displayUsers = useMemo(
() =>
filters.length > 0
? filters.reduce((d, f) => d.filter(f), allowedUsers)
: allowedUsers,
[filters, allowedUsers]
);
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}`)
.then(() => {
toast.success("User deleted successfully!");
reload()
reload();
})
.catch(() => {
toast.error("Something went wrong!", { toastId: "delete-error" });
@@ -130,8 +222,11 @@ export default function UserList({
const toggleDisableAccount = (user: User) => {
if (
!confirm(
`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${user.name
}'s account? This change is usually related to their payment state.`,
`Are you sure you want to ${
user.status === "disabled" ? "enable" : "disable"
} ${
user.name
}'s account? This change is usually related to their payment state.`
)
)
return;
@@ -142,7 +237,11 @@ 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(() => {
@@ -151,45 +250,60 @@ export default function UserList({
};
const getEditPermission = (type: Type) => {
if (type === "student") return entitiesEditStudents
if (type === "teacher") return entitiesEditTeachers
if (type === "corporate") return entitiesEditCorporates
if (type === "mastercorporate") return entitiesEditMasterCorporates
if (type === "student") return entitiesEditStudents;
if (type === "teacher") return entitiesEditTeachers;
if (type === "corporate") return entitiesEditCorporates;
if (type === "mastercorporate") return entitiesEditMasterCorporates;
return []
}
return [];
};
const getDeletePermission = (type: Type) => {
if (type === "student") return entitiesDeleteStudents
if (type === "teacher") return entitiesDeleteTeachers
if (type === "corporate") return entitiesDeleteCorporates
if (type === "mastercorporate") return entitiesDeleteMasterCorporates
if (type === "student") return entitiesDeleteStudents;
if (type === "teacher") return entitiesDeleteTeachers;
if (type === "corporate") return entitiesDeleteCorporates;
if (type === "mastercorporate") return entitiesDeleteMasterCorporates;
return []
}
return [];
};
const canEditUser = (u: User) =>
isAdmin || u.entities.some(e => mapBy(getEditPermission(u.type), 'id').includes(e.id))
isAdmin ||
u.entities.some((e) =>
mapBy(getEditPermission(u.type), "id").includes(e.id)
);
const canDeleteUser = (u: User) =>
isAdmin || u.entities.some(e => mapBy(getDeletePermission(u.type), 'id').includes(e.id))
isAdmin ||
u.entities.some((e) =>
mapBy(getDeletePermission(u.type), "id").includes(e.id)
);
const actionColumn = ({ row }: { row: { original: User } }) => {
const canEdit = canEditUser(row.original)
const canDelete = canDeleteUser(row.original)
const canEdit = canEditUser(row.original);
const canDelete = canDeleteUser(row.original);
return (
<div className="flex gap-4">
{!row.original.isVerified && canEdit && (
<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" />
</div>
)}
{canEdit && (
<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" />
) : (
@@ -198,7 +312,11 @@ export default function UserList({
</div>
)}
{canDelete && (
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
<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>
)}
@@ -213,11 +331,12 @@ export default function UserList({
<div
className={clsx(
canEditUser(row.original) &&
"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={() =>
canEditUser(row.original) ? setSelectedUser(row.original) : null
}>
}
>
{getValue()}
</div>
),
@@ -226,8 +345,14 @@ export default function UserList({
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})`
? `${
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
})`
: "N/A",
}),
columnHelper.accessor("demographicInformation.phone", {
@@ -237,17 +362,25 @@ export default function UserList({
}),
columnHelper.accessor(
(x) =>
x.type === "corporate" || x.type === "mastercorporate" ? x.demographicInformation?.position : x.demographicInformation?.employment,
x.type === "corporate" || x.type === "mastercorporate"
? x.demographicInformation?.position
: x.demographicInformation?.employment,
{
id: "employment",
header: "Employment",
cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "N/A",
cell: (info) =>
(info.row.original.type === "corporate"
? info.getValue()
: capitalize(info.getValue())) || "N/A",
enableSorting: true,
},
}
),
columnHelper.accessor("lastLogin", {
header: "Last Login",
cell: (info) => (!!info.getValue() ? moment(info.getValue()).format("YYYY-MM-DD HH:mm") : "N/A"),
cell: (info) =>
!!info.getValue()
? moment(info.getValue()).format("YYYY-MM-DD HH:mm")
: "N/A",
}),
columnHelper.accessor("demographicInformation.gender", {
header: "Gender",
@@ -256,13 +389,16 @@ export default function UserList({
}),
{
header: (
<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
<span
className="cursor-pointer"
onClick={() => setShowDemographicInformation((prev) => !prev)}
>
Switch
</span>
),
id: "actions",
cell: actionColumn,
sortable: false
sortable: false,
},
];
@@ -273,11 +409,12 @@ export default function UserList({
<div
className={clsx(
canEditUser(row.original) &&
"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={() =>
canEditUser(row.original) ? setSelectedUser(row.original) : null
}>
}
>
{getValue()}
</div>
),
@@ -288,9 +425,12 @@ export default function UserList({
<div
className={clsx(
canEditUser(row.original) &&
"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={() => (canEditUser(row.original) ? setSelectedUser(row.original) : null)}>
onClick={() =>
canEditUser(row.original) ? setSelectedUser(row.original) : null
}
>
{getValue()}
</div>
),
@@ -305,13 +445,21 @@ export default function UserList({
}),
columnHelper.accessor("entities", {
header: "Entities",
cell: ({ getValue }) => mapBy(getValue(), 'label').join(', '),
cell: ({ getValue }) => mapBy(getValue(), "label").join(", "),
}),
columnHelper.accessor("subscriptionExpirationDate", {
header: "Expiration",
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>
),
}),
@@ -323,8 +471,9 @@ 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>
@@ -332,20 +481,28 @@ export default function UserList({
}),
{
header: (
<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
<span
className="cursor-pointer"
onClick={() => setShowDemographicInformation((prev) => !prev)}
>
Switch
</span>
),
id: "actions",
cell: actionColumn,
sortable: false
sortable: false,
},
];
const downloadExcel = (rows: WithLabeledEntities<User>[]) => {
if (entitiesDownloadUsers.length === 0) return toast.error("You are not allowed to download the user list.")
if (entitiesDownloadUsers.length === 0)
return toast.error("You are not allowed to download the user list.");
const allowedRows = rows.filter(r => mapBy(r.entities, 'id').some(e => mapBy(entitiesDownloadUsers, 'id').includes(e)))
const allowedRows = rows.filter((r) =>
mapBy(r.entities, "id").some((e) =>
mapBy(entitiesDownloadUsers, "id").includes(e)
)
);
const csv = exportListToExcel(allowedRows);
const element = document.createElement("a");
@@ -359,10 +516,15 @@ export default function UserList({
const viewStudentFilter = (x: User) => x.type === "student";
const viewTeacherFilter = (x: User) => x.type === "teacher";
const belongsToAdminFilter = (x: User) => x.entities.some(({ id }) => mapBy(selectedUser?.entities || [], 'id').includes(id));
const belongsToAdminFilter = (x: User) =>
x.entities.some(({ id }) =>
mapBy(selectedUser?.entities || [], "id").includes(id)
);
const viewStudentFilterBelongsToAdmin = (x: User) => viewStudentFilter(x) && belongsToAdminFilter(x);
const viewTeacherFilterBelongsToAdmin = (x: User) => viewTeacherFilter(x) && belongsToAdminFilter(x);
const viewStudentFilterBelongsToAdmin = (x: User) =>
viewStudentFilter(x) && belongsToAdminFilter(x);
const viewTeacherFilterBelongsToAdmin = (x: User) =>
viewTeacherFilter(x) && belongsToAdminFilter(x);
const renderUserCard = (selectedUser: User) => {
const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
@@ -373,7 +535,9 @@ export default function UserList({
maxUserAmount={0}
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",
@@ -389,7 +553,9 @@ 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",
@@ -413,7 +579,7 @@ export default function UserList({
});
appendUserFilters({
id: "belongs-to-admin",
filter: belongsToAdminFilter
filter: belongsToAdminFilter,
});
router.push("/users");
@@ -434,14 +600,24 @@ 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>
<Table<WithLabeledEntities<User>>
data={displayUsers}
columns={(!showDemographicInformation ? defaultColumns : demographicColumns) as any}
columns={
(!showDemographicInformation
? defaultColumns
: demographicColumns) as any
}
searchFields={searchFields}
onDownload={entitiesDownloadUsers.length > 0 ? downloadExcel : undefined}
onDownload={
entitiesDownloadUsers.length > 0 ? downloadExcel : undefined
}
isLoading={isLoading}
/>
</div>
</>

2
src/pages/_app.tsx
View File

@@ -12,8 +12,6 @@ import useExamStore from "@/stores/exam";
import usePreferencesStore from "@/stores/preferencesStore";
import Layout from "../components/High/Layout";
import useEntities from "../hooks/useEntities";
import UserProfileSkeleton from "../components/Medium/UserProfileSkeleton";
export default function App({ Component, pageProps }: AppProps) {
const [loading, setLoading] = useState(false);

2
src/pages/api/tickets/assignedToUser/index.ts
View File

@@ -33,7 +33,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
res.status(401).json({ ok: false });
return;
}
const docs = await db.collection("tickets").find<Ticket>({ assignedTo: req.session.user.id }).toArray();
const docs = await db.collection("tickets").find<Ticket>({ assignedTo: req.session.user.id, status: { $ne: "completed" } }).toArray();
res.status(200).json(docs);
}

13
src/pages/dashboard/admin.tsx
View File

@@ -80,13 +80,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
{ _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
),
]);
const assignmentsCount = await countEntitiesAssignments(
mapBy(entities, "id"),
{ archived: { $ne: true } }
);
const stats = await getStatsByUsers(mapBy(students, "id"));
const [assignmentsCount, stats] = await Promise.all([
countEntitiesAssignments(mapBy(entities, "id"), {
archived: { $ne: true },
}),
getStatsByUsers(mapBy(students, "id")),
]);
return {
props: serialize({

1
src/pages/dashboard/corporate.tsx
View File

@@ -32,7 +32,6 @@ import {
import { ToastContainer } from "react-toastify";
import { useAllowedEntities } from "@/hooks/useEntityPermissions";
import { isAdmin } from "@/utils/users";
import { count } from "console";
interface Props {
user: User;

1
src/pages/dashboard/index.tsx
View File

@@ -1,4 +1,3 @@
import { User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
import { redirect } from "@/utils";
import { requestUser } from "@/utils/api";

1
src/pages/dashboard/mastercorporate.tsx
View File

@@ -34,7 +34,6 @@ import {
} from "react-icons/bs";
import { ToastContainer } from "react-toastify";
import { isAdmin } from "@/utils/users";
import { count } from "console";
interface Props {
user: User;

19
src/pages/dashboard/student.tsx
View File

@@ -16,7 +16,6 @@ import useExamStore from "@/stores/exam";
import { findBy, mapBy, redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { getAssignmentsForStudent } from "@/utils/assignments.be";
import { getEntities } from "@/utils/entities.be";
import { getExamsByIds } from "@/utils/exams.be";
import { getGradingSystemByEntity } from "@/utils/grading.be";
import {
@@ -78,14 +77,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
}),
]);
const assignmentsIDs = mapBy(assignments, "id");
const sessions = await getSessionsByUser(user.id, 10, {
const [sessions, ...formattedInvites] = await Promise.all([
getSessionsByUser(user.id, 10, {
["assignment.id"]: { $in: assignmentsIDs },
});
const formattedInvites = await Promise.all(
invites.map(convertInvitersToEntity)
);
}),
...invites.map(convertInvitersToEntity),
]);
const examIDs = uniqBy(
assignments.reduce<{ module: Module; id: string; key: string }[]>(
@@ -110,7 +107,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
props: serialize({
user,
assignments,
stats,
stats: stats ,
exams,
sessions,
invites: formattedInvites,
@@ -184,7 +181,7 @@ export default function Dashboard({
icon: (
<BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
),
value: stats.fullExams,
value: stats?.fullExams || 0,
label: "Exams",
tooltip: "Number of all conducted completed exams",
},
@@ -192,7 +189,7 @@ export default function Dashboard({
icon: (
<BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
),
value: stats.uniqueModules,
value: stats?.uniqueModules || 0,
label: "Modules",
tooltip:
"Number of all exam modules performed including Level Test",

2
src/pages/generation.tsx
View File

@@ -173,7 +173,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
<RadioGroup
value={currentModule}
onChange={(currentModule) => updateRoot({ currentModule })}
className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
className="flex flex-row flex-wrap w-full gap-4 -md:justify-center justify-between">
{[...MODULE_ARRAY].filter(m => permissions[m]).map((x) => (
<Radio value={x} key={x}>
{({ checked }) => (

1
src/pages/official-exam.tsx
View File

@@ -27,7 +27,6 @@ import axios from "axios";
import clsx from "clsx";
import { withIronSessionSsr } from "iron-session/next";
import { uniqBy } from "lodash";
import moment from "moment";
import Head from "next/head";
import { useRouter } from "next/router";
import { useMemo, useState } from "react";

52
src/styles/globals.css
View File

@@ -16,6 +16,18 @@
}
}
.ellipsis {
@apply line-clamp-1 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];
}
.ellipsis-2 {
@apply line-clamp-2 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];
}
.ellipsis-3 {
@apply line-clamp-3 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];
}
.training-scrollbar::-webkit-scrollbar {
@apply w-1.5;
}
@@ -36,19 +48,38 @@
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
--foreground-rgb: 53, 51, 56;
--background-start-rgb: 245, 245, 245;
--background-end-rgb: 245, 245, 245;
--primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
@@ -68,7 +99,8 @@ html {
max-width: 100vw;
overflow-x: hidden;
overflow-y: auto;
font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue",
sans-serif;
}
body {
@@ -76,12 +108,18 @@ body {
height: 100%;
max-width: 100vw;
overflow-x: hidden;
font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue",
sans-serif;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
a {

9
src/utils/users.ts
View File

@@ -1,11 +1,8 @@
import { EntityWithRoles, WithLabeledEntities } from "@/interfaces/entity";
import { Group, User } from "@/interfaces/user";
import { getUserCompanyName, USER_TYPE_LABELS } from "@/resources/user";
import { WithLabeledEntities } from "@/interfaces/entity";
import { User } from "@/interfaces/user";
import { USER_TYPE_LABELS } from "@/resources/user";
import { capitalize } from "lodash";
import moment from "moment";
import { mapBy } from ".";
import { findAllowedEntities } from "./permissions";
import { getEntitiesUsers } from "./users.be";
export interface UserListRow {
name: string;