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

[FE] Display custom labels in register list

Browse Source
This commit is contained in:
Araozu 2023-09-02 20:11:34 -05:00
parent 9e38942a2e
commit cec6c0452f
6 changed files with 60 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/certs/Registers/RegisterSidebar.tsx
View File

@ -47,7 +47,7 @@ export function RegisterSidebar(props: {register: Register, close: () => void, o
Eliminar cert.
</button>
<button
class="ml-2 border border-c-outline bg-c-on-primary text-c-primary
class="ml-2 border border-c-outline bg-c-surface text-c-primary
px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"
onclick={props.close}

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

@ -1,11 +1,12 @@
import { For, Show, createEffect, createMemo, createSignal } from "solid-js";
import { DownloadIcon } from "../../icons/DownloadIcon";
import { Person } from "../../types/Person";
import { Register } from "../../types/Register";
import { courseMap } from "../../utils/allCourses";
import { certGenerator } from "../../certGenerator";
import { CaretRight } from "../../icons/CaretRight";
import { RegisterSidebar } from "./RegisterSidebar";
import { customLabelsMap } from "../../utils/allCustomLabels";
import { DownloadSimpleIcon } from "../../icons/DownloadSimpleIcon";
export function Registers(props: {person: Person | null, count: number}) {
const [registers, setRegisters] = createSignal<Array<Register>>([]);
@ -133,6 +134,12 @@ function RegisterEl(props: {register: Register, person: Person, onClick: () => v
return course?.course_name ?? "Curso no encontrado";
};
const customLabel = () => {
const labelId = props.register.register_custom_label;
if (labelId === 1) return "";
return customLabelsMap()[labelId]?.custom_label_value ?? "";
};
const genCert = () => {
const courseN = courseName();
const person = props.person;
@ -165,30 +172,48 @@ function RegisterEl(props: {register: Register, person: Person, onClick: () => v
};
return (
<div class="grid grid-cols-[3rem_9rem_1.25rem] w-[13.75rem] p-1 border border-c-outline rounded-md">
<div class="h-12 w-12 inline-block">
<div class="grid grid-cols-[11rem_1.5rem_1.25rem] border border-c-outline rounded-md">
{/*
<div class=" w-12 inline-block">
<Show when={generateable()}>
<button
onclick={genCert}
class="rounded-full bg-c-primary-container hover:bg-c-primary transition-colors h-full w-full"
class="rounded-full bg-c-primary-container hover:bg-c-primary transition-colors h-12 w-12"
>
<DownloadIcon fill="var(--c-on-primary-container)" />
</button>
</Show>
</div>
<div class="h-12 pl-2 align-middle">
*/}
<div class="p-1 border-r border-c-outline-50 align-middle">
<p
class="font-bold overflow-hidden whitespace-nowrap"
title={courseName()}
title={`${courseName()} ${customLabel()}`}
>
{courseName()}
</p>
<p class="font-mono text-sm">
<span class="underline">
{customLabel()}
</span>
&nbsp;
</p>
<p class="font-mono text-sm">
{displayDate()}
&nbsp;-&nbsp;
{props.register.register_code}
</p>
</div>
<button
class="hover:bg-c-primary-container rounded-md transition-colors
disabled:opacity-0 disabled:cursor-default
disabled:hover:bg-c-transparent"
title="Descargar DOCX"
onclick={genCert}
disabled={!generateable()}
>
<DownloadSimpleIcon fill="var(--c-on-primary-container)" size={20} />
</button>
<button
class="hover:bg-c-surface-variant rounded-md transition-colors"
title="Más opciones"

13
frontend/src/icons/DownloadIcon.tsx
View File

@ -1,5 +1,14 @@
export function DownloadIcon(props: {fill: string}) {
export function DownloadIcon(props: {fill: string, size?: number}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-6" fill={props.fill} viewBox="0 0 256 256"><path d="M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H72a8,8,0,0,1,0,16H32v64H224V136H184a8,8,0,0,1,0-16h40A16,16,0,0,1,240,136Zm-117.66-2.34a8,8,0,0,0,11.32,0l48-48a8,8,0,0,0-11.32-11.32L136,108.69V24a8,8,0,0,0-16,0v84.69L85.66,74.34A8,8,0,0,0,74.34,85.66ZM200,168a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z" /></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="inline-block w-6"
width={props.size ?? 32}
height={props.size ?? 32}
fill={props.fill}
viewBox="0 0 256 256"
>
<path d="M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H72a8,8,0,0,1,0,16H32v64H224V136H184a8,8,0,0,1,0-16h40A16,16,0,0,1,240,136Zm-117.66-2.34a8,8,0,0,0,11.32,0l48-48a8,8,0,0,0-11.32-11.32L136,108.69V24a8,8,0,0,0-16,0v84.69L85.66,74.34A8,8,0,0,0,74.34,85.66ZM200,168a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z" />
</svg>
);
}

14
frontend/src/icons/DownloadSimpleIcon.tsx Normal file
View File

@ -0,0 +1,14 @@
export function DownloadSimpleIcon(props: {fill: string, size?: number}) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
class="inline-block w-6"
width={props.size ?? 32}
height={props.size ?? 32}
fill={props.fill}
viewBox="0 0 256 256"
>
<path d="M224,152v56a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V152a8,8,0,0,1,16,0v56H208V152a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,132.69V40a8,8,0,0,0-16,0v92.69L93.66,106.34a8,8,0,0,0-11.32,11.32Z" />
</svg>
);
}

2
frontend/src/index.css
View File

@ -12,6 +12,7 @@
--c-surface: #1b1b1f;
--c-on-surface: #e4e1e6;
--c-outline: #8f909a;
--c-outline-50: rgba(143, 144, 154, 0.5);
--c-surface-variant: #45464f;
--c-on-surface-variant: #c6c6d0;
@ -34,6 +35,7 @@
--c-surface: #fefbff;
--c-on-surface: #1b1b1f;
--c-outline: #767680;
--c-outline-50: rgba(118, 118, 128, 0.5);
--c-surface-variant: #e2e1ec;
--c-on-surface-variant: #45464f;

1
frontend/tailwind.config.js
View File

@ -23,6 +23,7 @@ module.exports = {
"c-surface": "var(--c-surface)",
"c-on-surface": "var(--c-on-surface)",
"c-outline": "var(--c-outline)",
"c-outline-50": "var(--c-outline-50)",
"c-surface-variant": "var(--c-surface-variant)",
"c-on-surface-variant": "var(--c-on-surface-variant)",
"c-green": "#006b54",