[FE] Add button to copy a certificate's code

This commit is contained in:
Araozu 2023-06-10 22:35:36 -05:00
parent 31c3b7a7ff
commit f3a182028e

View File

@ -53,7 +53,7 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
</div> </div>
<div> <div>
<div class="grid grid-cols-2 gap-2 font-mono"> <div class="grid grid-cols-2 gap-1 font-mono">
<CopyButton <CopyButton
copyText={`${props.person!.nombres} ${props.person!.apellidoPaterno} ${props.person!.apellidoMaterno}`} copyText={`${props.person!.nombres} ${props.person!.apellidoPaterno} ${props.person!.apellidoMaterno}`}
> >
@ -68,7 +68,7 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
</CopyButton> </CopyButton>
</div> </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 <CopyButton
copyText={`${props.person!.nombres}`} copyText={`${props.person!.nombres}`}
> >
@ -202,11 +202,21 @@ function Register(props: { cert: RegisterReturn, onUpdate: () => void }) {
setDownloading(false); setDownloading(false);
}; };
const certCode = () => props.cert.codigo.toString().padStart(4, "0");
return ( return (
<tr class="odd:bg-c-surface-variant"> <tr class="odd:bg-c-surface-variant">
<td class="py-2 px-4">{props.cert.curso_nombre}</td> <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 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"> <td class="py-2 px-2">
<Show when={props.cert.generatable}> <Show when={props.cert.generatable}>
<button <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 [successAnimation, setSuccessAnimation] = createSignal(false);
const onclick = () => { const onclick = () => {