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

[FE][Certs] Style changes

Browse Source
This commit is contained in:
Araozu 2023-08-25 21:39:33 -05:00
parent 5dc64e217e
commit fadbfbc7be
8 changed files with 159 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/index.html
View File

@ -1,16 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="es">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" /> <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid App</title> <title>EEGSAC - internal tool</title>
</head>
<body> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Inter&display=swap" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script src="/src/index.tsx" type="module"></script> <script src="/src/index.tsx" type="module"></script>
</body> </body>
</html> </html>

100
frontend/src/certs/NewRegister/ManualRegistration.tsx Normal file
View File

@ -0,0 +1,100 @@
import { JSX, createSignal } from "solid-js";
import { SearchableSelect } from "./SearchableSelect";
type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
submitter: HTMLElement;
}>;
export function ManualRegistration(props: {personId: number | null, onAdd: (v: [number, string]) => void}) {
// Used to update SearchableSelect.tsx manually
const [count, setCount] = createSignal(0);
const [error, setError] = createSignal("");
const [selectedCourseId, seSelectedCourseId] = createSignal<number | null>(null);
let datePicker: HTMLInputElement | undefined;
const register: HTMLEventFn = async(ev) => {
ev.preventDefault();
const subject = selectedCourseId();
if (datePicker === undefined) {
return;
}
const date = datePicker.value;
if (subject === null) {
setError("Selecciona un curso");
setTimeout(() => setError(""), 5000);
return;
}
if (date === "") {
setError("Selecciona una fecha");
setTimeout(() => setError(""), 5000);
return;
}
props.onAdd([subject, date]);
// This is used to update & refresh the <SearchableSelect> component
setCount((x) => x + 1);
};
console.log(`Person ID: ${props.personId}`);
return (
<>
<form onsubmit={register}>
<div class="h-52">
<SearchableSelect
onChange={seSelectedCourseId}
count={count()}
/>
</div>
<div class="my-4 grid grid-cols-[9.5rem_auto] gap-2">
<div class="relative">
<input
ref={datePicker}
id="create-date"
class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg p-2 font-mono"
type="date"
/>
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
</div>
<div class="relative">
<input
ref={datePicker}
id="create-date"
class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg p-2 font-mono w-full
disabled:opacity-50 disabled:cursor-not-allowed"
type="text"
disabled
/>
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">
Denominación
</label>
</div>
</div>
<input
class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"
type="submit"
value="Agregar"
disabled={props.personId === null}
/>
</form>
<p
class="my-2 p-1 rounded w-fit mx-4 bg-c-error text-c-on-error"
style={{opacity: error() === "" ? "0" : "1", "user-select": "none"}}
>
{error()}&nbsp;
</p>
</>
);
}

44
frontend/src/certs/NewRegister/RegisterPresets.tsx
View File

@ -1,18 +1,40 @@
import { Chip } from "../../components/Chip"; import { Chip } from "../../components/Chip";
export function RegisterPresets() { export function RegisterPresets() {
let datePicker: HTMLInputElement | undefined;
return ( return (
<div class="h-52"> <>
<p>Las fechas se colocan automáticamente según la duración del curso.</p> <div class="h-52">
<br /> <p>Las fechas se colocan automáticamente según la duración del curso.</p>
<div class="flex flex-wrap gap-2"> <br />
<Chip text="2 Matpel" /> <div class="flex flex-wrap gap-2">
<Chip text="3 Matpel" /> <Chip text="2 Matpel" />
<Chip text="4 Escolta" /> <Chip text="3 Matpel" />
<Chip text="MD, 2 Matpel" /> <Chip text="4 Escolta" />
<Chip text="3 4x4" /> <Chip text="MD, 2 Matpel" />
<Chip text="2 4x4" /> <Chip text="3 4x4" />
<Chip text="2 4x4" />
</div>
</div> </div>
</div> <div class="my-4">
<div class="relative">
<input
ref={datePicker}
id="create-date"
class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg p-2 font-mono"
type="date"
/>
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
</div>
</div>
<input
class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"
type="submit"
value="Agregar"
// disabled={props.personId === null}
/>
</>
); );
} }

5
frontend/src/certs/NewRegister/SearchableSelect.tsx
View File

