Skip to content

Commit 3479678

Browse files
🐛 #393 - fix: various UI issues related to the selection state
1 parent 81047c2 commit 3479678

File tree

5 files changed

+24
-35
lines changed

5 files changed

+24
-35
lines changed

frontend/src/pages/destructionlist/abstract/BaseListView.tsx

+22-17
Original file line numberDiff line numberDiff line change
@@ -144,23 +144,28 @@ export function BaseListView({
144144

145145
// Selection actions.
146146
const getSelectionActions = useCallback(() => {
147-
const fixedItems =
148-
selectable && hasSelection
149-
? ([
150-
{
151-
children: (
152-
<>
153-
<Solid.ExclamationTriangleIcon />
154-
Huidige selectie wissen
155-
</>
156-
),
157-
variant: "warning",
158-
wrap: false,
159-
onClick: handleClearZaakSelection,
160-
},
161-
] as ButtonProps[])
162-
: [];
163-
return [...(selectionActions || []), ...fixedItems];
147+
const disabled = selectable && hasSelection;
148+
const dynamicItems = (selectionActions || []).map((props) =>
149+
Object.hasOwn(props, "disabled")
150+
? props
151+
: { ...props, disabled: selectable && !hasSelection },
152+
);
153+
const fixedItems = disabled
154+
? ([
155+
{
156+
children: (
157+
<>
158+
<Solid.ExclamationTriangleIcon />
159+
Huidige selectie wissen
160+
</>
161+
),
162+
variant: "warning",
163+
wrap: false,
164+
onClick: handleClearZaakSelection,
165+
},
166+
] as ButtonProps[])
167+
: [];
168+
return [...dynamicItems, ...fixedItems];
164169
}, [selectable, hasSelection, selectedZakenOnPage, selectionActions]);
165170

166171
return (

frontend/src/pages/destructionlist/create/DestructionListCreate.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,6 @@ export function DestructionListCreatePage() {
113113
Vernietigingslijst opstellen
114114
</>
115115
),
116-
disabled: !allPagesSelected && !hasSelection,
117-
118116
variant: "primary",
119117
wrap: false,
120118
onClick: handleClick,

frontend/src/pages/destructionlist/detail/components/DestructionListEdit/DestructionListEdit.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ export function DestructionListEdit() {
109109
Annuleren
110110
</>
111111
),
112+
disabled: false, // Set explicitly to prevent automatic value based on selection presence.
112113
wrap: false,
113114
onClick: () => handleSetEditing(false),
114115
},

frontend/src/pages/destructionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,6 @@ export function DestructionListProcessReview() {
142142
};
143143
}, [reviewItems, objectList]);
144144

145-
// Selection actions based on `editingState`.
146-
const selectionActions: ButtonProps[] = useMemo(() => [], []);
147-
148145
/**
149146
* Gets called when te selection is cleared.
150147
*/
@@ -227,7 +224,6 @@ export function DestructionListProcessReview() {
227224
paginatedZaken={paginatedZaken}
228225
secondaryNavigationItems={secondaryNavigationItems}
229226
selectable="visible"
230-
selectionActions={selectionActions}
231227
storageKey={storageKey}
232228
onClearZaakSelection={handleClearSelection}
233229
>

frontend/src/pages/destructionlist/hooks/useZaakSelection.ts

+1-12
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
ZaakSelection,
66
addToZaakSelection,
77
getAllZakenSelected,
8-
getFilteredZaakSelection,
98
getZaakSelectionItem,
109
getZaakSelectionSize,
1110
clearZaakSelection as libClearZaakSelection,
@@ -63,9 +62,6 @@ export function useZaakSelection<T = unknown>(
6362
// All pages selected.
6463
const [allPagesSelectedState, setAllPagesSelectedState] = useState<boolean>();
6564

66-
// Has selection items.
67-
const [hasSelectionState, setHasSelectionState] = useState<boolean>();
68-
6965
// Selection count
7066
const [selectionSizeState, setSelectionSizeState] = useState<number>(0);
7167

@@ -82,13 +78,6 @@ export function useZaakSelection<T = unknown>(
8278
}
8379
});
8480

85-
getFilteredZaakSelection(storageKey).then((zs) => {
86-
const hasSelection = Object.keys(zs).length > 0;
87-
if (hasSelection !== hasSelectionState) {
88-
setHasSelectionState(hasSelection);
89-
}
90-
});
91-
9281
getZaakSelectionSize(storageKey).then((size) => {
9382
if (size !== selectionSizeState) {
9483
setSelectionSizeState(size);
@@ -281,7 +270,7 @@ export function useZaakSelection<T = unknown>(
281270
selectedZakenOnPage,
282271
onSelect,
283272
{
284-
hasSelection: Boolean(hasSelectionState || allPagesSelectedState),
273+
hasSelection: Boolean(selectionSizeState || allPagesSelectedState),
285274
allPagesSelected: Boolean(allPagesSelectedState),
286275
selectionSize: selectionSizeState,
287276
deSelectedZakenOnPage,

0 commit comments

Comments
 (0)