[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)}}/>
+      )}
+    />
+  );
+}