[FE][Certs] Buttons to set date yesterday/sunday
This commit is contained in:
parent
23e423cad7
commit
eb9f6d0ca8
@ -4,6 +4,7 @@ import { CustomLabelSelect } from "./CustomLabelSelect";
|
|||||||
import { RegistrationPreview } from ".";
|
import { RegistrationPreview } from ".";
|
||||||
import { useCourses } from "../CourseContext";
|
import { useCourses } from "../CourseContext";
|
||||||
import { useCustomLabel } from "../CustomLabelContext";
|
import { useCustomLabel } from "../CustomLabelContext";
|
||||||
|
import { Chip } from "../../components/Chip";
|
||||||
|
|
||||||
type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
|
type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
|
||||||
submitter: HTMLElement;
|
submitter: HTMLElement;
|
||||||
@ -91,6 +92,23 @@ export function ManualRegistration(props: {
|
|||||||
setCustomLabel("");
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<form onsubmit={register}>
|
<form onsubmit={register}>
|
||||||
@ -101,7 +119,7 @@ export function ManualRegistration(props: {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div class="relative">
|
||||||
<input
|
<input
|
||||||
ref={datePicker}
|
ref={datePicker}
|
||||||
@ -110,7 +128,20 @@ export function ManualRegistration(props: {
|
|||||||
type="date"
|
type="date"
|
||||||
/>
|
/>
|
||||||
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
|
<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>
|
||||||
|
|
||||||
<Show when={courseHasCustomLabel()}>
|
<Show when={courseHasCustomLabel()}>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<CustomLabelSelect
|
<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];
|
||||||
|
}
|
||||||
|
@ -101,6 +101,23 @@ export function RegisterPresets(props: {
|
|||||||
setSelectedPreset("None");
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="h-52">
|
<div class="h-52">
|
||||||
@ -118,7 +135,7 @@ export function RegisterPresets(props: {
|
|||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 mb-2">
|
<div class="mt-2 mb-2">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input
|
<input
|
||||||
ref={datePicker}
|
ref={datePicker}
|
||||||
@ -127,6 +144,18 @@ export function RegisterPresets(props: {
|
|||||||
type="date"
|
type="date"
|
||||||
/>
|
/>
|
||||||
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
|
<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>
|
</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];
|
||||||
|
}
|
||||||
|
@ -30,11 +30,11 @@ export function NewRegister(props: {
|
|||||||
return (
|
return (
|
||||||
<div class="h-screen overflow-y-scroll">
|
<div class="h-screen overflow-y-scroll">
|
||||||
<FilledCard class="border border-c-outline overflow-hidden">
|
<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} />
|
<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"}>
|
<Show when={active() === "Presets"}>
|
||||||
<RegisterPresets
|
<RegisterPresets
|
||||||
onAdd={(v) => setSelections((x) => [...x, v])}
|
onAdd={(v) => setSelections((x) => [...x, v])}
|
||||||
|
@ -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 = () => {
|
const selectedClasses = () => {
|
||||||
if (props.selected) {
|
if (props.selected) {
|
||||||
return "bg-c-surface-variant text-c-on-surface-variant shadow";
|
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
|
hover:bg-c-surface-variant hover:text-c-on-surface-variant transition-colors
|
||||||
select-none ${selectedClasses()}`}
|
select-none ${selectedClasses()}`}
|
||||||
onClick={props.select}
|
onClick={props.select}
|
||||||
|
type={props.type ?? "button"}
|
||||||
>
|
>
|
||||||
{props.text}
|
{props.text}
|
||||||
</button>
|
</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user