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

master
Araozu 2023-11-21 14:35:23 -05:00
parent 9fee445ef9
commit 1b7c9591ca
2 changed files with 40 additions and 12 deletions

View File

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

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