[WIP] Add Diagnosa

frontend/dashboard/src/pages/Claims/Show.tsx

@@ -39,6 +39,7 @@ import DiagnosisHistory from './components/DiagnosisHistory';
 import ClaimItems from './components/ClaimItems';
 import DialogMemberBenefit from './components/DialogMemberBenefit';
 import AutocompleteDiagnosis from '@/components/autocomplete/AutocompleteDiagnosis';
+import AutocompleteDiagnosisControlled from '@/components/autocomplete/AutocompleteDiagnosisControlled';
 
 export default function ClaimsCreateUpdate() {
   const { themeStretch } = useSettings();
@@ -97,9 +98,17 @@ export default function ClaimsCreateUpdate() {
   const [primaryDiagnosis, setPrimaryDiagnosis] = useState(null);
   const [secondaryDiagnosis, setSecondaryDiagnosis] = useState(null);
   const [loadingDiagnosis, setLoadingDiagnosis] = useState(false);
+  const [primaryDiagnosisOptions, setPrimaryDiagnosisOptions] = useState([]);
+  const [secondaryDiagnosisOptions, setSecondaryDiagnosisOptions] = useState([]);
 
-  const handlePrimaryDiagnosisChange = ({ title, value }) => {
-    setPrimaryDiagnosis(value);
+  const handlePrimaryDiagnosisChange = (diagnosisOption) => {
+    console.log('handle', diagnosisOption);
+    if (diagnosisOption) {
+      const { title, value } = diagnosisOption;
+      setPrimaryDiagnosis(value);
+    } else {
+      setPrimaryDiagnosis(null);
+    }
   };
 
   const handleSecondaryDiagnosisChange = ({ title, value }) => {
@@ -174,48 +183,84 @@ export default function ClaimsCreateUpdate() {
       });
   };
 
-  
   // ---------------------------------------------------------------
   // Initial LOG
-  const [loadingLog, setLoadingLog] = useState(false)
+  const [loadingLog, setLoadingLog] = useState(false);
 
   const handleDownloadLog = (claim_id) => {
     setLoadingLog(true);
-      axios
-        .post(`generate-log/${claim_id}`, {
-          responseType: 'blob',
-        })
-        .then((response) => {
-          window.open(URL.createObjectURL(response.data));
-          setLoadingLog(false);
-          setOpenDialog(false);
-        })
-        .catch((response) => {
-          enqueueSnackbar(response.message, { variant: 'error' });
-          setLoadingLog(false);
-        });
-  }
-
+    axios
+      .post(`generate-log/${claim_id}`, {
+        responseType: 'blob',
+      })
+      .then((response) => {
+        window.open(URL.createObjectURL(response.data));
+        setLoadingLog(false);
+        setOpenDialog(false);
+      })
+      .catch((response) => {
+        enqueueSnackbar(response.message, { variant: 'error' });
+        setLoadingLog(false);
+      });
+  };
 
   // -------------------------------------------------
   // Final LOG
-  const [loadingFinalLog, setLoadingFinalLog] = useState(false)
+  const [loadingFinalLog, setLoadingFinalLog] = useState(false);
   const handleDownloadFinalLog = (claim_id) => {
     setLoadingFinalLog(true);
-      axios
-        .get(`final-log/${claim_id}`, {
-          responseType: 'blob',
-        })
-        .then((response) => {
-          window.open(URL.createObjectURL(response.data));
-          setLoadingFinalLog(false);
-        })
-        .catch((response) => {
-          enqueueSnackbar(response.message, { variant: 'error' });
-          setLoadingFinalLog(false);
-        });
+    axios
+      .get(`final-log/${claim_id}`, {
+        responseType: 'blob',
+      })
+      .then((response) => {
+        window.open(URL.createObjectURL(response.data));
+        setLoadingFinalLog(false);
+      })
+      .catch((response) => {
+        enqueueSnackbar(response.message, { variant: 'error' });
+        setLoadingFinalLog(false);
+      });
+  };
+
+  // ---------------------------------------------------
+  // Primary ICD
+
+  const NewCorporateSchema = Yup.object().shape({
+    primary_diagnosis_id: Yup.string().required('Name is required'),
+  });
+
+  interface FormValuesProps extends Partial<any> {
+    primary_diagnosis_id: number;
   }
-  
+
+  const defaultValues = useMemo(
+    () => ({
+      primary_diagnosis: currentClaim?.primary_diagnosis[0]?.icd ?? null,
+      secondary_diagnosis: currentClaim?.secondary_diagnosis[0]?.icd ?? null
+    }),
+    [currentClaim]
+  );
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const values = watch();
+
+  // ----------------------------------------------------------------
 
   useEffect(() => {
     axios.get('/claims/' + id).then(({ data }) => {
@@ -225,6 +270,30 @@ export default function ClaimsCreateUpdate() {
       setCurrentClaim(claim);
       setDocuments(allFiles);
       setClaimItems(claim.benefit_items);
+
+      // SET Default Primary Diagnosis
+      if (claim.primary_diagnosis.length && claim.primary_diagnosis[0].icd) {
+        setPrimaryDiagnosisOptions(
+          claim.primary_diagnosis.map((diagnosis) => {
+            if (diagnosis.icd) {
+              return diagnosis.icd;
+            }
+          })
+        );
+        setValue('primary_diagnosis', claim.primary_diagnosis[0].icd);
+      }
+
+      // SET Default Secondary Diagnosis
+      if (claim.secondary_diagnosis.length && claim.secondary_diagnosis[0].icd) {
+        setSecondaryDiagnosisOptions(
+          claim.secondary_diagnosis.map((diagnosis) => {
+            if (diagnosis.icd) {
+              return diagnosis.icd;
+            }
+          })
+        );
+        setValue('secondary_diagnosis', claim.secondary_diagnosis[0].icd)
+      }
     });
   }, [id]);
 
@@ -280,24 +349,22 @@ export default function ClaimsCreateUpdate() {
                 Re-Open
               </LoadingButton>
             )}
-
-
           </Stack>
         </Stack>
 
         <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2, marginY: 2 }}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Typography>Status : {currentClaim?.status}</Typography>
