129 lines
4.4 KiB
TypeScript
129 lines
4.4 KiB
TypeScript
import { LoadingButton } from '@mui/lab';
|
|
import
|
|
{
|
|
Avatar,
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
FormHelperText,
|
|
MenuItem
|
|
} from '@mui/material';
|
|
import { Card } from '@mui/material';
|
|
import { Stack, Typography } from '@mui/material';
|
|
import axios from '@/utils/axios';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import { useRef, useState, useContext } from 'react';
|
|
import { makeFormData } from '@/utils/jsonToFormData';
|
|
import { format } from 'date-fns';
|
|
import { LanguageContext } from '@/contexts/LanguageContext';
|
|
|
|
interface MemberType {
|
|
members: any;
|
|
services: any;
|
|
}
|
|
interface FormRequestClaimProps {
|
|
member: MemberType;
|
|
handleSubmitSuccess: () => void;
|
|
}
|
|
export default function FormRequestClaim({ member, handleSubmitSuccess }: FormRequestClaimProps) {
|
|
const { localeData }: any = useContext(LanguageContext);
|
|
const [serviceCode, setServiceCode] = useState<string>('');
|
|
|
|
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
|
|
function submitRequest() {
|
|
if(serviceCode == '')
|
|
{
|
|
enqueueSnackbar(localeData.txtDialogMember4, { variant: 'warning' });
|
|
return false;
|
|
}
|
|
setSubmitLoading(true);
|
|
const formData = {
|
|
member_id: member.members.id,
|
|
service_code: serviceCode
|
|
};
|
|
axios
|
|
.post('/request-log', formData)
|
|
.then((response) => {
|
|
console.log(response);
|
|
if (response && response.data && response.data.meta) {
|
|
enqueueSnackbar(response.data.meta.message, { variant: 'success' });
|
|
handleSubmitSuccess();
|
|
}
|
|
})
|
|
.catch(({ response }) => {
|
|
if (response && response.data && response.data.meta) {
|
|
enqueueSnackbar(response.data.meta.message, { variant: 'error' });
|
|
}
|
|
})
|
|
.then(() => {
|
|
setSubmitLoading(false);
|
|
});
|
|
}
|
|
|
|
interface MemberService {
|
|
service_code: string;
|
|
name: string;
|
|
}
|
|
|
|
return (
|
|
<Stack direction="column" spacing={4}>
|
|
<Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }} spacing={2}>
|
|
<Typography variant='body2' sx={{color: '#757575'}}>
|
|
{localeData.txtDialogMember5}
|
|
</Typography>
|
|
<Typography variant='body2' sx={{fontWeight:'bold'}}>{format(new Date(), "d MMM yyyy")}</Typography>
|
|
</Stack>
|
|
|
|
<Stack direction="row" spacing={2}>
|
|
<Stack spacing={2} sx={{width:'100%'}}>
|
|
<Typography variant='subtitle1'>{localeData.txtDialogMember1}*</Typography>
|
|
<FormControl>
|
|
<InputLabel htmlFor="service_type">
|
|
{localeData.txtDialogMember1}
|
|
</InputLabel>
|
|
<Select
|
|
id="service_type"
|
|
value={serviceCode}
|
|
fullWidth
|
|
label={localeData.txtDialogMember1}
|
|
onChange={(e) => {
|
|
setServiceCode(e.target.value);
|
|
}}
|
|
>
|
|
{member && member?.services?.map((item: MemberService, index:number) => (
|
|
<MenuItem key={index} value={item.service_code}>{item.name}</MenuItem>
|
|
))}
|
|
</Select>
|
|
<FormHelperText style={{ color: 'red' }}></FormHelperText>
|
|
</FormControl>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Card sx={{ p: 1, background: '#f4f6f8'}}>
|
|
<Stack direction="row">
|
|
<Avatar
|
|
src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
|
|
alt={member?.members.name ?? ''}
|
|
sx={{ marginTop: 1, width: 48, height: 48 }}
|
|
/>
|
|
<Stack sx={{ p: 1 }}>
|
|
<Typography variant="body2">{member?.members.name ?? ''}</Typography>
|
|
<Typography variant="body2" sx={{color:'#637381'}}>{member?.members.member_id ?? ''}</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<LoadingButton
|
|
variant="contained"
|
|
sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
|
|
onClick={() => {
|
|
submitRequest();
|
|
}}
|
|
loading={submitLoading}
|
|
>
|
|
{localeData.txtDialogMember2}
|
|
</LoadingButton>
|
|
</Stack>
|
|
);
|
|
}
|