From 12093b88c399a90964824733a69ab0af81af082e Mon Sep 17 00:00:00 2001 From: Araozu Date: Thu, 21 Dec 2023 15:44:21 -0500 Subject: [PATCH] [FE][Certs] Fixes #22: Improve styles for the register list --- .../src/certs/NewRegister/RegisterPresets.tsx | 8 +- frontend/src/certs/Registers/index.tsx | 179 +++++++++++------- frontend/src/icons/CaretDownIcon.tsx | 14 ++ frontend/src/icons/CaretUpIcon.tsx | 14 ++ frontend/src/icons/TrayIcon.tsx | 15 ++ 5 files changed, 160 insertions(+), 70 deletions(-) create mode 100644 frontend/src/icons/CaretDownIcon.tsx create mode 100644 frontend/src/icons/CaretUpIcon.tsx create mode 100644 frontend/src/icons/TrayIcon.tsx diff --git a/frontend/src/certs/NewRegister/RegisterPresets.tsx b/frontend/src/certs/NewRegister/RegisterPresets.tsx index 426f6b6..70c306f 100644 --- a/frontend/src/certs/NewRegister/RegisterPresets.tsx +++ b/frontend/src/certs/NewRegister/RegisterPresets.tsx @@ -16,7 +16,7 @@ export function RegisterPresets(props: { const [error, setError] = createSignal(""); const courses = useCourses(); - const presets = createMemo<{[key: string]: Array}>(() => { + const presets = createMemo<{ [key: string]: Array }>(() => { if (courses === undefined) { return {}; } @@ -43,10 +43,10 @@ export function RegisterPresets(props: { return {}; } - const data: {[key: string]: Array} = { + const data: { [key: string]: Array } = { "2 Matpel": [matpel2, matpel1], - "3 Matpel": [matpel3,matpel2, matpel1], - "4 Escolta": [escolta, matpel3,matpel2, matpel1], + "3 Matpel": [matpel3, matpel2, matpel1], + "4 Escolta": [escolta, matpel3, matpel2, matpel1], "MD, 2 Matpel": [matpel2, matpel1, manejo], "3 4x4": [cuatroXcuatro, mecanica, manejo], "2 4x4": [cuatroXcuatro, manejo], diff --git a/frontend/src/certs/Registers/index.tsx b/frontend/src/certs/Registers/index.tsx index 5fa6eea..5c6dc20 100644 --- a/frontend/src/certs/Registers/index.tsx +++ b/frontend/src/certs/Registers/index.tsx @@ -3,31 +3,31 @@ import { Person } from "../../types/Person"; import { Register } from "../../types/Register"; import { RegisterSidebar } from "./RegisterSidebar"; import { DownloadSimpleIcon } from "../../icons/DownloadSimpleIcon"; -import { backend, wait } from "../../utils/functions"; +import { backend } from "../../utils/functions"; import { JsonResult } from "../../types/JsonResult"; import { LoadingIcon } from "../../icons/LoadingIcon"; import { RegisterElement, generateCert } from "./RegisterElement"; import { useCourses } from "../CourseContext"; import { useCustomLabel } from "../CustomLabelContext"; +import { TrayIcon } from "../../icons/TrayIcon"; +import { CaretDownIcon } from "../../icons/CaretDownIcon"; +import { CaretUpIcon } from "../../icons/CaretUpIcon"; export function Registers(props: {person: Person | null, count: number}) { const [registers, setRegisters] = createSignal>([]); - const [showHidden, setShowHidden] = createSignal(false); const [sidebarRegister, setSidebarRegister] = createSignal(null); const [loading, setLoading] = createSignal(false); const [error, setError] = createSignal(""); const courses = useCourses(); const customLabels = useCustomLabel(); - const loadRegisters = async() => { + const loadRegisters = () => { setLoading(true); setError(""); const person = props.person!; setRegisters([]); - if (import.meta.env.DEV) await wait(1500); - backend.get>>(`/api/register/${person.person_dni}`) .then((response) => { if (response.status === 200) { @@ -56,25 +56,20 @@ export function Registers(props: {person: Person | null, count: number}) { loadRegisters(); }); - // All registers sorted by year, and an indicator of whether there's register older - // than last year - const registerSortedList = createMemo<[Array>, boolean]>(() => { + const registersReady = createMemo(() => !loading() && props.person !== null); + + // Returns a map with years & their registers + const registerSortedList = createMemo<{[year: number]: Array}>(() => { + if (loading() || props.person === null) { + return {}; + } + const allRegisters = registers(); const registerByYear: {[y: string]: Array} = {}; - let olderThanLastYear = false; allRegisters.forEach((register) => { const year = new Date(register.register_display_date).getFullYear(); - const currentYear = new Date().getFullYear(); - - // Don't show registers from before last year - if (year < (currentYear - 1)) { - olderThanLastYear = true; - if (!showHidden()) { - return; - } - } if (registerByYear[year] === undefined) { registerByYear[year] = []; @@ -83,23 +78,28 @@ export function Registers(props: {person: Person | null, count: number}) { registerByYear[year].push(register); }); - // Create a new array with each year's registers - // Sort the object keys (years) in descending order - const sortedYears = Object.keys(registerByYear).sort((y1, y2) => (y1 < y2 ? 1 : -1)); + // Make sure that there's a key for the current year + const currentYear = new Date().getFullYear(); + if (registerByYear[currentYear] === undefined) { + registerByYear[currentYear] = []; + } - // Create the final array - const result = sortedYears.map((year) => registerByYear[year].sort((r1, r2) => (r1.register_display_date < r2.register_display_date ? 1 : -1))); + // Sort the registers by date + Object.entries(registerByYear).forEach(([, registers]) => { + registers.sort((r1, r2) => (r1.register_display_date < r2.register_display_date ? 1 : -1)); + }); - return [result, olderThanLastYear]; + return registerByYear; }); - const inputCheck = () => setShowHidden((x) => !x); - const todayRegisters = createMemo(() => { const today = new Date().toISOString() .split("T")[0]; - return registerSortedList()[0][0] - ?.filter((r) => r.register_creation_date === today) ?? []; + + return Object.entries(registerSortedList()) + .map(([,registers]) => registers) + .flat() + .filter((r) => r.register_creation_date === today); }); @@ -120,46 +120,34 @@ export function Registers(props: {person: Person | null, count: number}) { return ( -
-