-            { currentClaim?.status == 'approved' && (
-                <LoadingButton
-                  loading={loadingFinalLog}
-                  variant="contained"
-                  onClick={() => {
-                    handleDownloadFinalLog(currentClaim.id);
-                  }}
-                >
-                  Download Final LOG
-                </LoadingButton>
+            {currentClaim?.status == 'approved' && (
+              <LoadingButton
+                loading={loadingFinalLog}
+                variant="contained"
+                onClick={() => {
+                  handleDownloadFinalLog(currentClaim.id);
+                }}
+              >
+                Download Final LOG
+              </LoadingButton>
             )}
           </Stack>
         </Paper>
@@ -381,35 +448,46 @@ export default function ClaimsCreateUpdate() {
               <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2 }}>
                 <Paper variant="outlined" sx={{ background: 'white', p: 2 }}>
                   <Stack spacing={2}>
-                    <AutocompleteDiagnosis
-                      onChange={handlePrimaryDiagnosisChange}
-                      textLabel="Diagnosa Utama (ICD-X)"
-                      currentValue={
-                        currentClaim?.primary_diagnosis ? currentClaim?.primary_diagnosis : null
-                      }
-                    ></AutocompleteDiagnosis>
-                    <AutocompleteDiagnosis
-                      onChange={handleSecondaryDiagnosisChange}
-                      textLabel="Diagnosa Tambahan (ICD-X)"
-                      currentValue={
-                        currentClaim?.secondary_diagnosis ? currentClaim?.secondary_diagnosis : null
-                      }
-                    ></AutocompleteDiagnosis>
+                    {/* {JSON.stringify(getValues('primary_diagnosis'))} */}
+                    <Controller
+                      name="primary_diagnosis"
+                      control={control}
+                      render={({ field: { onChange, value } }) => (
+                        <AutocompleteDiagnosisControlled
+                          onChange={onChange}
+                          currentOptions={primaryDiagnosisOptions}
+                          currentValue={value}
+                          textLabel="Diagnosis Utama (ICD-X)"
+                        />
+                      )}
+                    />
+
+                    <Controller
+                      name="secondary_diagnosis"
+                      control={control}
+                      render={({ field: { onChange, value } }) => (
+                        <AutocompleteDiagnosisControlled
+                          onChange={onChange}
+                          currentOptions={secondaryDiagnosisOptions}
+                          currentValue={value}
+                          textLabel="Diagnosis Tambahan (ICD-X)"
+                        />
+                      )}
+                    />
                   </Stack>
                 </Paper>
 
                 {(currentClaim?.status == 'requested' || currentClaim?.status == 'received') && (
-
-<LoadingButton
-variant="contained"
-sx={{ marginTop: 2 }}
-loading={loadingDiagnosis}
-onClick={() => {
-  handleSaveDiagnosis();
-}}
->
-Simpan Claim Item
-</LoadingButton>
+                  <LoadingButton
+                    variant="contained"
+                    sx={{ marginTop: 2 }}
+                    loading={loadingDiagnosis}
+                    onClick={() => {
+                      handleSaveDiagnosis();
+                    }}
+                  >
+                    Simpan Diagnosa
+                  </LoadingButton>
                 )}
               </Paper>
 
@@ -426,20 +504,18 @@ Simpan Claim Item
                 </Stack>
                 <ClaimItems items={claimItems} setItems={setClaimItems}></ClaimItems>
                 <Stack alignItems={'flex-end'}>
-                  
-                {(currentClaim?.status == 'requested' || currentClaim?.status == 'received') && (
-
-                  <LoadingButton
-                    variant="contained"
-                    sx={{ marginTop: 2 }}
-                    loading={loadingClaimItems}
-                    onClick={() => {
-                      handleSaveClaimItems();
-                    }}
-                  >
-                    Simpan Claim Item
-                  </LoadingButton>
-                )}
+                  {(currentClaim?.status == 'requested' || currentClaim?.status == 'received') && (
+                    <LoadingButton
+                      variant="contained"
+                      sx={{ marginTop: 2 }}
+                      loading={loadingClaimItems}
+                      onClick={() => {
+                        handleSaveClaimItems();
+                      }}
+                    >
+                      Simpan Claim Item
+                    </LoadingButton>
+                  )}
                 </Stack>
 
                 <DialogMemberBenefit