[WIP] Encounter

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

@@ -0,0 +1,63 @@
+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 autocompleteDoctorType = {
+  onChange: any;
+  textLabel: string;
+  currentValue: any | null;
+  currentOptions: IcdType[];
+  filter: object | null;
+};
+
+export default function AutocompleteDoctor({
+  onChange,
+  currentValue,
+  textLabel,
+  currentOptions = [],
+}: autocompleteDoctorType) {
+  const [options, setOptions] = useState<IcdType>(currentOptions);
+  const [loading, setLoading] = useState(false);
+
+
+  function doctorsToOptions(icds: IcdType[]): IcdType[] {
+    return icds.map(function (icd: IcdType) {
+        return icd;
+    });
+  }
+
+  // To Receive Options from Props
+  useEffect(() => {
+    setOptions(doctorsToOptions(currentOptions));
+  }, [currentOptions]);
+
+  const getOptions = (search: string) => {
+    axios
+      .get('options?type=doctors&search=' + search)
+      .then((res) => {
+        setOptions(doctorsToOptions(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)}}/>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,63 @@
+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 autocompleteHealthcareType = {
+  onChange: any;
+  textLabel: string;
+  currentValue: any | null;
+  currentOptions: IcdType[];
+  filter: object | null;
+};
+
+export default function AutocompleteHealthcare({
+  onChange,
+  currentValue,
+  textLabel,
+  currentOptions = [],
+}: autocompleteHealthcareType) {
+  const [options, setOptions] = useState<IcdType>(currentOptions);
+  const [loading, setLoading] = useState(false);
+
+
+  function healthcaresToOptions(healthcares: any[]): any[] {
+    return healthcares.map(function (healthcare: any) {
+        return healthcare;
+    });
+  }
+
+  // To Receive Options from Props
+  useEffect(() => {
+    setOptions(healthcaresToOptions(currentOptions));
+  }, [currentOptions]);
+
+  const getOptions = (search: string) => {
+    axios
+      .get('options?type=healthcares&search=' + search)
+      .then((res) => {
+        setOptions(healthcaresToOptions(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)}}/>
+      )}
+    />
+  );
+}

frontend/dashboard/src/components/hook-form/RHFDatepicker.tsx

@@ -4,11 +4,9 @@ import * as React from 'react';
 
 // @mui
 import { IconButton, TextField, TextFieldProps } from '@mui/material';
-import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { DesktopDatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
-
 import InputAdornment from '@mui/material/InputAdornment';
 import EventIcon from '@mui/icons-material/Event';
 import { fPostFormat } from '../../utils/formatTime';
@@ -28,7 +26,7 @@ export default function RHFDatepicker({ name, ...other }: IProps & TextFieldProp
       control={control}
       render={({ field, fieldState: { error } }) => (
         <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <MobileDatePicker
+          {/* <MobileDatePicker
             inputFormat="yyyy-MM-dd"
             value={field.value}
             onChange={(value) => {
@@ -50,14 +48,15 @@ export default function RHFDatepicker({ name, ...other }: IProps & TextFieldProp
                 {...other}
               />
             )}
-          />
-          {/* <DesktopDatePicker
+          /> */}
+          <DesktopDatePicker
             value={field.value}
+            inputFormat="dd/MM/yyyy"
             onChange={(value) => {
-              field.onChange(fPostFormat(value));
+              field.onChange(value)
             }}
             renderInput={(params) => <TextField {...params} fullWidth />}
-          /> */}
+          />
         </LocalizationProvider>
       )}
     />