Fix/doors pagination (#803)

* Fix indexing of doors for entire building, minor refactor Signed-off-by: Aaron Chong <aaronchongth@gmail.com> * Turn off sorting for unrelated columns, sort names by default for robot, doors and lifts Signed-off-by: Aaron Chong <aaronchongth@gmail.com> --------- Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
open-rmf · Oct 12, 2023 · f2df563 · f2df563
1 parent 67ed39b
commit f2df563
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 21 deletions.
diff --git a/packages/dashboard/src/components/doors-app.tsx b/packages/dashboard/src/components/doors-app.tsx
@@ -9,7 +9,7 @@ import { getApiErrorMessage } from './utils';
 export const DoorsApp = createMicroApp('Doors', () => {
   const rmf = React.useContext(RmfAppContext);
   const [buildingMap, setBuildingMap] = React.useState<BuildingMap | null>(null);
-  const [doorTableData, setDoorTableData] = React.useState<Record<string, DoorTableData[]>>({});
+  const [doorTableData, setDoorTableData] = React.useState<Record<string, DoorTableData>>({});
 
   React.useEffect(() => {
     if (!rmf) {
@@ -24,6 +24,7 @@ export const DoorsApp = createMicroApp('Doors', () => {
       return;
     }
 
+    let doorIndex = 0;
     buildingMap?.levels.map((level) =>
       level.doors.map(async (door, i) => {
         try {
@@ -33,24 +34,22 @@ export const DoorsApp = createMicroApp('Doors', () => {
             setDoorTableData((prev) => {
               return {
                 ...prev,
-                [door.name]: [
-                  {
-                    index: i,
-                    doorName: door.name,
-                    opMode: health_status ? health_status : 'N/A',
-                    levelName: level.name,
-                    doorType: door.door_type,
-                    doorState: doorState,
-                    onClickOpen: () =>
-                      rmf?.doorsApi.postDoorRequestDoorsDoorNameRequestPost(door.name, {
-                        mode: RmfDoorMode.MODE_OPEN,
-                      }),
-                    onClickClose: () =>
-                      rmf?.doorsApi.postDoorRequestDoorsDoorNameRequestPost(door.name, {
-                        mode: RmfDoorMode.MODE_CLOSED,
-                      }),
-                  },
-                ],
+                [door.name]: {
+                  index: doorIndex++,
+                  doorName: door.name,
+                  opMode: health_status ? health_status : 'N/A',
+                  levelName: level.name,
+                  doorType: door.door_type,
+                  doorState: doorState,
+                  onClickOpen: () =>
+                    rmf?.doorsApi.postDoorRequestDoorsDoorNameRequestPost(door.name, {
+                      mode: RmfDoorMode.MODE_OPEN,
+                    }),
+                  onClickClose: () =>
+                    rmf?.doorsApi.postDoorRequestDoorsDoorNameRequestPost(door.name, {
+                      mode: RmfDoorMode.MODE_CLOSED,
+                    }),
+                },
               };
             });
           });
@@ -62,5 +61,5 @@ export const DoorsApp = createMicroApp('Doors', () => {
     );
   }, [rmf, buildingMap]);
 
-  return <DoorDataGridTable doors={Object.values(doorTableData).flatMap((d) => d)} />;
+  return <DoorDataGridTable doors={Object.values(doorTableData)} />;
 });
diff --git a/packages/react-components/lib/doors/door-table-datagrid.tsx b/packages/react-components/lib/doors/door-table-datagrid.tsx
@@ -151,6 +151,7 @@ export function DoorDataGridTable({ doors }: DoorDataGridTableProps): JSX.Elemen
       flex: 1,
       renderCell: OpModeState,
       filterable: true,
+      sortable: false,
     },
     {
       field: 'levelName',
@@ -160,6 +161,7 @@ export function DoorDataGridTable({ doors }: DoorDataGridTableProps): JSX.Elemen
       valueGetter: (params: GridValueGetterParams) => params.row.levelName,
       flex: 1,
       filterable: true,
+      sortable: false,
     },
     {
       field: 'doorType',
@@ -169,6 +171,7 @@ export function DoorDataGridTable({ doors }: DoorDataGridTableProps): JSX.Elemen
       valueGetter: (params: GridValueGetterParams) => doorTypeToString(params.row.doorType),
       flex: 1,
       filterable: true,
+      sortable: false,
     },
     {
       field: 'doorState',
@@ -178,6 +181,7 @@ export function DoorDataGridTable({ doors }: DoorDataGridTableProps): JSX.Elemen
       flex: 1,
       renderCell: DoorState,
       filterable: true,
+      sortable: false,
     },
     {
       field: '-',
@@ -186,7 +190,8 @@ export function DoorDataGridTable({ doors }: DoorDataGridTableProps): JSX.Elemen
       editable: false,
       renderCell: OpenCloseButtons,
       flex: 1,
-      filterable: true,
+      filterable: false,
+      sortable: false,
     },
   ];
 
@@ -203,6 +208,11 @@ export function DoorDataGridTable({ doors }: DoorDataGridTableProps): JSX.Elemen
         localeText={{
           noRowsLabel: 'No doors available.',
         }}
+        initialState={{
+          sorting: {
+            sortModel: [{ field: 'doorName', sort: 'asc' }],
+          },
+        }}
       />
     </div>
   );

diff --git a/packages/react-components/lib/lifts/lift-table-datagrid.tsx b/packages/react-components/lib/lifts/lift-table-datagrid.tsx
@@ -195,6 +195,7 @@ export function LiftDataGridTable({ lifts }: LiftDataGridTableProps): JSX.Elemen
       flex: 1,
       renderCell: LiftControl,
       filterable: true,
+      sortable: false,
     },
   ];
 
@@ -211,6 +212,11 @@ export function LiftDataGridTable({ lifts }: LiftDataGridTableProps): JSX.Elemen
         localeText={{
           noRowsLabel: 'No lifts available.',
         }}
+        initialState={{
+          sorting: {
+            sortModel: [{ field: 'name', sort: 'asc' }],
+          },
+        }}
       />
     </div>
   );

diff --git a/packages/react-components/lib/robots/robot-table-datagrid.tsx b/packages/react-components/lib/robots/robot-table-datagrid.tsx
@@ -148,6 +148,11 @@ export function RobotDataGridTable({ onRobotClick, robots }: RobotDataGridTableP
       columns={columns}
       rowsPerPageOptions={[5]}
       onRowClick={handleEvent}
+      initialState={{
+        sorting: {
+          sortModel: [{ field: 'name', sort: 'asc' }],
+        },
+      }}
     />
   );
 }