[FE] Display custom labels in register list

frontend/src/certs/Registers/RegisterSidebar.tsx

@@ -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}

frontend/src/certs/Registers/index.tsx

@@ -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="grid grid-cols-[11rem_1.5rem_1.25rem] border border-c-outline rounded-md">
-            <div class="h-12 w-12 inline-block">
+            {/*
+            <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"

frontend/src/icons/DownloadIcon.tsx

@@ -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>
     );
 }

frontend/src/icons/DownloadSimpleIcon.tsx

@@ -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>
+    );
+}

frontend/src/index.css

@@ -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;
 

frontend/tailwind.config.js

@@ -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",