fernando/eeg_certs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FE][Certs] Minimal delete register

Browse Source
This commit is contained in:
Araozu 2023-09-01 13:00:39 -05:00
parent 4998a22fc0
commit 28816fdba1
3 changed files with 100 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/certs/Registers/RegisterSidebar.tsx Normal file
View File

@ -0,0 +1,59 @@
import { Register } from "../../types/Register";
import { formatDate } from "../../utils/functions";
export function RegisterSidebar(props: {register: Register, close: () => void, onDelete: () => void}) {
const deleteRegister = async() => {
const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${props.register.register_id}`,{
method: "DELETE",
});
if (res.ok) {
props.onDelete();
props.close();
}
};
return (
<div class="absolute top-0 bg-c-surface-variant right-0
py-4 px-6 w-[20rem]
shadow-md rounded-lg"
>
<p class="text-xl mb-8">Detalles del certificado</p>
<p class="underline text-lg">Curso</p>
<p class="mb-4">Matpel 2</p>
<p class="underline text-lg">Código del certificado</p>
<p class="mb-4">{props.register.register_code}</p>
<p class="underline text-lg">Fecha de creación</p>
<p class="mb-4">{formatDate(props.register.register_creation_date)}</p>
<p class="underline text-lg">Fecha del certificado</p>
<p class="mb-4">{formatDate(props.register.register_display_date)}</p>
<p class="underline text-lg">Denominacion</p>
<p class="mb-4">{props.register.register_custom_label}</p>
<p class="underline text-lg">¿Es cert. sin firmas?</p>
<p class="mb-8">{props.register.register_is_preview ? "Si" : "No"}</p>
<button
class="bg-c-error text-c-on-error px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"
onclick={deleteRegister}
>
Eliminar cert.
</button>
<button
class="ml-2 border border-c-outline bg-c-on-primary text-c-primary
px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"
onclick={props.close}
>
Volver
</button>
</div>
);
}

47
frontend/src/certs/Registers/index.tsx
View File

@ -5,10 +5,22 @@ import { Register } from "../../types/Register";
import { courseMap } from "../../utils/allCourses";
import { certGenerator } from "../../certGenerator";
import { CaretRight } from "../../icons/CaretRight";
import { RegisterSidebar } from "./RegisterSidebar";
export function Registers(props: {person: Person | null, count: number}) {
const [registers, setRegisters] = createSignal<Array<Register>>([]);
const [showHidden, setShowHidden] = createSignal(false);
const [sidebarRegister, setSidebarRegister] = createSignal<Register | null>(null);
const loadRegisters = async() => {
const person = props.person!;
const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${person.person_dni}`);
if (res.ok) {
const data = await res.json();
setRegisters(data);
}
};
createEffect(async() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -19,13 +31,7 @@ export function Registers(props: {person: Person | null, count: number}) {
return;
}
const person = props.person;
const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${person.person_dni}`);
if (res.ok) {
const data = await res.json();
setRegisters(data);
}
loadRegisters();
});
// All registers sorted by year, and an indicator of whether there's register older
@ -68,7 +74,7 @@ export function Registers(props: {person: Person | null, count: number}) {
const inputCheck = () => setShowHidden((x) => !x);
return (
<div class="m-4 p-4 rounded-md">
<div class="m-4 p-4 rounded-md relative">
<h3 class="text-xl font-medium">
{props.person?.person_names}&nbsp;
{props.person?.person_paternal_surname}&nbsp;
@ -76,10 +82,10 @@ export function Registers(props: {person: Person | null, count: number}) {
<Show when={registerSortedList()[1]}>
&nbsp;&nbsp;&nbsp;|
<input type="checkbox" class="ml-4 mr-2" checked oninput={inputCheck} />
<span class="text-sm">
<input id={`person_${props.person?.person_id ?? "_"}`} type="checkbox" class="ml-4 mr-2" checked oninput={inputCheck} />
<label for={`person_${props.person?.person_id ?? "_"}`} class="text-sm">
Ocultar cert. anteriores a {new Date().getFullYear() - 1}
</span>
</label>
</Show>
</h3>
@ -87,16 +93,30 @@ export function Registers(props: {person: Person | null, count: number}) {
{(year) => (
<div class="flex flex-wrap justify-start gap-2 my-6">
<For each={year}>
{(register) => <RegisterEl register={register} person={props.person!} />}
{(register) => (
<RegisterEl
register={register}
person={props.person!}
onClick={() => setSidebarRegister(register)}
/>
)}
</For>
</div>
)}
</For>
<Show when={sidebarRegister() !== null}>
<RegisterSidebar
register={sidebarRegister()!}
close={() => setSidebarRegister(null)}
onDelete={loadRegisters}
/>
</Show>
</div>
);
}
function RegisterEl(props: {register: Register, person: Person}) {
function RegisterEl(props: {register: Register, person: Person, onClick: () => void}) {
const dateComponents = () => {
const [, year, month, day] = /(\d{4})-(\d{2})-(\d{2})/.exec(props.register.register_display_date) ?? [];
@ -172,6 +192,7 @@ function RegisterEl(props: {register: Register, person: Person}) {
<button
class="hover:bg-c-surface-variant rounded-md transition-colors"
title="Más opciones"
onclick={props.onClick}
>
<CaretRight fill="var(--c-primary)" size={20} />
</button>

7
frontend/src/utils/functions.ts Normal file
View File

@ -0,0 +1,7 @@
// YYYY-MM-DD to DD/MM/YYYY
export function formatDate(date: string): string {
const [year, month, day] = date.split("-");
return `${day}/${month}/${year}`;
}