From f3a182028ec0993e32c4b96d7d418521b48ac110 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Sat, 10 Jun 2023 22:35:36 -0500
Subject: [PATCH] [FE] Add button to copy a certificate's code

---
 src/views/components/Registers.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/views/components/Registers.tsx b/src/views/components/Registers.tsx
index e505282..262c981 100644
--- a/src/views/components/Registers.tsx
+++ b/src/views/components/Registers.tsx
@@ -53,7 +53,7 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
                     </div>
 
                     <div>
-                        <div class="grid grid-cols-2 gap-2 font-mono">
+                        <div class="grid grid-cols-2 gap-1 font-mono">
                             <CopyButton
                                 copyText={`${props.person!.nombres} ${props.person!.apellidoPaterno} ${props.person!.apellidoMaterno}`}
                             >
@@ -68,7 +68,7 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
                             </CopyButton>
                         </div>
 
-                        <div class="grid grid-cols-[2fr_2fr_1fr_1fr] gap-2 font-mono">
+                        <div class="grid grid-cols-[2fr_2fr_1fr_1fr] gap-1 font-mono">
                             <CopyButton
                                 copyText={`${props.person!.nombres}`}
                             >
@@ -202,11 +202,21 @@ function Register(props: { cert: RegisterReturn, onUpdate: () => void }) {
         setDownloading(false);
     };
 
+    const certCode = () => props.cert.codigo.toString().padStart(4, "0");
+
     return (
         <tr class="odd:bg-c-surface-variant">
             <td class="py-2 px-4">{props.cert.curso_nombre}</td>
             <td class="py-2 px-4 font-mono">{props.cert.fecha_inscripcion.toString()}</td>
-            <td class="py-2 px-4">{props.cert.codigo}</td>
+            <td class="py-1 px-2">
+                <CopyButton
+                    copyText={certCode()}
+                >
+                    <span class="py-1 px-2 font-mono">
+                        {certCode()}
+                    </span>
+                </CopyButton>
+            </td>
             <td class="py-2 px-2">
                 <Show when={props.cert.generatable}>
                     <button
@@ -243,7 +253,7 @@ function Register(props: { cert: RegisterReturn, onUpdate: () => void }) {
     );
 }
 
-function CopyButton(props: {copyText: string, children: Array<JSX.Element>}) {
+function CopyButton(props: {copyText: string, children: Array<JSX.Element> | JSX.Element}) {
     const [successAnimation, setSuccessAnimation] = createSignal(false);
 
     const onclick = () => {