@ -43,7 +43,7 @@ export function SearchableSelect(props: {
id="create-subject" id="create-subject"
class={`bg-c-background text-c-on-background class={`bg-c-background text-c-on-background
${selected() !== null ? "border-c-green" : "border-c-outline"} ${selected() !== null ? "border-c-green" : "border-c-outline"}
border-2 rounded px-2 py-1 border-2 rounded-tl rounded-tr px-2 py-1
w-full w-full
invalid:border-c-error invalid:text-c-error invalid:border-c-error invalid:text-c-error
focus:border-c-primary outline-none focus:border-c-primary outline-none
@ -85,7 +85,8 @@ export function SearchableSelect(props: {
{inputElement} {inputElement}
<br /> <br />
<div <div
class="border-c-outline border-2 rounded overflow-y-scroll h-[10rem]" class="border-c-outline border-l-2 border-b-2 border-r-2
rounded-bl rounded-br overflow-y-scroll h-[10rem]"
> >
<For each={filteredOptions()}> <For each={filteredOptions()}>
{(s) => ( {(s) => (

105
frontend/src/certs/NewRegister/index.tsx
View File

@ -1,15 +1,10 @@
import { createSignal, Show } from "solid-js"; import { createSignal, Show } from "solid-js";
import { SearchableSelect } from "./SearchableSelect";
import { JSX } from "solid-js/jsx-runtime";
import { FilledCard } from "../../components/FilledCard"; import { FilledCard } from "../../components/FilledCard";
import { RegisterPreview } from "./RegisterPreview"; import { RegisterPreview } from "./RegisterPreview";
import { RegisterPresets } from "./RegisterPresets"; import { RegisterPresets } from "./RegisterPresets";
import { ManualRegistration } from "./ManualRegistration";
type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
submitter: HTMLElement;
}>;
type TabType = "Presets" | "Manual"; type TabType = "Presets" | "Manual";
@ -37,7 +32,10 @@ export function NewRegister(props: {
<RegisterPresets /> <RegisterPresets />
</Show> </Show>
<Show when={active() === "Manual"}> <Show when={active() === "Manual"}>
<ManualCerts personId={props.personId} onAdd={(v) => setSelections((x) => [...x, v])} /> <ManualRegistration
personId={props.personId}
onAdd={(v) => setSelections((x) => [...x, v])}
/>
</Show> </Show>
</div> </div>
</FilledCard> </FilledCard>
@ -75,98 +73,5 @@ function RegisterTabs(props: {active: TabType, setActive: (v: TabType) => void})
); );
} }
function ManualCerts(props: {personId: number | null, onAdd: (v: [number, string]) => void}) {
// Used to update SearchableSelect.tsx manually
const [count, setCount] = createSignal(0);
const [error, setError] = createSignal("");
const [selectedCourseId, seSelectedCourseId] = createSignal<number | null>(null);
let datePicker: HTMLInputElement | undefined;
const register: HTMLEventFn = async(ev) => {
ev.preventDefault();
const subject = selectedCourseId();
if (datePicker === undefined) {
return;
}
const date = datePicker.value;
if (subject === null) {
setError("Selecciona un curso");
setTimeout(() => setError(""), 5000);
return;
}
if (date === "") {
setError("Selecciona una fecha");
setTimeout(() => setError(""), 5000);
return;
}
props.onAdd([subject, date]);
// This is used to update & refresh the <SearchableSelect> component
setCount((x) => x + 1);
};
console.log(`Person ID: ${props.personId}`);
return (
<>
<form onsubmit={register}>
<div>
<SearchableSelect
onChange={seSelectedCourseId}
count={count()}
/>
</div>
<div class="my-4 grid grid-cols-[9.5rem_auto] gap-2">
<div class="relative">
<input
ref={datePicker}
id="create-date"
class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg p-2 font-mono"
type="date"
/>
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
</div>
<div class="relative">
<input
ref={datePicker}
id="create-date"
class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg p-2 font-mono w-full
disabled:opacity-50 disabled:cursor-not-allowed"
type="text"
disabled
/>
<label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">
Denominación
</label>
</div>
</div>
<input
class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"
type="submit"
value="Agregar"
disabled={props.personId === null}
/>
</form>
<p
class="my-2 p-1 rounded w-fit mx-4 bg-c-error text-c-on-error"
style={{opacity: error() === "" ? "0" : "1", "user-select": "none"}}
>
{error()}&nbsp;
</p>
</>
);
}

5
frontend/src/certs/Registers.tsx
View File

@ -8,16 +8,17 @@ export function Registers() {
</h3> </h3>
<div class="flex flex-wrap justify-start gap-2"> <div class="flex flex-wrap justify-start gap-2">
<div class="inline-block w-[14rem] p-1 border border-c-outline rounded-md"> <div class="inline-block w-[12rem] p-1 border border-c-outline rounded-md">
<button class="rounded-full bg-c-primary-container hover:bg-c-primary transition-colors h-12 w-12"> <button class="rounded-full bg-c-primary-container hover:bg-c-primary transition-colors h-12 w-12">
<DownloadIcon fill="var(--c-on-primary-container)" /> <DownloadIcon fill="var(--c-on-primary-container)" />
</button> </button>
<div class="inline-block h-12 w-40 pl-2 align-middle"> <div class="inline-block h-12 w-32 pl-2 align-middle">
<p class="font-bold">Matpel 2</p> <p class="font-bold">Matpel 2</p>
<p class="font-mono text-sm">12/08/2023 - 6486</p> <p class="font-mono text-sm">12/08/2023 - 6486</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );

2
frontend/src/certs/index.tsx
View File

@ -4,7 +4,7 @@ import { Search } from "./Search";
export function Certs() { export function Certs() {
return ( return (
<div class="grid grid-cols-[18rem_25rem_1fr]"> <div class="grid grid-cols-[16rem_25rem_1fr]">
<Search setPerson={() => {}} /> <Search setPerson={() => {}} />
<NewRegister personId={0} onSuccess={() => {}} /> <NewRegister personId={0} onSuccess={() => {}} />
<Registers /> <Registers />

4
frontend/tailwind.config.js
View File

@ -5,7 +5,9 @@ module.exports = {
], ],
theme: { theme: {
extend: { extend: {
fontFamily: {
"mono": ["Inconsolata", "monospace"],
},
}, },
colors: { colors: {
"c-primary": "var(--c-primary)", "c-primary": "var(--c-primary)",