[FE] Add buttons to copy different combination of name/last name

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 {
+            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>
+    )
+}

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>
     )