Update Formularium
This commit is contained in:
ivan-sim
208
frontend/client-portal/src/components/DialogUpdateStatus.tsx
Normal file
208
frontend/client-portal/src/components/DialogUpdateStatus.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton, Grid } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { ReactElement } from 'react';
|
||||
import Iconify from './Iconify';
|
||||
import { Card } from '@mui/material';
|
||||
import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from './hook-form';
|
||||
import { Button } from '@mui/material';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import axios from '@/utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DataContent = {
|
||||
code: string;
|
||||
name: string;
|
||||
id: number;
|
||||
status: string
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
maxWidth?: string;
|
||||
data?: DataContent | undefined;
|
||||
description: string;
|
||||
};
|
||||
|
||||
type FormValuesProps = {
|
||||
value: string;
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const DialogUpdateStatus = ({ title, openDialog, setOpenDialog, data, maxWidth, content }: MuiDialogProps) => {
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
reason: Yup.string().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (openDialog === false) {
|
||||
reset();
|
||||
}
|
||||
}, [openDialog, reset]);
|
||||
|
||||
const handleClose = () => {
|
||||
setOpenDialog(false);
|
||||
};
|
||||
|
||||
const handleUpdate = (id: number, status: number) => {
|
||||
axios
|
||||
.put(`/corporates/${id}/activation`, {
|
||||
// service_code: service.service_code,
|
||||
active: status,
|
||||
})
|
||||
.then((res) => {
|
||||
handleClose()
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.log('asdasd', error.response.data.message)
|
||||
enqueueSnackbar(
|
||||
error.response.data.message ?? error.message ?? 'Failed Processing Request',
|
||||
{ variant: 'error' }
|
||||
);
|
||||
});
|
||||
}
|
||||
let maxWidthDialog = 'md';
|
||||
|
||||
if (maxWidth) {
|
||||
maxWidthDialog = maxWidth;
|
||||
}
|
||||
|
||||
const onSubmit = async (row : any) => {
|
||||
console.log('test')
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={'sm'}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
{title?.icon ? (
|
||||
<Stack direction="row">
|
||||
<Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
|
||||
<Typography variant="h6">{title?.name}</Typography>
|
||||
</Stack>
|
||||
) : (
|
||||
<Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
|
||||
)}
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
|
||||
|
||||
{/* <Stack paddingX={2} paddingY={2}>
|
||||
<Typography variant='subtitle1'>{description}</Typography>
|
||||
</Stack>
|
||||
<Card>
|
||||
<Grid container paddingX={2} paddingY={2}>
|
||||
<Grid item xs={4} md={4}>
|
||||
<Typography variant='inherit'>Code</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<Typography variant='subtitle1'>{data?.code}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={4} md={4} marginTop={2}>
|
||||
<Typography variant='inherit'>Corporate Name</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={8} marginTop={2}>
|
||||
<Typography variant='subtitle1'>{data?.name}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
|
||||
<Typography marginTop={5} marginBottom={3} variant='subtitle1'>
|
||||
Reason for update*
|
||||
</Typography>
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<RHFSelect
|
||||
name="reason"
|
||||
label="Reason for update"
|
||||
>
|
||||
<option value=""></option>
|
||||
<option value="Agreement changed">Agreement changed</option>
|
||||
<option value="Endorsement">Endorsement</option>
|
||||
<option value="Renewal">Renewal</option>
|
||||
<option value="Worng Setting">Worng Setting</option>
|
||||
</RHFSelect>
|
||||
</FormProvider>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
spacing={2}
|
||||
marginTop={5}
|
||||
>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Button
|
||||
sx={{
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
variant="outlined"
|
||||
size="medium"
|
||||
fullWidth={true}
|
||||
onClick={() => setOpenDialog(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
{data?.status == 1 ?
|
||||
<Button
|
||||
sx={{
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
variant="contained"
|
||||
size="medium"
|
||||
fullWidth={true}
|
||||
color='error'
|
||||
onClick={() => handleUpdate(data?.id, 0)}
|
||||
>
|
||||
Inactive
|
||||
</Button>
|
||||
: <Button
|
||||
sx={{
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
variant="contained"
|
||||
size="medium"
|
||||
fullWidth={true}
|
||||
color='success'
|
||||
onClick={() => handleUpdate(data?.id, 1)}
|
||||
>
|
||||
Active
|
||||
</Button> }
|
||||
</Stack>
|
||||
</Stack> */}
|
||||
{content}
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogUpdateStatus;
|
||||
Reference in New Issue
Block a user