ajout app
This commit is contained in:
156
Voltaserve/ui/src/components/group/group-add-member.tsx
Normal file
156
Voltaserve/ui/src/components/group/group-add-member.tsx
Normal file
@ -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
|
||||
133
Voltaserve/ui/src/components/group/group-delete.tsx
Normal file
133
Voltaserve/ui/src/components/group/group-delete.tsx
Normal file
@ -0,0 +1,133 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from '@chakra-ui/react'
|
||||
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'
|
||||
|
||||
export type GroupDeleteProps = {
|
||||
open: boolean
|
||||
group: Group
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
type FormValues = {
|
||||
name: string
|
||||
}
|
||||
|
||||
const GroupDelete = ({ open, group, onClose }: GroupDeleteProps) => {
|
||||
const navigate = useNavigate()
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const formSchema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.required('Confirmation is required')
|
||||
.oneOf([group.name], 'Invalid group name'),
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setIsModalOpen(open)
|
||||
}, [open])
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (_: FormValues, { setSubmitting }: FormikHelpers<FormValues>) => {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await GroupAPI.delete(group.id)
|
||||
navigate('/group')
|
||||
onClose?.()
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
},
|
||||
[group.id, navigate, onClose],
|
||||
)
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => onClose?.()}
|
||||
closeOnOverlayClick={false}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Delete Group</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<Formik
|
||||
initialValues={{ name: '' }}
|
||||
validationSchema={formSchema}
|
||||
validateOnBlur={false}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ errors, touched, isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalBody>
|
||||
<div className={cx('flex', 'flex-col', 'gap-1.5')}>
|
||||
<span>Are you sure you would like to delete this group?</span>
|
||||
<span>
|
||||
Please type <b>{group.name}</b> to confirm.
|
||||
</span>
|
||||
<Field name="name">
|
||||
{({ field }: FieldAttributes<FieldProps>) => (
|
||||
<FormControl
|
||||
isInvalid={errors.name && touched.name ? true : false}
|
||||
>
|
||||
<Input {...field} disabled={isSubmitting} />
|
||||
<FormErrorMessage>{errors.name}</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="red"
|
||||
disabled={isSubmitting}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Delete Permanently
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupDelete
|
||||
137
Voltaserve/ui/src/components/group/group-edit-name.tsx
Normal file
137
Voltaserve/ui/src/components/group/group-edit-name.tsx
Normal file
@ -0,0 +1,137 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
Input,
|
||||
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'
|
||||
|
||||
export type GroupEditNameProps = {
|
||||
open: boolean
|
||||
group: Group
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
type FormValues = {
|
||||
name: string
|
||||
}
|
||||
|
||||
const GroupEditName = ({ open, group, onClose }: GroupEditNameProps) => {
|
||||
const { mutate } = useSWRConfig()
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const formSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required').max(255),
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setIsModalOpen(open)
|
||||
}, [open])
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (
|
||||
{ name }: FormValues,
|
||||
{ setSubmitting }: FormikHelpers<FormValues>,
|
||||
) => {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const result = await GroupAPI.updateName(group.id, {
|
||||
name,
|
||||
})
|
||||
mutate(`/groups/${group.id}`, result)
|
||||
setSubmitting(false)
|
||||
onClose?.()
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
},
|
||||
[group.id, onClose, mutate],
|
||||
)
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => onClose?.()}
|
||||
closeOnOverlayClick={false}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Edit Name</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<Formik
|
||||
enableReinitialize={true}
|
||||
initialValues={{ name: group.name }}
|
||||
validationSchema={formSchema}
|
||||
validateOnBlur={false}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ errors, touched, isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalBody>
|
||||
<Field name="name">
|
||||
{({ field }: FieldAttributes<FieldProps>) => (
|
||||
<FormControl
|
||||
isInvalid={errors.name && touched.name ? true : false}
|
||||
>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="Name"
|
||||
disabled={isSubmitting}
|
||||
autoFocus
|
||||
/>
|
||||
<FormErrorMessage>{errors.name}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</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}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupEditName
|
||||
91
Voltaserve/ui/src/components/group/group-remove-member.tsx
Normal file
91
Voltaserve/ui/src/components/group/group-remove-member.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import { useCallback, useState } from 'react'
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from '@chakra-ui/react'
|
||||
import { cx } from '@emotion/css'
|
||||
import GroupAPI, { Group } from '@/client/api/group'
|
||||
import { User } from '@/client/idp/user'
|
||||
import userToString from '@/helpers/user-to-string'
|
||||
|
||||
export type GroupRemoveMemberProps = {
|
||||
group: Group
|
||||
user: User
|
||||
isOpen: boolean
|
||||
onClose?: () => void
|
||||
onCompleted?: () => void
|
||||
}
|
||||
|
||||
const GroupRemoveMember = ({
|
||||
group,
|
||||
user,
|
||||
isOpen,
|
||||
onCompleted,
|
||||
onClose,
|
||||
}: GroupRemoveMemberProps) => {
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleRemoveMember = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
await GroupAPI.removeMember(group.id, {
|
||||
userId: user.id,
|
||||
})
|
||||
onCompleted?.()
|
||||
onClose?.()
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [group, user, onCompleted, onClose])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={() => onClose?.()}
|
||||
closeOnOverlayClick={false}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Remove Member</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<div>
|
||||
Are you sure you would like to remove member{' '}
|
||||
<span className={cx('font-bold')}>{userToString(user)}</span> from
|
||||
group <span className={cx('font-bold')}>{group.name}</span>?
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<div className={cx('flex', 'flex-row', 'items-center', 'gap-1')}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
colorScheme="blue"
|
||||
disabled={loading}
|
||||
onClick={() => onClose?.()}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="solid"
|
||||
colorScheme="red"
|
||||
isLoading={loading}
|
||||
onClick={handleRemoveMember}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupRemoveMember
|
||||
Reference in New Issue
Block a user