- - {props.person?.person_names}  - {props.person?.person_paternal_surname}  - {props.person?.person_maternal_surname} +
+ +

+ - -    | - - - -

+ ยท Certificados registrados +

+ - - {(year) => ( -
- - {(register) => ( - setSidebarRegister(register)} - /> - )} - -
+ (year1 < year2 ? 1 : -1))}> + {([year,yearRegisters]) => ( + )} @@ -183,3 +171,62 @@ export function Registers(props: {person: Person | null, count: number}) {
); } + +function YearRegisters(props: { + year: number, + registers: Array, + person: Person, + setSidebarRegister: (register: Register) => void, +}) { + const [collapsed, setCollapsed] = createSignal(props.year < new Date().getFullYear() - 1); + + return ( +
+ + +
+ + 0}> +
+ + {(register) => ( + props.setSidebarRegister(register)} + /> + )} + +
+ + +
+
+ +
+

No hay certificados registrados en {props.year}.

+
+ + +
+
+ ); +} diff --git a/frontend/src/icons/CaretDownIcon.tsx b/frontend/src/icons/CaretDownIcon.tsx new file mode 100644 index 0000000..4832bc3 --- /dev/null +++ b/frontend/src/icons/CaretDownIcon.tsx @@ -0,0 +1,14 @@ +export function CaretDownIcon(props: {fill: string, size?: number, class?: string}) { + return ( + + + + ); +} diff --git a/frontend/src/icons/CaretUpIcon.tsx b/frontend/src/icons/CaretUpIcon.tsx new file mode 100644 index 0000000..8038ff1 --- /dev/null +++ b/frontend/src/icons/CaretUpIcon.tsx @@ -0,0 +1,14 @@ +export function CaretUpIcon(props: {fill: string, size?: number, class?: string}) { + return ( + + + + ); +} diff --git a/frontend/src/icons/TrayIcon.tsx b/frontend/src/icons/TrayIcon.tsx new file mode 100644 index 0000000..d71fc2a --- /dev/null +++ b/frontend/src/icons/TrayIcon.tsx @@ -0,0 +1,15 @@ + +export function TrayIcon(props: {fill: string, size?: number, class?: string}) { + return ( + + + + ); +}