Merge pull request #369 from chrishollandaise/feat/usergroup-edit-button

Edit UserGroups Metadata

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() {
                                             }
                                         />
                                     </td>
-                                    <td className="py-3 px-4 ">
-
+                                    <td className="py-3 px-4 flex space-x-2">
+                                        <Modal
+                                         isDialogOpen={editUserGroupModal}
+                                         dialogTrigger={
+                                            <button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md font-bold items-center text-sm text-sky-100">
+                                                <Pencil className="size-4" />
+                                                <span>Edit</span>
+                                             </button>
+                                         }
+                                         minHeight='sm'
+                                         minWidth='sm'
+                                         onOpenChange={() => {
+                                            setEditUserGroupModal(!editUserGroupModal)
+                                         }}
+                                         dialogContent={
+                                            <EditUserGroup usergroup={usergroup} />
+                                         }
+                                        />
                                         <ConfirmationModal
                                             confirmationButtonText="Delete UserGroup"
                                             confirmationMessage="Access to all resources will be removed for all users in this UserGroup. Are you sure you want to delete this UserGroup ?"
@@ -105,7 +123,7 @@ function OrgUserGroups() {
                                             dialogTrigger={
                                                 <button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
                                                     <X className="w-4 h-4" />
-                                                    <span> Delete</span>
+                                                    <span>Delete</span>
                                                 </button>
                                             }
                                             functionToExecute={() => {

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 (
+        <FormLayout onSubmit={formik.handleSubmit}>
+            <FormField name="name">
+                <FormLabelAndMessage
+                    label="Name"
+                    message={formik.errors.name}
+                />
+                <Form.Control asChild>
+                    <Input
+                        onChange={formik.handleChange}
+                        value={formik.values.name}
+                        type="name"
+                        required
+                    />
+                </Form.Control>
+            </FormField>
+            <FormField name="description">
+                <FormLabelAndMessage
+                    label="Description"
+                    message={formik.errors.description}
+                />
+                <Form.Control asChild>
+                    <Input
+                        onChange={formik.handleChange}
+                        value={formik.values.description}
+                        type="description"
+                    />
+                </Form.Control>
+            </FormField>
+            <div className="flex py-4">
+                <Form.Submit asChild>
+                    <button className="w-full bg-black text-white font-bold text-center p-2 rounded-md shadow-md hover:cursor-pointer">
+                        {isSubmitting ? 'Loading...' : 'Save UserGroup'}
+                    </button>
+                </Form.Submit>
+            </div>
+        </FormLayout>
+    )
+}
+
+export default EditUserGroup

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