Enable clearing 'referred to' in discharge modal

ohcnetwork · Sep 25, 2023 · 7c387da · 7c387da
1 parent fee0648
commit 7c387da
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
@@ -75,7 +75,7 @@ const DischargeModal = ({
   const [latestClaim, setLatestClaim] = useState<HCXClaimModel>();
   const [isCreateClaimLoading, setIsCreateClaimLoading] = useState(false);
   const [isSendingDischargeApi, setIsSendingDischargeApi] = useState(false);
-  const [facility, setFacility] = useState<FacilityModel>({ id: 0, name: "" }); // for referred to external
+  const [facility, setFacility] = useState<FacilityModel>();
   const [errors, setErrors] = useState<any>({});
 
   const fetchLatestClaim = useCallback(async () => {
@@ -186,12 +186,13 @@ const DischargeModal = ({
   const prescriptionActions = PrescriptionActions(consultationData.id ?? "");
 
   const handleFacilitySelect = (selected: FacilityModel) => {
-    setFacility(selected ? selected : facility);
-    const { id, name } = selected;
+    setFacility(selected);
+    const { id, name } = selected || {};
     const isExternal = id === -1;
     setPreDischargeForm((prev) => ({
       ...prev,
-      ...(isExternal ? { referred_to_external: name } : { referred_to: id }),
+      referred_to: isExternal ? null : id,
+      referred_to_external: isExternal ? name : null,
     }));
   };
 
@@ -238,8 +239,8 @@ const DischargeModal = ({
                 handleFacilitySelect(selected as FacilityModel)
               }
               selected={facility}
-              showAll={true}
-              freeText={true}
+              showAll
+              freeText
               multiple={false}
               errors={errors?.referred_to}
               className="mb-4"

diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
@@ -7,6 +7,7 @@ import {
   MultiSelectOptionChip,
   dropdownOptionClassNames,
 } from "./MultiSelectMenuV2";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   name?: string;
@@ -23,6 +24,7 @@ interface Props {
   placeholder?: string;
   disabled?: boolean;
   error?: string;
+  required?: boolean;
   onBlur?: () => void;
   onFocus?: () => void;
 }
@@ -42,11 +44,13 @@ const AutoCompleteAsync = (props: Props) => {
     className = "",
     placeholder,
     disabled = false,
+    required = false,
     error,
   } = props;
   const [data, setData] = useState([]);
   const [query, setQuery] = useState("");
   const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
 
   const hasSelection =
     (!multiple && selected) || (multiple && selected?.length > 0);
@@ -86,9 +90,7 @@ const AutoCompleteAsync = (props: Props) => {
                   : placeholder || "Start typing to search..."
               }
               displayValue={() =>
-                hasSelection && !multiple
-                  ? optionLabel && optionLabel(selected)
-                  : ""
+                hasSelection && !multiple ? optionLabel?.(selected) : ""
               }
               onChange={({ target }) => setQuery(target.value)}
               onFocus={props.onFocus}
@@ -100,6 +102,20 @@ const AutoCompleteAsync = (props: Props) => {
             />
             <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
               <div className="absolute right-0 top-1 mr-2 flex items-center text-lg text-secondary-900">
+                {hasSelection && !loading && !required && (
+                  <div className="tooltip">
+                    <CareIcon
+                      className="care-l-times-circle mb-[-5px] h-4 w-4 text-gray-800 transition-colors duration-200 ease-in-out hover:text-gray-500"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        onChange(null);
+                      }}
+                    />
+                    <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
+                      {t("clear_selection")}
+                    </span>
+                  </div>
+                )}
                 {loading ? (
                   <CareIcon className="care-l-spinner -mb-1.5 animate-spin" />
                 ) : (