From 2519e25c7e67af83ac0b4db8b450de6d11ba44f2 Mon Sep 17 00:00:00 2001 From: "MSI\\User" Date: Thu, 29 Aug 2024 12:05:38 +0800 Subject: [PATCH] added search function in resource consumption and coming milestones --- .../ProgressByClient/ProgressByClient.tsx | 29 +++++++++++++++-- .../ProgressByTeam/ProgressByTeam.tsx | 31 +++++++++++++++++-- .../ProjectCashFlow/ProjectCashFlow.tsx | 9 ------ .../ProjectResourceConsumptionRanking.tsx | 31 +++++++++++++++++-- 4 files changed, 84 insertions(+), 16 deletions(-) diff --git a/src/components/ProgressByClient/ProgressByClient.tsx b/src/components/ProgressByClient/ProgressByClient.tsx index 3c9f3c0..b86c879 100644 --- a/src/components/ProgressByClient/ProgressByClient.tsx +++ b/src/components/ProgressByClient/ProgressByClient.tsx @@ -25,6 +25,9 @@ import { useSearchParams } from 'next/navigation'; import { fetchAllClientSubsidiaryProjects} from "@/app/api/clientprojects/actions"; // const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); +type SearchProjectQuery = Partial>; +type SearchProjectParamNames = keyof SearchProjectQuery; + interface Props { // clientSubsidiaryProjectResult: ClientSubsidiaryProjectResult[]; } @@ -51,6 +54,7 @@ const ProgressByClient: React.FC = () => { React.useState("-"); const [actualManhourSpent, setActualManhourSpent]: any = React.useState("-"); const [remainedManhour, setRemainedManhour]: any = React.useState("-"); + const [filteredClientSubsidiaryProjectResult, setFilteredClientSubsidiaryProjectResult]:any[] = useState([]); const [lastUpdate, setLastUpdate]: any = React.useState("-"); const [dropdownDemo, setDropdownDemo] = useState(""); const [dateDemo, setDateDemo] = useState(null); @@ -100,6 +104,7 @@ const ProgressByClient: React.FC = () => { Number(customerId),tableSorting,Number(0)) console.log(clickResult) setClientSubsidiaryProjectResult(clickResult); + setFilteredClientSubsidiaryProjectResult(clickResult); } else { const clickResult = await fetchAllClientSubsidiaryProjects( Number(customerId), @@ -149,7 +154,13 @@ const ProgressByClient: React.FC = () => { fetchData() }, [customerId,subsidiaryId,tableSorting]); - + const projectSearchCriteria: Criterion[] = useMemo( + () => [ + { label: t("Project Code"), paramName: "projectCode", type: "text" }, + { label: t("Project Name"), paramName: "projectName", type: "text" }, + ], + [t], + ); const rows2 = [ { @@ -623,11 +634,25 @@ const ProgressByClient: React.FC = () => { className="text-slate-500" title= {t("Resource Consumption and Coming Milestones")} /> + {clientSubsidiaryProjectResult.length > 0 && ( + { + setFilteredClientSubsidiaryProjectResult( + clientSubsidiaryProjectResult.filter( + (cp:any) => + cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) && + cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) + ), + ); + }} + /> + )}
import('react-apexcharts'), { ssr: false }); +type SearchProjectQuery = Partial>; +type SearchProjectParamNames = keyof SearchProjectQuery; + const ProgressByTeam: React.FC = () => { const searchParams = useSearchParams(); const teamLeadId = searchParams.get('teamLeadId'); @@ -51,6 +54,7 @@ const ProgressByTeam: React.FC = () => { const [chartProjectName, setChartProjectName]:any[] = useState([]); const [chartProjectDisplayName, setChartProjectDisplayName]:any[] = useState([]); const [chartProjectBudgetedHour, setChartProjectBudgetedHour]:any[] = useState([]); + const [filteredTeamProjectResult, setFilteredTeamProjectResult]:any[] = useState([]); const [chartProjectSpentHour, setChartProjectSpentHour]:any[] = useState([]); const [chartManhourConsumptionPercentage, setChartManhourConsumptionPercentage]:any[] = useState([]); const color = ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b", @@ -89,6 +93,14 @@ const ProgressByTeam: React.FC = () => { const recordsPerPage = 10; const [tableSorting, setTableSorting] = useState('ProjectName'); + const projectSearchCriteria: Criterion[] = useMemo( + () => [ + { label: t("Project Code"), paramName: "projectCode", type: "text" }, + { label: t("Project Name"), paramName: "projectName", type: "text" }, + ], + [t], + ); + const fetchData = async () => { console.log(tableSorting) if (teamLeadId) { @@ -97,6 +109,7 @@ const ProgressByTeam: React.FC = () => { Number(teamLeadId),tableSorting) console.log(clickResult) setTeamProjectResult(clickResult); + setFilteredTeamProjectResult(clickResult); } catch (error) { console.error('Error fetching team projects:', error); } @@ -734,11 +747,25 @@ const ProgressByTeam: React.FC = () => { className="text-slate-500" title= {t("Resource Consumption and Coming Milestones")} /> + {teamProjectResult.length > 0 && ( + { + setFilteredTeamProjectResult( + teamProjectResult.filter( + (cp:any) => + cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) && + cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) + ), + ); + }} + /> + )}
{ if (!isInitializing) { setSelectionModel(newSelectionModel); - console.log(newSelectionModel) - console.log(projectData) const selectedRowsData = projectData.filter((row: any) => newSelectionModel.includes(row.id) ); const projectIdList = selectedRowsData.map((row: any) => row.id); - console.log(selectedRowsData) setSelectedProjectIdList(projectIdList); } }; const fetchData = async () => { const cashFlowProject = await fetchProjectsCashFlow(); - console.log(cashFlowProject) setProjectData(cashFlowProject) setFilteredResult(cashFlowProject) } @@ -129,7 +125,6 @@ const ProjectCashFlow: React.FC = () => { } const fetchReceivableAndExpenditureData = async () => { - console.log("s2") if (selectedProjectIdList.length === 0) { setReceivedPercentage(0) setInvoicedPercentage(0) @@ -764,15 +759,12 @@ const ProjectCashFlow: React.FC = () => { ); function isDateInRange(dateToCheck: string, startDate: string, endDate: string): boolean { - console.log(startDate) - console.log(endDate) if (!startDate || !endDate) { return false; } const dateToCheckObj = new Date(dateToCheck); const startDateObj = new Date(startDate); const endDateObj = new Date(endDate); - console.log(dateToCheckObj) return dateToCheckObj >= startDateObj && dateToCheckObj <= endDateObj; } @@ -787,7 +779,6 @@ const ProjectCashFlow: React.FC = () => { { - console.log(query) setFilteredResult( projectData.filter( (cp:any) => diff --git a/src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx b/src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx index 34c40f1..80f15be 100644 --- a/src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx +++ b/src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx @@ -19,10 +19,11 @@ import SearchBox, { Criterion } from "../SearchBox"; import ProgressByTeamSearch from "@/components/ProgressByTeamSearch"; import { Suspense } from "react"; import { useSearchParams } from 'next/navigation'; -import { fetchAllTeamProjects, TeamProjectResult, fetchTeamProjects, fetchAllTeamConsumption, fetchAllTeamConsumptionColorOrder} from "@/app/api/teamprojects/actions"; +import { fetchAllTeamProjects, TeamProjectResult, ClientSubsidiaryProjectResult, fetchTeamProjects, fetchAllTeamConsumption, fetchAllTeamConsumptionColorOrder} from "@/app/api/teamprojects/actions"; import Typography from "@mui/material/Typography"; // const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); - +type SearchProjectQuery = Partial>; +type SearchProjectParamNames = keyof SearchProjectQuery; interface Props { projects: TeamProjectResult[]; } @@ -44,6 +45,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => { const [colorArray, setColorArray]: any[] = useState([]); const [selectionModel, setSelectionModel]: any[] = React.useState([]); const [pieChartColor, setPieChartColor]: any[] = React.useState([]); + const [filteredTeamProjectResult, setFilteredTeamProjectResult]:any[] = useState([]); const [totalSpentPercentage, setTotalSpentPercentage]: any = React.useState(); const [projectBudgetManhour, setProjectBudgetManhour]: any = React.useState("-"); @@ -117,6 +119,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => { selectedTeamIdList,tableSorting) console.log(clickResult) setTeamProjectResult(clickResult); + setFilteredTeamProjectResult(clickResult); setTeamProjectColorOrder(colorOrder); } catch (error) { console.error('Error fetching team consumption:', error); @@ -124,6 +127,14 @@ const ProjectResourceConsumptionRanking: React.FC = () => { } } + const projectSearchCriteria: Criterion[] = useMemo( + () => [ + { label: t("Project Code"), paramName: "projectCode", type: "text" }, + { label: t("Project Name"), paramName: "projectName", type: "text" }, + ], + [t], + ); + const searchCriteria: Criterion[] = useMemo( () => [ { label: t("Team Code"), paramName: "teamCode", type: "text" }, @@ -854,11 +865,25 @@ const ProjectResourceConsumptionRanking: React.FC = () => { className="text-slate-500" title={t("Resource Consumption and Coming Milestones")} /> + {teamProjectResult.length > 0 && ( + { + setFilteredTeamProjectResult( + teamProjectResult.filter( + (cp:any) => + cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) && + cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) + ), + ); + }} + /> + )}