Remove unused imports and changed and improved layout design and responsiveness in some components and fixed some bugs.
This commit is contained in:
José Marques Lima
@@ -5,192 +5,329 @@ 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";
|
||||
|
||||
const areStepsOverlapped = (steps: Step[]) => {
|
||||
for (let i = 0; i < steps.length; i++) {
|
||||
if (i === 0) continue;
|
||||
for (let i = 0; i < steps.length; i++) {
|
||||
if (i === 0) continue;
|
||||
|
||||
const step = steps[i];
|
||||
const previous = steps[i - 1];
|
||||
const step = steps[i];
|
||||
const previous = steps[i - 1];
|
||||
|
||||
if (previous.max >= step.min) return true;
|
||||
}
|
||||
if (previous.max >= step.min) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
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
|
||||
user: User;
|
||||
entitiesGrading: Grading[];
|
||||
entities: Entity[];
|
||||
mutate: () => void;
|
||||
}
|
||||
|
||||
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[]>([])
|
||||
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[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (entity) {
|
||||
const entitySteps = entitiesGrading.find(e => e.entity === entity)!.steps
|
||||
setSteps(entitySteps || [])
|
||||
}
|
||||
}, [entitiesGrading, entity])
|
||||
useEffect(() => {
|
||||
if (entity) {
|
||||
const entitySteps = entitiesGrading.find(
|
||||
(e) => e.entity === entity
|
||||
)!.steps;
|
||||
setSteps(entitySteps || []);
|
||||
}
|
||||
}, [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.reduce((acc, curr) => {
|
||||
return acc - (curr.max - curr.min + 1);
|
||||
}, 100) > 0
|
||||
)
|
||||
return toast.error("There seems to be an open interval in your steps.");
|
||||
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.reduce((acc, curr) => {
|
||||
return acc - (curr.max - curr.min + 1);
|
||||
}, 100) > 0
|
||||
)
|
||||
return toast.error("There seems to be an open interval in your steps.");
|
||||
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.post("/api/grading", { user: user.id, entity, 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));
|
||||
};
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.post("/api/grading", { user: user.id, entity, 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 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.reduce((acc, curr) => {
|
||||
return acc - (curr.max - curr.min + 1);
|
||||
}, 100) > 0
|
||||
)
|
||||
return toast.error("There seems to be an open interval in your steps.");
|
||||
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.reduce((acc, curr) => {
|
||||
return acc - (curr.max - curr.min + 1);
|
||||
}, 100) > 0
|
||||
)
|
||||
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 })
|
||||
.then(() => toast.success("Your grading system has been saved!"))
|
||||
.then(mutate)
|
||||
.catch(() => toast.error("Something went wrong, please try again later"))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
setIsLoading(true);
|
||||
axios
|
||||
.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));
|
||||
};
|
||||
|
||||
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>
|
||||
<div className={clsx("flex flex-col gap-4")}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">Entity</label>
|
||||
<Select
|
||||
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"])}
|
||||
/>
|
||||
</div>
|
||||
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),
|
||||
];
|
||||
});
|
||||
}, []);
|
||||
|
||||
{entities.length > 1 && (
|
||||
<>
|
||||
<Separator />
|
||||
<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!))}
|
||||
isMulti
|
||||
/>
|
||||
<Button onClick={applyToOtherEntities} isLoading={isLoading} disabled={isLoading || otherEntities.length === 0} variant="outline">
|
||||
Apply to {otherEntities.length} other entities
|
||||
</Button>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
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>
|
||||
<div className={clsx("flex flex-col gap-4")}>
|
||||
<label className="font-normal text-base text-mti-gray-dim">
|
||||
Entity
|
||||
</label>
|
||||
<Select
|
||||
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"])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setSteps(GENERAL_STEPS)}>
|
||||
General English
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setSteps(IELTS_STEPS)}>
|
||||
IELTS
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setSteps(TOFEL_STEPS)}>
|
||||
TOFEL iBT
|
||||
</Button>
|
||||
</div>
|
||||
{entities.length > 1 && (
|
||||
<>
|
||||
<Separator />
|
||||
<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!))
|
||||
}
|
||||
isMulti
|
||||
/>
|
||||
<Button
|
||||
onClick={applyToOtherEntities}
|
||||
isLoading={isLoading}
|
||||
disabled={isLoading || otherEntities.length === 0}
|
||||
variant="outline"
|
||||
>
|
||||
Apply to {otherEntities.length} other entities
|
||||
</Button>
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
|
||||
{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"
|
||||
/>
|
||||
<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>
|
||||
<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
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setSteps(GENERAL_STEPS)}>
|
||||
General English
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setSteps(IELTS_STEPS)}>
|
||||
IELTS
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setSteps(TOFEL_STEPS)}>
|
||||
TOFEL iBT
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
{steps.map((step, index) => (
|
||||
<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}
|
||||
/>
|
||||
))}
|
||||
|
||||
<Button onClick={saveGradingSystem} isLoading={isLoading} disabled={isLoading} className="mt-8">
|
||||
Save Grading System
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
<Button
|
||||
onClick={saveGradingSystem}
|
||||
isLoading={isLoading}
|
||||
disabled={isLoading}
|
||||
className="mt-8"
|
||||
>
|
||||
Save Grading System
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user