Update customer service
This commit is contained in:
@@ -1,9 +1,13 @@
|
||||
import * as Yup from 'yup';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
|
||||
import MuiDialog from "@/components/MuiDialog";
|
||||
import { Button, Autocomplete, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
|
||||
import { Paper } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { DetailFinalLogType } from "../Model/Types";
|
||||
import { MedicineType } from "../Model/Types";
|
||||
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
import { useFieldArray, useForm } from 'react-hook-form';
|
||||
import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
|
||||
@@ -13,8 +17,10 @@ import { enqueueSnackbar } from "notistack";
|
||||
import { useNavigate } from "react-router";
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import RemoveIcon from '@mui/icons-material/Remove';
|
||||
import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
|
||||
|
||||
import { IconButton } from '@mui/material';
|
||||
import { postAddMedince } from '../Model/Functions';
|
||||
|
||||
type DialogConfirmationType = {
|
||||
openDialog: boolean;
|
||||
@@ -23,128 +29,133 @@ type DialogConfirmationType = {
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
export default function DialogHMedicine({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
|
||||
|
||||
interface FormValuesProps extends Partial<DetailFinalLogType> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
const onSubmit = async (data: DetailFinalLogType) => {
|
||||
|
||||
reset();
|
||||
}
|
||||
|
||||
export default function DialogMedicine({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
|
||||
const handleCloseDialogMedicine = () => {
|
||||
setOpenDialog(false)
|
||||
setMedicines([])
|
||||
setOpenDialog(false);
|
||||
}
|
||||
const [medicines, setMedicines] = useState([]);
|
||||
|
||||
const addMedicine = () => {
|
||||
setMedicines((prevMedicines) => [...prevMedicines, { medicine: '', price: '' }]);
|
||||
|
||||
const requestID = requestLog?.id
|
||||
|
||||
const defaultValues: MedicineType = {
|
||||
medicine : [{
|
||||
id: 0,
|
||||
medicine_name: '',
|
||||
medicine_price: 0,
|
||||
request_log_id: requestID,
|
||||
medicine: '', // input to database
|
||||
price: 0, // input to database
|
||||
}],
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
// Update the medicines state to remove the medicine at the given index
|
||||
setMedicines((prevMeds) => prevMeds.filter((med, medIndex) => medIndex !== index));
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
medicine: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
medicine_name : Yup.string().typeError('').required(''),
|
||||
medicine_price : Yup.number().typeError('').required(''),
|
||||
request_log_id : Yup.number().typeError('').required(''),
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
const removeMedicene = (i:number) => {
|
||||
const index = medicines.indexOf(i);
|
||||
if (index > -1) { // only splice array when item is found
|
||||
medicines.splice(index, 1); // 2nd parameter means remove one item only
|
||||
const methods = useForm<any>({
|
||||
resolver: yupResolver(validationSchema),
|
||||
defaultValues
|
||||
});
|
||||
|
||||
const {fields, append, remove} = useFieldArray({name: 'medicine',control: methods.control})
|
||||
|
||||
useEffect(() => {
|
||||
let temp = fields.map((item, i) => {
|
||||
return {
|
||||
medicine_name: 'test',
|
||||
medicine_price: 0,
|
||||
request_log_id: 3,
|
||||
}
|
||||
})
|
||||
|
||||
reset({medicine: temp})
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
|
||||
// Submit Form
|
||||
// =====================================
|
||||
const submitHandler = async (data: MedicineType) => {
|
||||
const response = await postAddMedince(data);
|
||||
|
||||
if (response == true) {
|
||||
reset();
|
||||
// navigate('custormer-service/final-log/detail/'+requestLog?.id);
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const methods = useForm<DetailFinalLogType>();
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
resetField,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})
|
||||
|
||||
const getContent = () => (
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
|
||||
<Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
|
||||
<Grid container spacing={2}>
|
||||
{/* Medicine */}
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
||||
<Typography variant='subtitle1' gutterBottom>Medicine*</Typography>
|
||||
<Button color="inherit" variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={addMedicine}>
|
||||
<Button color="inherit" variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({medicine_name: '', medicine_price: 0, request_log_id: requestLog?.id })}>
|
||||
<Typography variant="button" display="block">Medicine</Typography>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
{/* Listing */}
|
||||
<Grid item xs={6}>
|
||||
<RHFTextField
|
||||
name={`medicine[0].name`}
|
||||
label="Medicine"
|
||||
required
|
||||
placeholder="Medicine"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<RHFTextFieldMoney
|
||||
name={`medicine[0].price`}
|
||||
label="Price"
|
||||
required
|
||||
placeholder="Price"
|
||||
/>
|
||||
</Grid>
|
||||
{medicines.map((medicine, index) => (
|
||||
<React.Fragment key={index+1}>
|
||||
{fields.map((field, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<Grid item xs={6}>
|
||||
<RHFTextField
|
||||
name={`medicine[${index+1}].name`}
|
||||
id='medicine_name'
|
||||
key={field.id}
|
||||
name={`medicine.${index}.medicine_name`}
|
||||
label="Medicine"
|
||||
required
|
||||
placeholder="Medicine"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Grid item xs={5}>
|
||||
<RHFTextFieldMoney
|
||||
name={`medicine[${index+1}].price`}
|
||||
id='medicine_price'
|
||||
key={field.id}
|
||||
name={`medicine.${index}.medicine_price`}
|
||||
label="Price"
|
||||
required
|
||||
placeholder="Price"
|
||||
/>
|
||||
</Grid>
|
||||
{/* <Grid item xs={1}>
|
||||
<Button variant="contained" color="error" onClick={() => handleDelete(index)}>
|
||||
Delete
|
||||
</Button>
|
||||
</Grid> */}
|
||||
{
|
||||
index != (fields.length-1) ?
|
||||
(
|
||||
<Grid item xs={1} sx={{ textAlign: 'center' }}>
|
||||
<IconButton size='large' color='error' onClick={() => remove(index)}>
|
||||
<RemoveIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
) : null
|
||||
}
|
||||
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
</Grid>
|
||||
</Stack>
|
||||
<DialogActions>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
|
||||
<Button color="inherit" variant="outlined" onClick={handleCloseDialogMedicine}><Typography>Cancel</Typography></Button>
|
||||
<LoadingButton disabled={!isDirty} type="submit" variant="contained" loading={isSubmitting}>
|
||||
Add
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</DialogActions>
|
||||
|
||||
</FormProvider>
|
||||
);
|
||||
|
||||
const getAction = () => (
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
|
||||
<Button color="inherit" variant="outlined" onClick={handleCloseDialogMedicine}><Typography>Cancel</Typography></Button>
|
||||
<Button variant="contained"><Typography>Add</Typography></Button>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
const getAction = () => null;
|
||||
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user