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

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

Browse Source
This commit is contained in:
Araozu 2023-06-10 22:21:58 -05:00
parent 179f948ed5
commit 31c3b7a7ff
2 changed files with 80 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/components/Registers.tsx
View File

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

4
src/views/components/Search.tsx
View File

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