From 31c3b7a7fff2536ea3750f2559aa3d5420cfee76 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Sat, 10 Jun 2023 22:21:58 -0500
Subject: [PATCH] [FE] Add buttons to copy different combination of name/last
 name

---
 src/views/components/Registers.tsx | 86 +++++++++++++++++++++++++++---
 src/views/components/Search.tsx    |  4 +-
 2 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/src/views/components/Registers.tsx b/src/views/components/Registers.tsx
index 884b069..e505282 100644
--- a/src/views/components/Registers.tsx
+++ b/src/views/components/Registers.tsx
@@ -1,4 +1,4 @@
-import { Show, createEffect, createSignal, For } from "solid-js";
+import { Show, createEffect, createSignal, For, JSX } from "solid-js";
 import { Person } from "../../types/Person";
 import { RegisterReturn } from "../../types/RegisterReturn";
 
@@ -52,6 +52,50 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
                         />
                     </div>
 
+                    <div>
+                        <div class="grid grid-cols-2 gap-2 font-mono">
+                            <CopyButton
+                                copyText={`${props.person!.nombres} ${props.person!.apellidoPaterno} ${props.person!.apellidoMaterno}`}
+                            >
+                                Nombres y <b>Apellidos</b>
+                                <i class="ph ph-clipboard-text text-2xl align-middle ml-2"></i>
+                            </CopyButton>
+                            <CopyButton
+                                copyText={`${props.person!.apellidoPaterno} ${props.person!.apellidoMaterno} ${props.person!.nombres}`}
+                            >
+                                <b>Apellidos</b> y Nombres
+                                <i class="ph ph-clipboard-text text-2xl align-middle ml-2"></i>
+                            </CopyButton>
+                        </div>
+
+                        <div class="grid grid-cols-[2fr_2fr_1fr_1fr] gap-2 font-mono">
+                            <CopyButton
+                                copyText={`${props.person!.nombres}`}
+                            >
+                                Nombres&nbsp;
+                                <i class="ph ph-clipboard-text text-2xl align-middle ml-2"></i>
+                            </CopyButton>
+                            <CopyButton
+                                copyText={`${props.person!.apellidoPaterno} ${props.person!.apellidoMaterno}`}
+                            >
+                                <b>Apellidos</b>
+                                <i class="ph ph-clipboard-text text-2xl align-middle ml-2"></i>
+                            </CopyButton>
+                            <CopyButton
+                                copyText={`${props.person!.apellidoPaterno}`}
+                            >
+                                <b><i>Paterno</i></b>
+                                <i class="ph ph-clipboard-text text-2xl align-middle ml-2"></i>
+                            </CopyButton>
+                            <CopyButton
+                                copyText={`${props.person!.apellidoMaterno}`}
+                            >
+                                <b><i>Materno</i></b>
+                                <i class="ph ph-clipboard-text text-2xl align-middle ml-2"></i>
+                            </CopyButton>
+                        </div>
+                    </div>
+
                     <p
                         class="my-2"
                         style={{ display: loading() ? "block" : "none" }}
@@ -147,8 +191,12 @@ function Register(props: { cert: RegisterReturn, onUpdate: () => void }) {
             a.click();
             window.URL.revokeObjectURL(url);
         } else {
-            const json = await response.json();
-            alert(json);
+            try {
+                const json = await response.json();
+                alert(json);
+            } catch (e) {
+                alert("Unknown error downloading...");
+            }
         }
 
         setDownloading(false);
@@ -159,18 +207,18 @@ function Register(props: { cert: RegisterReturn, onUpdate: () => void }) {
             <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-2 px-4">
+            <td class="py-2 px-2">
                 <Show when={props.cert.generatable}>
                     <button
-                        class="rounded-full py-1 px-2 shadow"
+                        class={"rounded-full py-1 px-2 shadow " + (downloading()? "animate-pulse" : "")}
                         style={{ "background-color": "#0055d5", "color": "#ffffff" }}
                         onclick={getCertificate}
                     >
-                        DOCX
+                        <i class="ph ph-file-doc"></i>
                     </button>
                 </Show>
             </td>
-            <td class="py-2 px-4">
+            <td class="py-2 px-2">
                 <button
                     class="rounded-full py-1 px-2 shadow
                            bg-c-primary
@@ -178,7 +226,7 @@ function Register(props: { cert: RegisterReturn, onUpdate: () => void }) {
                            disabled:opacity-50 disabled:cursor-not-allowed"
                     disabled
                 >
-                    Editar
+                    <i class="ph ph-pen"></i>
                 </button>
             </td>
             <td class="py-2 px-4">
@@ -194,3 +242,25 @@ function Register(props: { cert: RegisterReturn, onUpdate: () => void }) {
         </tr>
     );
 }
+
+function CopyButton(props: {copyText: string, children: Array<JSX.Element>}) {
+    const [successAnimation, setSuccessAnimation] = createSignal(false);
+
+    const onclick = () => {
+        navigator.clipboard.writeText(props.copyText);
+        setSuccessAnimation(true);
+        setTimeout(() => setSuccessAnimation(false), 500);
+    }
+
+    return (
+        <button
+            onclick={onclick}
+            class={
+                (successAnimation() ? "bg-c-success text-c-on-success" : "bg-c-primary text-c-on-primary") 
+                + " rounded transition-colors py-1 my-1 relative overflow-hidden"
+            }
+        >
+            {props.children}
+        </button>
+    )
+}
diff --git a/src/views/components/Search.tsx b/src/views/components/Search.tsx
index daa438d..7d1d49d 100644
--- a/src/views/components/Search.tsx
+++ b/src/views/components/Search.tsx
@@ -161,10 +161,10 @@ function InputBox(props: {
                 onclick={copyToClipboard}
                 type="button"
             >
-                <i class={(successAnimation() ? "text-c-on-success" : "text-c-on-primary") + " ph ph-clipboard-text text-2xl"}></i>
+                <i class={(successAnimation() ? "text-c-on-success" : "text-c-on-primary") + " ph ph-clipboard-text text-2xl align-middle"}></i>
             </button>
             <button class="bg-c-error rounded" onclick={clearDni} type="button">
-                <i class="ph ph-trash text-2xl text-c-on-primary"></i>
+                <i class="ph ph-trash text-2xl text-c-on-primary align-middle"></i>
             </button>
         </div>
     )