From 6a6822ce167486a9197e0671f23961b455be58bb Mon Sep 17 00:00:00 2001 From: "MSI\\2Fi" Date: Wed, 14 Aug 2024 17:44:01 +0800 Subject: [PATCH] Add Loading when waiting for report download --- .../CostAndExpenseReport.tsx | 19 ++++++++++++++--- .../CostandExpenseReportGen.tsx | 21 +++++++++++++++---- .../CostandExpenseReportGenLoading.tsx | 4 ++-- .../FinancialStatusReportGen.tsx | 19 +++++++++++++++-- 4 files changed, 52 insertions(+), 11 deletions(-) diff --git a/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx b/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx index 310df56..a191dad 100644 --- a/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx +++ b/src/components/CostAndExpenseReport/CostAndExpenseReport.tsx @@ -2,12 +2,13 @@ import { CostAndExpenseReportFilter, CostAndExpenseReportRequest } from "@/app/api/reports"; import { useTranslation } from "react-i18next"; import SearchBox, { Criterion } from "../SearchBox"; -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import { TeamResult } from "@/app/api/team"; import { Customer } from "@/app/api/customer"; import { Subsidiary } from "@/app/api/subsidiary"; import { fetchCostAndExpenseReport } from "@/app/api/reports/actions"; import { downloadFile } from "@/app/utils/commonUtil"; +import CostAndExpenseReportLoading from "./CostAndExpenseReportLoading"; interface Props { team: TeamResult[]; @@ -16,10 +17,14 @@ interface Props { needAll: boolean | undefined; } +interface SubComponents { + Loading: typeof CostAndExpenseReportLoading; +} + type SearchQuery = Partial>; type SearchParamNames = keyof SearchQuery; -const CostAndExpenseReport: React.FC = ({ team, customer, subsidiary, needAll }) => { +const CostAndExpenseReport: React.FC & SubComponents = ({ team, customer, subsidiary, needAll }) => { const { t } = useTranslation("report"); const teamCombo = team.map((t) => `${t.code} - ${t.name}`); // const custCombo = customer.map(c => ({label: `${c.name} - ${c.code}`, value: c.id})) @@ -62,12 +67,17 @@ const CostAndExpenseReport: React.FC = ({ team, customer, subsidiary, nee [t] ); + const [loading, setLoading] = useState(false); + return ( <> + {loading && } + {!loading && { + setLoading(true); let index = 0 let postData: CostAndExpenseReportRequest = { teamId: null, @@ -95,10 +105,13 @@ const CostAndExpenseReport: React.FC = ({ team, customer, subsidiary, nee if (response) { downloadFile(new Uint8Array(response.blobValue), response.filename!!) } + setLoading(false); }} - /> + />} ); }; +CostAndExpenseReport.Loading = CostAndExpenseReportLoading + export default CostAndExpenseReport; diff --git a/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGen.tsx b/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGen.tsx index a338fc3..70158d8 100644 --- a/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGen.tsx +++ b/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGen.tsx @@ -4,14 +4,20 @@ import React, { useMemo, useState } from "react"; import SearchBox, { Criterion } from "../ReportSearchBox4"; import { useTranslation } from "react-i18next"; import { CostandExpense } from "@/app/api/report4"; +import { CostandExpenseReportGenLoading } from "./CostandExpenseReportGenLoading" interface Props { projects: CostandExpense[]; } + +interface SubComponents{ + Loading: typeof CostandExpenseReportGenLoading +} + type SearchQuery = Partial>; type SearchParamNames = keyof SearchQuery; -const ProgressByClientSearch: React.FC = ({ projects }) => { +const CostandExpenseReportGen: React.FC & SubComponents = ({ projects }) => { const { t } = useTranslation("projects"); const searchCriteria: Criterion[] = useMemo( @@ -29,17 +35,24 @@ const ProgressByClientSearch: React.FC = ({ projects }) => { [t], ); + const [loading, setLoading] = React.useState(false); + return ( <> + {loading && } + {!loading && { - console.log(query); + setLoading(true) + // console.log(query); }} - /> + />} {/* */} ); }; -export default ProgressByClientSearch; +CostandExpenseReportGen.Loading = CostandExpenseReportGenLoading + +export default CostandExpenseReportGen; diff --git a/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGenLoading.tsx b/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGenLoading.tsx index 9b0341d..1753d1c 100644 --- a/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGenLoading.tsx +++ b/src/components/Report/CostandExpenseReportGen/CostandExpenseReportGenLoading.tsx @@ -6,7 +6,7 @@ import Stack from "@mui/material/Stack"; import React from "react"; // Can make this nicer -export const DelayReportGenLoading: React.FC = () => { +export const CostandExpenseReportGenLoading: React.FC = () => { return ( <> @@ -38,4 +38,4 @@ export const DelayReportGenLoading: React.FC = () => { ); }; -export default DelayReportGenLoading; +export default CostandExpenseReportGenLoading; diff --git a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx b/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx index 27c9a01..2a4c71e 100644 --- a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx +++ b/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx @@ -10,16 +10,23 @@ import { fetchAllClientSubsidiaryProjects } from "@/app/api/clientprojects/actio import { fetchProjectsFinancialStatusReport } from "@/app/api/reporte1/action"; import { downloadFile } from "@/app/utils/commonUtil"; import { SessionStaff } from "@/config/authConfig"; +import FinancialStatusReportGenLoading from "./FinancialStatusReportGenLoading"; //import { DownloadReportButton } from './DownloadReportButton'; interface Props { projects: FinancialStatus[]; teamCombo : TeamCombo[]; userStaff: SessionStaff; } + + +interface SubComponents { + Loading: typeof FinancialStatusReportGenLoading; +} + type SearchQuery = Partial>; type SearchParamNames = keyof SearchQuery; -const GenFinancialStatusReport: React.FC = ({ projects, teamCombo, userStaff }) => { +const GenFinancialStatusReport: React.FC & SubComponents = ({ projects, teamCombo, userStaff }) => { const { t } = useTranslation("projects"); const combo = teamCombo.map(combo => {return `${combo.code} - ${combo.name}`}) @@ -37,11 +44,16 @@ const GenFinancialStatusReport: React.FC = ({ projects, teamCombo, userSt [t], ); + const [loading, setLoading] = useState(false); + return ( <> + {loading && } + {!loading && { + setLoading(true) if (query.code.length > 0 && query.code.toLocaleLowerCase() !== "all") { const projectIndex = teamCombo.findIndex((project) => `${project.code} - ${project.name}` === query.code) console.log(teamCombo[projectIndex].id) @@ -56,12 +68,15 @@ const GenFinancialStatusReport: React.FC = ({ projects, teamCombo, userSt downloadFile(new Uint8Array(response.blobValue), response.filename!!) } } + setLoading(false) }} formType="download" - /> + />} {/* */} ); }; +GenFinancialStatusReport.Loading = FinancialStatusReportGenLoading + export default GenFinancialStatusReport;