Add user access user role client portal
This commit is contained in:
ivan-sim
@@ -20,6 +20,8 @@ use Modules\Internal\Http\Controllers\Api\AuditTrailController;
|
||||
use Modules\Internal\Http\Controllers\Api\CorporateController;
|
||||
use Modules\Internal\Http\Controllers\Api\NavigationController;
|
||||
|
||||
use Modules\Internal\Http\Controllers\Api\UserManagementController;
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| API Routes
|
||||
@@ -99,5 +101,19 @@ Route::prefix('client')->group(function () {
|
||||
|
||||
// Navigation
|
||||
Route::get('navigations', [NavigationController::class, 'index']);
|
||||
|
||||
// User Management Role
|
||||
Route::get('user/role', [UserManagementController::class, 'index']);
|
||||
Route::post('user/role', [UserManagementController::class, 'store']);
|
||||
Route::get('user/role/{id}', [UserManagementController::class, 'edit']);
|
||||
Route::put('user/role/{id}', [UserManagementController::class, 'update']);
|
||||
Route::get('permission_list', [UserManagementController::class, 'permission_list']);
|
||||
|
||||
// User Role Access
|
||||
Route::get('user/access', [UserManagementController::class, 'list_access']);
|
||||
Route::post('user/access', [UserManagementController::class, 'store_access']);
|
||||
Route::get('user/access/{id}', [UserManagementController::class, 'edit_access']);
|
||||
Route::put('user/access/{id}', [UserManagementController::class, 'update_access']);
|
||||
Route::get('role-list', [UserManagementController::class, 'list_role']);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -261,30 +261,46 @@ class NavigationSeeder extends Seeder
|
||||
],
|
||||
'permission' => 'case-management-client-portal'
|
||||
],
|
||||
[
|
||||
'title' => 'User Management',
|
||||
'children' => [
|
||||
[
|
||||
'title' => 'User Role',
|
||||
'path' => '/user-role',
|
||||
'permission' => 'user-role-list-client-portal'
|
||||
],
|
||||
[
|
||||
'title' => 'User Access',
|
||||
'path' => '/user-access',
|
||||
'permission' => 'user-access-list-client-portal'
|
||||
]
|
||||
],
|
||||
'permission' => 'user-management-client-portal'
|
||||
]
|
||||
];
|
||||
|
||||
foreach ($menuItems as $menuItemData) {
|
||||
$menuItem = Navigations::updateOrCreate([
|
||||
'title' => $menuItemData['title'],
|
||||
'permission' => $menuItemData['permission']
|
||||
'permission' => $menuItemData['permission'] ?? null
|
||||
],
|
||||
[
|
||||
'title' => $menuItemData['title'],
|
||||
'path' => $menuItemData['path'] ?? null,
|
||||
'permission' => $menuItemData['permission']
|
||||
'permission' => $menuItemData['permission'] ?? null
|
||||
]);
|
||||
|
||||
if (isset($menuItemData['children'])) {
|
||||
foreach ($menuItemData['children'] as $childData) {
|
||||
$menuItemChildren = Navigations::updateOrCreate([
|
||||
'title' => $childData['title'],
|
||||
'permission' => $childData['permission']
|
||||
'permission' => $childData['permission'] ?? null
|
||||
],
|
||||
[
|
||||
'title' => $childData['title'],
|
||||
'path' => $childData['path'] ?? null,
|
||||
'parent_id' => $menuItem->id,
|
||||
'permission' => $childData['permission']
|
||||
'permission' => $childData['permission'] ?? null
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,6 +86,9 @@ class PermissionTableSeeder extends Seeder
|
||||
'formularium-list-client-portal',
|
||||
'case-management-client-portal',
|
||||
'service-monitoring-limit-client-portal',
|
||||
'user-management-client-portal',
|
||||
'user-role-list-client-portal',
|
||||
'user-access-list-client-portal'
|
||||
]
|
||||
]
|
||||
];
|
||||
|
||||
@@ -21,7 +21,7 @@ export function NavItemRoot({
|
||||
|
||||
const renderContent = (
|
||||
<>
|
||||
<DotIcon active={active} />
|
||||
{/* <DotIcon active={active} /> */}
|
||||
<ListItemTextStyle disableTypography primary={title} isCollapse={isCollapse} />
|
||||
{!isCollapse && (
|
||||
<>
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function Drugs() {
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={'Employee Data'}
|
||||
links={[{ name: 'Case Management' }, { name: 'Employee Data', href: '/employee-data' }]}
|
||||
links={[{ name: 'Corporate' }, { name: 'Employee Data', href: '/employee-data' }]}
|
||||
/>
|
||||
<Grid container>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function MasterFormularium() {
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: "Master",
|
||||
name: "Case Management",
|
||||
href: "/master/formularium-template-v2"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import Page from "../../../components/Page";
|
||||
import {useContext, useEffect, useMemo, useState } from 'react';
|
||||
import axios from '../../../utils/axios';
|
||||
import UserAccessForm from './Form';
|
||||
import { Role, UserAccess } from '../../../@types/user';
|
||||
|
||||
|
||||
|
||||
export default function UserAccessCreate() {
|
||||
const { id } = useParams();
|
||||
const [ currentUserAccess, setCurrentUserAccess ] = useState<UserAccess>();
|
||||
const [ roles, setRole ] = useState<any>();
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isEdit = !!id;
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/user/access/'+id)
|
||||
.then((res) => {
|
||||
setCurrentUserAccess(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response.status === 404) {
|
||||
navigate('/404');
|
||||
}
|
||||
})
|
||||
}
|
||||
axios.get('/role-list')
|
||||
.then((res)=> {
|
||||
setRole(res.data)
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response.status === 404) {
|
||||
navigate('/404');
|
||||
}
|
||||
})
|
||||
|
||||
}, [id]);
|
||||
|
||||
|
||||
return (
|
||||
<Page title= "User Access">
|
||||
<HeaderBreadcrumbs
|
||||
sx={{ px: 2 }}
|
||||
heading={'User Access'}
|
||||
links={[
|
||||
{
|
||||
name: 'User Access',
|
||||
href: '/user-access',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<UserAccessForm isEdit={isEdit} currentUserAccess={currentUserAccess} roles={roles}/>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import * as Yup from 'yup';
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
import { Box, Card, Grid, Stack, Typography } from "@mui/material";
|
||||
import { Role, UserAccess } from "../../../@types/user";
|
||||
import { FormProvider, RHFSelect, RHFSwitch, RHFTextField } from "../../../components/hook-form";
|
||||
import { useEffect, useMemo } 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';
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentUserAccess?: UserAccess;
|
||||
roles: Role
|
||||
};
|
||||
|
||||
export default function AccsessForm({ isEdit, currentUserAccess, roles }: Props) {
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
|
||||
const NewCorporatePlanSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
});
|
||||
|
||||
console.log(currentUserAccess, 'test')
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
name: currentUserAccess?.person?.name || '',
|
||||
username: currentUserAccess?.username || '',
|
||||
email: currentUserAccess?.email || '',
|
||||
roles: currentUserAccess?.role?.id || [],
|
||||
password: '',
|
||||
}),
|
||||
[currentUserAccess]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentUserAccess) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
}, [isEdit, currentUserAccess]);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: yupResolver(NewCorporatePlanSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
|
||||
console.log(data);
|
||||
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' });
|
||||
}
|
||||
}
|
||||
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 });
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const optionsRoles = roles?.data?.map(item => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
})) ?? [];
|
||||
|
||||
if (optionsRoles.length > 0) {
|
||||
optionsRoles.unshift({ value: '', label: '' });
|
||||
}
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Box sx={{ px: 2 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Card sx={{ px: 3, py: 4 }}>
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="h6" color={palette.light.primary.main}>User Access</Typography>
|
||||
<RHFTextField name="name" label="Name" />
|
||||
<RHFTextField name="username" label="Username" />
|
||||
<RHFTextField type="email" name="email" label="Email" />
|
||||
<RHFTextField type="password" name="password" label="Password" />
|
||||
<RHFSelect name="roles" label="Roles">
|
||||
{optionsRoles.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</RHFSelect>
|
||||
|
||||
|
||||
<LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
|
||||
{ isEdit? 'Update' : 'Create' }
|
||||
</LoadingButton>
|
||||
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
// @mui
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
Container,
|
||||
FormControl,
|
||||
Grid,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
OutlinedInput,
|
||||
Paper,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
Badge,
|
||||
Stack,
|
||||
} from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
|
||||
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import MuiAccordionSummary, {
|
||||
AccordionSummaryProps,
|
||||
} from '@mui/material/AccordionSummary';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import axios from '../../../utils/axios';
|
||||
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
|
||||
import MuiAccordionDetails from '@mui/material/AccordionDetails';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import { Corporate } from '@/@types/corporates';
|
||||
import { fDate, fDateTime } from '@/utils/formatTime';
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
))(({ theme }) => ({
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: 0,
|
||||
},
|
||||
'&:before': {
|
||||
display: 'none',
|
||||
},
|
||||
}));
|
||||
|
||||
const AccordionSummary = styled((props: AccordionSummaryProps) => (
|
||||
<MuiAccordionSummary
|
||||
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
|
||||
{...props}
|
||||
/>
|
||||
))(({ theme }) => ({
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, .05)'
|
||||
: 'rgba(0, 0, 0, .03)',
|
||||
flexDirection: 'row-reverse',
|
||||
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
'& .MuiAccordionSummary-content': {
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
}));
|
||||
|
||||
export default function CustomizedAccordions() {
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel1');
|
||||
|
||||
const handleChange =
|
||||
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
|
||||
setExpanded(newExpanded ? panel : false);
|
||||
};
|
||||
const pageTitle = 'Diagnosis Template History';
|
||||
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const [corporate, setCorporate] = useState<Corporate | null>();
|
||||
const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
|
||||
|
||||
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
|
||||
|
||||
useEffect(() => {
|
||||
setCorporate(configuredCorporateContext.currentCorporate);
|
||||
const model = 'App\\Models\\IcdTemplate';
|
||||
const url = `/audittrail/${id}?model=${model}`;
|
||||
axios.get(url)
|
||||
.then((res) => {
|
||||
setCurrentCorporate(res.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Terjadi kesalahan:', error);
|
||||
});
|
||||
|
||||
}, [configuredCorporateContext]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: 'Master',
|
||||
href: '/master/diagnosis-template',
|
||||
},
|
||||
{
|
||||
name: 'Diagnosis Template',
|
||||
href: '/master/diagnosis-template',
|
||||
},
|
||||
// {
|
||||
// name: 'Audittrail ICD',
|
||||
// href: '/corporate/' + id + '/plans',
|
||||
// },
|
||||
]}
|
||||
/>
|
||||
{currentCorporate?.data.map((item, index) => (
|
||||
<Accordion
|
||||
key={index}
|
||||
expanded={expanded === `panel${index}`}
|
||||
onChange={handleChange(`panel${index}`)}
|
||||
>
|
||||
<AccordionSummary
|
||||
aria-controls={`panel${index}d-content`}
|
||||
id={`panel${index}d-header`}
|
||||
>
|
||||
<Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">Field</TableCell>
|
||||
<TableCell align="center">Old Value</TableCell>
|
||||
<TableCell align="center">New Values</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{Object.entries(item.old_values).map(([key, value]) => {
|
||||
let renderedValue;
|
||||
if (key === 'deleted_by' ||
|
||||
key === 'deleted_at' ||
|
||||
key === 'created_by' ||
|
||||
key === 'created_at' ||
|
||||
key === 'updated_by' ||
|
||||
key === 'description'
|
||||
) {
|
||||
return null; // Melewati iterasi saat key adalah 'deleted_by'
|
||||
}
|
||||
switch (key) {
|
||||
case 'welcome_message':
|
||||
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
|
||||
value = value.replace(/<[^>]*>/g, '');
|
||||
break;
|
||||
case 'help_text':
|
||||
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
|
||||
value = value.replace(/<[^>]*>/g, '');
|
||||
break;
|
||||
case 'active':
|
||||
renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
|
||||
value = value == 1 ? 'Active' : 'Inactive';
|
||||
break;
|
||||
case 'created_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
case 'updated_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
case 'updated_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
case 'delete_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
default:
|
||||
renderedValue = item.new_values[key];
|
||||
break;
|
||||
}
|
||||
|
||||
const field = key.charAt(0).toUpperCase() + key.slice(1);
|
||||
if (value == renderedValue) {
|
||||
return null
|
||||
} else {
|
||||
return (
|
||||
<TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
|
||||
<TableCell>{`${field}`}</TableCell>
|
||||
<TableCell align="center">{`${value}`}</TableCell>
|
||||
<TableCell align="center">{renderedValue}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
})}
|
||||
|
||||
</TableBody>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Container,Card, Grid } from "@mui/material";
|
||||
import { useParams } from "react-router-dom";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import Page from "../../../components/Page";
|
||||
import useSettings from "../../../hooks/useSettings";
|
||||
import List from "./List";
|
||||
|
||||
|
||||
|
||||
export default function Divisions() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { corporate_id } = useParams();
|
||||
|
||||
const pageTitle = 'User Access';
|
||||
return (
|
||||
<Page title={pageTitle}>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{ name: 'User Management', href: '/user-access' },
|
||||
{
|
||||
name: 'User Access',
|
||||
href: '/user-access',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Grid container>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<List />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,443 @@
|
||||
// @mui
|
||||
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination, Grid, Autocomplete, DialogActions } from '@mui/material';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
// hooks
|
||||
import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
|
||||
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
||||
import { UserAccess } from '../../../@types/user';
|
||||
import BasePagination from '../../../components/BasePagination';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
import { Delete, EditOutlined, FindInPageOutlined } from '@mui/icons-material';
|
||||
import MuiDialog from '@/components/MuiDialog';
|
||||
|
||||
export default function List() {
|
||||
const navigate = useNavigate();
|
||||
const { themeStretch } = useSettings();
|
||||
const { corporate_id } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [importResult, setImportResult] = useState(null);
|
||||
|
||||
function SearchInput(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? ''
|
||||
setSearchText(newSearchText);
|
||||
}
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
props.onSearch(searchText); // Trigger to Parent
|
||||
}
|
||||
|
||||
useEffect(() => { // Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, [searchParams])
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
|
||||
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportForm(props: any) {
|
||||
// IMPORT
|
||||
// Create Button Menu
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const createMenu = Boolean(anchorEl);
|
||||
const importForm = useRef<HTMLInputElement>(null)
|
||||
const [currentImportFileName, setCurrentImportFileName] = useState(null)
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleImportButton = () => {
|
||||
if (importForm?.current) {
|
||||
handleClose();
|
||||
importForm.current ? importForm.current.click() : console.log('No File selected');
|
||||
} else {
|
||||
alert('No file selected')
|
||||
}
|
||||
}
|
||||
|
||||
const handleICDList = async (appliedFilter = null) => {
|
||||
axios.get('master/diagnosis/list').then((response) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = response.data.data.file_url;
|
||||
link.setAttribute('download', response.data.data.file_name);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
handleClose();
|
||||
});
|
||||
}
|
||||
|
||||
const handleCancelImportButton = () => {
|
||||
importForm.current.value = "";
|
||||
importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
|
||||
const handleImportChange = (event: any) => {
|
||||
if (event.target.files[0]) {
|
||||
setCurrentImportFileName(event.target.files[0].name)
|
||||
} else {
|
||||
setCurrentImportFileName(null);
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
if (importForm.current?.files.length) {
|
||||
const formData = new FormData();
|
||||
formData.append("file", importForm.current?.files[0])
|
||||
axios.post(`master/diagnosis/import`, formData )
|
||||
.then(response => {
|
||||
handleCancelImportButton();
|
||||
loadDataTableData();
|
||||
setImportResult(response.data)
|
||||
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
|
||||
})
|
||||
.catch(response => {
|
||||
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
|
||||
})
|
||||
} else {
|
||||
enqueueSnackbar('No File Selected', { variant: 'warning' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleGetTemplate = (type :string) => {
|
||||
axios.get('corporates/import-document-example/' + type)
|
||||
.then((response) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = response.data.data.file_url;
|
||||
link.setAttribute('download', response.data.data.file_name);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
handleClose();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
|
||||
{( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter}/>
|
||||
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
|
||||
<Button
|
||||
id="import-button"
|
||||
variant='contained'
|
||||
startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
|
||||
aria-controls={createMenu ? 'basic-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={createMenu ? 'true' : undefined}
|
||||
onClick={() => navigate(`/user-access/create`)}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem>
|
||||
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData( userAccess: UserAccess ): UserAccess {
|
||||
return {
|
||||
...userAccess,
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the every row of the table
|
||||
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||
const { row } = props;
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleActivate = (model: any, status: string) => {
|
||||
axios
|
||||
.put(`/master/diagnosis-template/${row.id}/activation`, {
|
||||
// service_code: service.service_code,
|
||||
active: status == 'active',
|
||||
})
|
||||
.then((res) => {
|
||||
setDataTableData({
|
||||
...dataTableData,
|
||||
data: dataTableData.data.map((model) => {
|
||||
let updatedModel = model;
|
||||
if (row.id == model.id) {
|
||||
updatedModel.active = res.data.icd.active;
|
||||
}
|
||||
return updatedModel;
|
||||
}),
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.log('asdasd', error.response.data.message)
|
||||
enqueueSnackbar(
|
||||
error.response.data.message ?? error.message ?? 'Failed Processing Request',
|
||||
{ variant: 'error' }
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow sx={{ '& > *': { borderBottom: '1' } }}>
|
||||
<TableCell align="left"/>
|
||||
<TableCell align="left">{row.person?.name ?? '-'}</TableCell>
|
||||
<TableCell align="left">{row.email ?? '-'}</TableCell>
|
||||
<TableCell align="left">{row.role?.name ?? '-'}</TableCell>
|
||||
<TableCell align="center">
|
||||
<Stack direction="row" justifyContent="flex-end" spacing={1}>
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
{/* <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}`)}>
|
||||
<FindInPageOutlined />
|
||||
Detail
|
||||
</MenuItem> */}
|
||||
<MenuItem onClick={() => navigate(`/user/access/${row.id}/edit`)} >
|
||||
<EditOutlined />
|
||||
Edit
|
||||
</MenuItem>
|
||||
{/* <MenuItem onClick={() => setOpenDialogDelete(true)}>
|
||||
<Delete color='error'/>
|
||||
Delete
|
||||
</MenuItem> */}
|
||||
</>
|
||||
} />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
// Delete
|
||||
const reasons = [
|
||||
{ value: 'agreement', label: 'Agreement changed' },
|
||||
{ value: 'endorsement', label: 'Endorsement' },
|
||||
{ value: 'renewal', label: 'Renewal' },
|
||||
{ value: 'wrong_setting', label: 'Wrong Setting' },
|
||||
// Add more options as needed
|
||||
];
|
||||
|
||||
const [isReasonSelected, setIsReasonSelected] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
reason: null
|
||||
});
|
||||
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialogDelete(false);
|
||||
resetForm();
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
reason: null
|
||||
});
|
||||
};
|
||||
const handleChange = (field, value) => {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
[field]: value,
|
||||
}));
|
||||
if (field === 'reason') {
|
||||
setIsReasonSelected(!!value);
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isReasonSelected && formData.reason !== '') {
|
||||
alert('zsd.');
|
||||
} else {
|
||||
setIsReasonSelected(false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Dialog
|
||||
const getContent = () => (
|
||||
<Stack spacing={1} marginTop={2}>
|
||||
<Typography variant="subtitle2">Are you sure to delete this User?</Typography>
|
||||
<Grid item xs={12} md={12} marginTop={4}>
|
||||
<Card sx={{padding:2, marginTop:2}} >
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
|
||||
<Autocomplete
|
||||
options={reasons}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
|
||||
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Reason"
|
||||
variant="outlined"
|
||||
required
|
||||
error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
|
||||
helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
|
||||
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
|
||||
</DialogActions>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
// Dummy Default Data
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
|
||||
current_page: 1,
|
||||
data: [],
|
||||
path: "",
|
||||
first_page_url: "",
|
||||
last_page: 1,
|
||||
last_page_url: "",
|
||||
next_page_url: "",
|
||||
prev_page_url: "",
|
||||
per_page: 10,
|
||||
from: 0,
|
||||
to: 0,
|
||||
total: 0
|
||||
});
|
||||
const [dataTablePage, setDataTablePage] = useState(5);
|
||||
|
||||
const loadDataTableData = async (appliedFilter : any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/user/access', { params: filter });
|
||||
console.log(response.data);
|
||||
setDataTableLoading(false);
|
||||
|
||||
setDataTableData(response.data);
|
||||
}
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
const applyFilter = async (searchFilter: string) => {
|
||||
await loadDataTableData({ "search" : searchFilter });
|
||||
setSearchParams({ "search" : searchFilter });
|
||||
}
|
||||
|
||||
const handlePageChange = (event : ChangeEvent, value: number) => {
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
|
||||
loadDataTableData(filter);
|
||||
setSearchParams(filter);
|
||||
}
|
||||
|
||||
const [openDialogDelete, setOpenDialogDelete] = React.useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<ImportForm />
|
||||
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
|
||||
<Table aria-label="collapsible table">
|
||||
<colgroup>
|
||||
<col width="20" />
|
||||
<col width="250" />
|
||||
<col width="*" />
|
||||
<col width="50" />
|
||||
</colgroup>
|
||||
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="left" />
|
||||
<TableCell style={headStyle} align="left">Name</TableCell>
|
||||
<TableCell style={headStyle} align="left">Email</TableCell>
|
||||
<TableCell style={headStyle} align="left">Role Access</TableCell>
|
||||
<TableCell style={headStyle} align="right"></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{dataTableIsLoading ?
|
||||
(
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} align="center">Loading</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
dataTableData.data.length == 0 ?
|
||||
(
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} align="center">No Data</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map(row => (
|
||||
<Row key={row.id} row={row} />
|
||||
))}
|
||||
</TableBody>
|
||||
)
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
|
||||
<MuiDialog
|
||||
title={{name: "Delete User Access"}}
|
||||
openDialog={openDialogDelete}
|
||||
setOpenDialog={setOpenDialogDelete}
|
||||
content={getContent()}
|
||||
maxWidth="xs"
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import Page from "../../../components/Page";
|
||||
import useSettings from "../../../hooks/useSettings";
|
||||
import {useContext, useEffect, useMemo, useState } from 'react';
|
||||
import axios from '../../../utils/axios';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import UserRoleForm from './Form';
|
||||
import { Role } from '../../../@types/user';
|
||||
import { Corporate } from "@/@types/corporates";
|
||||
import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
|
||||
|
||||
|
||||
|
||||
export default function PlanCreate() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { corporate_id, id } = useParams();
|
||||
const [corporate, setCorporate] = useState<Corporate|null>();
|
||||
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
|
||||
|
||||
useEffect(() => {
|
||||
setCorporate(configuredCorporateContext.currentCorporate);
|
||||
}, [configuredCorporateContext])
|
||||
|
||||
const [ currentUserRole, setCurrentUserRole ] = useState<Role>();
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isEdit = !!id;
|
||||
|
||||
const [permissions, setPermissions] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
axios.get('/user/role/'+id)
|
||||
.then((res) => {
|
||||
setCurrentUserRole(res.data);
|
||||
axios.get('/permission_list?guard_name='+res.data.guard_name)
|
||||
.then((res) => {
|
||||
setPermissions(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response && err.response.status === 404) {
|
||||
navigate('/404');
|
||||
} else {
|
||||
console.error('Error fetching permissions:', err);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response.status === 404) {
|
||||
navigate('/404');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}, [corporate_id, id]);
|
||||
|
||||
return (
|
||||
<Page title= "User Role">
|
||||
<HeaderBreadcrumbs
|
||||
sx={{ px: 2 }}
|
||||
heading={'User Role'}
|
||||
links={[
|
||||
{
|
||||
name: 'User Role',
|
||||
href: '/user-role',
|
||||
},
|
||||
{
|
||||
name: !isEdit ? 'Create' : 'Edit',
|
||||
href: '/corporate/'+corporate_id+'/divisions/'+id,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<UserRoleForm isEdit={isEdit} currentUserRole={currentUserRole} permissions={permissions}/>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
import * as Yup from 'yup';
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
import {Box, Card, FormControlLabel, Grid, Stack, Typography } from "@mui/material";
|
||||
import Autocomplete from '@mui/material/Autocomplete';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { Role } from '../../../@types/user';
|
||||
import { Permisions } from '../../../@types/user';
|
||||
import { FormProvider, RHFSelect, RHFSwitch, RHFTextField } from "../../../components/hook-form";
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm, Controller } 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 { Checkbox } from '@mui/material';
|
||||
import Label from '@/components/Label';
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentUserRole?: Role;
|
||||
permissions?: Permisions;
|
||||
};
|
||||
|
||||
export default function UserRoleForm({ isEdit, currentUserRole, permissions }: Props) {
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const navigate = useNavigate();
|
||||
const { corporate_id } = useParams();
|
||||
const [guardName, setGuardName] = useState(currentUserRole?.guard_name || '');
|
||||
const [filteredPermissions, setFilteredPermissions] = useState(permissions);
|
||||
|
||||
const NewUserRoleSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
name: currentUserRole?.name || '',
|
||||
guard_name: currentUserRole?.guard_name || '',
|
||||
permission_check: currentUserRole?.permissions?.map(permission => permission.id) || []
|
||||
|
||||
}),
|
||||
[currentUserRole, permissions]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentUserRole) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
}, [isEdit, currentUserRole]);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: yupResolver(NewUserRoleSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
console.log(data, 'test1')
|
||||
if (!isEdit) {
|
||||
await axios
|
||||
.post('/user/role', data)
|
||||
.then((res) => {
|
||||
enqueueSnackbar('User Role created successfully', { variant: 'success' });
|
||||
})
|
||||
.then((res) => {
|
||||
navigate('/user-role', { 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 {
|
||||
await axios
|
||||
.put('/user/role/' + currentUserRole?.id, data)
|
||||
.then((res) => {
|
||||
enqueueSnackbar('User Role updated successfully', { variant: 'success' });
|
||||
})
|
||||
.then((res) => {
|
||||
navigate('/user-role' , { replace: true });
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const guard_name_options = [
|
||||
{ value: '', label: '' },
|
||||
// { value: 'web', label: 'Primecenter' },
|
||||
{ value: 'client-portal', label: 'Client Portal' },
|
||||
// { value: 'hospital-portal', label: 'Hospital Portal' }
|
||||
];
|
||||
|
||||
// Buat fungsi handleCheckboxClick di luar komponen utama (UserRoleForm)
|
||||
const handleCheckboxClick = (permissionId, checked) => {
|
||||
const currentPermissions = getValues('permission_check') || [];
|
||||
if (checked) {
|
||||
setValue('permission_check', [...currentPermissions, permissionId]);
|
||||
} else {
|
||||
setValue('permission_check', currentPermissions.filter(id => id !== permissionId));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch permissions based on guard_name
|
||||
if (guardName) {
|
||||
axios.get(`/permission_list?guard_name=${guardName}`)
|
||||
.then((res) => {
|
||||
setFilteredPermissions(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error fetching permissions:', err);
|
||||
});
|
||||
} else {
|
||||
setFilteredPermissions(permissions);
|
||||
}
|
||||
}, [guardName,permissions]);
|
||||
|
||||
const handleGuardNameChange = (event) => {
|
||||
console.log("ivan")
|
||||
setGuardName(event.target.value);
|
||||
setValue('guard_name', event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Box sx={{ px: 2 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Card sx={{ px: 3, py: 4 }}>
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="h6" color={palette.light.primary.main}>User Role</Typography>
|
||||
<RHFTextField name="name" label="Name" />
|
||||
<RHFSelect name="guard_name" label="Guard Name" onChange={handleGuardNameChange}>
|
||||
{guard_name_options.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</RHFSelect>
|
||||
<Typography variant="h6" color={palette.light.primary.main}>Permission</Typography>
|
||||
<Grid container spacing={2}>
|
||||
{filteredPermissions?.map((permission, index) => (
|
||||
<Grid item xs={4} key={permission.id}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
name={`permission_check`}
|
||||
value={permission.id}
|
||||
checked={watch('permission_check')?.includes(permission.id) || false}
|
||||
onChange={(e) => handleCheckboxClick(permission.id, e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={permission.name}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
<LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
|
||||
{ isEdit? 'Update' : 'Create' }
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</FormProvider>
|
||||
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
// @mui
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
Container,
|
||||
FormControl,
|
||||
Grid,
|
||||
IconButton,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
OutlinedInput,
|
||||
Paper,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Typography,
|
||||
Badge,
|
||||
Stack,
|
||||
} from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
|
||||
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import MuiAccordionSummary, {
|
||||
AccordionSummaryProps,
|
||||
} from '@mui/material/AccordionSummary';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import axios from '../../../utils/axios';
|
||||
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
|
||||
import MuiAccordionDetails from '@mui/material/AccordionDetails';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import { Corporate } from '@/@types/corporates';
|
||||
import { fDate, fDateTime } from '@/utils/formatTime';
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
))(({ theme }) => ({
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: 0,
|
||||
},
|
||||
'&:before': {
|
||||
display: 'none',
|
||||
},
|
||||
}));
|
||||
|
||||
const AccordionSummary = styled((props: AccordionSummaryProps) => (
|
||||
<MuiAccordionSummary
|
||||
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
|
||||
{...props}
|
||||
/>
|
||||
))(({ theme }) => ({
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, .05)'
|
||||
: 'rgba(0, 0, 0, .03)',
|
||||
flexDirection: 'row-reverse',
|
||||
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
|
||||
transform: 'rotate(90deg)',
|
||||
},
|
||||
'& .MuiAccordionSummary-content': {
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
||||
padding: theme.spacing(2),
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
}));
|
||||
|
||||
export default function CustomizedAccordions() {
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel1');
|
||||
|
||||
const handleChange =
|
||||
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
|
||||
setExpanded(newExpanded ? panel : false);
|
||||
};
|
||||
const pageTitle = 'Diagnosis Template History';
|
||||
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const [corporate, setCorporate] = useState<Corporate | null>();
|
||||
const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
|
||||
|
||||
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
|
||||
|
||||
useEffect(() => {
|
||||
setCorporate(configuredCorporateContext.currentCorporate);
|
||||
const model = 'App\\Models\\IcdTemplate';
|
||||
const url = `/audittrail/${id}?model=${model}`;
|
||||
axios.get(url)
|
||||
.then((res) => {
|
||||
setCurrentCorporate(res.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Terjadi kesalahan:', error);
|
||||
});
|
||||
|
||||
}, [configuredCorporateContext]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: 'Master',
|
||||
href: '/master/diagnosis-template',
|
||||
},
|
||||
{
|
||||
name: 'Diagnosis Template',
|
||||
href: '/master/diagnosis-template',
|
||||
},
|
||||
// {
|
||||
// name: 'Audittrail ICD',
|
||||
// href: '/corporate/' + id + '/plans',
|
||||
// },
|
||||
]}
|
||||
/>
|
||||
{currentCorporate?.data.map((item, index) => (
|
||||
<Accordion
|
||||
key={index}
|
||||
expanded={expanded === `panel${index}`}
|
||||
onChange={handleChange(`panel${index}`)}
|
||||
>
|
||||
<AccordionSummary
|
||||
aria-controls={`panel${index}d-content`}
|
||||
id={`panel${index}d-header`}
|
||||
>
|
||||
<Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">Field</TableCell>
|
||||
<TableCell align="center">Old Value</TableCell>
|
||||
<TableCell align="center">New Values</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{Object.entries(item.old_values).map(([key, value]) => {
|
||||
let renderedValue;
|
||||
if (key === 'deleted_by' ||
|
||||
key === 'deleted_at' ||
|
||||
key === 'created_by' ||
|
||||
key === 'created_at' ||
|
||||
key === 'updated_by' ||
|
||||
key === 'description'
|
||||
) {
|
||||
return null; // Melewati iterasi saat key adalah 'deleted_by'
|
||||
}
|
||||
switch (key) {
|
||||
case 'welcome_message':
|
||||
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
|
||||
value = value.replace(/<[^>]*>/g, '');
|
||||
break;
|
||||
case 'help_text':
|
||||
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
|
||||
value = value.replace(/<[^>]*>/g, '');
|
||||
break;
|
||||
case 'active':
|
||||
renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
|
||||
value = value == 1 ? 'Active' : 'Inactive';
|
||||
break;
|
||||
case 'created_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
case 'updated_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
case 'updated_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
case 'delete_at':
|
||||
renderedValue = fDateTime(item.new_values[key]);
|
||||
value = fDateTime(value);
|
||||
break;
|
||||
default:
|
||||
renderedValue = item.new_values[key];
|
||||
break;
|
||||
}
|
||||
|
||||
const field = key.charAt(0).toUpperCase() + key.slice(1);
|
||||
if (value == renderedValue) {
|
||||
return null
|
||||
} else {
|
||||
return (
|
||||
<TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
|
||||
<TableCell>{`${field}`}</TableCell>
|
||||
<TableCell align="center">{`${value}`}</TableCell>
|
||||
<TableCell align="center">{renderedValue}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
})}
|
||||
|
||||
</TableBody>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Container,Card, Grid } from "@mui/material";
|
||||
import { useParams } from "react-router-dom";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import Page from "../../../components/Page";
|
||||
import useSettings from "../../../hooks/useSettings";
|
||||
import List from "./List";
|
||||
|
||||
|
||||
|
||||
export default function Divisions() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { corporate_id } = useParams();
|
||||
|
||||
const pageTitle = 'User Role';
|
||||
return (
|
||||
<Page title={pageTitle}>
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{ name: 'User Management', href: '/user-role' },
|
||||
{
|
||||
name: 'User Role',
|
||||
href: '/user-role',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Grid container>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<List />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
// @mui
|
||||
import { Box, Button, Card, MenuItem, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Stack, Menu, Grid, DialogActions } from '@mui/material';
|
||||
import { Autocomplete } from "@mui/material";
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
// hooks
|
||||
import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
|
||||
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
|
||||
import useSettings from '../../../hooks/useSettings';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
// components
|
||||
import axios from '../../../utils/axios';
|
||||
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
||||
import { Role } from '../../../@types/user';
|
||||
import BasePagination from '../../../components/BasePagination';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
import { Delete, EditOutlined, FindInPageOutlined } from '@mui/icons-material';
|
||||
import MuiDialog from '@/components/MuiDialog';
|
||||
|
||||
export default function List() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
function SearchInput(props: any) {
|
||||
// SEARCH
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
const newSearchText = event.target.value ?? ''
|
||||
setSearchText(newSearchText);
|
||||
}
|
||||
|
||||
const handleSearchSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
props.onSearch(searchText); // Trigger to Parent
|
||||
}
|
||||
|
||||
useEffect(() => { // Trigger First Search
|
||||
setSearchText(searchParams.get('search') ?? '');
|
||||
}, [searchParams])
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
|
||||
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportForm(props: any) {
|
||||
// IMPORT
|
||||
// Create Button Menu
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const createMenu = Boolean(anchorEl);
|
||||
const importForm = useRef<HTMLInputElement>(null)
|
||||
const [currentImportFileName, setCurrentImportFileName] = useState(null)
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleImportButton = () => {
|
||||
if (importForm?.current) {
|
||||
handleClose();
|
||||
importForm.current ? importForm.current.click() : console.log('No File selected');
|
||||
} else {
|
||||
alert('No file selected')
|
||||
}
|
||||
}
|
||||
|
||||
const handleICDList = async (appliedFilter = null) => {
|
||||
axios.get('master/diagnosis/list').then((response) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = response.data.data.file_url;
|
||||
link.setAttribute('download', response.data.data.file_name);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
handleClose();
|
||||
});
|
||||
}
|
||||
|
||||
const handleCancelImportButton = () => {
|
||||
importForm.current.value = "";
|
||||
importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
|
||||
const handleImportChange = (event: any) => {
|
||||
if (event.target.files[0]) {
|
||||
setCurrentImportFileName(event.target.files[0].name)
|
||||
} else {
|
||||
setCurrentImportFileName(null);
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpload = () => {
|
||||
if (importForm.current?.files.length) {
|
||||
const formData = new FormData();
|
||||
formData.append("file", importForm.current?.files[0])
|
||||
axios.post(`master/diagnosis/import`, formData )
|
||||
.then(response => {
|
||||
handleCancelImportButton();
|
||||
loadDataTableData();
|
||||
setImportResult(response.data)
|
||||
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
|
||||
})
|
||||
.catch(response => {
|
||||
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
|
||||
})
|
||||
} else {
|
||||
enqueueSnackbar('No File Selected', { variant: 'warning' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleGetTemplate = (type :string) => {
|
||||
axios.get('corporates/import-document-example/' + type)
|
||||
.then((response) => {
|
||||
const link = document.createElement('a');
|
||||
link.href = response.data.data.file_url;
|
||||
link.setAttribute('download', response.data.data.file_name);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
handleClose();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
|
||||
{( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter}/>
|
||||
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
|
||||
<Button
|
||||
id="import-button"
|
||||
variant='contained'
|
||||
startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
|
||||
aria-controls={createMenu ? 'basic-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={createMenu ? 'true' : undefined}
|
||||
onClick={() => navigate(`/user-role/create`)}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem>
|
||||
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData( userManamgent: Role ): Role {
|
||||
return {
|
||||
...userManamgent,
|
||||
}
|
||||
}
|
||||
|
||||
const [id, setId] = useState(null)
|
||||
|
||||
// Generate the every row of the table
|
||||
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||
const { row } = props;
|
||||
const handleActivate = (model: any, status: string) => {
|
||||
axios
|
||||
.put(`/master/diagnosis-template/${row.id}/activation`, {
|
||||
// service_code: service.service_code,
|
||||
active: status == 'active',
|
||||
})
|
||||
.then((res) => {
|
||||
setDataTableData({
|
||||
...dataTableData,
|
||||
data: dataTableData.data.map((model) => {
|
||||
let updatedModel = model;
|
||||
if (row.id == model.id) {
|
||||
updatedModel.active = res.data.icd.active;
|
||||
}
|
||||
return updatedModel;
|
||||
}),
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.log('asdasd', error.response.data.message)
|
||||
enqueueSnackbar(
|
||||
error.response.data.message ?? error.message ?? 'Failed Processing Request',
|
||||
{ variant: 'error' }
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TableRow sx={{ '& > *': { borderBottom: '1' } }}>
|
||||
<TableCell align="left"/>
|
||||
<TableCell align="left">{row.id}</TableCell>
|
||||
<TableCell align="left">{row.name ?? '-'}</TableCell>
|
||||
<TableCell align="left">{row.guard_name ?? '-'}</TableCell>
|
||||
<TableCell align="center">
|
||||
<Stack direction="row" justifyContent="flex-end" spacing={1}>
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
{/* <MenuItem onClick={() => navigate(`/user/role/${row.id}`)}>
|
||||
<FindInPageOutlined />
|
||||
Detail
|
||||
</MenuItem> */}
|
||||
<MenuItem onClick={() => navigate(`/user/role/${row.id}/edit`)} >
|
||||
<EditOutlined />
|
||||
Edit
|
||||
</MenuItem>
|
||||
{/* <MenuItem onClick={() => { setOpenDialogDelete(true); setId(row.id); }}>
|
||||
<Delete color='error'/>
|
||||
Delete
|
||||
</MenuItem> */}
|
||||
{/* <MenuItem onClick={() => navigate(`/user/role/${row.id}/history`)}>
|
||||
<HistoryIcon />
|
||||
History
|
||||
</MenuItem> */}
|
||||
</>
|
||||
} />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
// Delete
|
||||
const reasons = [
|
||||
{ value: 'agreement', label: 'Agreement changed' },
|
||||
{ value: 'endorsement', label: 'Endorsement' },
|
||||
{ value: 'renewal', label: 'Renewal' },
|
||||
{ value: 'wrong_setting', label: 'Wrong Setting' },
|
||||
// Add more options as needed
|
||||
];
|
||||
|
||||
const [isReasonSelected, setIsReasonSelected] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
reason: null
|
||||
});
|
||||
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialogDelete(false);
|
||||
resetForm();
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
reason: null
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (field, value) => {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
[field]: value,
|
||||
}));
|
||||
if (field === 'reason') {
|
||||
setIsReasonSelected(!!value);
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isReasonSelected && formData.reason !== '') {
|
||||
console.log(formData, 'test')
|
||||
} else {
|
||||
setIsReasonSelected(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog
|
||||
const getContent = () => (
|
||||
<Stack spacing={1} marginTop={2}>
|
||||
<Typography variant="subtitle2">Are you sure to delete this User Role?</Typography>
|
||||
<Grid item xs={12} md={12} marginTop={4}>
|
||||
<Card sx={{padding:2, marginTop:2}} >
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
|
||||
<Autocomplete
|
||||
options={reasons}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
|
||||
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Reason"
|
||||
variant="outlined"
|
||||
required
|
||||
error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
|
||||
helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
|
||||
</DialogActions>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
// Dummy Default Data
|
||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
|
||||
current_page: 1,
|
||||
data: [],
|
||||
path: "",
|
||||
first_page_url: "",
|
||||
last_page: 1,
|
||||
last_page_url: "",
|
||||
next_page_url: "",
|
||||
prev_page_url: "",
|
||||
per_page: 10,
|
||||
from: 0,
|
||||
to: 0,
|
||||
total: 0
|
||||
});
|
||||
const [dataTablePage, setDataTablePage] = useState(5);
|
||||
|
||||
const loadDataTableData = async (appliedFilter : any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/user/role', { params: filter });
|
||||
console.log(response.data);
|
||||
setDataTableLoading(false);
|
||||
|
||||
setDataTableData(response.data);
|
||||
}
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
|
||||
const applyFilter = async (searchFilter: string) => {
|
||||
await loadDataTableData({ "search" : searchFilter });
|
||||
setSearchParams({ "search" : searchFilter });
|
||||
}
|
||||
|
||||
const handlePageChange = (event : ChangeEvent, value: number) => {
|
||||
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
|
||||
loadDataTableData(filter);
|
||||
setSearchParams(filter);
|
||||
}
|
||||
|
||||
const [openDialogDelete, setOpenDialogDelete] = React.useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadDataTableData();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<ImportForm />
|
||||
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
|
||||
<Table aria-label="collapsible table">
|
||||
<colgroup>
|
||||
<col width="20" />
|
||||
<col width="250" />
|
||||
<col width="*" />
|
||||
<col width="50" />
|
||||
</colgroup>
|
||||
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="left" />
|
||||
<TableCell style={headStyle} align="left">ID</TableCell>
|
||||
<TableCell style={headStyle} align="left">Name</TableCell>
|
||||
<TableCell style={headStyle} align="left">Guard Name</TableCell>
|
||||
<TableCell style={headStyle} align="left"></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{dataTableIsLoading ?
|
||||
(
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} align="center">Loading</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
dataTableData.data.length == 0 ?
|
||||
(
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} align="center">No Data</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map(row => (
|
||||
<Row key={row.id} row={row} />
|
||||
))}
|
||||
</TableBody>
|
||||
)
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
|
||||
|
||||
<MuiDialog
|
||||
title={{name: "Delete User Role"}}
|
||||
openDialog={openDialogDelete}
|
||||
setOpenDialog={setOpenDialogDelete}
|
||||
content={getContent()}
|
||||
maxWidth="xs"
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -314,6 +314,102 @@ export default function Router() {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'user-role',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <UserRole />,
|
||||
index: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'user-role/create',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <UserRoleCreate />,
|
||||
index: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'user/role/:id/edit',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <UserRoleCreate />,
|
||||
index: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'user-access',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <UserAccess />,
|
||||
index: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'user-access/create',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <UserAccessCreate />,
|
||||
index: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'user/access/:id/edit',
|
||||
element: (
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<DashboardLayout />
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
element: <UserAccessCreate />,
|
||||
index: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ path: '*', element: <Navigate to="/404" replace /> },
|
||||
]);
|
||||
}
|
||||
@@ -361,3 +457,9 @@ const MasterFormulariumTemplateV2 = Loadable(lazy(() => import('../pages/Master/
|
||||
const MasterFormulariumTemplateCreateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/CreateUpdate')));
|
||||
const MasterFormulariumTemplateHistoriesV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/History')));
|
||||
const MasterFormulariumTemplateDetailV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Detail/Index')));
|
||||
|
||||
// User Management
|
||||
const UserRole = Loadable(lazy(() => import('../pages/UserManagement/UserRole/Index')));
|
||||
const UserRoleCreate = Loadable(lazy(() => import('../pages/UserManagement/UserRole/CreateUpdate')));
|
||||
const UserAccess = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/Index')));
|
||||
const UserAccessCreate = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/CreateUpdate')));
|
||||
|
||||
Reference in New Issue
Block a user