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

[FE][Scans] Show message when conversion is successful

Browse Source
This commit is contained in:
Araozu 2023-11-21 14:35:23 -05:00
parent 9fee445ef9
commit 1b7c9591ca
2 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/Scans/ScansList.tsx
View File

@ -7,7 +7,7 @@ import { PDFIcon } from "../icons/PDFIcon";
import { LoadingStatus, useLoading } from "../utils/functions"; import { LoadingStatus, useLoading } from "../utils/functions";
import { QuestionIcon } from "../icons/QuestionIcon"; import { QuestionIcon } from "../icons/QuestionIcon";
export function ScansList(props: {scanData: Array<ScanResult> | null}) { export function ScansList(props: {scanData: Array<ScanResult> | null, onSuccess: () => void}) {
const {status, setStatus, error, setError} = useLoading(); const {status, setStatus, error, setError} = useLoading();
const loading = createMemo(() => status() === LoadingStatus.Loading); const loading = createMemo(() => status() === LoadingStatus.Loading);
@ -56,9 +56,9 @@ export function ScansList(props: {scanData: Array<ScanResult> | null}) {
}, },
) )
.then((res) => res.json()) .then((res) => res.json())
.then((res) => { .then(() => {
setStatus(LoadingStatus.Ok); setStatus(LoadingStatus.Ok);
console.log(res); props.onSuccess();
}) })
.catch((err) => { .catch((err) => {
setStatus(LoadingStatus.Error); setStatus(LoadingStatus.Error);
@ -155,6 +155,14 @@ export function ScansList(props: {scanData: Array<ScanResult> | null}) {
</span> </span>
</FilledButton> </FilledButton>
</div> </div>
<Show when={status() === LoadingStatus.Error}>
<div class="px-4 pb-4">
<p class="font-medium">
Error convirtiendo PDFs: {error()}
</p>
</div>
</Show>
</FilledCard> </FilledCard>
</Show> </Show>
</> </>

38
frontend/src/Scans/index.tsx
View File

@ -1,4 +1,4 @@
import { createMemo, createSignal } from "solid-js"; import { Show, createMemo, createSignal } from "solid-js";
import { FilledButton } from "../components/FilledButton"; import { FilledButton } from "../components/FilledButton";
import { FilledCard } from "../components/FilledCard"; import { FilledCard } from "../components/FilledCard";
import { LoadingIcon } from "../icons/LoadingIcon"; import { LoadingIcon } from "../icons/LoadingIcon";
@ -15,22 +15,24 @@ export interface ScanData {
} }
export type ScanResult = export type ScanResult =
| {Full: [string, number, string]} | { Full: [string, number, string] }
| {Partial: [string, string]} | { Partial: [string, string] }
| {Empty: string} | { Empty: string }
| {Error: string}; | { Error: string };
export function Scans() { export function Scans() {
const {status, setStatus, error, setError} = useLoading(); const { status, setStatus, error, setError } = useLoading();
const [scanData, setScanData] = createSignal<Array<ScanResult> | null>(null); const [scanData, setScanData] = createSignal<Array<ScanResult> | null>(null);
const [converted, setConverted] = createSignal(false);
const loading = createMemo(() => status() === LoadingStatus.Loading); const loading = createMemo(() => status() === LoadingStatus.Loading);
const detectScans = () => { const detectScans = () => {
setStatus(LoadingStatus.Loading); setStatus(LoadingStatus.Loading);
setScanData(null); setScanData(null);
setConverted(false);
fetch(`${import.meta.env.VITE_BACKEND_URL}/api/scans/detect`) fetch(`${import.meta.env.VITE_BACKEND_URL}/api/scans/detect`)
.then((res) => res.json()) .then((res) => res.json())
@ -146,7 +148,7 @@ export function Scans() {
> >
<span <span
class="absolute top-[1.35rem] left-2" class="absolute top-[1.35rem] left-2"
style={{display: loading() ? "none" : "inline-block"}} style={{ display: loading() ? "none" : "inline-block" }}
> >
<MagnifyingGlassIcon <MagnifyingGlassIcon
fill="var(--c-on-primary)" fill="var(--c-on-primary)"
@ -154,7 +156,7 @@ export function Scans() {
</span> </span>
<span <span
class="absolute top-[1.35rem] left-2" class="absolute top-[1.35rem] left-2"
style={{display: loading() ? "inline-block" : "none"}} style={{ display: loading() ? "inline-block" : "none" }}
> >
<LoadingIcon <LoadingIcon
class="animate-spin" class="animate-spin"
@ -167,10 +169,28 @@ export function Scans() {
</span> </span>
</FilledButton> </FilledButton>
</div> </div>
<Show when={status() === LoadingStatus.Error}>
<p>
Error detectando escaneos: {error()}
</p>
</Show>
</div> </div>
</FilledCard> </FilledCard>
<ScansList scanData={scanData()} /> <ScansList scanData={scanData()} onSuccess={() => {
setConverted(true);
setScanData(null);
}}
/>
<Show when={converted()}>
<FilledCard>
<h1 class="py-2 px-4 font-medium text-xl mb-2">
Archivos convertidos con éxito
</h1>
</FilledCard>
</Show>
</div> </div>
</div> </div>
); );