danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crud user admin

Browse Source
This commit is contained in:
hamid zarghami
2025-04-22 12:28:07 +03:30
parent de67c0edc3
commit a8831e2268
7 changed files with 267 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/users/List.tsx
+28 -5
View File
@@ -1,14 +1,16 @@
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import { Add, Eye, Trash } from 'iconsax-react'
import Input from '../../components/Input'
import Td from '../../components/Td'
import { Link, useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetUsers } from './hooks/useUserData'
import { useDeleteUser, useGetUsers } from './hooks/useUserData'
import { UserItemType } from './types/UserTypes'
import PageLoading from '../../components/PageLoading'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
const UsersList: FC = () => {
@@ -16,6 +18,19 @@ const UsersList: FC = () => {
const { t } = useTranslation('global')
const [search, setSearch] = useState<string>('')
const getUsers = useGetUsers(search)
const deleteUser = useDeleteUser()
const handleDeleteUser = (id: string) => {
deleteUser.mutate(id, {
onSuccess: () => {
toast.success(t('success'))
getUsers.refetch()
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
}
return (
<div className='mt-4'>
@@ -83,9 +98,17 @@ const UsersList: FC = () => {
}
</Td>
<Td text={''}>
<Link to={Pages.ticket.detail + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
<div className='flex gap-2'>
<Link to={Pages.users.detail + item.id}>
<Eye size={20} color='#8C90A3' />
</Link>
<Trash
size={20}
color='#8C90A3'
onClick={() => handleDeleteUser(item.id)}
/>
</div>
</Td>
<Td text={''} />
</tr>
src/pages/users/Update.tsx
+199
View File
@@ -0,0 +1,199 @@
import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { TickCircle } from 'iconsax-react'
import Input from '../../components/Input'
import Select from '../../components/Select'
import UploadBoxDraggble from '../../components/UploadBoxDraggble'
import { useFormik } from 'formik'
import { CreateUserType, RoleItemType } from './types/UserTypes'
import * as Yup from 'yup'
import { useSingleUpload } from '../service/hooks/useServiceData'
import { useGetRoles, useGetUserDetail, useUpdateUser } from './hooks/useUserData'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import { useNavigate, useParams } from 'react-router-dom'
import { Pages } from '../../config/Pages'
const UpdateUser: FC = () => {
const { id } = useParams()
const navigate = useNavigate()
const { t } = useTranslation('global')
const [file, setFile] = useState<File>()
const getRoles = useGetRoles('')
const singleUpload = useSingleUpload()
const updateUser = useUpdateUser()
const { data: userDetail } = useGetUserDetail(id || '')
const handleUpdateUser = (values: CreateUserType) => {
updateUser.mutate({ id: id || '', params: values }, {
onSuccess: () => {
toast.success(t('success'))
navigate(Pages.users.list)
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
}
const formik = useFormik<CreateUserType>({
initialValues: {
email: '',
firstName: '',
lastName: '',
password: '',
repeatPassword: '',
phone: '',
profilePic: '',
roleId: ''
},
validationSchema: Yup.object({
email: Yup.string().email('Invalid email').required(t('errors.required')),
firstName: Yup.string().required(t('errors.required')),
lastName: Yup.string().required(t('errors.required')),
phone: Yup.string().required(t('errors.required')),
roleId: Yup.string().required(t('errors.required')),
}),
onSubmit: async (values) => {
if (values.password === '') {
values.password = undefined
values.repeatPassword = undefined
}
if (file) {
const formData = new FormData()
formData.append('file', file)
await singleUpload.mutateAsync(formData, {
onSuccess: (data) => {
values.profilePic = data?.data?.url
handleUpdateUser(values)
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error?.message[0])
}
})
} else {
values.profilePic = undefined
handleUpdateUser(values)
}
}
})
useEffect(() => {
if (userDetail?.data) {
formik.setValues(userDetail?.data?.admin)
formik.setFieldValue('roleId', userDetail?.data?.admin?.roles?.[0]?.id)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userDetail])
return (
<div className='mt-4'>
<div className='flex justify-between items-center'>
<div>
{t('service.cateory_services')}
</div>
<Button
className='w-fit px-8'
onClick={() => formik.handleSubmit()}
isLoading={updateUser.isPending || singleUpload.isPending}
>
<div className='flex gap-2'>
<TickCircle
className='size-5'
color='white'
/>
<div className='text-sm'>
{t('user.submit_user')}
</div>
</div>
</Button>
</div>
<div className='flex gap-6 mt-9'>
<div className='flex-1 bg-white py-10 xl:px-10 px-5 rounded-3xl'>
<div>
{t('user.info_user')}
</div>
<div className='rowTwoInput mt-8'>
<Input
label={t('user.name')}
{...formik.getFieldProps('firstName')}
error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
/>
<Input
label={t('user.family')}
{...formik.getFieldProps('lastName')}
error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
/>
</div>
<div className='rowTwoInput mt-8'>
{/* <Input
label={t('user.title_job')}
/> */}
<Select
label={t('user.role')}
placeholder={t('select')}
items={getRoles.data?.data?.roles?.map((item: RoleItemType) => {
return {
label: item.name,
value: item.id
}
})}
{...formik.getFieldProps('roleId')}
error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
/>
</div>
<div className='rowTwoInput mt-8'>
<Input
label={t('user.email')}
{...formik.getFieldProps('email')}
error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
/>
<Input
label={t('user.phone_number')}
{...formik.getFieldProps('phone')}
error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
/>
</div>
</div>
<div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
<Input
label={t('user.password')}
{...formik.getFieldProps('password')}
error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
type='password'
/>
<div className='mt-8'>
<Input
label={t('user.reapeat_password')}
{...formik.getFieldProps('repeatPassword')}
error_text={formik.touched.repeatPassword && formik.errors.repeatPassword ? formik.errors.repeatPassword : ''}
type='password'
/>
</div>
<div className='mt-8'>
<div className='text-sm'>
{t('user.image')}
</div>
<div className='mt-2'>
<UploadBoxDraggble
label={t('user.image')}
onChange={(file) => setFile(file[0])}
/>
</div>
</div>
</div>
</div>
</div>
)
}
export default UpdateUser
src/pages/users/hooks/useUserData.ts
+20
View File
@@ -39,6 +39,26 @@ export const useGetUsers = (search: string, permission?: string) => {
});
};
export const useGetUserDetail = (id: string) => {
return useQuery({
queryKey: ["user-detail", id],
queryFn: () => api.getUserDetail(id),
});
};
export const useUpdateUser = () => {
return useMutation({
mutationFn: ({ id, params }: { id: string; params: CreateUserType }) =>
api.updateUser(id, params),
});
};
export const useDeleteUser = () => {
return useMutation({
mutationFn: (id: string) => api.deleteUser(id),
});
};
export const useCreateGroup = () => {
return useMutation({
mutationFn: (variables: CreateGroupType) => api.createGroup(variables),
src/pages/users/service/UserService.ts
+15
View File
@@ -32,6 +32,21 @@ export const getUsers = async (search: string, permission?: string) => {
return data;
};
export const getUserDetail = async (id: string) => {
const { data } = await axios.get(`/users/admins/${id}`);
return data;
};
export const updateUser = async (id: string, params: CreateUserType) => {
const { data } = await axios.patch(`/users/admins/${id}`, params);
return data;
};
export const deleteUser = async (id: string) => {
const { data } = await axios.delete(`/users/admins/${id}`);
return data;
};
export const createGroup = async (params: CreateGroupType) => {
const { data } = await axios.post(`/users/user-group`, params);
return data;
src/pages/users/types/UserTypes.ts
+2 -2
View File
@@ -16,8 +16,8 @@ export type CreateUserType = {
phone: string;
firstName: string;
lastName: string;
password: string;
repeatPassword: string;
password?: string;
repeatPassword?: string;
email: string;
roleId: string;
profilePic?: string;