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

add create corporate formularium

Browse Source
This commit is contained in:
adibwp
2023-10-20 09:20:11 +07:00
parent 031291b1f0
commit 39f7e16fa4
9 changed files with 2894 additions and 6300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/dashboard/.env.development
View File

@@ -4,4 +4,4 @@ PORT=8083
REACT_APP_HOST_API_URL="http://lms.test"
VITE_API_URL="http://127.0.0.1:8000/api/internal"
VITE_API_URL="https://aso-api.linksehat.dev/api/internal"

2
frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx
View File

@@ -4,7 +4,7 @@ import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import CorporateTabNavigations from '../CorporateTabNavigations';
import List from './List';
import List from './New/List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';

39
frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx Normal file
View File

@@ -0,0 +1,39 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } 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';
// hooks
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../../hooks/useSettings';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../../utils/axios';
import { LaravelPaginatedData } from '../../../../@types/paginated-data';
import { Icd } from '../../../../@types/diagnosis';
import BasePagination from '../../../../components/BasePagination';
export default function CategoryDetail() {
return (
<Box sx={{pb: 2}}>
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell align='left'>Code</TableCell>
<TableCell align='left'>ATC Code</TableCell>
<TableCell align='left'>Name</TableCell>
<TableCell align='left'>Category</TableCell>
<TableCell align='left'>UOM</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Box>
)
}

52
frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx Normal file
View File

@@ -0,0 +1,52 @@
import TableMoreMenu from "@/components/table/TableMoreMenu"
import { FindInPageOutlined } from "@mui/icons-material"
import HistoryIcon from '@mui/icons-material/History';
import { Collapse, MenuItem, TableCell, TableRow } from "@mui/material"
import React from "react";
import CategoryDetail from "./CategoryDetail";
interface RowProps {
id: number
category: string
description: string
}
interface temporaryData {
id: number
category: string
description: string
}
const CategoryRow: React.FC<RowProps> = (props) => {
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow>
<TableCell align="left">{props.category}</TableCell>
<TableCell align="left">{props.description}</TableCell>
<TableCell align="right">
<TableMoreMenu actions = {
<>
<MenuItem onClick={() => setOpen(!open)}>
<FindInPageOutlined />
Detail
</MenuItem>
<MenuItem onClick={() => ""}>
<HistoryIcon />
History
</MenuItem>
</>
} />
</TableCell>
</TableRow>
<TableRow>
<Collapse in={open} timeout='auto' unmountOnExit>
<CategoryDetail />
</Collapse>
</TableRow>
</React.Fragment>
)
}
export default CategoryRow

54
frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { 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 CorporateTabNavigations from '../../CorporateTabNavigations';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
import CorporateFormulariumCreateForm from "./Form"
export default function CorporateFormulariumCreate() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
return(
<Page title='Create Formularium'>
<HeaderBreadcrumbs
heading={'Create Formularium'}
links={[
{
name: 'Corporates',
href: '/corporates'
},
{
name: corporate?.name ?? "-",
href: '/corporates/' + corporate_id,
},
{
name: 'Formularium',
href: '/corporates/' + corporate_id + '/formularium',
},
{
name: 'Create Formularium',
href: '/corporates/' + corporate_id + '/formularium/create',
},
]}
/>
<CorporateFormulariumCreateForm />
</Page>
)
}

