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

progress 1 dashboard-create-claim-request

Browse Source
This commit is contained in:
korospace
2023-10-31 18:29:05 +07:00
parent c38167a50a
commit b934fb0727
15 changed files with 526 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/dashboard/src/hooks/useLoadOnScroll.ts Normal file
View File

@@ -0,0 +1,98 @@
import { RefObject, useEffect, useRef, useState } from 'react';
interface FetchFunction<T> {
(page: number): Promise<T[]>;
}
const useLoadOnScroll = <T>(executeFetch: FetchFunction<T>) => {
const [data, setData] = useState<T[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [page, setPage] = useState<number>(1);
const [listener, setListener] = useState<number>(1);
const [lastPage, setLastPage] = useState<boolean>(false);
const fetchData = async (isSearch?: boolean) => {
if (!lastPage || isSearch === true)
if (isLoading === false) {
setIsLoading(true);
if (isSearch === true) {
const newData = await executeFetch(1);
if (newData.length > 0) {
setData(newData);
setPage((prevPage) => 2);
} else {
setLastPage(true);
setData([]);
}
} else {
const newData = await executeFetch(page);
if (newData.length > 0) {
setData((prevData) => [...prevData, ...newData]);
setPage((prevPage) => prevPage + 1);
} else {
setLastPage(true);
}
}
setIsLoading(false);
}
};
const refetchData = () => {
setPage(1);
setListener((prev) => prev + 1);
};
const resetLastPage = () => {
setLastPage(false);
};
useEffect(() => {
fetchData();
}, [listener]);
// useEffect(() => {
// if (data.length === 0) {
// fetchData();
// }
// }, [data]);
const handleScroll = () => {
const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 1) {
setListener((prevListener) => prevListener + 1);
}
};
const resetSearch = () => {
console.log('reset search');
fetchData(true);
resetLastPage();
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const onClose = () => {
setData([]);
setPage(1);
setLastPage(false);
};
const onOpen = () => {
setData([]);
setLastPage(false);
fetchData(true);
};
// setData and setPage to reset when the dialog closed
return { data, isLoading, setPage, setData, resetSearch, resetLastPage, onClose, onOpen, refetchData };
};
export default useLoadOnScroll;

66
frontend/dashboard/src/pages/ClaimRequests/CreateUpdate.tsx
View File

@@ -1,4 +1,6 @@
import * as Yup from 'yup';
import { Box, IconButton } from '@mui/material';
import { ArrowBackIosNew } from '@mui/icons-material';
import { yupResolver } from '@hookform/resolvers/yup';
import { Autocomplete, Button, Card, Collapse, Container, Divider, Grid, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
import { Controller, useForm } from 'react-hook-form';
@@ -17,45 +19,57 @@ import { fCurrency } from '../../utils/formatNumber';
import Iconify from '../../components/Iconify';
import { ClaimRequest } from '@/@types/claims';
import Form from './Form';
import FormCreate from './FormCreate';
export default function ClaimsCreateUpdate() {
const { themeStretch } = useSettings();
const { id } = useParams();
const navigate = useNavigate()
const { themeStretch } = useSettings();
const { id } = useParams();
const isEdit = id ? true : false;
const isEdit = id ? true : false;
const [currentClaim, setCurrentClaim] = useState<ClaimRequest>();
const [currentClaim, setCurrentClaim] = useState<ClaimRequest>();
useEffect(() => {
if (isEdit) {
axios.get('/claim-requests/' + id).then((res) => {
console.log('Yeet', res.data);
setCurrentClaim(res.data.data);
});
useEffect(() => {
if (isEdit) {
axios.get('/claim-requests/' + id).then((res) => {
console.log('Yeet', res.data);
setCurrentClaim(res.data.data);
});
console.log(currentClaim)
}
}, [id]);
console.log(currentClaim)
}
}, [id]);
return (
<Page title={isEdit ? `Edit Claim Request` : "Create New Claim"}>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center">
<HeaderBreadcrumbs
heading={'Edit Claim Request'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Claim Request',
},
]}
/>
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
<Box sx={{ display: 'flex', alignItems: 'center'}}>
<IconButton size='large' color='inherit' onClick={() => navigate(`/claim-requests`)} >
<ArrowBackIosNew/>
</IconButton>
<Typography variant="h5" sx={{ marginLeft: '24px' }}>
{id == undefined ? 'Create Claim Requests' : 'Edit Claim Requests'}
</Typography>
</Box>
</Stack>
<Form isEdit={isEdit} currentClaim={currentClaim} />
{
id == undefined
?
(
<FormCreate />
)
:
(
<Form isEdit={isEdit} currentClaim={currentClaim} />
)
}
</Container>
</Page>
);

110
frontend/dashboard/src/pages/ClaimRequests/FormCreate.tsx Normal file
View File

@@ -0,0 +1,110 @@
/**
* Core
* ============================================
*/
import { useEffect, useState } from 'react';
import { Box, FormControlLabel, Grid, Checkbox, Typography, CircularProgress , Button, styled} from '@mui/material';
/**
* Components
* ============================================
*/
// - Global -
import Label from '@/components/Label';
// - Local -
import FormCreateSearch from './FormCreateSearch';
/**
* Icon, Utils, Types, Functions, theme, hook
* ============================================
*/
import { MemberListType } from './Model/Types';
import { getMemberList } from './Model/Functions';
import useLoadOnScroll from '@/hooks/useLoadOnScroll';
import FormCreateListChoose from './FormCreateListChoose';
/**
* Custom Style
* ============================================
*/
const DivCustom1 = styled('div')(({ theme }) => ({
left: '350px',
[theme.breakpoints.between('sm', 'lg')]: {
left: '0px',
},
}));
export default function FormCreate() {
// State
// -------------------------
const [keyword, setKeyword] = useState<string>('');
const [listChoosed, setListChoosed] = useState<MemberListType[]>([]);
const [isChoosed, setIsChoosed] = useState<boolean>(false);
// List Choose - auto Scroll
// -------------------------
const fetchFunction = async (page: number): Promise<MemberListType[]> => getMemberList(page, keyword)
const {data: MemberList, isLoading, setData, resetLastPage, refetchData} = useLoadOnScroll<MemberListType>(fetchFunction);
// List Choose - Search
// -------------------------
const handleSearch = (keyword: string) => {
setData([])
resetLastPage()
setKeyword(keyword)
refetchData()
}
return (
<Box sx={{ position: 'relative' }}>
{/* Choose Section */}
<Grid container spacing={4} sx={{ px: 2, display: isChoosed==false ? 'inherit' : 'none' }}>
{/* Search */}
<Grid item xs={12}>
<FormCreateSearch onEmpty={() => handleSearch('')} onSubmit={(keyword) => handleSearch(keyword)} />
</Grid>
<Grid item xs={12}>
<Grid container spacing={2}>
{/* List */}
<Grid item xs={12}>
<Grid container spacing={2}>
{
MemberList.map((row, index) => {
return (
<FormCreateListChoose
key={index}
data={row}
ListChoosed={listChoosed}
handleCheckedProp={(checked, data) => {
checked ? setListChoosed((prevData) => [...prevData, data]) : setListChoosed((items) => items.filter(item => item.id != data.id))
}}
/>
)
})
}
</Grid>
</Grid>
{/* Loading */}
<Grid item xs={12} sx={{ display: isLoading === false ? 'none' : 'flex', justifyContent: 'center', marginTop: '40px' }}>
<CircularProgress />
</Grid>
{/* Submit List */}
<Grid item xs={12}>
<DivCustom1 sx={{ position: 'fixed', bottom: 0, right: 0, background: 'white', px: 4, pt: 4, pb: 6}}>
<Button variant="contained" color="primary" disabled={listChoosed.length==0} sx={{ width: '100%', p: '11px' }} onClick={() => {setIsChoosed(true)}}>
Create Number Batch ({listChoosed.length})
</Button>
</DivCustom1>
</Grid>
</Grid>
</Grid>
</Grid>
{/* Input Section */}
</Box>
)
}

78
frontend/dashboard/src/pages/ClaimRequests/FormCreateListChoose.tsx Normal file
View File

@@ -0,0 +1,78 @@
/**
* Core
* ============================================
*/
import { useEffect, useState } from 'react';
import { Box, FormControlLabel, Grid, Checkbox, Typography, Card} from '@mui/material';
/**
* Components
* ============================================
*/
// - Global -
import Label from '@/components/Label';
// - Local -
/**
* Icon, Utils, Types, Functions, theme, hook
* ============================================
*/
import { fDateTimesecond } from '@/utils/formatTime';
import { MemberListType } from './Model/Types';
import palette from '@/theme/palette';
/**
* Props
* =====================================================
*/
type Props = {
data: MemberListType,
ListChoosed: MemberListType[],
handleCheckedProp: (checked: boolean, data: MemberListType) => void,
};
export default function FormCreateListChoose({data, ListChoosed, handleCheckedProp}: Props) {
const [isChoosed, setIsChoosed] = useState<boolean>(false)
useEffect(() => {
setIsChoosed(false);
ListChoosed.forEach(list => {
if (list.id == data.id) {
setIsChoosed(true);
}
})
}, [ListChoosed])
return (
<Grid item xs={12}>
<Card sx={{
border: '0px solid rgba(0,0,0,0.125)', px: '24px', py: '16px', borderRadius: '12px', display: 'flex', justifyContent: 'space-between',
bgcolor: (theme) => {
return isChoosed ? palette.light.primary.lighter : palette.light.background.default
}
}}>
<Box sx={{ display: 'flex', alignItems: 'center', px: '8px'}}>
<FormControlLabel
label=""
control={<Checkbox onChange={(event, checked) => handleCheckedProp(checked, data)} />}
checked={isChoosed}
/>
<Box>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
{data.name}
</Typography>
<Typography variant="caption" color={palette.light.grey[500]} sx={{ fontWeight: 600 }}>
{data.member_id}
</Typography>
</Box>
</Box>
<Label variant="ghost" color="default">
{fDateTimesecond(new Date())}
</Label>
</Card>
</Grid>
)
}

70
frontend/dashboard/src/pages/ClaimRequests/FormCreateSearch.tsx Normal file
View File

@@ -0,0 +1,70 @@
/**
* Core
* ============================================
*/
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { Grid } from '@mui/material';
/**
* Components
* ============================================
*/
// - Global -
import { FormProvider, RHFTextField } from '@/components/hook-form';
// - Local -
/**
* Icon, Utils, Types, Functions
* ============================================
*/
import { Search } from '@mui/icons-material';
import { SearchType } from './Model/Types';
type Props = {
onSubmit: (keyword: string) => void,
onEmpty: () => void,
};
const FormCreateSearch = ({ onSubmit, onEmpty }: Props) => {
const defaultValuesSearchForm = {
keyword: ''
};
const methodsSearchForm = useForm<SearchType>({
defaultValues: defaultValuesSearchForm
});
const { handleSubmit, formState: { isDirty } } = methodsSearchForm;
// search on submit
const onSubmitSearch = (data: SearchType ) => {
onSubmit(data.keyword);
}
// search on empty
useEffect(() => {
if (isDirty === false) {
onEmpty()
}
},[isDirty])
return (
<FormProvider methods={methodsSearchForm} onSubmit={handleSubmit(onSubmitSearch)}>
<Grid container direction={"row"}>
<Grid item xs={12}>
<RHFTextField
name="keyword"
placeholder="Search..."
autoComplete='off'
fullWidth
InputProps={{ startAdornment: <Search /> }}
sx={{ input: { paddingLeft: '14px' } }}
/>
</Grid>
</Grid>
</FormProvider>
)
}
export default FormCreateSearch

18
frontend/dashboard/src/pages/ClaimRequests/List.tsx
View File

@@ -135,7 +135,7 @@ export default function List() {
if (importForm.current?.files.length) {
const formData = new FormData();
formData.append('file', importForm.current?.files[0]);
setImportLoading(true);
axios
.post(`claim-requests/import`, formData)
@@ -222,7 +222,7 @@ export default function List() {
startIcon={<AddIcon />}
sx={{ p: 1.8 }}
onClick={() => {
navigate('/claims/create');
navigate('/claim-requests/create');
}}
>
Create
@@ -356,8 +356,8 @@ export default function List() {
<TableCell align="left">{row.service_name}</TableCell>
<TableCell align="left">{row.payment_type_name}</TableCell>
<TableCell align="left">
{ row.status == "requested" ?
(<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) :
{ row.status == "requested" ?
(<Label variant='ghost' color='primary'>{capitalizeFirstLetter(row.status)}</Label>) :
(<Label color='success'> {capitalizeFirstLetter(row.status)}</Label>)
}
</TableCell>
@@ -376,7 +376,7 @@ export default function List() {
} />
</TableCell>
{/* <TableCell>
<IconButton
onClick={() => {
handleShowClaim(row);
@@ -398,7 +398,7 @@ export default function List() {
>
<Box>
<Typography fontWeight={600}>Berkas Hasil Penunjang</Typography>
{/* {row.files_by_type?.claim_kondisi &&
{/* {row.files_by_type?.claim_kondisi &&
row.files_by_type?.claim_kondisi.map((file, index) => (
<Stack direction="row" key={index}>
<Typography sx={{ marginRight: 2 }}>-</Typography>{' '}
@@ -412,7 +412,7 @@ export default function List() {
<>
<Typography fontWeight={600} sx={{ marginRight: 4 }}> - Kondisi</Typography>
{row.files_by_type?.claim_kondisi.map((file, index) => (
<Stack direction="row" key={index}>
<a href={file.url} target="_blank">
{file.name}
@@ -426,7 +426,7 @@ export default function List() {
<>
<Typography fontWeight={600} sx={{ marginRight: 4 }}> - Diagnosa</Typography>
{row.files_by_type?.claim_diagnosis.map((file, index) => (
<Stack direction="row" key={index}>
<a href={file.url} target="_blank">
{file.name}
@@ -440,7 +440,7 @@ export default function List() {
<>
<Typography fontWeight={600} sx={{ marginRight: 4 }}> - Hasil</Typography>
{row.files_by_type?.claim_result.map((file, index) => (
<Stack direction="row" key={index}>
<a href={file.url} target="_blank">
{file.name}

22
frontend/dashboard/src/pages/ClaimRequests/Model/Functions.tsx Normal file
View File

@@ -0,0 +1,22 @@
import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack';
import { MemberListType } from './Types';
/**
* Listing Member
*/
export const getMemberList = async ( page: number, keyword: string ): Promise<MemberListType[]> => {
const response = await axios.get(`/claim-requests/list-member?page=${page}&keyword=${keyword}`)
.then((res) =>{
return res.data.data.member_list;
})
.catch((res) => {
enqueueSnackbar("server error !", {
variant: 'error',
});
return [];
});
return response;
};

15
frontend/dashboard/src/pages/ClaimRequests/Model/Types.tsx Normal file
View File

@@ -0,0 +1,15 @@
/**
* Search Type
*/
export type SearchType = {
keyword: string,
}
/**
* Member List
*/
export type MemberListType = {
id : string,
member_id : string,
name : string,
}

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

@@ -430,18 +430,6 @@ export default function Router() {
path: 'claims',
element: <Claims />,
},
{
path: 'claim-requests',
element: <ClaimRequests />,
},
{
path: 'claim-requests/edit/:id',
element: <ClaimRequestsCreate />,
},
{
path: 'claim-requests/detail/:id',
element: <ClaimRequestsDetail />,
},
{
path: 'claims/create',
element: <ClaimsCreate />,
@@ -458,6 +446,22 @@ export default function Router() {
path: 'claims/:id',
element: <ClaimShow />,
},
{
path: 'claim-requests',
element: <ClaimRequests />,
},
{
path: 'claim-requests/create',
element: <ClaimRequestsCreate />,
},
{
path: 'claim-requests/edit/:id',
element: <ClaimRequestsCreate />,
},
{
path: 'claim-requests/detail/:id',
element: <ClaimRequestsDetail />,
},
{
path: 'profile',
element: <Profile />,

10
frontend/dashboard/src/theme/palette.ts
View File

@@ -62,11 +62,11 @@ declare module '@mui/material' {
// SETUP COLORS
const PRIMARY = {
lighter: '#D0FBEC',
light: '#70EAD5',
main: '#19BBBB',
dark: '#0C7186',
darker: '#043C59',
lighter: '#D1F1F1',
light: '#70EAD5',
main: '#19BBBB',
dark: '#0C7186',
darker: '#043C59',
};
const SECONDARY = {
lighter: '#D6E4FF',