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

[FE] Modify batch layout to show actions and recent certificates

Browse Source
This commit is contained in:
Araozu 2023-06-13 22:08:10 -05:00
parent 3ac8f1321c
commit 9477ab17ba
4 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/AulaVirtual/DniEntry.tsx
View File

@ -61,7 +61,7 @@ export function DniEntry(props: {dni: string}) {
return ( return (
<> <>
<Show when={status() !== Status.Error}> <Show when={status() !== Status.Error}>
<div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem] hover:bg-c-surface-variant hover:text-c-on-surface-variant"> <div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem_auto] hover:bg-c-surface-variant hover:text-c-on-surface-variant">
<div class="text-center font-mono"> <div class="text-center font-mono">
{props.dni} {props.dni}
</div> </div>
@ -71,12 +71,16 @@ export function DniEntry(props: {dni: string}) {
<div class="text-center font-mono"></div> <div class="text-center font-mono"></div>
<div class="text-center font-mono"></div> <div class="text-center font-mono"></div>
<div class="text-center font-mono"></div> <div class="text-center font-mono"></div>
<div></div>
<div class="border-l"></div>
</Match> </Match>
<Match when={status() === Status.Loading}> <Match when={status() === Status.Loading}>
<div class="text-center font-mono">...</div> <div class="text-center font-mono">...</div>
<div class="text-center font-mono">...</div> <div class="text-center font-mono">...</div>
<div class="text-center font-mono">...</div> <div class="text-center font-mono">...</div>
<div></div>
<div class="border-l"></div>
</Match> </Match>
<Match when={status() === Status.Ok}> <Match when={status() === Status.Ok}>
@ -89,6 +93,14 @@ export function DniEntry(props: {dni: string}) {
<div class="text-center font-mono"> <div class="text-center font-mono">
{person()?.nombres ?? "!"} {person()?.nombres ?? "!"}
</div> </div>
<div class="text-center">
<button
class={"rounded-full px-2 hover:bg-c-error first:text-c-error first:hover:text-c-on-error"}
>
<i class="ph ph-x"></i>
</button>
</div>
<div class="border-l"></div>
</Match> </Match>
</Switch> </Switch>

21
src/views/AulaVirtual/DniEntry/DniRegister.tsx
View File

@ -46,7 +46,7 @@ export function DniRegister(props: {dni: string, onSuccess: () => void}) {
}; };
return ( return (
<form class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem] w-full" onsubmit={register}> <form class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem_auto] w-full" onsubmit={register}>
<div class="text-center font-mono"> <div class="text-center font-mono">
{props.dni} {props.dni}
</div> </div>
@ -91,14 +91,17 @@ export function DniRegister(props: {dni: string, onSuccess: () => void}) {
disabled={loading()} disabled={loading()}
/> />
<input <div class="text-center">
class={`bg-c-primary text-c-on-primary px-4 py-2 rounded-md cursor-pointer <button
disabled:opacity-50 disabled:cursor-not-allowed class={`rounded-full py-1 px-2 bg-c-success text-c-on-success shadow ${loading() ? "animate-pulse" : ""}`}
${loading() ? "animate-pulse" : ""}`} type="submit"
type="submit" disabled={loading()}
value="Registrar" >
disabled={loading()} <i class="ph ph-user-plus"></i>
/> </button>
</div>
<div class="border-l"></div>
</form> </form>
); );
} }

6
src/views/AulaVirtual/DniGroup.tsx
View File

@ -7,13 +7,15 @@ export function DniGroup(props: {group: string, index: number}) {
console.log("Loading group..."); console.log("Loading group...");
return ( return (
<div class="grid grid-cols-[53rem_auto] gap-2 my-8"> <div class=" grid-cols-[53rem_auto] gap-2 my-8">
<div class="border border-c-outline rounded-xl"> <div class="border border-c-outline rounded-xl">
<div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem] border-b"> <div class="grid gap-1 grid-cols-[7rem_10rem_10rem_16rem_7rem_auto] border-b">
<div class="text-center">DNI</div> <div class="text-center">DNI</div>
<div class="text-center">Apellido Paterno</div> <div class="text-center">Apellido Paterno</div>
<div class="text-center">Apellido Materno</div> <div class="text-center">Apellido Materno</div>
<div class="text-center">Nombres</div> <div class="text-center">Nombres</div>
<div class="text-center">Acciones</div>
<div class="border-l pl-4">Certificados recientes (último año)</div>
</div> </div>
<For each={dnis()}> <For each={dnis()}>

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

@ -9,8 +9,8 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
createEffect(() => { createEffect(() => {
const person = props.person; const person = props.person;
const lastUpdate = props.lastUpdate; const lastUpdate = props.lastUpdate;
// This comment is important, it retrieves // This comment is important, it makes solid's reactivy wake up,
// certificates from DB on any change // which then retrieves certificates from the DB on any change
console.log(`Loading registers for ${person?.nombres} (update ${lastUpdate})`); console.log(`Loading registers for ${person?.nombres} (update ${lastUpdate})`);
// Load certificates from DB // Load certificates from DB
@ -18,7 +18,6 @@ export function Registers(props: { person: Person | null, lastUpdate: number })
}); });
const loadCertificates = async() => { const loadCertificates = async() => {
console.log("loading from db...");
setLoading(true); setLoading(true);
if (props.person === null) return; if (props.person === null) return;