[FE][Certs] Buttons to set date yesterday/sunday

frontend/src/certs/NewRegister/ManualRegistration.tsx

@@ -4,6 +4,7 @@ import { CustomLabelSelect } from "./CustomLabelSelect";
 import { RegistrationPreview } from ".";
 import { useCourses } from "../CourseContext";
 import { useCustomLabel } from "../CustomLabelContext";
+import { Chip } from "../../components/Chip";
 
 type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
     submitter: HTMLElement;
@@ -91,6 +92,23 @@ export function ManualRegistration(props: {
         setCustomLabel("");
     };
 
+    const setDateAsYesterday = () => {
+        if (datePicker === undefined) {
+            return;
+        }
+
+        datePicker.value = new Date(Date.now() - 86400000).toISOString()
+            .split("T")[0];
+    };
+
+    const setDateAsLastSunday = () => {
+        if (datePicker === undefined) {
+            return;
+        }
+
+        datePicker.value = getLastSunday();
+    };
+
     return (
         <>
             <form onsubmit={register}>
@@ -101,7 +119,7 @@ export function ManualRegistration(props: {
                     />
                 </div>
 
-                <div class="mt-4 mb-2 grid grid-cols-[9.5rem_auto] gap-2">
+                <div class="mt-2 mb-2 grid grid-cols-[9.5rem_auto] gap-2">
                     <div class="relative">
                         <input
                             ref={datePicker}
@@ -110,7 +128,20 @@ export function ManualRegistration(props: {
                             type="date"
                         />
                         <label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
+                        <div class="pt-1">
+                            <Chip
+                                text="Ayer"
+                                select={setDateAsYesterday}
+                                selected={false}
+                            />
+                            <Chip
+                                text="Domingo"
+                                select={setDateAsLastSunday}
+                                selected={false}
+                            />
                         </div>
+                    </div>
+
                     <Show when={courseHasCustomLabel()}>
                         <div class="relative">
                             <CustomLabelSelect
@@ -154,3 +185,12 @@ export function ManualRegistration(props: {
         </>
     );
 }
+
+// If today is sunday, this returns today. Otherwise, it returns the last sunday
+function getLastSunday() {
+    const today = new Date();
+    const day = today.getDay();
+    const diff = today.getDate() - day;
+    const lastSunday = new Date(today.setDate(diff));
+    return lastSunday.toISOString().split("T")[0];
+}

frontend/src/certs/NewRegister/RegisterPresets.tsx

@@ -101,6 +101,23 @@ export function RegisterPresets(props: {
         setSelectedPreset("None");
     };
 
+    const setDateAsYesterday = () => {
+        if (datePicker === undefined) {
+            return;
+        }
+
+        datePicker.value = new Date(Date.now() - 86400000).toISOString()
+            .split("T")[0];
+    };
+
+    const setDateAsLastSunday = () => {
+        if (datePicker === undefined) {
+            return;
+        }
+
+        datePicker.value = getLastSunday();
+    };
+
     return (
         <>
             <div class="h-52">
@@ -118,7 +135,7 @@ export function RegisterPresets(props: {
                     </For>
                 </div>
             </div>
-            <div class="mt-4 mb-2">
+            <div class="mt-2 mb-2">
                 <div class="relative">
                     <input
                         ref={datePicker}
@@ -127,6 +144,18 @@ export function RegisterPresets(props: {
                         type="date"
                     />
                     <label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
+                    <div class="pt-1">
+                        <Chip
+                            text="Ayer"
+                            select={setDateAsYesterday}
+                            selected={false}
+                        />
+                        <Chip
+                            text="Domingo"
+                            select={setDateAsLastSunday}
+                            selected={false}
+                        />
+                    </div>
                 </div>
             </div>
             <div>
@@ -158,3 +187,12 @@ export function RegisterPresets(props: {
         </>
     );
 }
+
+// If today is sunday, this returns today. Otherwise, it returns the last sunday
+function getLastSunday() {
+    const today = new Date();
+    const day = today.getDay();
+    const diff = today.getDate() - day;
+    const lastSunday = new Date(today.setDate(diff));
+    return lastSunday.toISOString().split("T")[0];
+}

frontend/src/certs/NewRegister/index.tsx

@@ -30,11 +30,11 @@ export function NewRegister(props: {
     return (
         <div class="h-screen overflow-y-scroll">
             <FilledCard class="border border-c-outline overflow-hidden">
-                <h2 class="p-3 font-bold text-xl">Registrar certificados</h2>
+                <h2 class="py-2 px-3 font-bold text-xl">Registrar certificados</h2>
 
                 <RegisterTabs active={active()} setActive={setActive} />
 
-                <div class="bg-c-surface p-4 h-[23rem]">
+                <div class="bg-c-surface p-4 h-[25rem]">
                     <Show when={active() === "Presets"}>
                         <RegisterPresets
                             onAdd={(v) => setSelections((x) => [...x, v])}

frontend/src/components/Chip.tsx

@@ -1,4 +1,9 @@
-export function Chip(props: {text: string, selected: boolean, select: () => void}) {
+export function Chip(props: {
+    text: string,
+    selected: boolean,
+    select: () => void,
+    type?: "button" | "submit",
+}) {
     const selectedClasses = () => {
         if (props.selected) {
             return "bg-c-surface-variant text-c-on-surface-variant shadow";
@@ -13,6 +18,7 @@ export function Chip(props: {text: string, selected: boolean, select: () => void
                     hover:bg-c-surface-variant hover:text-c-on-surface-variant transition-colors
                     select-none ${selectedClasses()}`}
             onClick={props.select}
+            type={props.type ?? "button"}
         >
             {props.text}
         </button>