From 3d4a604aa27f9cc046795184691e77330664fa62 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Wed, 2 Oct 2024 19:20:05 +0100 Subject: [PATCH] Started working on the assignments page --- src/components/List.tsx | 36 +- src/components/Low/Select.tsx | 80 +- src/components/Sidebar.tsx | 9 +- src/dashboards/AssignmentView.tsx | 700 ++++++++---------- src/dashboards/views/AssignmentsPage.tsx | 1 + src/pages/api/assignments/[id]/index.ts | 12 +- src/pages/api/assignments/index.ts | 9 +- src/pages/api/groups/index.ts | 1 + src/pages/assignments/creator/[id].tsx | 594 +++++++++++++++ src/pages/assignments/creator/index.tsx | 537 ++++++++++++++ src/pages/assignments/index.tsx | 187 +++++ src/pages/{groups => classrooms}/[id].tsx | 4 +- src/pages/classrooms/create.tsx | 202 +++++ src/pages/{groups => classrooms}/index.tsx | 14 +- .../dashboard/{admin.tsx => admin/index.tsx} | 0 .../{corporate.tsx => corporate/index.tsx} | 27 +- .../{developer.tsx => developer/index.tsx} | 2 +- .../index.tsx} | 5 +- .../{student.tsx => student/index.tsx} | 9 +- .../{teacher.tsx => teacher/index.tsx} | 24 +- src/pages/groups/create.tsx | 186 ----- src/pages/lists/users.tsx | 259 +++++++ src/utils/assignments.be.ts | 4 + src/utils/groups.be.ts | 6 + src/utils/index.ts | 5 +- 25 files changed, 2225 insertions(+), 688 deletions(-) create mode 100644 src/pages/assignments/creator/[id].tsx create mode 100644 src/pages/assignments/creator/index.tsx create mode 100644 src/pages/assignments/index.tsx rename src/pages/{groups => classrooms}/[id].tsx (99%) create mode 100644 src/pages/classrooms/create.tsx rename src/pages/{groups => classrooms}/index.tsx (90%) rename src/pages/dashboard/{admin.tsx => admin/index.tsx} (100%) rename src/pages/dashboard/{corporate.tsx => corporate/index.tsx} (91%) rename src/pages/dashboard/{developer.tsx => developer/index.tsx} (99%) rename src/pages/dashboard/{mastercorporate.tsx => mastercorporate/index.tsx} (97%) rename src/pages/dashboard/{student.tsx => student/index.tsx} (97%) rename src/pages/dashboard/{teacher.tsx => teacher/index.tsx} (94%) delete mode 100644 src/pages/groups/create.tsx create mode 100644 src/pages/lists/users.tsx diff --git a/src/components/List.tsx b/src/components/List.tsx index f62e7172..37e6a099 100644 --- a/src/components/List.tsx +++ b/src/components/List.tsx @@ -1,13 +1,26 @@ +import {useListSearch} from "@/hooks/useListSearch"; +import usePagination from "@/hooks/usePagination"; import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table"; +import clsx from "clsx"; import {useMemo, useState} from "react"; import Button from "./Low/Button"; const SIZE = 25; -export default function List({data, columns}: {data: T[]; columns: any[]}) { - const [page, setPage] = useState(0); +export default function List({ + data, + columns, + searchFields = [], + pageSize = SIZE, +}: { + data: T[]; + columns: any[]; + searchFields?: string[][]; + pageSize?: number; +}) { + const {rows, renderSearch} = useListSearch(searchFields, data); - const items = useMemo(() => data.slice(page * SIZE, (page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE), [data, page]); + const {items, page, renderMinimal} = usePagination(rows, pageSize); const table = useReactTable({ data: items, @@ -17,19 +30,10 @@ export default function List({data, columns}: {data: T[]; columns: any[]}) { }); return ( -
-
- -
- - {page * SIZE + 1} - {(page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE} / {data.length} - - -
+
+
+ {searchFields.length > 0 && renderSearch()} + {renderMinimal()}
diff --git a/src/components/Low/Select.tsx b/src/components/Low/Select.tsx index 186f6a2c..2b3c16b0 100644 --- a/src/components/Low/Select.tsx +++ b/src/components/Low/Select.tsx @@ -18,9 +18,10 @@ interface Props { isClearable?: boolean; styles?: StylesConfig>; className?: string; + label?: string; } -export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) { +export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, label, className}: Props) { const [target, setTarget] = useState(); useEffect(() => { @@ -28,43 +29,46 @@ export default function Select({value, defaultValue, options, placeholder, disab }, []); return ( - ({...base, zIndex: 9999}), - control: (styles) => ({ - ...styles, - paddingLeft: "4px", - border: "none", - outline: "none", - ":focus": { - outline: "none", - }, - }), - option: (styles, state) => ({ - ...styles, - backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white", - color: state.isFocused ? "black" : styles.color, - }), +
+ {label && } + + options={options} + value={value} + onChange={onChange as any} + placeholder={placeholder} + menuPortalTarget={target} + defaultValue={defaultValue} + styles={ + styles || { + menuPortal: (base) => ({...base, zIndex: 9999}), + control: (styles) => ({ + ...styles, + paddingLeft: "4px", + border: "none", + outline: "none", + ":focus": { + outline: "none", + }, + }), + option: (styles, state) => ({ + ...styles, + backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white", + color: state.isFocused ? "black" : styles.color, + }), + } + } + isDisabled={disabled} + isClearable={isClearable} + /> +
); } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 85f806bc..761ebd7d 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -111,7 +111,14 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u