Skip to content

Commit d4a6e92

Browse files
joshunraujoshunrau
committed
fix: add confirmation for delete user
1 parent a8ba0ae commit d4a6e92

File tree

1 file changed

+151
-122
lines changed

1 file changed

+151
-122
lines changed

‎apps/web/src/features/admin/components/UpdateUserForm.tsx‎

Lines changed: 151 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22

33
import { isAllUndefined } from '@douglasneuroinformatics/libjs';
4-
import { Button, Form } from '@douglasneuroinformatics/libui/components';
4+
import { Button, Dialog, Form } from '@douglasneuroinformatics/libui/components';
55
import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
66
import type { FormTypes } from '@opendatacapture/runtime-core';
77
import { $UserPermission } from '@opendatacapture/schemas/user';
@@ -53,132 +53,161 @@ export const UpdateUserForm: React.FC<{
5353
}> = ({ data, onDelete, onSubmit }) => {
5454
const { disableDelete, groupOptions, initialValues } = data;
5555
const { t } = useTranslation();
56+
const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
5657

5758
return (
58-
<Form
59-
additionalButtons={{
60-
left: (
61-
<Button className="w-full" disabled={disableDelete} type="button" variant="danger" onClick={onDelete}>
62-
{t('core.delete')}
63-
</Button>
64-
)
65-
}}
66-
content={[
67-
{
68-
description: t({
69-
en: 'IMPORTANT: These permissions are not specific to any group. To manage granular permissions, please use the API.',
70-
fr: "IMPORTANT : Ces autorisations ne sont pas spécifiques à un groupe. Pour gérer des autorisations granulaires, veuillez utiliser l'API."
71-
}),
72-
fields: {
73-
additionalPermissions: {
74-
fieldset: {
75-
action: {
76-
kind: 'string',
77-
label: t({
78-
en: 'Action',
79-
fr: 'Action'
80-
}),
81-
options: {
82-
create: t({
83-
en: 'Create',
84-
fr: 'Créer'
85-
}),
86-
delete: t({
87-
en: 'Delete',
88-
fr: 'Effacer'
89-
}),
90-
manage: t({
91-
en: 'Manage (All)',
92-
fr: 'Gérer (Tout)'
93-
}),
94-
read: t({
95-
en: 'Read',
96-
fr: 'Lire'
59+
<Dialog open={isConfirmDeleteOpen} onOpenChange={setIsConfirmDeleteOpen}>
60+
<Form
61+
additionalButtons={{
62+
left: (
63+
<Dialog.Trigger asChild>
64+
<Button className="w-full" disabled={disableDelete} type="button" variant="danger">
65+
{t('core.delete')}
66+
</Button>
67+
</Dialog.Trigger>
68+
)
69+
}}
70+
content={[
71+
{
72+
description: t({
73+
en: 'IMPORTANT: These permissions are not specific to any group. To manage granular permissions, please use the API.',
74+
fr: "IMPORTANT : Ces autorisations ne sont pas spécifiques à un groupe. Pour gérer des autorisations granulaires, veuillez utiliser l'API."
75+
}),
76+
fields: {
77+
additionalPermissions: {
78+
fieldset: {
79+
action: {
80+
kind: 'string',
81+
label: t({
82+
en: 'Action',
83+
fr: 'Action'
9784
}),
98-
update: t({
99-
en: 'Update',
100-
fr: 'Mettre à jour'
101-
})
85+
options: {
86+
create: t({
87+
en: 'Create',
88+
fr: 'Créer'
89+
}),
90+
delete: t({
91+
en: 'Delete',
92+
fr: 'Effacer'
93+
}),
94+
manage: t({
95+
en: 'Manage (All)',
96+
fr: 'Gérer (Tout)'
97+
}),
98+
read: t({
99+
en: 'Read',
100+
fr: 'Lire'
101+
}),
102+
update: t({
103+
en: 'Update',
104+
fr: 'Mettre à jour'
105+
})
106+
},
107+
variant: 'select'
102108
},
103-
variant: 'select'
104-
},
105-
subject: {
106-
kind: 'string',
107-
label: t({
108-
en: 'Resource',
109-
fr: 'Resource'
110-
}),
111-
options: {
112-
all: t({
113-
en: 'All',
114-
fr: 'Tous'
115-
}),
116-
Assignment: t({
117-
en: 'Assignment',
118-
fr: 'Devoir'
119-
}),
120-
Group: t({
121-
en: 'Group',
122-
fr: 'Groupe'
123-
}),
124-
Instrument: t({
125-
en: 'Instrument',
126-
fr: 'Instrument'
109+
subject: {
110+
kind: 'string',
111+
label: t({
112+
en: 'Resource',
113+
fr: 'Resource'
127114
}),
128-
InstrumentRecord: t({
129-
en: 'Instrument Record',
130-
fr: "Enregistrement de l'instrument"
131-
}),
132-
Session: t({
133-
en: 'Session',
134-
fr: 'Session'
135-
}),
136-
Subject: t({
137-
en: 'Subject',
138-
fr: 'Client'
139-
}),
140-
User: t({
141-
en: 'User',
142-
fr: 'Utilisateur'
143-
})
144-
},
145-
variant: 'select'
146-
}
147-
},
148-
kind: 'record-array',
149-
label: t({
150-
en: 'Permission',
151-
fr: 'Autorisations supplémentaires'
152-
})
153-
}
154-
},
155-
title: t({
156-
en: 'Authorization',
157-
fr: 'Autorisation'
158-
})
159-
},
160-
{
161-
fields: {
162-
groupIds: {
163-
kind: 'set',
164-
label: 'Group IDs',
165-
options: groupOptions,
166-
variant: 'listbox'
167-
}
115+
options: {
116+
all: t({
117+
en: 'All',
118+
fr: 'Tous'
119+
}),
120+
Assignment: t({
121+
en: 'Assignment',
122+
fr: 'Devoir'
123+
}),
124+
Group: t({
125+
en: 'Group',
126+
fr: 'Groupe'
127+
}),
128+
Instrument: t({
129+
en: 'Instrument',
130+
fr: 'Instrument'
131+
}),
132+
InstrumentRecord: t({
133+
en: 'Instrument Record',
134+
fr: "Enregistrement de l'instrument"
135+
}),
136+
Session: t({
137+
en: 'Session',
138+
fr: 'Session'
139+
}),
140+
Subject: t({
141+
en: 'Subject',
142+
fr: 'Client'
143+
}),
144+
User: t({
145+
en: 'User',
146+
fr: 'Utilisateur'
147+
})
148+
},
149+
variant: 'select'
150+
}
151+
},
152+
kind: 'record-array',
153+
label: t({
154+
en: 'Permission',
155+
fr: 'Autorisations supplémentaires'
156+
})
157+
}
158+
},
159+
title: t({
160+
en: 'Authorization',
161+
fr: 'Autorisation'
162+
})
168163
},
169-
title: t({
170-
en: 'Groups',
171-
fr: 'Groupes'
172-
})
164+
{
165+
fields: {
166+
groupIds: {
167+
kind: 'set',
168+
label: 'Group IDs',
169+
options: groupOptions,
170+
variant: 'listbox'
171+
}
172+
},
173+
title: t({
174+
en: 'Groups',
175+
fr: 'Groupes'
176+
})
177+
}
178+
]}
179+
initialValues={initialValues}
180+
key={JSON.stringify(initialValues)}
181+
submitBtnLabel={t('core.save')}
182+
validationSchema={$UpdateUserFormData}
183+
onSubmit={({ additionalPermissions, ...data }) =>
184+
onSubmit({ additionalPermissions: additionalPermissions as undefined | UserPermission[], ...data })
173185
}
174-
]}
175-
initialValues={initialValues}
176-
key={JSON.stringify(initialValues)}
177-
submitBtnLabel={t('core.save')}
178-
validationSchema={$UpdateUserFormData}
179-
onSubmit={({ additionalPermissions, ...data }) =>
180-
onSubmit({ additionalPermissions: additionalPermissions as undefined | UserPermission[], ...data })
181-
}
182-
/>
186+
/>
187+
<Dialog.Content>
188+
<Dialog.Header>
189+
<Dialog.Title>
190+
{t({
191+
en: 'Are you absolutely sure?',
192+
fr: 'Êtes-vous absolument sûr ?'
193+
})}
194+
</Dialog.Title>
195+
<Dialog.Description>
196+
{t({
197+
en: 'This action will permanently delete the account and cannot be undone.',
198+
fr: 'Cette action supprimera définitivement le compte et ne pourra pas être annulée.'
199+
})}
200+
</Dialog.Description>
201+
</Dialog.Header>
202+
<Dialog.Footer>
203+
<Button className="min-w-16" type="button" variant="danger" onClick={onDelete}>
204+
{t('core.yes')}
205+
</Button>
206+
<Button className="min-w-16" type="button" variant="outline" onClick={() => setIsConfirmDeleteOpen(false)}>
207+
{t('core.no')}
208+
</Button>
209+
</Dialog.Footer>
210+
</Dialog.Content>
211+
</Dialog>
183212
);
184213
};

0 commit comments

Comments
 (0)