nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
editCollectionDrawer
/
EditCollectionDrawer.tsx
3.0 kB
124 lines
1import {
2 Button,
3 Container,
4 Drawer,
5 Group,
6 Stack,
7 Textarea,
8 TextInput,
9} from '@mantine/core';
10import { useForm } from '@mantine/form';
11import { notifications } from '@mantine/notifications';
12import useUpdateCollection from '../../lib/mutations/useUpdateCollection';
13import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
14
15interface Props {
16 isOpen: boolean;
17 onClose: () => void;
18 collection: {
19 id: string;
20 rkey: string;
21 name: string;
22 description?: string;
23 };
24}
25
26export default function EditCollectionDrawer(props: Props) {
27 const updateCollection = useUpdateCollection();
28
29 const form = useForm({
30 initialValues: {
31 name: props.collection.name,
32 description: props.collection.description,
33 },
34 });
35
36 const handleUpdateCollection = (e: React.FormEvent) => {
37 e.preventDefault();
38
39 updateCollection.mutate(
40 {
41 collectionId: props.collection.id,
42 rkey: props.collection.rkey,
43 name: form.values.name,
44 description: form.values.description,
45 },
46 {
47 onError: () => {
48 notifications.show({
49 message: 'Could not update collection.',
50 position: 'top-center',
51 });
52 },
53 onSettled: () => {
54 props.onClose();
55 },
56 },
57 );
58 };
59
60 return (
61 <Drawer
62 opened={props.isOpen}
63 onClose={props.onClose}
64 withCloseButton={false}
65 position="bottom"
66 size={'30rem'}
67 overlayProps={UPDATE_OVERLAY_PROPS}
68 >
69 <Drawer.Header>
70 <Drawer.Title fz="xl" fw={600} mx="auto">
71 Edit Collection
72 </Drawer.Title>
73 </Drawer.Header>
74
75 <Container size="sm" p={0}>
76 <form onSubmit={handleUpdateCollection}>
77 <Stack>
78 <TextInput
79 id="name"
80 label="Name"
81 placeholder="Collection name"
82 variant="filled"
83 size="md"
84 required
85 maxLength={100}
86 key={form.key('name')}
87 {...form.getInputProps('name')}
88 />
89
90 <Textarea
91 id="description"
92 label="Description"
93 placeholder="Describe what this collection is about"
94 variant="filled"
95 size="md"
96 rows={8}
97 maxLength={500}
98 key={form.key('description')}
99 {...form.getInputProps('description')}
100 />
101
102 <Group justify="space-between" gap={'xs'} grow>
103 <Button
104 variant="light"
105 size="md"
106 color="gray"
107 onClick={props.onClose}
108 >
109 Cancel
110 </Button>
111 <Button
112 type="submit"
113 size="md"
114 loading={updateCollection.isPending}
115 >
116 Save
117 </Button>
118 </Group>
119 </Stack>
120 </form>
121 </Container>
122 </Drawer>
123 );
124}