[WIP] Add Diagnosa

frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosis.tsx

@@ -1,14 +1,97 @@
 import axios from "@/utils/axios";
 import { Autocomplete, TextField, CircularProgress } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { IcdType } from "@/@types/diagnosis";
 
-export default function AutocompleteDiagnosis({ onChange, textLabel, currentValue = null })
+type autocompleteValueType = {
+  title: string,
+  value: string | number | null,
+  readonly: boolean
+}
+
+type autocompleteDiagnosisType = {
+  onChange: void,
+  textLabel: string,
+  currentValue: autocompleteValueType | null,
+  currentOptions: autocompleteValueType[]
+}
+
+type optionType = {
+  title: string,
+  value: string | number | null,
+}
+
+// import TextField from '@material-ui/core/TextField';
+// import Autocomplete from '@material-ui/lab/Autocomplete';
+
+
+// const ControlledAutocomplete = ({ options = [], renderInput, getOptionLabel, onChange: ignored, control, defaultValue, name, renderOption }) => {
+//   return (
+//     <Controller
+//       render={({ onChange, ...props }) => (
+//         <Autocomplete
+//           options={options}
+//           getOptionLabel={getOptionLabel}
+//           renderOption={renderOption}
+//           renderInput={renderInput}
+//           onChange={(e, data) => onChange(data)}
+//           {...props}
+//         />
+//       )}
+//       onChange={([, data]) => data}
+//       defaultValue={defaultValue}
+//       name={name}
+//       control={control}
+//     />
+//   );
+// }
+
+export default function AutocompleteDiagnosis({ onChange, textLabel, currentValue, currentOptions = [] }: autocompleteDiagnosisType)
 {
-    const [options, setOptions] = useState([])
+    const [options, setOptions] = useState<autocompleteValueType>([])
     const [loading, setLoading] = useState(false)
+    // const [defaultValue, setDefaultValue] = useState(currentValue ?? {title: 'A00-CHOLERA', value: 1})
+
+    function icdsToOptions(icds: IcdType[]) : autocompleteValueType[] {
+      return icds.map(function(icd: IcdType) {
+          return {
+              title: icd.code + '-' + icd.name,
+              value: icd.id
+          }
+      })
+    }
+
+    useEffect(() => {
+      setOptions(icdsToOptions(currentOptions))
+      // setDefaultValue(currentValue)
+    }, [currentOptions])
+
+    const defaultValue = useMemo(
+      () => (currentValue)
+      , [currentValue]
+    )
+
+    // useEffect(() => {
+    //   if (currentValue && currentValue.value) {
+    //     onChange(currentValue)
+    //   }
+    //   console.log(currentValue)
+    // }, [currentValue])
+
+    const getOptions = (search: string) => {
+      axios.get('options?type=diagnosis&search='+search)
+        .then((res) => {
+            setOptions(icdsToOptions(res.data))
+        })
+        .then(() => {
+            setLoading(false);
+        })
+    }
+
+    // console.log('defaultValue', defaultValue)
 
     return (<Autocomplete
-        defaultValue={currentValue ?? null}
+        defaultValue={defaultValue ?? {title: '', value: null}}
         onChange={(event, value) => {onChange(value)}}
         isOptionEqualToValue={(option, value) => option.title === value.title}
         getOptionLabel={(option) => option.title}
@@ -20,18 +103,7 @@ export default function AutocompleteDiagnosis({ onChange, textLabel, currentValu
             label={textLabel != null ? textLabel : "Diagnosa ICD-X"}
             onChange={(event) => {
                 setLoading(true);
-                axios.get('options?type=diagnosis&search='+event.target.value)
-                    .then((res) => {
-                        setOptions(res.data.map(function(icd) {
-                            return {
-                                title: icd.code + '-' + icd.name,
-                                value: icd.id
-                            }
-                        }))
-                    })
-                    .then(() => {
-                        setLoading(false);
-                    })
+                getOptions(event.target.value)
             }}
             InputProps={{
               ...params.InputProps,

frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosisControlled.tsx

@@ -0,0 +1,80 @@
+import axios from '@/utils/axios';
+import { Autocomplete, TextField, CircularProgress } from '@mui/material';
+import { useEffect, useMemo, useState } from 'react';
+import { IcdType } from '@/@types/diagnosis';
+import { Controller } from 'react-hook-form';
+
+type autocompleteValueType = {
+  title: string;
+  value: string | number | null;
+  readonly: string;
+};
+
+type autocompleteDiagnosisType = {
+  onChange: any;
+  textLabel: string;
+  currentValue: any | null;
+  currentOptions: IcdType[];
+};
+
+export default function AutocompleteDiagnosisControlled({
+  onChange,
+  currentValue,
+  textLabel,
+  currentOptions = [],
+}: autocompleteDiagnosisType) {
+  const [options, setOptions] = useState<IcdType>(currentOptions);
+  const [loading, setLoading] = useState(false);
+
+
+  function icdsToOptions(icds: IcdType[]): IcdType[] {
+    return icds.map(function (icd: IcdType) {
+        return icd;
+    //   return {
+    //     title: icd.code + '-' + icd.name,
+    //     value: icd.id,
+    //     readonly: false,
+    //   };
+    });
+  }
+
+  // To Receive Options from Props
+  useEffect(() => {
+    setOptions(icdsToOptions(currentOptions));
+  }, [currentOptions]);
+
+//   useEffect(() => {
+//     console.log('setting Value', currentValue);
+//     setValue(currentValue || null);
+//   }, [currentValue]);
+
+//   const defaultValue = useMemo(() => currentValue, [currentValue]);
+
+  const getOptions = (search: string) => {
+    axios
+      .get('options?type=diagnosis&search=' + search)
+      .then((res) => {
+        setOptions(icdsToOptions(res.data));
+      })
+      .then(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <Autocomplete
+      options={options}
+      getOptionLabel={(option) => (`${option.code} - ${option.name}`)}
+      value={currentValue}
+      isOptionEqualToValue={(option, value) => option.id == value.id}
+      onChange={(event: any, newValue: any) => {
+        // setValue('primary_diagnosis_id', newValue?.id ?? null);
+        onChange(newValue);
+      }}
+      loading={loading}
+      renderInput={(params) => (
+        <TextField {...params} label={textLabel} variant="outlined" fullWidth onChange={(event) => {getOptions(event.target.value)}}/>
+      )}
+    />
+  );
+}