From 6e3935f7d34f1833d387f1587e831aaa8bc45022 Mon Sep 17 00:00:00 2001 From: "Mac\\David" Date: Thu, 27 Jun 2024 16:46:20 +0800 Subject: [PATCH] update --- .../CustomDatagrid/CustomDatagrid.tsx | 4 + .../ProgressByClient/ProgressByClient.tsx | 17 ++- .../ProgressByTeam/ProgressByTeam.tsx | 110 +++++++++++++----- .../StaffUtilization/StaffUtilization.tsx | 7 +- 4 files changed, 106 insertions(+), 32 deletions(-) diff --git a/src/components/CustomDatagrid/CustomDatagrid.tsx b/src/components/CustomDatagrid/CustomDatagrid.tsx index 83f395d..344c3aa 100644 --- a/src/components/CustomDatagrid/CustomDatagrid.tsx +++ b/src/components/CustomDatagrid/CustomDatagrid.tsx @@ -197,6 +197,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + getRowHeight={() => 'auto'} onRowClick={onRowClick} checkboxSelection={checkboxSelection} onRowSelectionModelChange={onRowSelectionModelChange} @@ -229,6 +230,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + getRowHeight={() => 'auto'} onRowClick={onRowClick} checkboxSelection={checkboxSelection} onRowSelectionModelChange={onRowSelectionModelChange} @@ -261,6 +263,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + getRowHeight={() => 'auto'} onRowClick={onRowClick} checkboxSelection={checkboxSelection} onRowSelectionModelChange={onRowSelectionModelChange} @@ -294,6 +297,7 @@ const CustomDatagrid: React.FC = ({ rows={rowsWithDefaultValues} columns={modifiedColumns} editMode="row" + getRowHeight={() => 'auto'} onRowClick={onRowClick} style={{ marginRight: 0 }} checkboxSelection={checkboxSelection} diff --git a/src/components/ProgressByClient/ProgressByClient.tsx b/src/components/ProgressByClient/ProgressByClient.tsx index ed23c8d..c86f3a2 100644 --- a/src/components/ProgressByClient/ProgressByClient.tsx +++ b/src/components/ProgressByClient/ProgressByClient.tsx @@ -246,7 +246,22 @@ const ProgressByClient: React.FC = () => { id: "expectedStage", field: "expectedStage", headerName: "Expected Stage", - minWidth: 300 + minWidth: 300, + renderCell: (params: any) => { + if (params.row.expectedStage != null){ + const expectedStage = params.row.expectedStage; + const lines = expectedStage.split(",").map((line:any, index:any) => ( + + {line.trim()} +
+ + )); + return
{lines}
; + } else { + return
-
; + } + + }, }, { id: "budgetedManhour", diff --git a/src/components/ProgressByTeam/ProgressByTeam.tsx b/src/components/ProgressByTeam/ProgressByTeam.tsx index efa2318..1743a58 100644 --- a/src/components/ProgressByTeam/ProgressByTeam.tsx +++ b/src/components/ProgressByTeam/ProgressByTeam.tsx @@ -76,6 +76,11 @@ const ProgressByTeam: React.FC = () => { "#d4feed", "#0ab2ff", "#ff88a2", "#4fda21", "#cefb2f", "#d1fef0", "#04afff", "#ff859e", "#4bdd15", "#ccfb2b"]; const [teamProjectResult, setTeamProjectResult]:any[] = useState([]); + const [currentPageProjectList, setCurrentPageProjectList]: any[] = React.useState([]); + const [currentPagePercentage, setCurrentPagePercentage]: any[] = React.useState([]); + const [currentPageColor, setCurrentPageColor]: any[] = React.useState([]); + const [currentPage, setCurrentPage] = useState(1); + const recordsPerPage = 10; const fetchData = async () => { if (teamLeadId) { @@ -277,7 +282,22 @@ const ProgressByTeam: React.FC = () => { id: "expectedStage", field: "expectedStage", headerName: "Expected Stage", - minWidth: 300 + minWidth: 300, + renderCell: (params: any) => { + if (params.row.expectedStage != null){ + const expectedStage = params.row.expectedStage; + const lines = expectedStage.split(",").map((line:any, index:any) => ( + + {line.trim()} +
+ + )); + return
{lines}
; + } else { + return
-
; + } + + }, }, { id: "budgetedManhour", @@ -446,33 +466,9 @@ const ProgressByTeam: React.FC = () => { }, series: [{ name: "Project Resource Consumption Percentage", - data: chartManhourConsumptionPercentage, + data: currentPagePercentage, },], - colors: ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b", - "#f58a9b", "#8ef4d1", "#92caf9", "#a798f9", "#fad287", - "#f595a6", "#88f1cc", "#9dcff5", "#a39bf5", "#f8de83", - "#f5a0b1", "#82eec7", "#a8d4f1", "#9f9ef1", "#f6ea7f", - "#f5abb4", "#7cebca", "#b3d9ed", "#9ba1ed", "#f4f67b", - "#f5b6b7", "#76e8cd", "#bed6e9", "#97a4e9", "#f2fa77", - "#f5c1ba", "#70e5d0", "#c9d3e5", "#93a7e5", "#f0fe73", - "#f5ccbd", "#6ae2d3", "#d4d0e1", "#8faae1", "#eefe6f", - "#f5d7c0", "#64dfd6", "#dfc5dd", "#8badd5", "#ecfe6b", - "#f5e2c3", "#5edcd9", "#eabada", "#87b0c9", "#eafc67", - "#f5edc6", "#58d9dc", "#f5afd6", "#83b3bd", "#e8fc63", - "#f5f8c9", "#52d6df", "#ffacd2", "#7fb6b1", "#e6fc5f", - "#f5ffcc", "#4cd3e2", "#ffa9ce", "#7bb9a5", "#e4fc5b", - "#f2ffcf", "#46d0e5", "#ffa6ca", "#77bc99", "#e2fc57", - "#efffd2", "#40cde8", "#ffa3c6", "#73bf8d", "#e0fc53", - "#ecffd5", "#3acaeb", "#ffa0c2", "#6fc281", "#defb4f", - "#e9ffd8", "#34c7ee", "#ff9dbe", "#6bc575", "#dcfb4b", - "#e6ffdb", "#2ec4f1", "#ff9aba", "#67c869", "#dafb47", - "#e3ffde", "#28c1f4", "#ff97b6", "#63cb5d", "#d8fb43", - "#e0ffe1", "#22bef7", "#ff94b2", "#5fce51", "#d6fb3f", - "#ddfee4", "#1cbbfa", "#ff91ae", "#5bd145", "#d4fb3b", - "#dafee7", "#16b8fd", "#ff8eaa", "#57d439", "#d2fb37", - "#d7feea", "#10b5ff", "#ff8ba6", "#53d72d", "#d0fb33", - "#d4feed", "#0ab2ff", "#ff88a2", "#4fda21", "#cefb2f", - "#d1fef0", "#04afff", "#ff859e", "#4bdd15", "#ccfb2b"], + colors: currentPageColor, plotOptions: { bar: { horizontal: true, @@ -483,7 +479,7 @@ const ProgressByTeam: React.FC = () => { enabled: false, }, xaxis: { - categories: chartProjectName, + categories: currentPageProjectList, }, yaxis: { title: { @@ -563,6 +559,32 @@ const ProgressByTeam: React.FC = () => { } }; + const startIndex = (currentPage - 1) * recordsPerPage; + const endIndex = startIndex + recordsPerPage; + useEffect(() => { + console.log(chartManhourConsumptionPercentage) + const currentPageProjectData = chartProjectName.slice(startIndex, endIndex) + const currentPageData = chartManhourConsumptionPercentage.slice(startIndex, endIndex); + const colorArray = color.slice(startIndex, endIndex); + console.log(currentPage) + console.log(Math.ceil(chartManhourConsumptionPercentage.length / recordsPerPage)) + setCurrentPageProjectList(currentPageProjectData) + setCurrentPagePercentage(currentPageData) + setCurrentPageColor(colorArray) + }, [chartManhourConsumptionPercentage,currentPage]); + + const handlePrevPage = () => { + if (currentPage > 1) { + setCurrentPage(currentPage - 1); + } + }; + + const handleNextPage = () => { + if (endIndex < chartManhourConsumptionPercentage.length) { + setCurrentPage(currentPage + 1); + } + }; + const applySearch = (data: any) => { console.log(data); setSearchCriteria(data); @@ -582,6 +604,38 @@ const ProgressByTeam: React.FC = () => { type="bar" height={350} /> +
+ {currentPage === 1 && ( + + )} + {currentPage !== 1 && ( + + )} + {endIndex >= chartManhourConsumptionPercentage.length && ( + + )} + {endIndex < chartManhourConsumptionPercentage.length && ( + + )} + Page  + {chartManhourConsumptionPercentage.length === 0 && ( + 0 + )} + {chartManhourConsumptionPercentage.length > 0 && ( + currentPage + )} +  of  + {Math.ceil(chartManhourConsumptionPercentage.length / recordsPerPage)} + +
{/*

Stage Deadline

diff --git a/src/components/StaffUtilization/StaffUtilization.tsx b/src/components/StaffUtilization/StaffUtilization.tsx index 58af1c1..ad58af5 100644 --- a/src/components/StaffUtilization/StaffUtilization.tsx +++ b/src/components/StaffUtilization/StaffUtilization.tsx @@ -556,6 +556,7 @@ const StaffUtilization: React.FC = ({ abilities, staff }) => { } const fetchWeeklyIndividualManhoursData = async () => { + console.log(weeklyValueByIndividualStaff) const fetchResult = await fetchWeeklyIndividualStaffManhours(staffId, weeklyValueByIndividualStaff.format('YYYY-MM-DD'), weeklyValueByIndividualStaff.add(6, 'days').format('YYYY-MM-DD')); console.log(fetchResult) const manhoursResult = fetchResult[0].individualStaffManhoursSpentWeekly @@ -688,7 +689,7 @@ const StaffUtilization: React.FC = ({ abilities, staff }) => { if (individualStaffManhoursSpentSelect === "Daily") { fetchDailyIndividualManhoursData() } - }, [staffId, totalManHoursByIndividualStaffDailyFromValue]); + }, [staffId, totalManHoursByIndividualStaffDailyFromValue, individualStaffManhoursSpentSelect]); useEffect(() => { if (individualStaffManhoursSpentSelect === "Weekly") { @@ -1765,7 +1766,7 @@ const StaffUtilization: React.FC = ({ abilities, staff }) => {