diff --git a/apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx b/apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx index a665d4c6..8c889fd2 100644 --- a/apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx +++ b/apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx @@ -2,13 +2,14 @@ import { useLHSession } from '@components/Contexts/LHSessionContext' import { useOrg } from '@components/Contexts/OrgContext' import AddUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup' +import EditUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup' import ManageUsers from '@components/Objects/Modals/Dash/OrgUserGroups/ManageUsers' import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal' import Modal from '@components/StyledElements/Modal/Modal' import { getAPIUrl } from '@services/config/config' import { deleteUserGroup } from '@services/usergroups/usergroups' import { swrFetcher } from '@services/utils/ts/requests' -import { SquareUserRound, Users, X } from 'lucide-react' +import { Pencil, SquareUserRound, Users, X } from 'lucide-react' import React from 'react' import toast from 'react-hot-toast' import useSWR, { mutate } from 'swr' @@ -19,6 +20,7 @@ function OrgUserGroups() { const access_token = session?.data?.tokens?.access_token; const [userGroupManagementModal, setUserGroupManagementModal] = React.useState(false) const [createUserGroupModal, setCreateUserGroupModal] = React.useState(false) + const [editUserGroupModal, setEditUserGroupModal] = React.useState(false) const [selectedUserGroup, setSelectedUserGroup] = React.useState(null) as any const { data: usergroups } = useSWR( @@ -96,8 +98,24 @@ function OrgUserGroups() { } /> - - + + + + Edit + + } + minHeight='sm' + minWidth='sm' + onOpenChange={() => { + setEditUserGroupModal(!editUserGroupModal) + }} + dialogContent={ + + } + /> - Delete + Delete } functionToExecute={() => { diff --git a/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx b/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx new file mode 100644 index 00000000..b0d20fe0 --- /dev/null +++ b/apps/web/components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup.tsx @@ -0,0 +1,104 @@ +'use client' +import FormLayout, { + FormField, + FormLabelAndMessage, + Input, +} from '@components/StyledElements/Form/Form' +import * as Form from '@radix-ui/react-form' +import { useOrg } from '@components/Contexts/OrgContext' +import React from 'react' +import { updateUserGroup } from '@services/usergroups/usergroups' +import { mutate } from 'swr' +import { getAPIUrl } from '@services/config/config' +import { useLHSession } from '@components/Contexts/LHSessionContext' +import { useFormik } from 'formik' +import toast from 'react-hot-toast' + +type EditUserGroupProps = { + usergroup: { + id: number, + name: string, + description: string, + } +} + +const validate = (values: any) => { + const errors: any = {} + + if (!values.name) { + errors.name = 'Name is Required' + } + + return errors +} + +function EditUserGroup(props: EditUserGroupProps) { + const org = useOrg() as any; + const session = useLHSession() as any + const access_token = session?.data?.tokens?.access_token; + const [isSubmitting, setIsSubmitting] = React.useState(false) + + const formik = useFormik({ + initialValues: { + name: props.usergroup.name, + description: props.usergroup.description, + }, + validate, + onSubmit: async (values) => { + setIsSubmitting(true) + const res = await updateUserGroup(props.usergroup.id, access_token, values) + + if (res.status == 200) { + setIsSubmitting(false) + toast.success(`UserGroup saved successfully`) + mutate(`${getAPIUrl()}usergroups/org/${org.id}`) + } else { + toast.error(`Error saving UserGroup, please retry later.`) + setIsSubmitting(false) + } + }, + }) + + console.log(formik.errors.name) + + return ( + + + + + + + + + + + + + +
+ + + +
+
+ ) +} + +export default EditUserGroup \ No newline at end of file diff --git a/apps/web/services/usergroups/usergroups.ts b/apps/web/services/usergroups/usergroups.ts index b7f9e50c..2cee557f 100644 --- a/apps/web/services/usergroups/usergroups.ts +++ b/apps/web/services/usergroups/usergroups.ts @@ -48,6 +48,19 @@ export async function unLinkUserToUserGroup( return res } +export async function updateUserGroup( + usergroup_id: number, + access_token: string, + data: any +) { + const result: any = await fetch( + `${getAPIUrl()}usergroups/${usergroup_id}`, + RequestBodyWithAuthHeader('PUT', data, null, access_token) + ) + const res = await getResponseMetadata(result) + return res +} + export async function deleteUserGroup( usergroup_id: number, access_token: string