implement claim submit
This commit is contained in:
lasteinsa
@@ -26,6 +26,9 @@ import { useSearchParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
import { fSplit } from '../../utils/formatNumber';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { RootState } from '../../store';
|
||||
import { claimSubmitAction, claimSubmitType } from '../../store/claimSubmit';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -80,6 +83,10 @@ export default function DialogClaimSubmitMember({
|
||||
|
||||
/* ---------------------------------- data ---------------------------------- */
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const selectedData = useSelector((state: RootState) => state.claims.data);
|
||||
|
||||
const [dataMemberClaim, setDataMemberClaim] = useState<DataContentType>({
|
||||
id: 0,
|
||||
fullName: '',
|
||||
@@ -108,7 +115,6 @@ export default function DialogClaimSubmitMember({
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* ------------------------------ Icon On Click ----------------------------- */
|
||||
const clickHandler = ({ id, fullName, memberId, limit, avatar }: DataContentType) => {
|
||||
setDataMemberClaim({
|
||||
@@ -126,6 +132,15 @@ export default function DialogClaimSubmitMember({
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleCheck = (data: DataContentType, isChecked: boolean) => {
|
||||
if (isChecked) {
|
||||
dispatch(claimSubmitAction.patch([...selectedData, data]));
|
||||
} else {
|
||||
let temp = selectedData.filter((row) => row.memberId !== data.memberId);
|
||||
dispatch(claimSubmitAction.patch(temp));
|
||||
}
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
@@ -140,6 +155,10 @@ export default function DialogClaimSubmitMember({
|
||||
})();
|
||||
}, [corporateValue, openDialog, appliedParams]);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(claimSubmitAction.dispatch());
|
||||
}, [dispatch]);
|
||||
|
||||
const getContent = () => (
|
||||
<Stack>
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
@@ -147,47 +166,54 @@ export default function DialogClaimSubmitMember({
|
||||
<Card
|
||||
key={key}
|
||||
sx={{ paddingY: 1, paddingX: 2 }}
|
||||
onClick={() =>
|
||||
clickHandler({
|
||||
id: row.id,
|
||||
fullName: row.fullName,
|
||||
memberId: row.memberId,
|
||||
limit: {
|
||||
current: row.limit.current,
|
||||
total: row.limit.total,
|
||||
percentage: row.limit.percentage,
|
||||
},
|
||||
})
|
||||
}
|
||||
// onClick={() =>
|
||||
// clickHandler({
|
||||
// id: row.id,
|
||||
// fullName: row.fullName,
|
||||
// memberId: row.memberId,
|
||||
// limit: {
|
||||
// current: row.limit.current,
|
||||
// total: row.limit.total,
|
||||
// percentage: row.limit.percentage,
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
>
|
||||
<Stack direction="row" alignItems="center" >
|
||||
<Grid item xs={1} lg={1} xl={1} >
|
||||
<Stack direction="row" alignItems="center">
|
||||
<Grid item xs={1} lg={1} xl={1}>
|
||||
<form>
|
||||
<FormControlLabel
|
||||
value="end"
|
||||
control={<Checkbox />}
|
||||
control={<Checkbox onChange={(e) => handleCheck(row, e.target.checked)} />}
|
||||
label=""
|
||||
labelPlacement="end"
|
||||
sx={{marginLeft: '20px'}}
|
||||
sx={{ marginLeft: '20px' }}
|
||||
/>
|
||||
</form>
|
||||
</Grid>
|
||||
<div style={{ position: 'relative', flex: 'none', height: 'fit-content', margin: '15px'}}>
|
||||
<img
|
||||
width={52}
|
||||
height={52}
|
||||
src="/images/user-profile.png"
|
||||
alt="user-profile"
|
||||
style={{ borderRadius: '50%' }}
|
||||
/>
|
||||
</div>
|
||||
<Grid item xs={7} lg={7} xl={7} >
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
flex: 'none',
|
||||
height: 'fit-content',
|
||||
margin: '15px',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
width={52}
|
||||
height={52}
|
||||
src="/images/user-profile.png"
|
||||
alt="user-profile"
|
||||
style={{ borderRadius: '50%' }}
|
||||
/>
|
||||
</div>
|
||||
<Grid item xs={7} lg={7} xl={7}>
|
||||
<Typography variant="subtitle1">{row.fullName}</Typography>
|
||||
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{row.memberId}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3} lg={3} xl={3} >
|
||||
<Grid item xs={3} lg={3} xl={3}>
|
||||
<BorderLinearProgress
|
||||
variant="determinate"
|
||||
value={row.limit && row.limit.percentage}
|
||||
@@ -196,27 +222,40 @@ export default function DialogClaimSubmitMember({
|
||||
/>
|
||||
<Stack direction={'row'}>
|
||||
<Grid item xs={3}>
|
||||
<Typography variant='overline' sx={{textAlign:'left'}}>
|
||||
<Typography variant="overline" sx={{ textAlign: 'left' }}>
|
||||
LIMIT
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={7} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Stack direction={'row'}>
|
||||
<Typography variant='overline'>
|
||||
{fSplit(row.limit && row.limit.current)}
|
||||
<Typography variant="overline">
|
||||
{fSplit(row.limit && row.limit.current)}
|
||||
</Typography>
|
||||
<Typography variant='overline'>
|
||||
/ {fSplit(row.limit && row.limit.total)}
|
||||
<Typography variant="overline">
|
||||
/ {fSplit(row.limit && row.limit.total)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={2} lg={2} xl={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<IconButton >
|
||||
<Grid
|
||||
item
|
||||
xs={2}
|
||||
lg={2}
|
||||
xl={2}
|
||||
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
|
||||
>
|
||||
<IconButton>
|
||||
<Iconify icon="ic:history" />
|
||||
</IconButton>
|
||||
<IconButton sx={{marginLeft: '10px'}} onClick={() => navigate(`/claim-request/${row.id}`)} >
|
||||
<IconButton
|
||||
disabled={selectedData.length > 0}
|
||||
sx={{ marginLeft: '10px' }}
|
||||
onClick={() => {
|
||||
dispatch(claimSubmitAction.patch([row]));
|
||||
navigate(`/claim-request/${row.id}`);
|
||||
}}
|
||||
>
|
||||
<Iconify icon="ic:round-chevron-right" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
@@ -225,7 +264,6 @@ export default function DialogClaimSubmitMember({
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -254,13 +292,15 @@ export default function DialogClaimSubmitMember({
|
||||
<Grid item xs={12}>
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
sx={{ marginTop: 2, p: 2, margin: '10px', color:'#212B36', backgroundColor:'#DFE3E8' }}
|
||||
// sx={{ marginTop: 2, p: 2, margin: '10px', color: '#212B36', backgroundColor: '#DFE3E8' }}
|
||||
sx={{ marginTop: 2, p: 2, margin: '10px' }}
|
||||
fullWidth
|
||||
|
||||
disabled={selectedData.length === 0}
|
||||
onClick={() => navigate('/claim-request/bulk')}
|
||||
>
|
||||
Claim Submit Selected
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user