Uecko/Presupuestador_web
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
David Arranz 2024-08-21 13:16:56 +02:00
parent b97f51206e
commit 474adf99c9
5 changed files with 110 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
client/src/app/quotes/components/QuotePDFPreview.tsx
View File

@ -14,14 +14,15 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
Skeleton, Skeleton,
} from "@/ui"; } from "@/ui";
import { useToast } from "@/ui/use-toast";
import { IListQuotes_Response_DTO } from "@shared/contexts"; import { IListQuotes_Response_DTO } from "@shared/contexts";
import { t } from "i18next"; import { t } from "i18next";
import { DownloadIcon, MoreVerticalIcon, PrinterIcon } from "lucide-react"; import { DownloadIcon, MoreVerticalIcon } from "lucide-react";
import printJS from "print-js"; import { useCallback, useMemo } from "react";
import { useMemo } from "react";
import { Trans } from "react-i18next"; import { Trans } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useQuotes } from "../hooks"; import { useQuotes } from "../hooks";
import { DownloadQuoteDialog } from "./DownloadQuoteDialog";
export const QuotePDFPreview = ({ export const QuotePDFPreview = ({
quote, quote,
@ -31,25 +32,26 @@ export const QuotePDFPreview = ({
className: string; className: string;
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const { useReport, useDownload } = useQuotes(); const { toast } = useToast();
const { useReport, getQuotePDFFilename, useDownloader } = useQuotes();
const { download, ...downloadProps } = useDownloader();
const { const {
cancelQuery,
data: reportData, data: reportData,
isLoading: reportIsLoading, isLoading: reportIsLoading,
isPending: reportIsPending, isPending: reportIsPending,
isFetching: reportIsFetching, isFetching: reportIsFetching,
} = useReport(quote?.id); } = useReport(quote?.id);
const {
download,
error: downloadError,
isFetching: downloadIsFetching,
isError: downloadIsError,
} = useDownload(quote?.id);
const file = useMemo(() => (reportData ? { data: reportData.data } : undefined), [reportData]); const file = useMemo(() => (reportData ? { data: reportData.data } : undefined), [reportData]);
const handleFinishDownload = useCallback(() => {
console.log("Download success!!");
toast({
description: t("quotes.downloading_dialog.toast_success"),
});
}, [toast]);
if (!quote) { if (!quote) {
return ( return (
<Card className={cn("overflow-hidden", className)}> <Card className={cn("overflow-hidden", className)}>
@ -75,82 +77,84 @@ export const QuotePDFPreview = ({
} }
return ( return (
<Card className={cn("overflow-hidden", className)}> <>
<CardHeader className='bg-muted/50'> <Card className={cn("overflow-hidden", className)}>
<CardTitle className='flex items-center gap-2 text-lg group'> <CardHeader className='bg-muted/50'>
{t("quotes.list.preview.quote")} <CardTitle className='flex items-center gap-2 text-lg group'>
{t("quotes.list.preview.quote")}
<div className='flex items-center gap-1 ml-auto'> <div className='flex items-center gap-1 ml-auto'>
<Button {/*<Button
size='sm' size='sm'
variant='outline' variant='outline'
className='h-8 gap-1' className='h-8 gap-1'
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
printJS({ printJS({
printable: reportData?.original, printable: reportData?.original,
type: "pdf", type: "pdf",
showModal: false, showModal: false,
modalMessage: "Cargando...", modalMessage: "Cargando...",
}); });
}} }}
> >
<PrinterIcon className='h-3.5 w-3.5' /> <PrinterIcon className='h-3.5 w-3.5' />
<span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'> <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
{t("common.print")} {t("common.print")}
</span> </span>
</Button> </Button>*/}
<Button <Button
size='sm' size='sm'
variant='outline' variant='outline'
className='h-8 gap-1' className='h-8 gap-1'
disabled={downloadIsFetching || downloadIsError} onClick={() => {
onClick={(e) => { download(quote.id, getQuotePDFFilename(quote));
download(); }}
}} >
> <DownloadIcon className='h-3.5 w-3.5' />
<DownloadIcon className='h-3.5 w-3.5' /> <span className='xl:sr-only 2xl:not-sr-only 2xl:whitespace-nowrap'>
<span className='xl:sr-only 2xl:not-sr-only 2xl:whitespace-nowrap'> {t("quotes.list.preview.download_quote")}
{t("quotes.list.preview.download_quote")} </span>
</span> </Button>
</Button> <DropdownMenu>
<DropdownMenu> <DropdownMenuTrigger asChild>
<DropdownMenuTrigger asChild> <Button size='icon' variant='outline' className='w-8 h-8'>
<Button size='icon' variant='outline' className='w-8 h-8'> <MoreVerticalIcon className='h-3.5 w-3.5' />
<MoreVerticalIcon className='h-3.5 w-3.5' /> <span className='sr-only'>
<span className='sr-only'> <Trans i18nKey={"common.more"} />
<Trans i18nKey={"common.more"} /> </span>
</span> </Button>
</Button> </DropdownMenuTrigger>
</DropdownMenuTrigger> <DropdownMenuContent align='end'>
<DropdownMenuContent align='end'> <DropdownMenuItem
<DropdownMenuItem onClick={(e) => {
onClick={(e) => { e.preventDefault();
e.preventDefault(); navigate(`/quotes/edit/${quote.id}`, { relative: "path" });
navigate(`/quotes/edit/${quote.id}`, { relative: "path" }); }}
}} >
> <Trans i18nKey={"common.edit"} />
<Trans i18nKey={"common.edit"} /> </DropdownMenuItem>
</DropdownMenuItem> <DropdownMenuItem>
<DropdownMenuItem> <Trans i18nKey={"common.duplicate"} />
<Trans i18nKey={"common.duplicate"} /> </DropdownMenuItem>
</DropdownMenuItem> <DropdownMenuSeparator />
<DropdownMenuSeparator /> <DropdownMenuItem>
<DropdownMenuItem> <Trans i18nKey={"common.archive"} />
<Trans i18nKey={"common.archive"} /> </DropdownMenuItem>
</DropdownMenuItem> </DropdownMenuContent>
</DropdownMenuContent> </DropdownMenu>
</DropdownMenu> </div>
</div> </CardTitle>
</CardTitle> <CardDescription className='grid grid-cols-1 gap-2 space-y-2'>
<CardDescription className='grid grid-cols-1 gap-2 space-y-2'> {quote?.reference}
{quote?.reference} {quote?.date.toString()}
{quote?.date.toString()} </CardDescription>
</CardDescription> </CardHeader>
</CardHeader> <CardContent className='py-4'>
<CardContent className='py-4'> <PDFViewer file={file} className='object-contain' />
<PDFViewer file={file} className='object-contain' /> </CardContent>
</CardContent> </Card>
</Card> <DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />
</>
); );
}; };

10
client/src/app/quotes/components/QuotesDataTable.tsx
View File

@ -30,7 +30,6 @@ import { t } from "i18next";
import { FilePenLineIcon, MoreVerticalIcon } from "lucide-react"; import { FilePenLineIcon, MoreVerticalIcon } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import useDownloader from "react-use-downloader";
import { useQuotes } from "../hooks"; import { useQuotes } from "../hooks";
import { DownloadQuoteDialog } from "./DownloadQuoteDialog"; import { DownloadQuoteDialog } from "./DownloadQuoteDialog";
import { QuotePDFPreview } from "./QuotePDFPreview"; import { QuotePDFPreview } from "./QuotePDFPreview";
@ -48,7 +47,7 @@ export const QuotesDataTable = ({
const [activeRow, setActiveRow] = useState<Row<IListQuotes_Response_DTO> | undefined>(undefined); const [activeRow, setActiveRow] = useState<Row<IListQuotes_Response_DTO> | undefined>(undefined);
const { useList, getQuotePDFFilename } = useQuotes(); const { useList, useDownloader, getQuotePDFFilename } = useQuotes();
const { data, isPending, isError, error } = useList({ const { data, isPending, isError, error } = useList({
pagination: { pagination: {
@ -159,20 +158,19 @@ export const QuotesDataTable = ({
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button size='icon' variant='outline' className='w-8 h-8'> <Button size='icon' variant='outline' className='w-8 h-8'>
<MoreVerticalIcon className='h-3.5 w-3.5' /> <MoreVerticalIcon className='h-3.5 w-3.5' />
<span className='sr-only'>More</span> <span className='sr-only'>{t("common.more")}</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align='end'> <DropdownMenuContent align='end'>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={(e) => { onClick={() => {
download(row.original.id, getQuotePDFFilename(row.original)); download(row.original.id, getQuotePDFFilename(row.original));
}} }}
> >
Download Download
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem>Trash</DropdownMenuItem> <DropdownMenuItem>{t("common.archive")}</DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>

12
client/src/app/quotes/hooks/useQuotes.tsx
View File

@ -1,6 +1,5 @@
import { UseListQueryResult, useCustom, useList, useOne, useSave } from "@/lib/hooks/useDataSource"; import { UseListQueryResult, useCustom, useList, useOne, useSave } from "@/lib/hooks/useDataSource";
import { import {
IDownloadPDFDataProviderResponse,
IFilterItemDataProviderParam, IFilterItemDataProviderParam,
IGetListDataProviderParams, IGetListDataProviderParams,
} from "@/lib/hooks/useDataSource/DataSource"; } from "@/lib/hooks/useDataSource/DataSource";
@ -178,9 +177,9 @@ export const useQuotes = () => {
getQuotePDFDownloadURL: (id: string) => `${dataSource.getApiUrl()}/quotes/${id}/report`, getQuotePDFDownloadURL: (id: string) => `${dataSource.getApiUrl()}/quotes/${id}/report`,
getQuotePDFFilename: (quote: IListQuotes_Response_DTO | IGetQuote_Response_DTO) => getQuotePDFFilename: (quote: IListQuotes_Response_DTO | IGetQuote_Response_DTO) =>
"filename-quote.pdf", `filename-quote.pdf`,
useDownload2: (id?: string, params?: UseQuotesReportParamsType) => { /*useDownload2: (id?: string, params?: UseQuotesReportParamsType) => {
const queryKey = useMemo( const queryKey = useMemo(
() => keys().data().resource("quotes").action("report").id(id).params().get(), () => keys().data().resource("quotes").action("report").id(id).params().get(),
[id] [id]
@ -220,20 +219,19 @@ export const useQuotes = () => {
}; };
return { download, error, isFetching, isError }; return { download, error, isFetching, isError };
}, },*/
useDownloader: () => { useDownloader: () => {
const auth = dataSource.getApiAuthorization(); const auth = dataSource.getApiAuthorization();
const downloader = useDownloader({ const downloader = useDownloader({
credentials: "include",
headers: { headers: {
Authorization: auth, Authorization: auth,
}, },
}); });
const download = (id: string, filename?: string) => { const download = (id: string, filename?: string) => {
console.log(actions.getQuotePDFDownloadURL(id)); const url = actions.getQuotePDFDownloadURL(id);
//return downloader.download(actions.getQuotePDFDownloadURL(id), filename ?? "ssaas"); return downloader.download(url, filename ?? "ssaas");
}; };
return { return {

2
client/src/components/DataTable/DataTable.tsx
View File

@ -118,7 +118,7 @@ export function DataTable<TData>({
data-state={row.getIsSelected() && "selected"} data-state={row.getIsSelected() && "selected"}
className={cn( className={cn(
row.getIsSelected() || activeRowIndex === row.index row.getIsSelected() || activeRowIndex === row.index
? "bg-accent cursor-pointer" ? "bg-accent cursor-pointer hover:bg-accent"
: "cursor-pointer", : "cursor-pointer",
rowClassName rowClassName
)} )}

12
client/src/lib/axios/setupInterceptors.ts
View File

@ -38,7 +38,6 @@ const onResponse = (response: AxiosResponse): AxiosResponse => {
const onResponseError = (error: AxiosError): Promise<AxiosError> => { const onResponseError = (error: AxiosError): Promise<AxiosError> => {
console.log("[response error]"); console.log("[response error]");
console.log(error);
if (error.response) { if (error.response) {
// La respuesta fue hecha y el servidor respondió con un código de estado // La respuesta fue hecha y el servidor respondió con un código de estado
@ -115,9 +114,14 @@ const onResponseError = (error: AxiosError): Promise<AxiosError> => {
console.log("2 => El servidor no respondió"); console.log("2 => El servidor no respondió");
console.error(error); console.error(error);
} else { } else {
// Algo paso al preparar la petición que lanzo un Error if (error.code === "ERR_CANCELED") {
console.log("3 => Error desconocido"); // La petición fue hecha pero se ha cancelado
console.error(error); console.log("3 => Petición cancelada");
} else {
// Algo paso al preparar la petición que lanzo un Error
console.log("4 => Error desconocido");
console.error(error);
}
} }
console.groupEnd(); console.groupEnd();
return Promise.reject(error); return Promise.reject(error);