diff --git a/frontend/dashboard/src/@types/user.ts b/frontend/dashboard/src/@types/user.ts index 583ab7b5..d7d75203 100755 --- a/frontend/dashboard/src/@types/user.ts +++ b/frontend/dashboard/src/@types/user.ts @@ -139,6 +139,11 @@ export type Organization = { name: string; }; + export type Corporate = { + id: number; + name: string; + }; + export type Permisions = { name: string; guard_name: string; @@ -152,6 +157,7 @@ export type UserAccess = { person: Person; role: Role; organization_id: Organization; + corporate_id: Corporate; } export type Person = { diff --git a/frontend/dashboard/src/pages/UserManagement/UserAccess/CreateUpdate.tsx b/frontend/dashboard/src/pages/UserManagement/UserAccess/CreateUpdate.tsx index 00ca956b..83bc8d68 100755 --- a/frontend/dashboard/src/pages/UserManagement/UserAccess/CreateUpdate.tsx +++ b/frontend/dashboard/src/pages/UserManagement/UserAccess/CreateUpdate.tsx @@ -14,6 +14,7 @@ export default function UserAccessCreate() { const { id } = useParams(); const [ currentUserAccess, setCurrentUserAccess ] = useState(); const [ roles, setRole ] = useState(); + const [ corporate, setCorporate ] = useState(); const [ organizations, setOrganization ] = useState(); @@ -42,8 +43,7 @@ export default function UserAccessCreate() { navigate('/404'); } }) - - axios.get('/organization-list') + axios.get('/organization-list') .then((res)=> { setOrganization(res.data) }) @@ -53,8 +53,20 @@ export default function UserAccessCreate() { } }) + axios.get('/corporates') + .then((res)=> { + setCorporate(res.data) + }) + .catch((err) => { + if (err.response.status === 404) { + navigate('/404'); + } + }) + }, [id]); + console.log(corporate, 'test') + return ( @@ -69,7 +81,7 @@ export default function UserAccessCreate() { ]} /> - + ); } diff --git a/frontend/dashboard/src/pages/UserManagement/UserAccess/Form.tsx b/frontend/dashboard/src/pages/UserManagement/UserAccess/Form.tsx index ea5d1162..5116c140 100755 --- a/frontend/dashboard/src/pages/UserManagement/UserAccess/Form.tsx +++ b/frontend/dashboard/src/pages/UserManagement/UserAccess/Form.tsx @@ -2,23 +2,25 @@ import * as Yup from 'yup'; import { LoadingButton } from "@mui/lab"; import { Box, Card, Grid, Stack, Typography } from "@mui/material"; import { Role, UserAccess, Organization } from "../../../@types/user"; -import { FormProvider, RHFSelect, RHFSwitch, RHFTextField } from "../../../components/hook-form"; -import { useEffect, useMemo } from 'react'; +import { FormProvider, RHFSelect, RHFTextField } from "../../../components/hook-form"; +import { useEffect, useMemo, useState } from 'react'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { useSnackbar } from 'notistack'; import { useNavigate, useParams } from 'react-router-dom'; import axios from '../../../utils/axios'; import palette from '@/theme/palette'; +import { Corporate } from '@/@types/corporates'; type Props = { isEdit: boolean; currentUserAccess?: UserAccess; roles: Role; organizations: Organization; + corporate: Corporate; }; -export default function AccsessForm({ isEdit, currentUserAccess, roles, organizations }: Props) { +export default function AccessForm({ isEdit, currentUserAccess, roles, organizations, corporate }: Props) { const { enqueueSnackbar } = useSnackbar(); const navigate = useNavigate(); @@ -28,14 +30,14 @@ export default function AccsessForm({ isEdit, currentUserAccess, roles, organiza name: Yup.string().required('Name is required'), }); - console.log(currentUserAccess, 'test') const defaultValues = useMemo( () => ({ name: currentUserAccess?.person?.name || '', - username: currentUserAccess?.username || '', + username: currentUserAccess?.username || '', email: currentUserAccess?.email || '', - roles: currentUserAccess?.role?.id || [], - organizations: currentUserAccess?.organization_id || [], + roles: currentUserAccess?.role?.id || '', + organizations: currentUserAccess?.organization_id || '', + corporates: currentUserAccess?.corporate_id || '', password: '', }), [currentUserAccess] @@ -58,108 +60,119 @@ export default function AccsessForm({ isEdit, currentUserAccess, roles, organiza const { reset, watch, - control, - setValue, - getValues, - setError, handleSubmit, + setError, formState: { isSubmitting }, } = methods; + // Watch 'roles' field to conditionally render other fields + const selectedRole = watch('roles'); const onSubmit = async (data: any) => { - - console.log(data); + console.log(data, 'test123'); if (!isEdit) { await axios - .post('/user/access', data) - .then((res) => { - enqueueSnackbar('User created successfully', { variant: 'success' }); - }) - .then((res) => { - navigate('/user-access', { replace: true }); - }) - .catch(({ response }) => { - if (response.status === 422) { - for (const [key, value] of Object.entries(response.data.errors)) { - setError(key, { message: value[0] }); - enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' }); + .post('/user/access', data) + .then((res) => { + enqueueSnackbar('User created successfully', { variant: 'success' }); + navigate('/user-access', { replace: true }); + }) + .catch(({ response }) => { + if (response.status === 422) { + for (const [key, value] of Object.entries(response.data.errors)) { + setError(key, { message: value[0] }); + enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' }); + } + } else { + enqueueSnackbar('Create Failed : ' + response.data.message, { variant: 'error' }); } - } - else { - enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' }); - } - }); + }); } else { await axios .put('/user/access/' + currentUserAccess?.id, data) .then((res) => { enqueueSnackbar('User updated successfully', { variant: 'success' }); - }) - .then((res) => { - navigate('/user-access' , { replace: true }); + navigate('/user-access', { replace: true }); }) .catch(({ response }) => { - enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' }); + enqueueSnackbar('Update Failed : ' + response.data.message, { variant: 'error' }); }); } }; - const optionsRoles = roles?.data?.map(item => ({ + // Map role, organization, and corporate options + const optionsRoles = roles?.data?.map((item) => ({ value: item.id, - label: item.name + label: item.name, })) ?? []; - if (optionsRoles.length > 0) { - optionsRoles.unshift({ value: '', label: '' }); - } - - const optionsOrganization = organizations?.data?.map(item => ({ + const optionsOrganization = organizations?.data?.map((item) => ({ value: item.id, - label: item.name + label: item.name, })) ?? []; - if (optionsOrganization.length > 0) { - optionsOrganization.unshift({ value: '', label: '' }); - } + const optionsCorporate = corporate?.data?.map((item) => ({ + value: item.id, + label: item.name, + })) ?? []; return ( - - - - - - User Access - - - - - - {optionsRoles.map((option, index) => ( - - ))} - - - {optionsOrganization.map((option, index) => ( - - ))} - + + + + + + + User Access + + + + + + {/* Select for roles */} + + {optionsRoles.map((option, index) => ( + + ))} + - - { isEdit? 'Update' : 'Create' } - + {/* Conditional rendering based on selectedRole */} + {selectedRole && (['8'].includes(selectedRole) ? ( + + {optionsOrganization.map((option, index) => ( + + ))} + + ) : ['2'].includes(selectedRole) ? ( + + {optionsCorporate.map((option, index) => ( + + ))} + + ) : null)} - - - - - - + + {isEdit ? 'Update' : 'Create'} + + + + + + + ); }