76
frontend/dashboard/src/pages/Corporates/Formularium/New/Form.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { useForm } from "react-hook-form";
import { FormProvider, RHFSelect } from "../../../../components/hook-form";
import { Button, Card, Grid, Typography } from "@mui/material";
import { Stack, fontWeight } from "@mui/system";
export default function CorporateFormulariumCreateForm() {
const methods = useForm([
// methods Logic??
]);
const onSubmit = async (data: any) => {
// logic onSubmit
}
const {
handleSubmit,
} = methods;
// Data Dummy
const options = ["Dummy 1", "Dummy 2", "Dummy 3"];
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Grid item xs={12}>
<Card sx={{p:2}}>
<Stack spacing={3}>
<Typography variant="h6">Category*</Typography>
<RHFSelect name="category" label="Category" placeholder="Category" fullWidth={true}>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</RHFSelect>
</Stack>
</Card>
<Stack direction="row" spacing={4} sx={{marginTop: '40px'}}>
<Grid container item xs={12} md={12} justifyContent="flex-end" sx={{p:2}}>
<Button
variant="outlined"
sx={{
p: 1,
fontWeight: 'bold',
color: 'black',
outlineColor: 'black',
marginRight: '20px',
width: 100
}}
>
Cancel
</Button>
<Button
variant="contained"
sx={{
p: 1,
fontWeight: 'bold',
backgroundColor: '#19BBBB',
color: '#FFF',
"&:hover":{
backgroundColor: '#19BBBB', color: '#FFF',
},
width: 100
}}
>
Create
</Button>
</Grid>
</Stack>
</Grid>
</FormProvider>
)
}

157
frontend/dashboard/src/pages/Corporates/Formularium/New/List.tsx Normal file
View File

@@ -0,0 +1,157 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } 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';
// hooks
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../../hooks/useSettings';
import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../../utils/axios';
import { LaravelPaginatedData } from '../../../../@types/paginated-data';
import { Icd } from '../../../../@types/diagnosis';
import BasePagination from '../../../../components/BasePagination';
import CategoryRow from './CategoryRow'
export default function List() {
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: '100%' }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
</form>
);
}
function SearchCreate(props: any) {
return (
<div>
<Stack direction={'row'} spacing={2} sx={{p:2}}>
<SearchInput onSearch={applyFilter}/>
<Button
id='create-button'
variant='contained'
startIcon={<AddIcon />}
sx={{
p: 1.8,
backgroundColor: '#19BBBB', color: '#FFF',
"&:hover":{
backgroundColor: '#19BBBB', color: '#FFF',
}
}}
>
<Link to={`/corporates/${corporate_id}/formularium/create`} style={{color: 'white', textDecoration: 'none'}}>
Create
</Link>
</Button>
</Stack>
</div>
)
}
const applyFilter = async (searchFilter: string) => {
// applyFilter logic
}
const handlePageChange = (event: ChangeEvent, value: number) => {
// pageChange logic
}
const headStyle = {
fontWeight: 'bold',
};
// Dummy Default Data
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
});
// Temporary Data
const temporaryData = [
{
id: 1,
category: 'Category 1',
description: 'This is the description for Category 1',
},
{
id: 2,
category: 'Category 2',
description: 'This is the description for Category 2',
},
{
id: 3,
category: 'Category 3',
description: 'This is the description for Category 3',
},
{
id: 4,
category: 'Category 4',
description: 'This is the description for Category 4',
},
];
return(
<React.Fragment>
<Stack>
<SearchCreate />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">Category</TableCell>
<TableCell style={headStyle} align="left">Description</TableCell>
<TableCell style={headStyle} align="right"></TableCell>
</TableRow>
</TableBody>
<TableBody>
{/* <CategoryRow /> */}
{temporaryData.map(row => (
<CategoryRow id={row.id} category={row.category} description={row.description} />
))}
</TableBody>
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
</React.Fragment>
)
}

5
frontend/dashboard/src/routes/index.tsx
View File

@@ -160,6 +160,10 @@ export default function Router() {
path: ':corporate_id/formularium',
element: <CorporateFormularium />,
},
{
path: ':corporate_id/formularium/create',
element: <CorporateFormulariumCreate />
},
{
path: ':corporate_id/diagnosis-exclusions',
@@ -459,6 +463,7 @@ const DiagnosisExclusionsHistory = Loadable(
const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/Formularium/Index')));
const CorporateFormulariumCreate = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/CreateForm')));
const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index')));
const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));

8807
frontend/dashboard/yarn.lock
View File

File diff suppressed because it is too large Load Diff