tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

add exclusion diagnosis done

Browse Source
This commit is contained in:
pajri
2022-12-27 15:55:21 +07:00
parent 9400145990
commit 55ae0efc66
10 changed files with 1064 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/Index.tsx
View File

@@ -15,11 +15,13 @@ export default function Divisions() {
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const [plans, setPlans] = useState<any[]>([]);
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
setPlans(configuredCorporateContext.currentCorporate?.plans ?? []);
}, [configuredCorporateContext]);
const pageTitle = 'Diagnosis Exclusion';
@@ -45,7 +47,7 @@ export default function Divisions() {
<Card>
<CorporateTabNavigations position={'diagnosis-exclusions'} />
<List />
<List data={plans} />
</Card>
</Page>
);

799
frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/List.tsx
View File

@@ -1,5 +1,39 @@
// @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 } from '@mui/material';
import {
Autocomplete,
Box,
Button,
Card,
Collapse,
IconButton,
MenuItem,
OutlinedInput,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Badge,
Tab,
Tabs,
CardHeader,
Stack,
Menu,
ButtonGroup,
Dialog,
DialogContent,
DialogTitle,
FormControl,
FormControlLabel,
Checkbox,
Grid,
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
@@ -16,34 +50,43 @@ import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
import { enqueueSnackbar } from 'notistack';
export default function List() {
export default function List(props: any) {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const { corporate_id, service_code } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
function SearchInput(props: any) {
// SEARCH
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
}
};
const handleSearchSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText); // Trigger to Parent
}
};
useEffect(() => { // Trigger First Search
useEffect(() => {
// Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
}, [searchParams]);
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</form>
);
}
@@ -53,8 +96,8 @@ export default function List() {
// 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 importForm = useRef<HTMLInputElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
@@ -69,52 +112,66 @@ export default function List() {
handleClose();
importForm.current ? importForm.current.click() : console.log('No File selected');
} else {
alert('No file selected')
alert('No file selected');
}
}
};
const handleCancelImportButton = () => {
importForm.current.value = "";
importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
}
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)
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(`corporates/${corporate_id}/diagnosis-exclusions/import`, formData )
.then(response => {
formData.append('file', importForm.current?.files[0]);
axios
.post(`corporates/${corporate_id}/diagnosis-exclusions/import`, formData)
.then((response) => {
handleCancelImportButton();
loadDataTableData();
setImportResult(response.data)
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' })
})
.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' })
enqueueSnackbar('No File Selected', { variant: 'warning' });
}
}
};
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
<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='outlined'
startIcon={<AddIcon />} sx={{ p: 1.8 }}
variant="outlined"
startIcon={<AddIcon />}
sx={{ p: 1.8 }}
aria-controls={createMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={createMenu ? 'true' : undefined}
@@ -134,55 +191,238 @@ export default function List() {
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={handleClose}>Download Template</MenuItem>
</Menu>
</Stack>
</Stack>
)}
{( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
<Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
<Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
</ButtonGroup>
{currentImportFileName && (
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
<Button onClick={handleImportButton} fullWidth>
{currentImportFileName ?? 'No File Selected'}
</Button>
<Button
onClick={handleCancelImportButton}
size="small"
fullWidth={false}
sx={{ p: 1.8 }}
>
<CancelIcon color="error" />
</Button>
</ButtonGroup>
<Button
id="upload-button"
variant='outlined'
startIcon={<UploadIcon />} sx={{ p: 1.8 }}
onClick={handleUpload}
>
Upload
</Button>
</Stack>
<Button
id="upload-button"
variant="outlined"
startIcon={<UploadIcon />}
sx={{ p: 1.8 }}
onClick={handleUpload}
>
Upload
</Button>
</Stack>
)}
{( importResult &&
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
<Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
</Stack>
{importResult && (
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
<Box sx={{ color: 'text.secondary' }}>
Last Import Result Report :{' '}
<a import href={importResult.result_file?.url ?? '#'}>
{importResult.result_file?.name ?? '-'}
</a>
</Box>
</Stack>
)}
</div>
);
}
// Called on every row to map the data to the columns
function createData( icd: Icd ): Icd {
function createData(icd: Icd): Icd {
return {
...icd,
}
};
}
const plans = props?.data.map((plan: any) => {
return {
value: plan.code,
label: plan.code,
};
});
const [exclusions, setExclusions] = useState([
{
min_age: '',
max_age: '',
plan: '',
msc: {
m: '',
s: '',
c: '',
},
gneder: {
male: '',
female: '',
},
},
]);
function CollapseEdit(props: {
row: ReturnType<typeof createData>;
data: any;
index: any;
setExclusions: any;
exclusions: any;
}) {
const { row, index, data } = props;
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
function Row(props: {
row: ReturnType<typeof createData>;
data: any;
index: any;
setExclusions: any;
exclusions: any;
}) {
const { row, index, data } = props;
const [open, setOpen] = React.useState(false);
const [openEdit, setOpenEdit] = React.useState(false);
console.log('open', open);
console.log('openEdit', openEdit);
// const [plans, setPlans] = useState([]);
const plans = data;
const [minAge, setMinAge] = useState('');
const [maxAge, setMaxAge] = useState('');
const [valuePlan, setValuePlan] = useState([]);
const handleMinAge = (event: ChangeEvent<HTMLInputElement>) => {
setMinAge(event.target.value);
};
const handleMaxAge = (event: ChangeEvent<HTMLInputElement>) => {
setMaxAge(event.target.value);
};
const handlePlanChange = (event: ChangeEvent<HTMLInputElement>, value: any) => {
setValuePlan(value);
};
// const [currentValuePlan, setCurrentValuePlan] = useState([]);
const converToArray = (value: any) => {
console.log('value', value);
if (value == null || value == '') {
return null;
}
const array = value.split(',') ?? [];
const currentValuePlan = array.map((item: any) => ({
value: item,
label: item,
}));
console.log('currentValuePlan', currentValuePlan);
return currentValuePlan;
};
// const [exclusionModal, setExclusionModal] = useState(false);
const handleConfigExclusion = (
event: ChangeEvent<HTMLInputElement>,
icd: any,
value: string,
type: string
) => {
// console.log(event.target.checked, service, icd, value, type);
const allData = tempExclusions.find((item: any) => item.icd_id === icd.id);
if (allData) {
try {
axios
.post(`/corporates/${corporate_id}/diagnosis-exclusions/store`, {
// service_code: service.service_code,
icd_id: icd.id,
checked: event.target.checked ? '1' : '0',
value: value,
type: type,
one_row: allData,
})
.then((res) => {
console.log('update', res.data);
loadDataTableData();
});
enqueueSnackbar('Exclusion Updated', {
variant: 'success',
});
} catch (error) {
console.log(error);
enqueueSnackbar('Exclusion Update Failed', {
variant: 'error',
});
}
}
};
const [tempExclusions, setTempExclusions] = useState([
{
min_age: '',
max_age: '',
plan: '',
msc: {
m: '',
s: '',
c: '',
},
gneder: {
male: '',
female: '',
},
},
]);
console.log('tempExclusions', tempExclusions);
const handleChange = (index: any, evnt: any, type: any, row: any, value: any) => {
if (type == 'min_age' || type == 'max_age') {
const { name, value } = evnt.target;
const list = [...exclusions];
console.log('list', list);
list[index][type] = value;
list[index].icd_id = row;
setTempExclusions(list);
} else if (type == 'msc' || type == 'gender') {
// const { name, value } = evnt.target;
const list = [...exclusions];
console.log('checked', evnt.target.checked);
console.log('exc', exclusions);
console.log('list', list);
console.log('index', index);
console.log('type', type);
list[index][type][value] = evnt.target.checked;
list[index].icd_id = row;
setTempExclusions(list);
} else {
const data = value.map((item: any) => item.value);
const string = data.join(',');
const list = [...exclusions];
list[index][type] = string;
list[index].icd_id = row;
setTempExclusions(list);
}
};
console.log('exclusions', exclusions);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
@@ -191,38 +431,288 @@ export default function List() {
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{Object.keys(row.rules).length ? 'With Rules' : 'All'}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
<TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
<TableCell align="center">
<Button variant="outlined" color="success" size="small">
Active
</Button>
</TableCell>
<TableCell align="center">
{openEdit ? (
<Button
variant="contained"
color="success"
size="small"
sx={{
color: '#fff',
}}
onClick={(event) => {
setOpenEdit(!openEdit);
if (open == false) {
setOpen(true);
}
handleConfigExclusion(event, row, '', 'one_row');
}}
>
Save
</Button>
) : (
<Button
variant="outlined"
color="success"
size="small"
onClick={() => {
setOpenEdit(true);
setOpen(true);
}}
>
Edit
</Button>
)}
{/* <Button
variant="outlined"
color="success"
size="small"
onClick={() => {
setOpenEdit(!openEdit);
if (open == false) {
setOpen(true);
}
}}
// onClick={() => {
// setOpenEdit(true);
// setOpen(true);
// }}
>
{openEdit ? 'Save' : 'Edit'}
</Button> */}
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
{ Object.keys(row.rules).length ? (
<div>
<Typography variant="body" sx={{ fontWeight: 'bold' }}>
Excluded Only for :
</Typography>
{ row.rules.msc && (<Typography variant="body" component="div">
MSC : {row.rules.msc.join(', ') ?? "-"}
</Typography> )}
{ row.rules.gender && (<Typography variant="body" component="div">
Gender : {row.rules.gender.join(', ') ?? "-"}
</Typography> )}
{ (row.rules.min_age || row.rules.max_age) && (<Typography variant="body" component="div">
Age : {row.rules.min_age ?? "-"} - {row.rules.max_age ?? "-"}
</Typography> )}
{ row.rules.plan && (<Typography variant="body" component="div">
Plan : {row.rules.plan.join(', ') ?? "-"}
</Typography> )}
</div>
{open == true ? (
openEdit == false ? (
<Box sx={{ borderBottom: 1 }}>
{Object.keys(row.rules).length ? (
<div>
<Typography variant="body" sx={{ fontWeight: 'bold' }}>
Excluded Only for :
</Typography>
{row.rules.msc && (
<Typography variant="body" component="div">
MSC : {row.rules.msc.join(', ') ?? '-'}
</Typography>
)}
{row.rules.gender && (
<Typography variant="body" component="div">
Gender : {row.rules.gender.join(', ') ?? '-'}
</Typography>
)}
{(row.rules.min_age || row.rules.max_age) && (
<Typography variant="body" component="div">
Age : {row.rules.min_age ?? '-'} - {row.rules.max_age ?? '-'}
</Typography>
)}
{row.rules.plan && (
<Typography variant="body" component="div">
Plan : {row.rules.plan.join(', ') ?? '-'}
</Typography>
)}
</div>
) : (
<Typography variant="body2" gutterBottom component="div">
Excluded for All
</Typography>
)}
</Box>
) : (
<Typography variant="body2" gutterBottom component="div">
Excluded for All
</Typography>
)}
</Box>
// <CollapseEdit row={row} index={index} plans={plans} />
<Box sx={{ borderBottom: 1, pb: 2 }}>
<Typography variant="body2" sx={{ fontWeight: 'bold', mb: 2 }}>
Edit Exclusion :
</Typography>
<Stack direction={'column'} spacing={2}>
<FormControl fullWidth>
<Grid container spacing={2}>
<Grid item xs={2} md={2}>
<Typography id="demo-simple-select-label">MSC</Typography>
</Grid>
<Grid item xs={10} md={10}>
<Stack direction={'row'} spacing={2}>
<Grid item xs={3} md={3}>
<FormControlLabel
control={
<Checkbox
checked={row.value_rules.msc?.m == '1'}
onChange={(event) => {
// handleConfigExclusion(event, row, 'm', 'msc');
handleChange(index, event, 'msc', row.id, 'm');
}}
/>
}
label="Member"
/>
</Grid>
<Grid item xs={3} md={3}>
<FormControlLabel
control={
<Checkbox
checked={row.value_rules.msc?.s == '1'}
onChange={(event) => {
// handleConfigExclusion(event, row, 's', 'msc');
handleChange(index, event, 'msc', row.id, 's');
}}
/>
}
label="Spouse"
/>
</Grid>
<Grid item xs={3} md={3}>
<FormControlLabel
control={
<Checkbox
checked={row.value_rules.msc?.c == '1'}
onChange={(event) => {
// handleConfigExclusion(event, row, 'c', 'msc');
handleChange(index, event, 'msc', row.id, 'c');
}}
/>
}
label="Child"
/>
</Grid>
</Stack>
</Grid>
</Grid>
</FormControl>
<FormControl fullWidth>
<Grid container spacing={2}>
<Grid item xs={2} md={2}>
<Typography id="demo-simple-select-label">Gender</Typography>
</Grid>
<Grid item xs={10} md={10}>
<Stack direction={'row'} spacing={2}>
<Grid item xs={3} md={3}>
<FormControlLabel
control={
<Checkbox
checked={row.value_rules.gender?.male == '1'}
onChange={(event) => {
// handleConfigExclusion(event, row, 'male', 'gender');
handleChange(index, event, 'gender', row.id, 'male');
}}
/>
}
label="Male"
/>
</Grid>
<Grid item xs={3} md={3}>
<FormControlLabel
control={
<Checkbox
checked={row.value_rules.gender?.female == '1'}
onChange={(event) => {
// handleConfigExclusion(event, row, 'female', 'gender');
handleChange(index, event, 'gender', row.id, 'female');
}}
/>
}
label="Female"
/>
</Grid>
</Stack>
</Grid>
</Grid>
</FormControl>
<FormControl fullWidth>
<Grid container spacing={2}>
<Grid item xs={2} md={2}>
<Typography id="demo-simple-select-label">Age</Typography>
</Grid>
<Grid item xs={10} md={10}>
<Stack direction={'row'} spacing={2}>
<Grid item xs={3} md={3}>
<TextField
id="outlined-number"
type="number"
defaultValue={row.value_rules.min_age ?? ''}
onChange={(event) => {
handleMinAge(event);
handleChange(index, event, 'min_age', row.id);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
handleConfigExclusion(event, row, minAge, 'min_age');
}
}}
/>
</Grid>
<Grid item xs={3} md={3}>
<TextField
id="outlined-number"
type="number"
defaultValue={row.value_rules.max_age ?? ''}
onChange={(event) => {
handleMaxAge(event);
handleChange(index, event, 'max_age', row.id);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
handleConfigExclusion(event, row, maxAge, 'max_age');
}
}}
/>
</Grid>
</Stack>
</Grid>
</Grid>
</FormControl>
<FormControl fullWidth>
<Grid container spacing={2}>
<Grid item xs={2} md={2}>
<Typography id="demo-simple-select-label">Plan</Typography>
</Grid>
<Grid item xs={10} md={10}>
<Stack direction={'row'} spacing={2}>
<Grid item xs={12} md={12}>
<Autocomplete
id="combo-box-demo"
options={plans}
multiple
limitTags={5}
fullWidth
getOptionLabel={(option) => option.label}
defaultValue={converToArray(row.value_rules.plan) || []}
isOptionEqualToValue={(option, value) =>
option.value === value.value
}
onChange={(event, value) => {
handlePlanChange(event, value);
handleChange(index, event, 'plan', row.id, value);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
handleConfigExclusion(event, row, valuePlan, 'plan');
}
}}
renderInput={(params) => (
<TextField {...params} label="Plan" variant="outlined" />
)}
/>
</Grid>
</Stack>
</Grid>
</Grid>
</FormControl>
</Stack>
</Box>
)
) : null}
</Collapse>
</TableCell>
</TableRow>
@@ -237,93 +727,118 @@ export default function List() {
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
path: '',
first_page_url: '',
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0
total: 0,
});
const loadDataTableData = async (appliedFilter : any | null = null) => {
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/corporates/'+corporate_id+'/diagnosis-exclusions', { params: filter });
const response = await axios.get('/corporates/' + corporate_id + '/diagnosis-exclusions', {
params: filter,
});
setDataTableLoading(false);
setDataTableData(response.data);
}
var data = response.data.data;
var value_rules = data.map((item: any) => item.value_rules);
setExclusions(value_rules);
};
const headStyle = {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
await loadDataTableData({ search: searchFilter });
setSearchParams({ search: searchFilter });
};
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
};
useEffect(() => {
loadDataTableData();
}, [])
}, []);
return (
<Stack>
<ImportForm />
<Card>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">Service</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Rules</TableCell>
<TableCell style={headStyle} align="right">Status</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
<TableCell style={headStyle} align="left">
Service
</TableCell>
<TableCell style={headStyle} align="left">
Code
</TableCell>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell style={headStyle} align="left">
Rules
</TableCell>
<TableCell style={headStyle} align="center">
Status
</TableCell>
<TableCell style={headStyle} align="center">
Action
</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.id} row={row} />
))}
</TableBody>
)
{dataTableIsLoading ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
Loading
</TableCell>
</TableRow>
</TableBody>
) : dataTableData.data.length == 0 ? (
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map((row: any, index: any) => (
<Row
key={row.id}
row={row}
data={plans}
index={index}
setExclusions={setExclusions}
/>
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}

178
frontend/dashboard/src/pages/Corporates/Services/Create.tsx
View File

@@ -43,7 +43,7 @@ import {
RHFCheckbox,
RHFCustomMultiCheckbox,
} from '../../../components/hook-form';
import { useForm } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
@@ -54,7 +54,7 @@ import { ChangeEvent, useEffect, useMemo, useState } from 'react';
import axios from '../../../utils/axios';
import { CorporateService } from '../../../@types/corporates';
import { InfoIcon } from '../../../theme/overrides/CustomIcons';
import { includes, set } from 'lodash';
import { includes, min, set } from 'lodash';
import { array } from 'yup/lib/locale';
import CancelIcon from '@mui/icons-material/Cancel';
import { enqueueSnackbar, useSnackbar } from 'notistack';
@@ -75,6 +75,7 @@ export default function Divisions() {
const [specialities, setSpecialities] = useState([]);
const [plans, setPlans] = useState([]);
// const [dataExclusions, setDataExclusions] = useState([]);
// console.log('specialities', specialities);
@@ -87,8 +88,39 @@ export default function Divisions() {
label: item.code,
}))
);
setSpecialities(res.data.specialities);
setExclusion(res.data.service?.exclusions);
// var dataExclusions = res.data.service?.exclusions;
var dataExclusions = res.data.service?.exclusions;
console.log('dataExclusions', dataExclusions);
var defaultExclusion = res.data.specialities.map((item: any) => {
var findExclusion = dataExclusions.find(
(exclusion: any) => exclusion.speciality_id == item.id
);
if (findExclusion) {
return findExclusion;
} else {
return {
speciality_id: item.id,
msc: {
m: false,
s: false,
c: false,
},
gender: {
male: false,
female: false,
},
min_age: null,
max_age: null,
plan: '',
};
}
});
setExclusion(defaultExclusion);
});
}, [corporate_id, service_code]);
@@ -110,16 +142,17 @@ export default function Divisions() {
});
};
const [exclusion, setExclusion] = useState([]);
const handleConfigExclusion = (
event: ChangeEvent<HTMLInputElement>,
service: any,
speciality: any,
value: string,
value: any,
type: string
) => {
console.log(event.target.checked, service, speciality, value, type);
const allData = exclusion.find((item: any) => item.speciality_id === speciality.id);
try {
axios
.post(`/corporates/${corporate_id}/services/${service_code}/specialities/exclusion`, {
@@ -128,6 +161,7 @@ export default function Divisions() {
checked: event.target.checked ? '1' : '0',
value: value,
type: type,
one_row: allData,
})
.then((res) => {
console.log('update', res.data);
@@ -186,6 +220,81 @@ export default function Divisions() {
}
};
const [minAge, setMinAge] = useState('');
const [maxAge, setMaxAge] = useState('');
const [valuePlan, setValuePlan] = useState([]);
const [exclusion, setExclusion] = useState([
{
min_age: '',
max_age: '',
plan: '',
},
]);
console.log('exclusion', exclusion);
const handleChange = (index: any, evnt: any, type: any, row: any, value: any) => {
if (type !== 'plan') {
const { name, value } = evnt.target;
const list = [...exclusion];
console.log('list', list);
list[index][type] = value;
list[index].speciality_id = row;
setExclusion(list);
} else {
const data = value.map((item: any) => item.value);
const string = data.join(',');
const list = [...exclusion];
list[index][type] = string;
setExclusion(list);
}
};
// const handleSubmit = (event: any, service: any, row: any) => {
// const allData = exclusion.find((item: any) => item.speciality_id === row.id);
// try {
// axios
// .post(`/corporates/${corporate_id}/services/${service_code}/specialities/all-exclusion`, {
// // service_code: service.service_code,
// speciality_id: row.id,
// one_row: allData,
// })
// .then((res) => {
// console.log('update', res.data);
// setService({
// ...service,
// selected_specialities: res.data?.selected_specialities,
// exclusions: res.data?.service?.exclusions,
// });
// });
// enqueueSnackbar('Exclusion Updated', {
// variant: 'success',
// });
// } catch (error) {
// console.log(error);
// enqueueSnackbar('Exclusion Update Failed', {
// variant: 'error',
// });
// }
// };
console.log('object', exclusion);
console.log('plan', valuePlan);
console.log('max age', maxAge);
console.log('min age', minAge);
const handleSaveConfigExclusion = (
event: ChangeEvent<HTMLInputElement>,
service: any,
speciality: any
) => {};
const specialityModalStyle = {
position: 'absolute' as 'absolute',
top: '50%',
@@ -222,12 +331,6 @@ export default function Divisions() {
},
];
const [minAge, setMinAge] = useState('');
const [maxAge, setMaxAge] = useState('');
const [valuePlan, setValuePlan] = useState([]);
console.log('plan', valuePlan);
const handleMinAge = (event: ChangeEvent<HTMLInputElement>) => {
setMinAge(event.target.value);
};
@@ -239,12 +342,11 @@ export default function Divisions() {
const handlePlanChange = (event: ChangeEvent<HTMLInputElement>, value: any) => {
setValuePlan(value);
};
// const [currentValuePlan, setCurrentValuePlan] = useState([]);
const converToArray = (value: any) => {
const convertToArray = (value: any) => {
console.log('value', value);
if (value == null) {
if (value == null || value == '') {
return null;
}
const array = value.split(',') ?? [];
@@ -514,10 +616,11 @@ export default function Divisions() {
Max Age
</TableCell>
<TableCell align="center">Plan</TableCell>
<TableCell />
</TableRow>
</TableHead>
<TableBody>
{specialities.map((row) => (
{specialities.map((row: any, index: any) => (
<TableRow
key={row.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
@@ -541,7 +644,7 @@ export default function Divisions() {
control={
<Checkbox
checked={service.exclusions.find(
(item) =>
(item: { speciality_id: any; msc: { m: string } }) =>
item.speciality_id == row.id && item.msc?.m == '1'
)}
onChange={(event) => {
@@ -555,7 +658,7 @@ export default function Divisions() {
control={
<Checkbox
checked={service.exclusions.find(
(item) =>
(item: { speciality_id: any; msc: { s: string } }) =>
item.speciality_id == row.id && item.msc?.s == '1'
)}
onChange={(event) => {
@@ -569,7 +672,7 @@ export default function Divisions() {
control={
<Checkbox
checked={service.exclusions.find(
(item) =>
(item: { speciality_id: any; msc: { c: string } }) =>
item.speciality_id == row.id && item.msc?.c == '1'
)}
onChange={(event) => {
@@ -587,7 +690,10 @@ export default function Divisions() {
control={
<Checkbox
checked={service.exclusions.find(
(item) =>
(item: {
speciality_id: any;
gender: { male: string };
}) =>
item.speciality_id == row.id &&
item.gender?.male == '1'
)}
@@ -608,7 +714,10 @@ export default function Divisions() {
control={
<Checkbox
checked={service.exclusions.find(
(item) =>
(item: {
speciality_id: any;
gender: { female: string };
}) =>
item.speciality_id == row.id &&
item.gender?.female == '1'
)}
@@ -632,13 +741,16 @@ export default function Divisions() {
<TextField
id="outlined-number"
type="number"
name="min_age"
defaultValue={
service.exclusions.find(
(item) => item.speciality_id == row.id
(item: { speciality_id: any }) =>
item.speciality_id == row.id
)?.min_age
}
onChange={(event) => {
handleMinAge(event);
handleChange(index, event, 'min_age', row.id);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
@@ -657,13 +769,16 @@ export default function Divisions() {
<TextField
id="outlined-number"
type="number"
name="max_age"
defaultValue={
service.exclusions.find(
(item) => item.speciality_id == row.id
(item: { speciality_id: any }) =>
item.speciality_id == row.id
)?.max_age
}
onChange={(event) => {
handleMaxAge(event);
handleChange(index, event, 'max_age', row.id);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
@@ -687,9 +802,10 @@ export default function Divisions() {
fullWidth
getOptionLabel={(option) => option.label}
defaultValue={
converToArray(
convertToArray(
service.exclusions.find(
(item) => item.speciality_id == row.id
(item: { speciality_id: any }) =>
item.speciality_id == row.id
)?.plan
) || []
}
@@ -698,6 +814,7 @@ export default function Divisions() {
}
onChange={(event, value) => {
handlePlanChange(event, value);
handleChange(index, event, 'plan', row.id, value);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
@@ -715,6 +832,17 @@ export default function Divisions() {
)}
/>
</TableCell>
<TableCell align="center">
<Button
variant="outlined"
color="primary"
onClick={(event) => {
handleConfigExclusion(event, service, row, '', 'one_row');
}}
>
Save
</Button>
</TableCell>
</TableRow>
))}
</TableBody>