Updated the expiry date to show as red

This commit is contained in:
Tiago Ribeiro
2023-11-15 11:17:44 +00:00
parent c2a807efc7
commit d412c1616f
3 changed files with 21 additions and 7 deletions

View File

@@ -59,28 +59,28 @@ export default function CodeGenerator({user}: {user: User}) {
{user && ( {user && (
<div className="grid -md:grid-cols-2 md:grid-cols-1 place-items-center 2xl:grid-cols-2 gap-4"> <div className="grid -md:grid-cols-2 md:grid-cols-1 place-items-center 2xl:grid-cols-2 gap-4">
<Button <Button
className="w-44 2xl:w-48" className="w-44 md:w-48"
variant="outline" variant="outline"
onClick={() => generateCode("student")} onClick={() => generateCode("student")}
disabled={!PERMISSIONS.generateCode.student.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}> disabled={!PERMISSIONS.generateCode.student.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Student Student
</Button> </Button>
<Button <Button
className="w-44 2xl:w-48" className="w-44 md:w-48"
variant="outline" variant="outline"
onClick={() => generateCode("teacher")} onClick={() => generateCode("teacher")}
disabled={!PERMISSIONS.generateCode.teacher.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}> disabled={!PERMISSIONS.generateCode.teacher.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Teacher Teacher
</Button> </Button>
<Button <Button
className="w-44 2xl:w-48" className="w-44 md:w-48"
variant="outline" variant="outline"
onClick={() => generateCode("corporate")} onClick={() => generateCode("corporate")}
disabled={!PERMISSIONS.generateCode.corporate.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}> disabled={!PERMISSIONS.generateCode.corporate.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
Admin Admin
</Button> </Button>
<Button <Button
className="w-44 2xl:w-48" className="w-44 md:w-48"
variant="outline" variant="outline"
onClick={() => generateCode("owner")} onClick={() => generateCode("owner")}
disabled={!PERMISSIONS.generateCode.owner.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}> disabled={!PERMISSIONS.generateCode.owner.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>

View File

@@ -69,8 +69,8 @@ export default function ExamLoader() {
</RadioGroup.Option> </RadioGroup.Option>
))} ))}
</RadioGroup> </RadioGroup>
<Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" className="-md:!w-full md:!w-44 2xl:!w-full" /> <Input type="text" name="examId" onChange={setExamId} placeholder="Exam ID" className="w-full" />
<Button disabled={!selectedModule || !examId} isLoading={isLoading} className="-md:!w-full md:!w-44 2xl:!w-full"> <Button disabled={!selectedModule || !examId} isLoading={isLoading} className="w-full">
Load Exam Load Exam
</Button> </Button>
</form> </form>

View File

@@ -28,6 +28,16 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
const {users, reload} = useUsers(); const {users, reload} = useUsers();
const {groups} = useGroups(user ? user.id : undefined); const {groups} = useGroups(user ? user.id : undefined);
const expirationDateColor = (date: Date) => {
const momentDate = moment(date);
const today = moment(new Date());
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";
};
useEffect(() => { useEffect(() => {
if (user && users) { if (user && users) {
const filterUsers = const filterUsers =
@@ -315,7 +325,11 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
<SorterArrow name="expiryDate" /> <SorterArrow name="expiryDate" />
</button> </button>
) as any, ) as any,
cell: (info) => (!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")), 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>
),
}), }),
columnHelper.accessor("isVerified", { columnHelper.accessor("isVerified", {
header: ( header: (