Update customer service

2023-12-19 08:56:18 +07:00
parent e76c480ce9
commit 40371bd53a
42 changed files with 1027 additions and 2328 deletions
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation.tsx
@@ -23,14 +23,15 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
    const navigate = useNavigate();
    const handleSubmit = () => {
        const formData = {
-            status : approve
+            status : approve,
+            id: requestLog?.id
        }
        axios
-            .put(`customer-service/request/${requestLog?.id}`, formData)
+            .post(`customer-service/request/final-log`, formData)
            .then((response) => {
-                enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
+                enqueueSnackbar('Verification Final LOG Success', { variant: 'success' });
                setOpenDialog(false);
-                navigate('/custormer-service/request')
+                navigate('/custormer-service/final-log')
            })
            .catch(({ response }) => {
                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
@@ -54,7 +55,7 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo

    const getContent = () => (
        <Stack spacing={1} marginTop={2}>
-            <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this request ?</Typography>
+            <Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
            <Grid item xs={12} md={12} marginTop={4}>
                    <Card sx={{padding:2, marginTop:2}}  >
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDelete.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDelete.tsx
@@ -66,4 +66,55 @@ export default function DialogDelete({id, setOpenDialog, openDialog,onSubmit} :
          maxWidth="xs"
        />
      );
+}
+
+export function DialogDeleteMedicine({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
+    const handleSubmit = () => {
+        axios
+            .delete(`customer-service/request/medicine-data/${id}`)
+            .then((response) => {
+                enqueueSnackbar('Benefit Data has Deleted', { variant: 'success' });
+                setOpenDialog(false);
+                window.location.reload()
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+    }
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to delete this detail medicine ?</Typography>
+                <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                    <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+                </DialogActions>
+        </Stack>
+    );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Delete Medicine"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xs"
+        />
+      );
 }
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDeleteMedicine.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDeleteMedicine.tsx
@@ -0,0 +1,69 @@
+import MuiDialog from "@/components/MuiDialog";
+import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
+import { Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { DetailFinalLogType } from "../Model/Types";
+import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { useNavigate } from "react-router";
+
+
+type DialogDeleteType = {
+    openDialog: boolean;
+    setOpenDialog: any;
+    onSubmit?: void;
+    id: number|undefined; 
+}
+
+export default function DialogDeleteMedicine({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
+    const handleSubmit = () => {
+        axios
+            .delete(`customer-service/request/medicine-data/${id}`)
+            .then((response) => {
+                enqueueSnackbar('Benefit Data has Deleted', { variant: 'success' });
+                setOpenDialog(false);
+                window.location.reload()
+            })
+            .catch(({ response }) => {
+                enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
+            });
+    }
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+
+    const handleCloseDialog = () => {
+        setOpenDialog(false);
+    }
+
+    const getContent = () => (
+        <Stack spacing={1} marginTop={2}>
+            <Typography variant="subtitle2">Are you sure to delete this detail medicine ?</Typography>
+                <DialogActions>
+                    <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+                    <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+                </DialogActions>
+        </Stack>
+    );
+
+
+    return (
+        <MuiDialog
+          title={{name: "Delete Medicine"}}
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          content={getContent()}
+          maxWidth="xs"
+        />
+      );
+}
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditBenefit.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditBenefit.tsx
@@ -24,7 +24,7 @@ type DialogDeleteType = {
    setOpenDialog: any;
    onSubmit?: void;
    data: BenefitConfigurationListType|undefined; 
-    id: number;
+    id: number|undefined;
 }

 export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) { 
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogMedicine.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogMedicine.tsx
@@ -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 (