Untitled
plain_text
2 months ago
7.7 kB
5
Indexable
Never
const ActiveUser: React.FC = () => { const { enqueueSnackbar } = useSnackbar(); const [search, setSearch] = useState<string>(''); const debouncedSearch = useDebounce<string>(search, 500); const [initialData, setInitialData] = useState<IUserFormRequest>(); const [errorFieldsMessage, setErrorFieldsMessage] = useState(DEFAULT_EMPTY_FIELDS); const { register: registerUser, handleSubmit: handleSubmitUser, reset: resetUser, setValue: setValueUser, getValues: getValuesUser, } = useForm<IUserFormRequest>(); const serverTable = useServerTable(); const UserListQuery = useMemo( () => ({ search: debouncedSearch, page: serverTable.paginationModel.page + 1, limit: serverTable.paginationModel.pageSize, is_active: IsActive.active, }), [debouncedSearch, serverTable.paginationModel] ); const { userData, userMeta, isFetching, isLoading, refetch: refetchUserList, } = useGetUserList(UserListQuery); useEffect(() => { if (initialData) { setValueUser('name', initialData.name); setValueUser('email', initialData.email); setValueUser('branch_id', initialData.branch_id); setValueUser('department_id', initialData.department_id); setValueUser('group_id', initialData.group_id); setValueUser('role_id', initialData.role_id); } }, [initialData]); console.log('initialData', initialData); const handleSuccessAddEditSubmitUser = (res: AxiosResponse) => { enqueueSnackbar(res.data.message, { anchorOrigin: { vertical: 'top', horizontal: 'right' }, }); refetchUserList(); handleCloseDialog('addUser'); handleCloseDialog('editUser'); }; const handleErrorAddEditSubmitUser = (error: any) => { if (error.response.status === 422) setErrorFieldsMessage((prev) => ({ ...prev, ...error.response.data.errors, })); else { enqueueSnackbar(error?.response?.data.message, { anchorOrigin: { vertical: 'top', horizontal: 'right' }, variant: 'error', }); } }; const columns = React.useMemo<GridColDef<IUserListResponse>[]>( () => [ { field: 'name', headerName: 'Nama', minWidth: 160, flex: 1 }, { field: 'employee_id', headerName: 'ID', minWidth: 100, flex: 1 }, { field: 'email', headerName: 'Email', minWidth: 200, flex: 1 }, { field: 'department', headerName: 'Departemen', minWidth: 120, flex: 1, valueGetter: (params) => { return params.row.department?.name; }, }, { field: 'groups', headerName: 'Grup', minWidth: 120, flex: 1, valueGetter: (params) => { return params.row.groups?.map((group) => group?.name); }, }, { field: 'status', headerName: 'Status', minWidth: 200, flex: 1 }, { field: 'action', headerName: '', disableColumnMenu: true, width: 48, renderCell: (params: GridRenderCellParams) => <MoreMenu {...params} />, }, ], [] ); const handleSearchUser = (event: React.ChangeEvent<HTMLInputElement>) => { setSearch(event.target.value); }; const isLoadingDataList = isFetching || isLoading; const [openDialog, setOpenDialog] = useState({ addUser: false, addEditGroup: false, deleteGroup: false, }); const [dialogType, setDialogType] = useState<FormType>('add'); const handleOpenDialog = (key: string, type: FormType = 'add') => { setOpenDialog((prev) => ({ ...prev, [key]: true })); setDialogType(type); }; const handleCloseDialog = (key: string) => { setOpenDialog((prev) => ({ ...prev, [key]: false })); setErrorFieldsMessage(DEFAULT_EMPTY_FIELDS); }; const handleAddUser = () => { handleCloseDialog('addUser'); }; const { mutateAsync: mutateAsyncCreateUser } = useCreateUser({ onSuccess: handleSuccessAddEditSubmitUser, onError: handleErrorAddEditSubmitUser, }); const submitCreateUser = async (data: IUserFormRequest) => { mutateAsyncCreateUser({ ...data, company_id: 1, }); setErrorFieldsMessage(DEFAULT_EMPTY_FIELDS); }; if (!HAS_ACCESS) return ( <IllustrationTemplate imageUrl="/img/x-circle.svg" imageAlt="no access" content="Kamu tidak memiliki akses untuk halaman ini" /> ); return ( <> <AddEditUserDialog open={openDialog.addUser} type="add" errors={errorFieldsMessage} initialData={{ ...registerUser('name') }} onClose={() => handleCloseDialog('addUser')} onSubmit={submitCreateUser} /> <Box sx={{ overflow: 'auto', position: 'relative' }} display="flex"> <Box width={{ xs: '100%', md: 'calc(100% - 280px)' }} flex={1} sx={{ p: 3 }} > <Box sx={{ display: 'flex', justifyContent: 'space-between', }} > <Box> <Typography variant="h5" component="h2"> Daftar Pengguna </Typography> <Typography variant="body2" component="p" color="InactiveCaptionText" > Additional description if required </Typography> </Box> <Box sx={{ display: 'flex', alignItems: 'center' }}> <Link href={{ pathname: 'user/inactive' }}> <Tooltip title="Pengguna tidak aktif"> <IconButton> <PersonOff /> </IconButton> </Tooltip> </Link> <Button sx={{ ml: 2 }} variant="contained" onClick={() => handleOpenDialog('addUser')} > <Typography sx={{ display: { xs: 'none', sm: 'block' } }}> Tambah Pengguna </Typography> <Add sx={{ display: { sm: 'none' } }} /> </Button> </Box> </Box> <Box sx={{ mt: 4 }}> <Box sx={{ mb: 2 }}> <FormControl size="small" variant="outlined" sx={{ minWidth: 300 }} > <OutlinedInput placeholder="Cari Pengguna" id="outlined-adornment-search-report" fullWidth startAdornment={ <InputAdornment position="start"> <SearchOutlined /> </InputAdornment> } onChange={handleSearchUser} /> </FormControl> </Box> <Box sx={{ width: '100%' }}> <DataGrid sx={{ border: 0, width: '100%', height: 500 }} rows={userData} columns={columns} density={'compact'} loading={isLoadingDataList} {...serverTable} rowCount={userMeta?.totalItems} slots={{ // toolbar: () => ( // <> // <DataTableToolbar onSearch={handleSearchUser} /> // </> // ), noResultsOverlay: TableNoResult, noRowsOverlay: TableNoData, }} checkboxSelection disableRowSelectionOnClick /> </Box> </Box> </Box> </Box> </> ); }; export default ActiveUser;