paging update

src/components/RoughSchedule/RoughSchedileSearchView.tsx

@@ -191,6 +191,7 @@ const RSOverview: React.FC<Props> = ({ records }) => {
                 setPagingController={setPagingController}
                 pagingController={pagingController}
                 isAutoPaging={false}
+                hasCollapse={false}
             />
         </>
     );

src/components/RoughScheduleDetail/ViewByBomDetails.tsx

@@ -9,7 +9,7 @@ import {
     GridRowSelectionModel,
     useGridApiRef,
 } from "@mui/x-data-grid";
-import {MutableRefObject, useCallback, useMemo, useState} from "react";
+import {MutableRefObject, useCallback, useEffect, useMemo, useState} from "react";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import InputDataGrid, { TableRow } from "../InputDataGrid/InputDataGrid";
@@ -252,11 +252,69 @@ const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
         []
     );
 
-    const [pagingController, setPagingController] = useState({
-        pageNum: 1,
-        pageSize: 10,
-        totalCount: 0,
-    })
+    const [pagingController, setPagingController] = useState([
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+    ])
+
+    const updatePagingController = (updatedObj) => {
+        setPagingController((prevState) => {
+            return prevState.map((item, index) => {
+                if (index === updatedObj?.index){
+                    return {
+                        ...item,
+                        pageNum: item.pageNum,
+                        pageSize: item.pageSize,
+                        totalCount: item.totalCount,
+                    };
+                }
+                else
+                    return item
+            });
+        });
+    };
+
+    useEffect(()=>{
+        console.log("[debug] pagingController", pagingController)
+    },[])
 
     const overallColumns = useMemo<Column<any>[]>(
         () => [
@@ -355,12 +413,13 @@ const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
                     Overall
                 </Typography>
                 <EditableSearchResults<FGRecord>
+                    index={7}
                     items={fakeOverallRecords}
                     isMockUp={true}
                     columns={overallColumns}
-                    setPagingController={setPagingController}
-                    pagingController={pagingController}
-                    isAutoPaging={false}
+                    setPagingController={updatePagingController}
+                    pagingController={pagingController[7]}
+                    isAutoPaging={true}
                     isHideButton={true}
                     isEdit={false}
                 />
@@ -371,11 +430,12 @@ const ViewByBomDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
                         {date}
                     </Typography>
                     <EditableSearchResults<FGRecord>
+                        index={index}
                         items={fakeRecords[index]} // Use the corresponding records for the day
                         columns={columns}
-                        setPagingController={setPagingController}
-                        pagingController={pagingController}
-                        isAutoPaging={false}
+                        setPagingController={updatePagingController}
+                        pagingController={pagingController[index]}
+                        isAutoPaging={true}
                         isHideButton={true}
                         isEdit={isEdit}
                     />

src/components/RoughScheduleDetail/ViewByFGDetails.tsx

@@ -382,11 +382,65 @@ const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
         []
     );
 
-    const [pagingController, setPagingController] = useState({
-        pageNum: 1,
-        pageSize: 10,
-        totalCount: 0,
-    })
+    const [pagingController, setPagingController] = useState([
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+        {
+            pageNum: 1,
+            pageSize: 10,
+            totalCount: 0,
+        },
+    ])
+
+    const updatePagingController = (updatedObj) => {
+        setPagingController((prevState) => {
+            return prevState.map((item, index) => {
+                if (index === updatedObj?.index){
+                    return {
+                        ...item,
+                        pageNum: item.pageNum,
+                        pageSize: item.pageSize,
+                        totalCount: item.totalCount,
+                    };
+                }
+                else
+                    return item
+            });
+        });
+    };
 
     const columns = useMemo<Column<any>[]>(
         () => [
@@ -507,14 +561,16 @@ const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
                     Overall
                 </Typography>
                 <EditableSearchResults<FGRecord>
+                    index={7}
                     items={fakeOverallRecords}
                     isMockUp={true}
                     columns={overallColumns}
-                    setPagingController={setPagingController}
-                    pagingController={pagingController}
+                    setPagingController={updatePagingController}
+                    pagingController={pagingController[7]}
                     isAutoPaging={false}
                     isHideButton={true}
                     isEdit={isEdit}
+                    hasCollapse={true}
                 />
             </Grid>
             {dayPeriod.map((date, index) => (
@@ -526,11 +582,12 @@ const ViewByFGDetails: React.FC<Props> = ({ apiRef, isEdit }) => {
                         items={fakeRecords[index]} // Use the corresponding records for the day
                         isMockUp={true}
                         columns={columns}
-                        setPagingController={setPagingController}
-                        pagingController={pagingController}
+                        setPagingController={updatePagingController}
+                        pagingController={pagingController[index]}
                         isAutoPaging={false}
                         isHideButton={false}
                         isEdit={isEdit}
+                        hasCollapse={true}
                     />
                 </Grid>
             ))}

src/components/RoughScheduleSetting/RoughScheduleSetting.tsx

@@ -99,7 +99,7 @@ const RSSOverview: React.FC<Props> = ({ items }) => {
             //     buttonIcon: <EditNote />,
             // },
             {
-                field: "fgName",
+                field: "name",
                 label: "Finished Goods Name",
                 type: 'input',
             },
@@ -195,6 +195,7 @@ const RSSOverview: React.FC<Props> = ({ items }) => {
                 setPagingController={setPagingController}
                 pagingController={pagingController}
                 isAutoPaging={false}
+                hasCollapse={false}
             />
         </>
     );

src/components/SearchResults/EditableSearchResults.tsx

@@ -48,12 +48,13 @@ interface Props<T extends ResultWithId> {
     isMockUp?: Boolean,
     columns: Column<T>[],
     noWrapper?: boolean,
-    setPagingController: (value: { pageNum: number; pageSize: number; totalCount: number }) => void,
+    setPagingController: (value: { pageNum: number; pageSize: number; totalCount: number, index?: number}) => void,
     pagingController: { pageNum: number; pageSize: number; totalCount: number },
     isAutoPaging: boolean
 }
 
 function EditableSearchResults<T extends ResultWithId>({
+                                                           index,
                                                            items,
                                                            isMockUp,
                                                            columns,
@@ -63,6 +64,7 @@ function EditableSearchResults<T extends ResultWithId>({
                                                            isAutoPaging = true,
                                                            isEdit = true,
                                                            isHideButton = false,
+                                                           hasCollapse = false,
                                                        }: Props<T>) {
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(10);
@@ -74,13 +76,13 @@ function EditableSearchResults<T extends ResultWithId>({
     },[items])
     const handleChangePage = (_event: unknown, newPage: number) => {
         setPage(newPage);
-        setPagingController({ ...pagingController, pageNum: newPage + 1 });
+        setPagingController({ ...pagingController, pageNum: newPage + 1 }, (index ?? -1));
     };
 
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
         setRowsPerPage(+event.target.value);
         setPage(0);
-        setPagingController({ ...pagingController, pageSize: +event.target.value, pageNum: 1 });
+        setPagingController({ ...pagingController, pageSize: +event.target.value, pageNum: 1 , index: index});
     };
 
     const handleEditClick = (id: number) => {
@@ -126,7 +128,6 @@ function EditableSearchResults<T extends ResultWithId>({
         const { row } = props;
         const [open, setOpen] = useState(false);
         console.log(row)
-        console.log(row.lines)
         return (
             <>
             <TableRow hover tabIndex={-1} key={row.id}>
@@ -140,13 +141,15 @@ function EditableSearchResults<T extends ResultWithId>({
                                 <IconButton disabled={!isEdit} onClick={() => setEditingRowId(null)}>
                                     <CancelIcon/>
                                 </IconButton>
-                                <IconButton
-                                    aria-label="expand row"
-                                    size="small"
-                                    onClick={() => setOpen(!open)}
+                                {
+                                    hasCollapse && <IconButton
+                                      aria-label="expand row"
+                                      size="small"
+                                      onClick={() => setOpen(!open)}
                                     >
-                                    {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-                                </IconButton>
+                                        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+                                    </IconButton>
+                                }
                             </>
                         ) : (
                             <>
@@ -158,13 +161,15 @@ function EditableSearchResults<T extends ResultWithId>({
                                             onClick={() => handleDeleteClick(row.id as number)}>
                                     <DeleteIcon/>
                                 </IconButton>
-                                <IconButton
-                                    aria-label="expand row"
-                                    size="small"
-                                    onClick={() => setOpen(!open)}
+                                {
+                                    hasCollapse && <IconButton
+                                        aria-label="expand row"
+                                        size="small"
+                                        onClick={() => setOpen(!open)}
                                     >
-                                    {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+                                        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                                     </IconButton>
+                                }
                             </>
                         )}
                     </TableCell>
@@ -220,21 +225,24 @@ function EditableSearchResults<T extends ResultWithId>({
                 })}
             </TableRow>
         <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-              <Table>
-                <TableBody>
-                    <TableRow>
-                    <TableCell>
-                      <TempInputGridForMockUp
-                        stockInLine={row.lines as any[]}
-                      />
-                    </TableCell>
-                    </TableRow>
-                </TableBody>
-              </Table>
-              </Collapse>
-          </TableCell>
+            {
+                hasCollapse &&
+                <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+                  <Collapse in={open} timeout="auto" unmountOnExit>
+                    <Table>
+                      <TableBody>
+                        <TableRow>
+                          <TableCell>
+                            <TempInputGridForMockUp
+                              stockInLine={row.lines as any[]}
+                            />
+                          </TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </Collapse>
+                </TableCell>
+            }
         </TableRow>
         </>
         )