ajout app

2024-04-17 20:22:30 +02:00
parent cc017cfc5e
commit f9d05a2fd3
8025 changed files with 729805 additions and 0 deletions
--- a/Voltaserve/ui/src/components/group/group-add-member.tsx
+++ b/Voltaserve/ui/src/components/group/group-add-member.tsx
@ -0,0 +1,156 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import { useSWRConfig } from 'swr'
+import {
+  Field,
+  FieldAttributes,
+  FieldProps,
+  Form,
+  Formik,
+  FormikHelpers,
+} from 'formik'
+import * as Yup from 'yup'
+import cx from 'classnames'
+import GroupAPI, { Group } from '@/client/api/group'
+import UserAPI, { User } from '@/client/api/user'
+import UserSelector from '../common/user-selector'
+
+export type GroupAddMemberProps = {
+  open: boolean
+  group: Group
+  onClose?: () => void
+}
+
+type FormValues = {
+  userId: string
+}
+
+const GroupAddMember = ({ group, open, onClose }: GroupAddMemberProps) => {
+  const navigate = useNavigate()
+  const { mutate } = useSWRConfig()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [activeUser, setActiveUser] = useState<User>()
+  const formSchema = Yup.object().shape({
+    userId: Yup.string().required('User is required'),
+  })
+
+  useEffect(() => {
+    setIsModalOpen(open)
+  }, [open])
+
+  const handleSubmit = useCallback(
+    async (
+      { userId }: FormValues,
+      { setSubmitting }: FormikHelpers<FormValues>,
+    ) => {
+      setSubmitting(true)
+      try {
+        await GroupAPI.addMember(group.id, {
+          userId,
+        })
+        mutate(
+          `/users?${UserAPI.paramsFromListOptions({
+            groupId: group.id,
+            nonGroupMembersOnly: true,
+          })}`,
+        )
+        mutate(`/groups/${group.id}/get_available_users`)
+        setSubmitting(false)
+        onClose?.()
+        navigate(`/group/${group.id}/member`)
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [group.id, navigate, onClose, mutate],
+  )
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onClose={() => onClose?.()}
+      closeOnOverlayClick={false}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Add Member</ModalHeader>
+        <ModalCloseButton />
+        <Formik
+          enableReinitialize={true}
+          initialValues={{ userId: '' }}
+          validationSchema={formSchema}
+          validateOnBlur={false}
+          onSubmit={handleSubmit}
+        >
+          {({ errors, touched, isSubmitting, setFieldValue }) => (
+            <Form>
+              <ModalBody>
+                <div className={cx('flex', 'flex-col', 'gap-1.5')}>
+                  <Field name="userId">
+                    {({ field }: FieldAttributes<FieldProps>) => (
+                      <FormControl
+                        isInvalid={
+                          errors.userId && touched.userId ? true : false
+                        }
+                      >
+                        <UserSelector
+                          value={activeUser}
+                          organizationId={group.organization.id}
+                          groupId={group.id}
+                          nonGroupMembersOnly={true}
+                          onConfirm={(value) => {
+                            setActiveUser(value)
+                            setFieldValue(field.name, value.id)
+                          }}
+                        />
+                        <FormErrorMessage>{errors.userId}</FormErrorMessage>
+                      </FormControl>
+                    )}
+                  </Field>
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <div
+                  className={cx('flex', 'flex-row', 'items-center', 'gap-1')}
+                >
+                  <Button
+                    type="button"
+                    variant="outline"
+                    colorScheme="blue"
+                    disabled={isSubmitting}
+                    onClick={() => onClose?.()}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    variant="solid"
+                    colorScheme="blue"
+                    disabled={isSubmitting}
+                    isLoading={isSubmitting}
+                  >
+                    Add
+                  </Button>
+                </div>
+              </ModalFooter>
+            </Form>
+          )}
+        </Formik>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default GroupAddMember