Drug Update
This commit is contained in:
ivan-sim
@@ -1,7 +1,7 @@
|
|||||||
import { Card } from "@mui/material";
|
import { Card } from "@mui/material";
|
||||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||||
import Page from "../../../components/Page";
|
import Page from "../../../components/Page";
|
||||||
import List from "./List2";
|
import List from "./List";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,310 +1,579 @@
|
|||||||
// @mui
|
// @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 } from '@mui/material';
|
import {
|
||||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
Button,
|
||||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
Card,
|
||||||
import AddIcon from '@mui/icons-material/Add';
|
IconButton,
|
||||||
import UploadIcon from '@mui/icons-material/Upload';
|
MenuItem,
|
||||||
import CancelIcon from '@mui/icons-material/Cancel';
|
Paper,
|
||||||
// hooks
|
Table,
|
||||||
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
|
TableBody,
|
||||||
import useSettings from '../../../hooks/useSettings';
|
TableCell,
|
||||||
import { useParams, useSearchParams } from 'react-router-dom';
|
TableContainer,
|
||||||
// components
|
TableHead,
|
||||||
import axios from '../../../utils/axios';
|
TableRow,
|
||||||
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
TextField,
|
||||||
import { Icd } from '../../../@types/diagnosis';
|
Typography,
|
||||||
import BasePagination from '../../../components/BasePagination';
|
Stack,
|
||||||
import { enqueueSnackbar } from 'notistack';
|
Collapse,
|
||||||
|
Box,
|
||||||
|
FormControl,
|
||||||
|
InputLabel,
|
||||||
|
Select,
|
||||||
|
FormHelperText,
|
||||||
|
Menu,
|
||||||
|
ButtonGroup,
|
||||||
|
} from '@mui/material';
|
||||||
|
import AddIcon from '@mui/icons-material/Add';
|
||||||
|
// hooks
|
||||||
|
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
|
||||||
|
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||||
|
// components
|
||||||
|
import axios from '../../../utils/axios';
|
||||||
|
import { Drug } from '../../../@types/pharmacy-and-delivery-managements';
|
||||||
|
import { LaravelPaginatedData } from '../../../@types/paginated-data';
|
||||||
|
import BasePagination from '../../../components/BasePagination';
|
||||||
|
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||||
|
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
||||||
|
import HistoryIcon from '@mui/icons-material/History';
|
||||||
|
import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
|
||||||
|
import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
|
||||||
|
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
import { enqueueSnackbar } from 'notistack';
|
||||||
|
import Label from '../../../components/Label';
|
||||||
|
import UploadIcon from '@mui/icons-material/Upload';
|
||||||
|
import CancelIcon from '@mui/icons-material/Cancel';
|
||||||
|
import DownloadIcon from '@mui/icons-material/Download';
|
||||||
|
import { LoadingButton } from '@mui/lab';
|
||||||
|
|
||||||
export default function List() {
|
|
||||||
const { themeStretch } = useSettings();
|
export default function DrugList() {
|
||||||
const { corporate_id } = useParams();
|
const { corporate_id } = useParams();
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const [importResult, setImportResult] = useState(null);
|
const [importResult, setImportResult] = useState(null);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
function SearchInput(props: any) {
|
function SearchInput(props: any) {
|
||||||
// SEARCH
|
// SEARCH
|
||||||
const searchInput = useRef<HTMLInputElement>(null);
|
const searchInput = useRef<HTMLInputElement>(null);
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState('');
|
||||||
|
|
||||||
const handleSearchChange = (event: any) => {
|
const handleSearchChange = (event: any) => {
|
||||||
const newSearchText = event.target.value ?? ''
|
const newSearchText = event.target.value ?? '';
|
||||||
setSearchText(newSearchText);
|
setSearchText(newSearchText);
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleSearchSubmit = (event: any) => {
|
const handleSubmit = (event: any) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
props.onSearch(searchText); // Trigger to Parent
|
props.onSearch(searchText); // Trigger to Parent
|
||||||
}
|
};
|
||||||
|
|
||||||
useEffect(() => { // Trigger First Search
|
useEffect(() => {
|
||||||
setSearchText(searchParams.get('search') ?? '');
|
setSearchText(searchParams.get('search') ?? '');
|
||||||
}, [searchParams])
|
}, [searchParams]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
|
<form onSubmit={handleSubmit} style={{ width: '100%' }}>
|
||||||
<TextField id="search-input" ref={searchInput} label="Search Code or Name" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
|
<TextField
|
||||||
|
id="search-input"
|
||||||
|
ref={searchInput}
|
||||||
|
label="Search Code or Name..."
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
onChange={handleSearchChange}
|
||||||
|
value={searchText}
|
||||||
|
/>
|
||||||
</form>
|
</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 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(`corporates/${corporate_id}/import-plan-benefit`, 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' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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}/>
|
|
||||||
<Button
|
|
||||||
id="import-button"
|
|
||||||
variant='outlined'
|
|
||||||
startIcon={<AddIcon />} sx={{ p: 1.8 }}
|
|
||||||
aria-controls={createMenu ? 'basic-menu' : undefined}
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-expanded={createMenu ? 'true' : undefined}
|
|
||||||
onClick={handleClick}
|
|
||||||
>
|
|
||||||
Import
|
|
||||||
</Button>
|
|
||||||
<Menu
|
|
||||||
id="import-button"
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
open={createMenu}
|
|
||||||
onClose={handleClose}
|
|
||||||
MenuListProps={{
|
|
||||||
'aria-labelledby': 'basic-button',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleImportButton}>Import</MenuItem>
|
|
||||||
<MenuItem onClick={handleClose}>Download Template</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Called on every row to map the data to the columns
|
// Called on every row to map the data to the columns
|
||||||
function createData( icd: Icd ): Icd {
|
function createData(drug: Drug): Drug {
|
||||||
return {
|
return {
|
||||||
...icd,
|
...drug,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
function ImportForm(props: any) {
|
||||||
|
// IMPORT
|
||||||
|
// Create Button Menu
|
||||||
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||||
|
const createMenu = Boolean(anchorEl);
|
||||||
|
const importPlan = useRef<HTMLInputElement>(null);
|
||||||
|
const [currentImportFileName, setCurrentImportFileName] = useState(null);
|
||||||
|
const [importLoading, setImportLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImportButton = () => {
|
||||||
|
if (importPlan?.current) {
|
||||||
|
handleClose();
|
||||||
|
importPlan.current ? importPlan.current.click() : console.log('No File selected');
|
||||||
|
} else {
|
||||||
|
alert('No file selected');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancelImportButton = () => {
|
||||||
|
if(importPlan.current)
|
||||||
|
{
|
||||||
|
importPlan.current.value = '';
|
||||||
|
importPlan.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(importPlan.current && importPlan.current.files)
|
||||||
|
{
|
||||||
|
if (importPlan.current?.files.length) {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', importPlan.current?.files[0]);
|
||||||
|
setImportLoading(true);
|
||||||
|
axios
|
||||||
|
.post(`master/drugs/${corporate_id}/import`, formData)
|
||||||
|
.then((response) => {
|
||||||
|
handleCancelImportButton();
|
||||||
|
loadDataTableData();
|
||||||
|
setImportResult(response.data);
|
||||||
|
console.log(response.data);
|
||||||
|
setImportLoading(false);
|
||||||
|
})
|
||||||
|
.catch((response) => {
|
||||||
|
enqueueSnackbar(
|
||||||
|
'Looks like something went wrong. Please check your data and try again. ' +
|
||||||
|
response.message,
|
||||||
|
{ variant: 'error' }
|
||||||
|
);
|
||||||
|
setImportLoading(false);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
enqueueSnackbar('No File Selected', { variant: 'warning' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGetTemplate = () => {
|
||||||
|
axios.get('master/drugs/download-template').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={importPlan}
|
||||||
|
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} />
|
||||||
|
<Button
|
||||||
|
id="import-button"
|
||||||
|
startIcon={<DownloadIcon />}
|
||||||
|
sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
|
||||||
|
aria-controls={createMenu ? 'basic-menu' : undefined}
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={createMenu ? 'true' : undefined}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
Import
|
||||||
|
</Button>
|
||||||
|
<Menu
|
||||||
|
id="import-button"
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={createMenu}
|
||||||
|
onClose={handleClose}
|
||||||
|
MenuListProps={{
|
||||||
|
'aria-labelledby': 'basic-button',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={handleImportButton}>
|
||||||
|
<Typography variant='body2'>Import</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
handleGetTemplate();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography variant='body2'> Download Template</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
{/* <MenuItem onClick={handleICDList}>
|
||||||
|
<Typography variant='body2'>Download ICD</Typography>
|
||||||
|
</MenuItem> */}
|
||||||
|
</Menu>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<LoadingButton
|
||||||
|
id="upload-button"
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<UploadIcon />}
|
||||||
|
sx={{ p: 1.8 }}
|
||||||
|
onClick={handleUpload}
|
||||||
|
loading={importLoading}
|
||||||
|
>
|
||||||
|
Upload
|
||||||
|
</LoadingButton>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
{importResult && (
|
||||||
|
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||||
|
<Box sx={{ color: 'text.secondary' }}>
|
||||||
|
Last Import Result :{' '}
|
||||||
|
<Box sx={{ color: 'success.main', display: 'inline' }}>
|
||||||
|
{importResult.data.total_success_row ?? 0}
|
||||||
|
</Box>{' '}
|
||||||
|
Row Processed,{' '}
|
||||||
|
<Box sx={{ color: 'error.main', display: 'inline' }}>
|
||||||
|
{importResult.data.total_failed_row}
|
||||||
|
</Box>{' '}
|
||||||
|
Failed
|
||||||
|
{importResult.data.failed_rows.map((row, index) => (
|
||||||
|
<Typography variant='body' key={index} color="error"> [Code=>{row.code ? row.code : 'Required'},Name=>{row.name ? row.name : 'Required'}]</Typography>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Generate the every row of the table
|
// Generate the every row of the table
|
||||||
function Row(props: { row: ReturnType<typeof createData> }) {
|
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||||
const { row } = props;
|
const { row } = props;
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const style1 = {
|
||||||
|
color: '#637381'
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
|
<TableRow sx={{ '& > *': open ? {borderBottom: 'unset'} : {}, cursor: open ? 'pointer' : '' }} onClick={() => {if(open==true) setOpen(!open)}}>
|
||||||
<TableCell>
|
<TableCell align="left">{row.type ? row.type : '-'}</TableCell>
|
||||||
<IconButton
|
<TableCell align="left">{row.code ? row.code : '-'}</TableCell>
|
||||||
aria-label="expand row"
|
<TableCell align="left">{row.name ? row.name : '-'}</TableCell>
|
||||||
size="small"
|
<TableCell align="left">{row.version ? row.version : '-'}</TableCell>
|
||||||
onClick={() => setOpen(!open)}
|
<TableCell align="left">
|
||||||
>
|
{row.active === 1 ? (
|
||||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
<Label color='success' >
|
||||||
</IconButton>
|
Active
|
||||||
|
</Label>
|
||||||
|
) : (
|
||||||
|
<Label color='error'>
|
||||||
|
Inactive
|
||||||
|
</Label>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="left">
|
||||||
|
<TableMoreMenu actions={
|
||||||
|
<>
|
||||||
|
<MenuItem onClick={() => setOpen(!open)}>
|
||||||
|
<FindInPageOutlinedIcon />
|
||||||
|
Details
|
||||||
|
</MenuItem>
|
||||||
|
{/* <MenuItem onClick={() => handleEditData(row)}>
|
||||||
|
<EditOutlinedIcon />
|
||||||
|
Edit
|
||||||
|
</MenuItem> */}
|
||||||
|
<MenuItem onClick={() => handleEditDataStatus(row)}>
|
||||||
|
<CachedOutlinedIcon />
|
||||||
|
Update Status
|
||||||
|
</MenuItem>
|
||||||
|
{/* <MenuItem onClick={() => navigate ('/corporates/'+corporate_id+'/hospitals/'+row.id+'/history')}>
|
||||||
|
<HistoryIcon />
|
||||||
|
History
|
||||||
|
</MenuItem> */}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="left">{row.type}</TableCell>
|
</TableRow>
|
||||||
<TableCell align="left">{row.code}</TableCell>
|
{/* COLLAPSIBLE ROW */}
|
||||||
<TableCell align="left">{row.name}</TableCell>
|
<TableRow sx={{display: open ? '' : 'none', cursor: open ? 'pointer' : ''}} onClick={() => {if(open==true) setOpen(!open)}}>
|
||||||
<TableCell align="left">{row.version}</TableCell>
|
<TableCell colSpan={6}>
|
||||||
|
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||||
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
|
<Card sx={{padding:2}}>
|
||||||
<TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
|
<Box sx={{ pb: 2 }}>
|
||||||
</TableRow>
|
<Typography variant='subtitle1'>Detail</Typography>
|
||||||
{/* COLLAPSIBLE ROW */}
|
<Stack marginTop={2}>
|
||||||
<TableRow>
|
<Stack direction='row' spacing={1}>
|
||||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
|
<Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Code:</Typography>
|
||||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
<Typography variant='body2' sx={{width: '70%'}}>{row.code ? row.code : '-'}</Typography>
|
||||||
<Box sx={{ borderBottom: 1 }}>
|
</Stack>
|
||||||
<Typography variant="body2" gutterBottom component="div">
|
<Stack direction='row' spacing={1}>
|
||||||
Description : {row.description}
|
<Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Name:</Typography>
|
||||||
</Typography>
|
<Typography variant='body2' sx={{width: '70%'}}>{row.name ? row.name : '-'}</Typography>
|
||||||
</Box>
|
</Stack>
|
||||||
</Collapse>
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
</Collapse>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dummy Default Data
|
// Dummy Default Data
|
||||||
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
|
||||||
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
|
||||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
current_page: 1,
|
||||||
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
|
data: [],
|
||||||
current_page: 1,
|
path: '',
|
||||||
data: [],
|
first_page_url: '',
|
||||||
path: "",
|
last_page: 1,
|
||||||
first_page_url: "",
|
last_page_url: '',
|
||||||
last_page: 1,
|
next_page_url: '',
|
||||||
last_page_url: "",
|
prev_page_url: '',
|
||||||
next_page_url: "",
|
per_page: 10,
|
||||||
prev_page_url: "",
|
from: 0,
|
||||||
per_page: 10,
|
to: 0,
|
||||||
from: 0,
|
total: 0,
|
||||||
to: 0,
|
|
||||||
total: 0
|
|
||||||
});
|
});
|
||||||
const [dataTablePage, setDataTablePage] = useState(5);
|
|
||||||
|
|
||||||
const loadDataTableData = async (appliedFilter : any | null = null) => {
|
const loadDataTableData = async (appliedFilter: any | null = null) => {
|
||||||
setDataTableLoading(true);
|
setDataTableLoading(true);
|
||||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||||
const response = await axios.get('/master/drugs', { params: filter });
|
// Get Data Drugs
|
||||||
// console.log(response.data);
|
const response = await axios.get('/master/drugs', { params: filter });
|
||||||
setDataTableLoading(false);
|
setDataTableLoading(false);
|
||||||
|
setDataTableData(response.data);
|
||||||
setDataTableData(response.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
const headStyle = {
|
|
||||||
fontWeight: 'bold',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const applyFilter = async (searchFilter: string) => {
|
const applyFilter = async (searchFilter: any) => {
|
||||||
await loadDataTableData({ "search" : searchFilter });
|
await loadDataTableData({ search: searchFilter });
|
||||||
setSearchParams({ "search" : searchFilter });
|
setSearchParams({ search: searchFilter });
|
||||||
}
|
};
|
||||||
|
|
||||||
const handlePageChange = (event : ChangeEvent, value: number) => {
|
const handlePageChange = (event: ChangeEvent, value: number) => {
|
||||||
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
|
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
|
||||||
loadDataTableData(filter);
|
loadDataTableData(filter);
|
||||||
setSearchParams(filter);
|
setSearchParams(filter);
|
||||||
}
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadDataTableData();
|
loadDataTableData();
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
|
//validation dialog
|
||||||
|
const [nameField, setNameField] = useState('');
|
||||||
|
const [codeField, setCodeField] = useState('');
|
||||||
|
// ID for edit data
|
||||||
|
const [idField, setIdField] = useState('');
|
||||||
|
|
||||||
|
const handleAddData = () => {
|
||||||
|
navigate('/corporates/'+corporate_id+'/hospitals/create');
|
||||||
|
}
|
||||||
|
//Edit data
|
||||||
|
const handleEditData = (data : any) => {
|
||||||
|
navigate('/corporates/'+corporate_id+'/hospitals/edit/'+data.id+'/'+data.organization_id);
|
||||||
|
}
|
||||||
|
// End dialog for hospitals
|
||||||
|
|
||||||
|
// Dialog for update status hospitals
|
||||||
|
const [openDialogStatus, setOpenDialogStatus] = useState(false);
|
||||||
|
const [activeField, setActiveField] = useState(0);
|
||||||
|
const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
|
||||||
|
|
||||||
|
const handleCloseDialogUpdate = () => {
|
||||||
|
setOpenDialogStatus(false);
|
||||||
|
setNameField('');
|
||||||
|
setCodeField('');
|
||||||
|
setIdField('');
|
||||||
|
setActiveField(activeField);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSaveUpdateData = () => {
|
||||||
|
let activeValue = 0;
|
||||||
|
if(activeField === 1)
|
||||||
|
{
|
||||||
|
activeValue = 0;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
activeValue = 1;
|
||||||
|
}
|
||||||
|
const updateData = {
|
||||||
|
reason: reasonUpdate,
|
||||||
|
active : activeValue,
|
||||||
|
id: idField,
|
||||||
|
};
|
||||||
|
axios
|
||||||
|
.put('/master/drugs/'+idField+'/activation', updateData)
|
||||||
|
.then((response) => {
|
||||||
|
enqueueSnackbar('Data updated successfully', { variant: 'success' });
|
||||||
|
loadDataTableData();
|
||||||
|
handleCloseDialogUpdate();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
enqueueSnackbar('Failed to add data', { variant: 'error' });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditDataStatus = (data: any) => {
|
||||||
|
setIdField(data.id);
|
||||||
|
setNameField(data.name);
|
||||||
|
setCodeField(data.code);
|
||||||
|
setActiveField(data.active);
|
||||||
|
setOpenDialogStatus(true);
|
||||||
|
}
|
||||||
|
// End dialog for update status devisions
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack>
|
||||||
<ImportForm />
|
<ImportForm />
|
||||||
|
<Card>
|
||||||
<Card>
|
{/* The Main Table */}
|
||||||
{/* The Main Table */}
|
<TableContainer component={Paper}>
|
||||||
<TableContainer component={Paper}>
|
<Table aria-label="collapsible table">
|
||||||
<Table aria-label="collapsible table">
|
{/* Table Head */}
|
||||||
<TableBody>
|
<TableHead>
|
||||||
<TableRow>
|
|
||||||
<TableCell style={headStyle} align="left" />
|
|
||||||
<TableCell style={headStyle} align="left">Type</TableCell>
|
|
||||||
<TableCell style={headStyle} align="left">Code</TableCell>
|
|
||||||
<TableCell style={headStyle} align="left">Name</TableCell>
|
|
||||||
<TableCell style={headStyle} align="left">Version</TableCell>
|
|
||||||
<TableCell style={headStyle} align="right">Status</TableCell>
|
|
||||||
<TableCell style={headStyle} align="right">Action</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableBody>
|
|
||||||
{dataTableIsLoading ?
|
|
||||||
(
|
|
||||||
<TableBody>
|
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={8} align="center">Loading</TableCell>
|
<TableCell sx={{width: '10%'}} align="left">
|
||||||
|
<Typography variant='subtitle2'>Type</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{width: '20%'}} align="left">
|
||||||
|
<Typography variant='subtitle2'>Code</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{width: '30%'}} align="left">
|
||||||
|
<Typography variant='subtitle2'>Name</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{width: '20%'}} align="left">
|
||||||
|
<Typography variant='subtitle2'>Version</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{width: '10%'}} align="left">
|
||||||
|
<Typography variant='subtitle2'>Status</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{width: '10%'}} align="left">
|
||||||
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableBody>
|
</TableHead>
|
||||||
) : (
|
{/* Condition Table Body */}
|
||||||
dataTableData.data.length == 0 ?
|
{dataTableIsLoading ? (
|
||||||
(
|
|
||||||
<TableBody>
|
<TableBody>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={8} align="center">No Data</TableCell>
|
<TableCell colSpan={6} align="center">
|
||||||
</TableRow>
|
Loading
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
</TableBody>
|
</TableBody>
|
||||||
) : (
|
) : dataTableData.data.length == 0 ? (
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{dataTableData.data.map(row => (
|
<TableRow>
|
||||||
|
<TableCell colSpan={6} align="center">
|
||||||
|
No Data
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
) : (
|
||||||
|
<TableBody>
|
||||||
|
{dataTableData.data.map((row) => (
|
||||||
<Row key={row.id} row={row} />
|
<Row key={row.id} row={row} />
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
)
|
)}
|
||||||
)}
|
</Table>
|
||||||
</Table>
|
</TableContainer>
|
||||||
</TableContainer>
|
{/* Paginations */}
|
||||||
|
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
|
||||||
|
</Card>
|
||||||
|
{/* Dialog Update Status */}
|
||||||
|
<Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} fullWidth={true}>
|
||||||
|
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||||
|
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||||
|
<Stack direction="row" alignItems='center' spacing={1}>
|
||||||
|
<Typography variant="h6">Update Status</Typography>
|
||||||
|
</Stack>
|
||||||
|
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Stack>
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<Stack spacing={2} padding={2}>
|
||||||
|
<Typography variant='body1'>Are you sure to {activeField == 1 ? 'Inactive' : 'Active'} this drug ?</Typography>
|
||||||
|
<Card sx={{padding:2}} >
|
||||||
|
<Stack direction='row' spacing={2}>
|
||||||
|
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
|
||||||
|
<Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack direction='row' spacing={2}>
|
||||||
|
<Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
|
||||||
|
<Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
<Stack spacing={2} padding={2}>
|
||||||
|
<Typography variant='subtitle1'>Reason for update*</Typography>
|
||||||
|
<FormControl>
|
||||||
|
<InputLabel htmlFor="reason" required>
|
||||||
|
Reason for update
|
||||||
|
</InputLabel>
|
||||||
|
<Select
|
||||||
|
id="reason"
|
||||||
|
value={reasonUpdate}
|
||||||
|
fullWidth
|
||||||
|
label="Reason for update"
|
||||||
|
onChange={(e) => {
|
||||||
|
setReasonUpdate(e.target.value);
|
||||||
|
}}
|
||||||
|
|
||||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
|
>
|
||||||
</Card>
|
<MenuItem value="Agreement changed">Agreement changed</MenuItem>
|
||||||
</Stack>
|
<MenuItem value="Endorsement">Endorsement</MenuItem>
|
||||||
|
<MenuItem value="Renewal">Renewal</MenuItem>
|
||||||
|
<MenuItem value="Worng Setting">Worng Setting</MenuItem>
|
||||||
|
</Select>
|
||||||
|
<FormHelperText style={{ color: 'red' }}></FormHelperText>
|
||||||
|
</FormControl>
|
||||||
|
</Stack>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
|
||||||
|
<Button sx={{backgroundColor: activeField == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeField == 1 ? 'Inactive' : 'Active'}</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
</Stack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user