nandi.uk
This repository has no description
feat: add delete card button to "add card to" modal
author
pdelfan
date
(May 21, 2026, 5:13 PM -0700)
commit
66109a1f
66109a1ff990d36b60a6003eaa95e71445ab1dca
parent
56e03fdc
56e03fdce4bd43f577122d515b322ee205ee2f2b
+82
-16
+81
-16
src/webapp/features/cards/components/addCardActions/AddCardActions.tsx
+81
-16
src/webapp/features/cards/components/addCardActions/AddCardActions.tsx
···
14
14
Textarea,
15
15
VisuallyHidden,
16
16
} from '@mantine/core';
17
-
import { BsExclamation } from 'react-icons/bs';
17
+
import { BsExclamation, BsTrash2Fill } from 'react-icons/bs';
18
+
import { MdOutlineStickyNote2 } from 'react-icons/md';
18
19
19
20
interface Props {
21
+
cardId?: string;
20
22
note?: string;
21
23
noteId?: string;
22
24
onUpdateNote: Dispatch<SetStateAction<string | undefined>>;
···
25
27
26
28
export default function AddCardActions(props: Props) {
27
29
const [showDeleteWarning, setShowDeleteWarning] = useState(false);
30
+
const [showDeleteCardWarning, setShowDeleteCardWarning] = useState(false);
28
31
const [noteMode, setNoteMode] = useState(false);
29
32
const [note, setNote] = useState(props.note);
30
33
const MAX_NOTE_LENGTH = 500;
31
34
32
35
const removeNote = useRemoveCardFromLibrary();
36
+
const removeCard = useRemoveCardFromLibrary();
33
37
34
38
const handleDeleteNote = () => {
35
39
if (!props.noteId) return;
···
51
55
});
52
56
};
53
57
58
+
const handleDeleteCard = () => {
59
+
if (!props.cardId) return;
60
+
61
+
removeCard.mutate(props.cardId, {
62
+
onError: () => {
63
+
notifications.show({
64
+
message: 'Could not delete card',
65
+
color: 'red',
66
+
autoClose: 5000,
67
+
withCloseButton: true,
68
+
position: 'top-center',
69
+
icon: <BsExclamation />,
70
+
});
71
+
},
72
+
onSettled: () => {
73
+
props.onClose();
74
+
},
75
+
});
76
+
};
77
+
54
78
if (noteMode) {
55
79
return (
56
80
<Card
···
118
142
<Text>Delete note?</Text>
119
143
<Group gap={'xs'}>
120
144
<Button
145
+
size="xs"
121
146
color="red"
122
147
onClick={handleDeleteNote}
123
148
loading={removeNote.isPending}
···
127
152
<Button
128
153
variant="light"
129
154
color="gray"
155
+
size="xs"
130
156
onClick={() => setShowDeleteWarning(false)}
131
157
>
132
158
Cancel
133
159
</Button>
134
160
</Group>
135
161
</Group>
162
+
) : showDeleteCardWarning ? (
163
+
<Group justify="space-between" gap={'xs'}>
164
+
<Text>Delete card?</Text>
165
+
<Group gap={'xs'}>
166
+
<Button
167
+
color="red"
168
+
size="xs"
169
+
onClick={handleDeleteCard}
170
+
loading={removeCard.isPending}
171
+
>
172
+
Delete
173
+
</Button>
174
+
<Button
175
+
variant="light"
176
+
color="gray"
177
+
size="xs"
178
+
onClick={() => setShowDeleteCardWarning(false)}
179
+
>
180
+
Cancel
181
+
</Button>
182
+
</Group>
183
+
</Group>
136
184
) : (
137
-
<Group gap={'xs'}>
138
-
<Button
139
-
variant="light"
140
-
size="xs"
141
-
color="gray"
142
-
onClick={(e) => {
143
-
e.stopPropagation();
144
-
setNoteMode(true);
145
-
}}
146
-
>
147
-
{note ? 'Edit note' : 'Add note'}
148
-
</Button>
149
-
{props.noteId && (
185
+
<Group gap={'xs'} justify="space-between">
186
+
<Group gap={'xs'}>
187
+
<Button
188
+
variant="light"
189
+
size="xs"
190
+
color="gray"
191
+
leftSection={<MdOutlineStickyNote2 />}
192
+
onClick={(e) => {
193
+
e.stopPropagation();
194
+
setNoteMode(true);
195
+
}}
196
+
>
197
+
{note ? 'Edit note' : 'Add note'}
198
+
</Button>
199
+
{props.noteId && (
200
+
<Button
201
+
variant="light"
202
+
color="red"
203
+
size="xs"
204
+
onClick={(e) => {
205
+
e.stopPropagation();
206
+
setShowDeleteWarning(true);
207
+
}}
208
+
>
209
+
Delete note
210
+
</Button>
211
+
)}
212
+
</Group>
213
+
{props.cardId && (
150
214
<Button
151
215
variant="light"
152
216
color="red"
153
217
size="xs"
218
+
leftSection={<BsTrash2Fill />}
154
219
onClick={(e) => {
155
220
e.stopPropagation();
156
-
setShowDeleteWarning(true);
221
+
setShowDeleteCardWarning(true);
157
222
}}
158
223
>
159
-
Delete note
224
+
Delete card
160
225
</Button>
161
226
)}
162
227
</Group>
+1
src/webapp/features/cards/components/addCardToModal/AddCardToModalContent.tsx
+1
src/webapp/features/cards/components/addCardToModal/AddCardToModalContent.tsx