Merge pull request #418 from maykinmedia/issue/#393-frontend

🐛 #393 - fix: prevent API calls from being made when selecting za…
maykinmedia · Oct 11, 2024 · 0774660 · 0774660
2 parents 5857064 + 3479678
commit 0774660
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 60 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@maykin-ui/admin-ui": "^0.0.35",
+    "@maykin-ui/admin-ui": "^0.0.36",
     "@storybook/test-runner": "^0.18.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/frontend/src/pages/destructionlist/abstract/BaseListView.tsx b/frontend/src/pages/destructionlist/abstract/BaseListView.tsx
@@ -51,7 +51,8 @@ export type BaseListViewProps = React.PropsWithChildren<{
 
   dataGridProps?: Partial<DataGridProps>;
 
-  onClearZaakSelection?: () => void; // FIXME: REMOVE?
+  onClearZaakSelection?: () => void;
+  onSelectionChange?: (rows: AttributeData[]) => void;
 }>;
 
 export function BaseListView({
@@ -78,6 +79,7 @@ export function BaseListView({
   children,
 
   onClearZaakSelection,
+  onSelectionChange,
 }: BaseListViewProps) {
   const { state } = useNavigation();
   const [page, setPage] = usePage();
@@ -142,23 +144,28 @@ export function BaseListView({
 
   // Selection actions.
   const getSelectionActions = useCallback(() => {
-    const fixedItems =
-      selectable && hasSelection
-        ? ([
-            {
-              children: (
-                <>
-                  <Solid.ExclamationTriangleIcon />
-                  Huidige selectie wissen
-                </>
-              ),
-              variant: "warning",
-              wrap: false,
-              onClick: handleClearZaakSelection,
-            },
-          ] as ButtonProps[])
-        : [];
-    return [...(selectionActions || []), ...fixedItems];
+    const disabled = selectable && hasSelection;
+    const dynamicItems = (selectionActions || []).map((props) =>
+      Object.hasOwn(props, "disabled")
+        ? props
+        : { ...props, disabled: selectable && !hasSelection },
+    );
+    const fixedItems = disabled
+      ? ([
+          {
+            children: (
+              <>
+                <Solid.ExclamationTriangleIcon />
+                Huidige selectie wissen
+              </>
+            ),
+            variant: "warning",
+            wrap: false,
+            onClick: handleClearZaakSelection,
+          },
+        ] as ButtonProps[])
+      : [];
+    return [...dynamicItems, ...fixedItems];
   }, [selectable, hasSelection, selectedZakenOnPage, selectionActions]);
 
   return (
@@ -182,7 +189,8 @@ export function BaseListView({
         allowSelectAllPages,
         allPagesSelected,
         count: paginatedZaken.count,
-        equalityChecker: (a, b) => a.uuid === b.uuid || a.url === b.url,
+        equalityChecker: (a, b) =>
+          a && b && (a.uuid === b.uuid || a.url === b.url),
         fields,
         filterTransform,
         loading: state === "loading",
@@ -199,6 +207,7 @@ export function BaseListView({
         onPageChange: setPage,
         onSelect: handleSelect,
         onSelectAllPages: handleSelectAllPages,
+        onSelectionChange: onSelectionChange,
         onSort: setSort,
 
         ...dataGridProps,

diff --git a/frontend/src/pages/destructionlist/create/DestructionListCreate.tsx b/frontend/src/pages/destructionlist/create/DestructionListCreate.tsx
@@ -113,8 +113,6 @@ export function DestructionListCreatePage() {
                 Vernietigingslijst opstellen
               </>
             ),
-            disabled: !allPagesSelected && !hasSelection,
-
             variant: "primary",
             wrap: false,
             onClick: handleClick,
@@ -131,6 +129,7 @@ export function DestructionListCreatePage() {
         <Body>
           <Form
             fields={modalFormFields}
+            justify="stretch"
             onSubmit={handleSubmit}
             validateOnChange={true}
             labelSubmit="Vernietigingslijst opstellen"

diff --git a/...d/src/pages/destructionlist/detail/components/DestructionListEdit/DestructionListEdit.tsx b/...d/src/pages/destructionlist/detail/components/DestructionListEdit/DestructionListEdit.tsx
@@ -109,6 +109,7 @@ export function DestructionListEdit() {
                   Annuleren
                 </>
               ),
+              disabled: false, // Set explicitly to prevent automatic value based on selection presence.
               wrap: false,
               onClick: () => handleSetEditing(false),
             },

diff --git a/...ctionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx b/...ctionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx
@@ -142,9 +142,6 @@ export function DestructionListProcessReview() {
     };
   }, [reviewItems, objectList]);
 
-  // Selection actions based on `editingState`.
-  const selectionActions: ButtonProps[] = useMemo(() => [], []);
-
   /**
    * Gets called when te selection is cleared.
    */
@@ -227,7 +224,6 @@ export function DestructionListProcessReview() {
       paginatedZaken={paginatedZaken}
       secondaryNavigationItems={secondaryNavigationItems}
       selectable="visible"
-      selectionActions={selectionActions}
       storageKey={storageKey}
       onClearZaakSelection={handleClearSelection}
     >