From 938f12827139894d934a9b0e69c154c860ea5d1e Mon Sep 17 00:00:00 2001 From: "MSI\\2Fi" Date: Wed, 23 Apr 2025 17:26:53 +0800 Subject: [PATCH] 1. Add isTimesheetAdmendment props to project select component, to show all projects when using timesheet admendment, to limit the projects when using timesheet input 2. fallback search resulr from column sorting feature updates 3. Add selected project display in Project cash flow page --- src/components/MailSetting/MailSetting.tsx | 8 +- .../ProjectCashFlow/ProjectCashFlow.tsx | 19 +++- .../ProjectSearch/ProjectSearchWrapper.tsx | 5 +- .../SearchResults/SearchResults.tsx | 106 ++++++++---------- .../TimesheetTable/ProjectSelect.tsx | 31 ++--- .../TimesheetTable/TimesheetEditModal.tsx | 1 + 6 files changed, 92 insertions(+), 78 deletions(-) diff --git a/src/components/MailSetting/MailSetting.tsx b/src/components/MailSetting/MailSetting.tsx index 6e19c59..e11495b 100644 --- a/src/components/MailSetting/MailSetting.tsx +++ b/src/components/MailSetting/MailSetting.tsx @@ -95,10 +95,10 @@ const MailSetting: React.FC = ({ try { // msg = "testEveryone" // await testEveryone() - msg = "test7th" - await test7th() - // msg = "test15th" - // await test15th() + // msg = "test7th" + // await test7th() + msg = "test15th" + await test15th() } catch (error) { console.log(error) console.log(msg) diff --git a/src/components/ProjectCashFlow/ProjectCashFlow.tsx b/src/components/ProjectCashFlow/ProjectCashFlow.tsx index 3d16230..08129f6 100644 --- a/src/components/ProjectCashFlow/ProjectCashFlow.tsx +++ b/src/components/ProjectCashFlow/ProjectCashFlow.tsx @@ -5,7 +5,7 @@ import { useState, useEffect, useMemo } from "react"; import Paper from "@mui/material/Paper"; import { TFunction } from "i18next"; import { useTranslation } from "react-i18next"; -import { Card, CardHeader } from "@mui/material"; +import { Card, CardContent, CardHeader } from "@mui/material"; import CustomSearchForm from "../CustomSearchForm/CustomSearchForm"; import CustomDatagrid from "../CustomDatagrid/CustomDatagrid"; import ReactApexChart from "react-apexcharts"; @@ -26,6 +26,7 @@ import dayjs from 'dayjs'; import ProjectTotalFee from "../CreateInvoice_forGen/ProjectTotalFee"; import Typography from "@mui/material/Typography"; import { useSearchParams } from 'next/navigation'; +import { ResetTvOutlined } from "@mui/icons-material"; interface Props { projects: CashFlow[]; @@ -64,6 +65,7 @@ const ProjectCashFlow: React.FC = () => { const [monthlyAnticipateExpenditureList, setMonthlyAnticipateExpenditureList]: any[] = React.useState([0,0,0,0,0,0,0,0,0,0,0,0]); const [ledgerData, setLedgerData]: any[] = React.useState([]); const [isInitializing, setIsInitializing] = useState(true); + const [projectInfo, setProjectInfo]: any[] = useState([]) const [cashFlowYear, setCashFlowYear]: any[] = React.useState( todayDate.getFullYear(), ); @@ -86,6 +88,11 @@ const ProjectCashFlow: React.FC = () => { ); const projectIdList = selectedRowsData.map((row: any) => row.id); setSelectedProjectIdList(projectIdList); + console.log(projectData) + setProjectInfo(projectData.filter((result:any)=> { + // console.log("Checking ID:", result.id, "against list:", projectIdList); + return projectIdList.includes(result.id) + })) } }; @@ -240,7 +247,6 @@ const ProjectCashFlow: React.FC = () => { fetchReceivableAndExpenditureData(); fetchAnticipateData(); fetchProjectCashFlowLedger(); - }, [cashFlowYear,selectedProjectIdList]); useEffect(() => { @@ -829,6 +835,15 @@ const ProjectCashFlow: React.FC = () => { onRowSelectionModelChange={handleSelectionChange} rowSelectionModel={selectionModel} /> + + + + + { projectInfo[0]?.projectCode && `${projectInfo[0]?.projectCode} - ${projectInfo[0]?.projectName}`} + + + +
diff --git a/src/components/ProjectSearch/ProjectSearchWrapper.tsx b/src/components/ProjectSearch/ProjectSearchWrapper.tsx index d1d7bed..f5653a2 100644 --- a/src/components/ProjectSearch/ProjectSearchWrapper.tsx +++ b/src/components/ProjectSearch/ProjectSearchWrapper.tsx @@ -28,7 +28,10 @@ const ProjectSearchWrapper: React.FC & SubComponents = async () => { let filteredProjects = projects; if (!isViewAllProjectRight) { - filteredProjects = projects.filter((project) => project.teamId === teamId || project.team === "ST"); + filteredProjects = projects.filter((project) => project.teamId === teamId ); + if (teamId == 1){ + filteredProjects = projects.filter((project) => project.teamId === teamId || project.team === "ST"); + } } return ( diff --git a/src/components/SearchResults/SearchResults.tsx b/src/components/SearchResults/SearchResults.tsx index 0aee1ab..adc7e12 100644 --- a/src/components/SearchResults/SearchResults.tsx +++ b/src/components/SearchResults/SearchResults.tsx @@ -158,50 +158,50 @@ function SearchResults({ return column.underline ?? "always"; }; - type OrderProps = Record - const [sortedItems, setSortedItems] = useState(items) - const [orderProps, setOrderProps] = useState(() => { - if (items.length === 0) { - return {} as OrderProps - } - return Object.keys(sortedItems[0]).reduce((acc, key) => { - if (key === "deleted" || key === "id") return acc - acc[key as keyof T] = false; - return acc; - }, {} as OrderProps); - }); - const changeOrder = useCallback((key: keyof T) => { - // preserve all column sorting - // setOrderProps( - // (prev) => ({ - // [...prev]: false, - // [key]: !prev[key] - // }) - // ) - // only sort 1 column - setOrderProps( - (prev) => { - const newOrderProps = Object.keys(prev).reduce((acc, currKey) => { - acc[currKey as keyof T] = currKey === key ? !prev[currKey as keyof T] : false; - return acc; - }, {} as OrderProps); - return newOrderProps; - } - ) - }, []) - const sortingItems = useCallback( - (key: keyof T) => { - // true === asc - // false === desc - console.log(orderProps) - if (orderProps[key]) { - return orderBy(sortedItems, key, 'asc') - } else { - return orderBy(sortedItems, key, 'desc') - } - } - , [sortedItems, orderProps] - ) + // type OrderProps = Record + // const [sortedItems, setSortedItems] = useState(items) + // const [orderProps, setOrderProps] = useState(() => { + // if (items.length === 0) { + // return {} as OrderProps + // } + // return Object.keys(sortedItems[0]).reduce((acc, key) => { + // if (key === "deleted" || key === "id") return acc + // acc[key as keyof T] = false; + // return acc; + // }, {} as OrderProps); + // }); + // const changeOrder = useCallback((key: keyof T) => { + // // preserve all column sorting + // // setOrderProps( + // // (prev) => ({ + // // [...prev]: false, + // // [key]: !prev[key] + // // }) + // // ) + // // only sort 1 column + // setOrderProps( + // (prev) => { + // const newOrderProps = Object.keys(prev).reduce((acc, currKey) => { + // acc[currKey as keyof T] = currKey === key ? !prev[currKey as keyof T] : false; + // return acc; + // }, {} as OrderProps); + // return newOrderProps; + // } + // ) + // }, []) + // const sortingItems = useCallback( + // (key: keyof T) => { + // // true === asc + // // false === desc + // console.log(orderProps) + // if (orderProps[key]) { + // return orderBy(sortedItems, key, 'asc') + // } else { + // return orderBy(sortedItems, key, 'desc') + // } + // } + // , [sortedItems, orderProps] + // ) const table = ( <> @@ -209,25 +209,15 @@ function SearchResults({ {columns.filter(item => item.isHidden !== true).map((column, idx) => ( - { - changeOrder(column.name) - setSortedItems(sortingItems(column.name)) - }} - > + {column?.type === "money" ?
{column.label}
: column.label} - {(() => { - const isAscending = orderProps[column.name]; - if (isAscending === undefined) return undefined; - return isAscending ? : ; - })()} + ))} - {sortedItems + {items .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((item) => { return ( @@ -280,7 +270,7 @@ function SearchResults({ { switch (groupName) { @@ -73,6 +75,7 @@ const AutocompleteProjectSelect: React.FC = ({ multiple, leaveTypes, includeLeaves, + isTimesheetAdmendment }) => { const { t } = useTranslation("home"); const allFilteredProjects = useMemo(() => { @@ -97,18 +100,20 @@ console.log(assignedProjects) label: `${p.code} - ${p.name}`, group: "assigned", })), - // ...(includeLeaves && leaveTypes - // ? leaveTypes.map((l) => ({ - // value: `leave-${l.id}`, - // label: t(l.name), - // group: "leaves", - // })) - // : []), - // ...nonAssignedProjects.map((p) => ({ - // value: p.id, - // label: `${p.code} - ${p.name}`, - // group: assignedProjects.length === 0 ? "all-projects" : "non-assigned", - // })), + ...(includeLeaves && leaveTypes + ? leaveTypes.map((l) => ({ + value: `leave-${l.id}`, + label: t(l.name), + group: "leaves", + })) + : []), + ...(isTimesheetAdmendment + ? nonAssignedProjects.map((p) => ({ + value: p.id, + label: `${p.code} - ${p.name}`, + group: assignedProjects.length === 0 ? "all-projects" : "non-assigned", + })) + : []), ]; }, [assignedProjects, includeLeaves, leaveTypes, nonAssignedProjects, t]); diff --git a/src/components/TimesheetTable/TimesheetEditModal.tsx b/src/components/TimesheetTable/TimesheetEditModal.tsx index 1becac6..bceccb3 100644 --- a/src/components/TimesheetTable/TimesheetEditModal.tsx +++ b/src/components/TimesheetTable/TimesheetEditModal.tsx @@ -177,6 +177,7 @@ const TimesheetEditModal: React.FC = ({ setValue("taskGroupId", firstTaskGroup?.value); setValue("taskId", undefined); }} + isTimesheetAdmendment={true} /> )} rules={{ deps: ["taskGroupId", "taskId"] }}