form exclusion specialities done

Modules/Internal/Http/Controllers/Api/CorporateServiceController.php

@@ -359,6 +359,22 @@ class CorporateServiceController extends Controller
             ]);
         }
 
+        if ($request->type == "plan") {
+            $value = $request->value;
+            foreach ($value as $key => $val) {
+                $item[] = $val['value'];
+            }
+
+            $plan = implode(",", $item);
+
+            $exclusion_rule = $exclusion->rules()->updateOrCreate([
+                'exclusion_id' => $exclusion->id,
+                'name' => 'plan',
+            ], [
+                'name' => 'plan',
+                'values' => $plan,
+            ]);
+        }
 
 
         $selected_specialities = CorporateServiceSpeciality::query()

Modules/Internal/Transformers/CorporateServiceConfigResource.php

@@ -65,10 +65,26 @@ class CorporateServiceConfigResource extends JsonResource
             return  $speciality->exclusions->first()->rules->where('name', 'min_age')->first()->values ?? '';
         });
 
-        $data['exclusions'] = $data['exclusions']->map(function ($item, $key) use ($list_msc, $list_gender, $min_age) {
+        $max_age = $this->specialities->map(function ($speciality) {
+            return  $speciality->exclusions->first()->rules->where('name', 'max_age')->first()->values ?? '';
+        });
+
+        $plan = $this->specialities->map(function ($speciality) {
+            return $speciality->exclusions->first()->rules->where('name', 'plan')->first()->values ?? null;
+        });
+
+        $data['exclusions'] = $data['exclusions']->map(function ($item, $key) use (
+            $list_msc,
+            $list_gender,
+            $min_age,
+            $max_age,
+            $plan,
+        ) {
             $item['msc'] = $list_msc[$key];
             $item['gender'] = $list_gender[$key];
             $item['min_age'] = $min_age[$key];
+            $item['max_age'] = $max_age[$key];
+            $item['plan'] = $plan[$key];
             return $item;
         });
 

frontend/dashboard/src/pages/Corporates/Services/Create.tsx

@@ -3,15 +3,21 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import {
   Autocomplete,
   Box,
+  Button,
   Card,
   Checkbox,
   Collapse,
+  Dialog,
+  DialogContent,
+  DialogTitle,
   Divider,
   FormControlLabel,
   FormGroup,
   Grid,
+  IconButton,
   Modal,
   Paper,
+  Popper,
   Stack,
   Table,
   TableBody,
@@ -22,10 +28,24 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
+
+// components
+import {
+  FormProvider,
+  RHFTextField,
+  RHFRadioGroup,
+  RHFUploadAvatar,
+  RHFSwitch,
+  RHFSelect,
+  RHFEditor,
+  RHFDatepicker,
+  RHFMultiCheckbox,
+  RHFCheckbox,
+  RHFCustomMultiCheckbox,
+} from '../../../components/hook-form';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../../components/hook-form';
 import Page from '../../../components/Page';
 import useSettings from '../../../hooks/useSettings';
 import CorporateTabNavigations from '../CorporateTabNavigations';
@@ -34,6 +54,10 @@ import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import axios from '../../../utils/axios';
 import { CorporateService } from '../../../@types/corporates';
 import { InfoIcon } from '../../../theme/overrides/CustomIcons';
+import { includes, set } from 'lodash';
+import { array } from 'yup/lib/locale';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { enqueueSnackbar, useSnackbar } from 'notistack';
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
@@ -86,22 +110,8 @@ export default function Divisions() {
       });
   };
 
-  // const [configExclusions, setConfigExclusions] = useState([]);
-
-  // console.log('Config Exclusions', configExclusions);
-
-  // const handleConfigExclusion = (event: ChangeEvent<HTMLInputElement>, speciality: any) => {
-
-  //   setConfigExclusions({
-  //     ...configExclusions,
-  //     [event.target.name]: event.target.checked,
-  //   });
-  // };
-
   const [exclusion, setExclusion] = useState([]);
 
-  console.log('Exclusions', exclusion);
-
   const handleConfigExclusion = (
     event: ChangeEvent<HTMLInputElement>,
     service: any,
@@ -110,7 +120,7 @@ export default function Divisions() {
     type: string
   ) => {
     console.log(event.target.checked, service, speciality, value, type);
-
+    try {
       axios
         .post(`/corporates/${corporate_id}/services/${service_code}/specialities/exclusion`, {
           // service_code: service.service_code,
@@ -127,6 +137,16 @@ export default function Divisions() {
             exclusions: res.data?.service?.exclusions,
           });
         });
+
+      enqueueSnackbar('Exclusion Updated', {
+        variant: 'success',
+      });
+    } catch (error) {
+      console.log(error);
+      enqueueSnackbar('Exclusion Update Failed', {
+        variant: 'error',
+      });
+    }
   };
 
   const handleToggleSpeciality = (
@@ -135,6 +155,7 @@ export default function Divisions() {
     speciality: any
   ) => {
     console.log('Changing Service ', service, 'and', speciality);
+    try {
       axios
         .post(`/corporates/${corporate_id}/services/${service_code}/specialities`, {
           // service_code: service.service_code,
@@ -153,7 +174,16 @@ export default function Divisions() {
           //   ...service,
           //   configurations: { ...newConfigurations }
           // })
+          enqueueSnackbar('Speciality Updated', {
+            variant: 'success',
           });
+        });
+    } catch (error) {
+      console.log(error);
+      enqueueSnackbar('Speciality Update Failed', {
+        variant: 'error',
+      });
+    }
   };
 
   const specialityModalStyle = {
@@ -161,8 +191,8 @@ export default function Divisions() {
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    width: '80%',
+    width: '90%',
-    maxHeight: '80%',
+    maxHeight: '90%',
     overflowY: 'scroll',
     bgcolor: 'background.paper',
     border: '2px solid gray',
@@ -194,6 +224,9 @@ export default function Divisions() {
 
   const [minAge, setMinAge] = useState('');
   const [maxAge, setMaxAge] = useState('');
+  const [valuePlan, setValuePlan] = useState([]);
+
+  console.log('plan', valuePlan);
 
   const handleMinAge = (event: ChangeEvent<HTMLInputElement>) => {
     setMinAge(event.target.value);
@@ -203,23 +236,27 @@ export default function Divisions() {
     setMaxAge(event.target.value);
   };
 
-  const getMinAge = (service: any, speciality: any) => {
+  const handlePlanChange = (event: ChangeEvent<HTMLInputElement>, value: any) => {
-    let minAge = '';
+    setValuePlan(value);
-    if (service.exclusions) {
-      service.exclusions.map((exclusion: any) => {
-        if (exclusion.speciality_id == speciality.id) {
-          minAge = exclusion.min_age;
-        }
-      });
-    }
-
-    return minAge;
   };
 
-  console.log('minAge', minAge);
+  // const [currentValuePlan, setCurrentValuePlan] = useState([]);
-  console.log('maxAge', maxAge);
+
+  const converToArray = (value: any) => {
+    console.log('value', value);
+    if (value == null) {
+      return null;
+    }
+    const array = value.split(',') ?? [];
+    const currentValuePlan = array.map((item: any) => ({
+      value: item,
+      label: item,
+    }));
+    console.log('currentValuePlan', currentValuePlan);
+
+    return currentValuePlan;
+  };
 
-  console.log('Service _exclusions', service.exclusions);
   return (
     <Page title="Create Benefit">
       <HeaderBreadcrumbs
@@ -248,7 +285,7 @@ export default function Divisions() {
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Card sx={{ p: 2 }}>
-            {/* <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}> */}
+            {/* <FormProvider methods={methods}> */}
             <Box sx={{ borderBottom: 1 }}>
               <Stack>
                 <TableContainer sx={{ mb: 4 }}>
@@ -423,36 +460,66 @@ export default function Divisions() {
                   </Table>
                 </TableContainer>
 
-                <Modal
+                <Dialog
                   open={specialityModal}
                   onClose={() => {
                     setSpecialityModal(false);
                   }}
+                  sx={{
+                    '& .MuiDialog-paper': {
+                      width: '100%',
+                      maxWidth: 1500,
+                      maxHeight: 750,
+                      bgcolor: 'background.paper',
+                      boxShadow: 24,
+                    },
+                  }}
                   aria-labelledby="modal-modal-title"
                   aria-describedby="modal-modal-description"
                 >
-                  <Box sx={specialityModalStyle}>
+                  <DialogTitle>
-                    <Typography id="modal-modal-title" variant="h6" component="h2" sx={{ pb: 4 }}>
+                    <Stack
+                      spacing={2}
+                      direction="row"
+                      justifyContent={'space-between'}
+                      sx={{ mb: 4, pb: 2, borderBottom: 1, borderColor: 'divider' }}
+                      alignItems="center"
+                    >
+                      <Typography id="modal-modal-title" variant="h6" component="h2">
                         Specialities
                       </Typography>
+                      <Button
+                        sx={{ color: 'red' }}
+                        aria-label="close"
+                        onClick={() => setSpecialityModal(false)}
+                      >
+                        <CancelIcon />
+                      </Button>
+                    </Stack>
+                  </DialogTitle>
+                  <DialogContent>
+                    <Box>
                       <TableContainer component={Paper}>
                         <Table aria-label="simple table">
                           <TableHead>
                             <TableRow>
                               <TableCell>Covered</TableCell>
-
                               <TableCell sx={{ width: 10 }}>Nama Spesialisasi</TableCell>
                               <TableCell align="center">MSC</TableCell>
                               <TableCell align="center">Gender</TableCell>
-                            <TableCell align="center">Min Age</TableCell>
+                              <TableCell sx={{ width: 100 }} align="center">
-                            <TableCell align="center">Max Age</TableCell>
+                                Min Age
+                              </TableCell>
+                              <TableCell sx={{ width: 100 }} align="center">
+                                Max Age
+                              </TableCell>
                               <TableCell align="center">Plan</TableCell>
                             </TableRow>
                           </TableHead>
                           <TableBody>
                             {specialities.map((row) => (
                               <TableRow
-                              key={row.name}
+                                key={row.id}
                                 sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                               >
                                 <TableCell>
@@ -463,7 +530,6 @@ export default function Divisions() {
                                     onChange={(event) => {
                                       handleToggleSpeciality(event, service, row);
                                     }}
-                                  name="vitamins"
                                   />
                                 </TableCell>
                                 <TableCell component="th" scope="row">
@@ -471,23 +537,6 @@ export default function Divisions() {
                                 </TableCell>
                                 <TableCell align="center">
                                   <Stack direction="row" spacing={2} justifyContent="center">
-                                  {/* {listMsc.map((list) => (
-                                    <FormControlLabel
-                                      key={list.id}
-                                      control={
-                                        <Checkbox
-                                          checked={service.exclusions
-                                            .map((item) => item.speciality_id == 2)
-                                            .includes(row.id)}
-                                          onChange={(event) => {
-                                            handleConfigExclusion(event, service, row, 'msc');
-                                          }}
-                                        />
-                                      }
-                                      label={list.name}
-                                    />
-                                  ))} */}
-
                                     <FormControlLabel
                                       control={
                                         <Checkbox
@@ -539,7 +588,8 @@ export default function Divisions() {
                                         <Checkbox
                                           checked={service.exclusions.find(
                                             (item) =>
-                                            item.speciality_id == row.id && item.gender?.male == '1'
+                                              item.speciality_id == row.id &&
+                                              item.gender?.male == '1'
                                           )}
                                           onChange={(event) => {
                                             handleConfigExclusion(
@@ -582,17 +632,23 @@ export default function Divisions() {
                                   <TextField
                                     id="outlined-number"
                                     type="number"
-                                  // value={
+                                    defaultValue={
-                                  //   service.exclusions.find((item) => item.speciality_id == row.id)
+                                      service.exclusions.find(
-                                  //     ?.min_age
+                                        (item) => item.speciality_id == row.id
-                                  // }
+                                      )?.min_age
-
+                                    }
                                     onChange={(event) => {
                                       handleMinAge(event);
                                     }}
                                     onKeyDown={(event) => {
                                       if (event.key === 'Enter') {
-                                      handleConfigExclusion(event, service, row, minAge, 'min_age');
+                                        handleConfigExclusion(
+                                          event,
+                                          service,
+                                          row,
+                                          minAge,
+                                          'min_age'
+                                        );
                                       }
                                     }}
                                   />
@@ -601,12 +657,23 @@ export default function Divisions() {
                                   <TextField
                                     id="outlined-number"
                                     type="number"
+                                    defaultValue={
+                                      service.exclusions.find(
+                                        (item) => item.speciality_id == row.id
+                                      )?.max_age
+                                    }
                                     onChange={(event) => {
                                       handleMaxAge(event);
                                     }}
                                     onKeyDown={(event) => {
                                       if (event.key === 'Enter') {
-                                      handleConfigExclusion(event, service, row, maxAge, 'max_age');
+                                        handleConfigExclusion(
+                                          event,
+                                          service,
+                                          row,
+                                          maxAge,
+                                          'max_age'
+                                        );
                                       }
                                     }}
                                   />
@@ -616,8 +683,33 @@ export default function Divisions() {
                                     id="combo-box-demo"
                                     options={plans}
                                     multiple
+                                    limitTags={1}
+                                    fullWidth
                                     getOptionLabel={(option) => option.label}
-                                  style={{ width: 200 }}
+                                    defaultValue={
+                                      converToArray(
+                                        service.exclusions.find(
+                                          (item) => item.speciality_id == row.id
+                                        )?.plan
+                                      ) || []
+                                    }
+                                    isOptionEqualToValue={(option, value) =>
+                                      option.value === value.value
+                                    }
+                                    onChange={(event, value) => {
+                                      handlePlanChange(event, value);
+                                    }}
+                                    onKeyDown={(event) => {
+                                      if (event.key === 'Enter') {
+                                        handleConfigExclusion(
+                                          event,
+                                          service,
+                                          row,
+                                          valuePlan,
+                                          'plan'
+                                        );
+                                      }
+                                    }}
                                     renderInput={(params) => (
                                       <TextField {...params} label="Plan" variant="outlined" />
                                     )}
@@ -629,7 +721,8 @@ export default function Divisions() {
                         </Table>
                       </TableContainer>
                     </Box>
-                </Modal>
+                  </DialogContent>
+                </Dialog>
 
                 <TableContainer sx={{ mb: 4 }}>
                   <Table sx={{ minWidth: 650 }} size="small">