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

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

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>
</> </>

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";
@ -25,12 +25,14 @@ export type ScanResult =
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())
@ -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>
); );