{
);
}
- if (assetType === "VENTILATOR") {
+ if (asset.asset_class === "VENTILATOR") {
return (
{
}}
backUrl={`/facility/${facilityId}/assets/${assetId}`}
>
- refetch()}
+ />
);
};
diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 27f0f2d8bc0..84325d704aa 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -28,7 +28,7 @@ import RecordMeta from "../../CAREUI/display/RecordMeta";
import { useTranslation } from "react-i18next";
const Loading = lazy(() => import("../Common/Loading"));
import * as Notification from "../../Utils/Notifications.js";
-import AuthorizeFor, { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
import Uptime from "../Common/Uptime";
import useAuthUser from "../../Common/hooks/useAuthUser";
import dayjs from "dayjs";
@@ -231,6 +231,7 @@ const AssetManage = (props: AssetManageProps) => {
{
setServiceEditData({ ...service, open: true });
@@ -240,6 +241,7 @@ const AssetManage = (props: AssetManageProps) => {
{
{item.label}
-
@@ -453,7 +458,6 @@ const AssetManage = (props: AssetManageProps) => {
}
id="configure-asset"
data-testid="asset-configure-button"
- authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
>
Service History
-
+
@@ -541,7 +548,10 @@ const AssetManage = (props: AssetManageProps) => {
Transaction History
-
+
diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 75c9dd9fc60..66d44d11907 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -97,7 +97,10 @@ export const AssetServiceEditModal = (props: {
{edit.edited_by.username}
-
@@ -124,19 +127,25 @@ export const AssetServiceEditModal = (props: {
Serviced On
-
+
{formatDate(editRecord.serviced_on)}
Notes
-
{editRecord.note || "-"}
+
+ {editRecord.note || "-"}
+
)}
{
editRecord ? setEditRecord(undefined) : props.handleClose();
diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx
index b19190ed410..55f4d0c258e 100644
--- a/src/Components/Assets/AssetType/HL7Monitor.tsx
+++ b/src/Components/Assets/AssetType/HL7Monitor.tsx
@@ -15,6 +15,7 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
import TextFormField from "../../Form/FormFields/TextFormField";
import HL7PatientVitalsMonitor from "../../VitalsMonitor/HL7PatientVitalsMonitor";
import VentilatorPatientVitalsMonitor from "../../VitalsMonitor/VentilatorPatientVitalsMonitor";
+import useAuthUser from "../../../Common/hooks/useAuthUser";
interface HL7MonitorProps {
assetId: string;
@@ -31,7 +32,7 @@ const HL7Monitor = (props: HL7MonitorProps) => {
const [isLoading, setIsLoading] = useState(true);
const [localipAddress, setLocalIPAddress] = useState("");
const [ipadrdress_error, setIpAddress_error] = useState("");
-
+ const authUser = useAuthUser();
const dispatch = useDispatch();
useEffect(() => {
@@ -87,40 +88,42 @@ const HL7Monitor = (props: HL7MonitorProps) => {
return (
-
-
-
-
- {["HL7MONITOR"].includes(assetType) && (
-
-
+
+ )}
+
+ )}
{assetType === "HL7MONITOR" && (
void;
}
-const ONVIFCamera = (props: ONVIFCameraProps) => {
- const { assetId, facilityId, asset } = props;
+const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
const [isLoading, setIsLoading] = useState(true);
const [assetType, setAssetType] = useState("");
const [middlewareHostname, setMiddlewareHostname] = useState("");
@@ -42,9 +43,8 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
const [refreshPresetsHash, setRefreshPresetsHash] = useState(
Number(new Date())
);
- const [refreshHash, setRefreshHash] = useState(Number(new Date()));
const dispatch = useDispatch();
-
+ const authUser = useAuthUser();
useEffect(() => {
const fetchFacility = async () => {
const res = await dispatch(getPermittedFacility(facilityId));
@@ -87,14 +87,10 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
dispatch(partialUpdateAsset(assetId, data))
);
if (res?.status === 200) {
- Notification.Success({
- msg: "Asset Configured Successfully",
- });
- setRefreshHash(Number(new Date()));
+ Notification.Success({ msg: "Asset Configured Successfully" });
+ onUpdated?.();
} else {
- Notification.Error({
- msg: "Something went wrong..!",
- });
+ Notification.Error({ msg: "Something went wrong..!" });
}
setLoadingSetConfiguration(false);
} else {
@@ -147,61 +143,62 @@ const ONVIFCamera = (props: ONVIFCameraProps) => {
return (
-
+ {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
+
+ )}
{assetType === "ONVIF" ? (
{
Age {" - "}
- {props.patientData.age ?? "-"}
+ {props.patientData.age !== undefined // 0 is a valid age, so we need to check for undefined
+ ? formatAge(
+ props.patientData.age,
+ props.patientData.date_of_birth
+ )
+ : "-"}
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 490c704f295..403f1752704 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -5,10 +5,14 @@ import {
SYMPTOM_CHOICES,
} from "../../../Common/constants";
import { ConsultationModel, ICD11DiagnosisModel } from "../models";
-import { getConsultation, getPatient } from "../../../Redux/actions";
+import {
+ getConsultation,
+ getPatient,
+ listShiftRequests,
+} from "../../../Redux/actions";
import { statusType, useAbortableEffect } from "../../../Common/utils";
import { lazy, useCallback, useState } from "react";
-
+import ToolTip from "../../Common/utils/Tooltip";
import ButtonV2 from "../../Common/components/ButtonV2";
import CareIcon from "../../../CAREUI/icons/CareIcon";
import DischargeModal from "../DischargeModal";
@@ -23,7 +27,7 @@ import { navigate } from "raviger";
import { useDispatch } from "react-redux";
import { useQueryParams } from "raviger";
import { useTranslation } from "react-i18next";
-import { triggerGoal } from "../../Common/Plausible";
+import { triggerGoal } from "../../../Integrations/Plausible";
import useAuthUser from "../../../Common/hooks/useAuthUser";
import { ConsultationUpdatesTab } from "./ConsultationUpdatesTab";
import { ConsultationABGTab } from "./ConsultationABGTab";
@@ -50,10 +54,26 @@ export interface ConsultationTabProps {
patientData: PatientModel;
}
+const TABS = {
+ UPDATES: ConsultationUpdatesTab,
+ FEED: ConsultationFeedTab,
+ SUMMARY: ConsultationSummaryTab,
+ MEDICINES: ConsultationMedicinesTab,
+ FILES: ConsultationFilesTab,
+ INVESTIGATIONS: ConsultationInvestigationsTab,
+ ABG: ConsultationABGTab,
+ NURSING: ConsultationNursingTab,
+ NEUROLOGICAL_MONITORING: ConsultationNeurologicalMonitoringTab,
+ VENTILATOR: ConsultationVentilatorTab,
+ NUTRITION: ConsultationNursingTab,
+ PRESSURE_SORE: ConsultationPressureSoreTab,
+ DIALYSIS: ConsultationDialysisTab,
+};
+
export const ConsultationDetails = (props: any) => {
const { t } = useTranslation();
const { facilityId, patientId, consultationId } = props;
- const tab = props.tab.toUpperCase();
+ const tab = props.tab.toUpperCase() as keyof typeof TABS;
const dispatch: any = useDispatch();
const [isLoading, setIsLoading] = useState(false);
const [showDoctors, setShowDoctors] = useState(false);
@@ -63,6 +83,7 @@ export const ConsultationDetails = (props: any) => {
{} as ConsultationModel
);
const [patientData, setPatientData] = useState
({});
+ const [activeShiftingData, setActiveShiftingData] = useState>([]);
const [openDischargeSummaryDialog, setOpenDischargeSummaryDialog] =
useState(false);
const [openDischargeDialog, setOpenDischargeDialog] = useState(false);
@@ -124,6 +145,15 @@ export const ConsultationDetails = (props: any) => {
};
setPatientData(data);
}
+
+ // Get shifting data
+ const shiftingRes = await dispatch(
+ listShiftRequests({ patient: id }, "shift-list-call")
+ );
+ if (shiftingRes?.data?.results) {
+ const data = shiftingRes.data.results;
+ setActiveShiftingData(data);
+ }
} else {
navigate("/not-found");
}
@@ -142,22 +172,6 @@ export const ConsultationDetails = (props: any) => {
});
}, []);
- const TABS = {
- UPDATES: ConsultationUpdatesTab,
- FEED: ConsultationFeedTab,
- SUMMARY: ConsultationSummaryTab,
- MEDICINES: ConsultationMedicinesTab,
- FILES: ConsultationFilesTab,
- INVESTIGATIONS: ConsultationInvestigationsTab,
- ABG: ConsultationABGTab,
- NURSING: ConsultationNursingTab,
- NEUROLOGICAL_MONITORING: ConsultationNeurologicalMonitoringTab,
- VENTILATOR: ConsultationVentilatorTab,
- NUTRITION: ConsultationNursingTab,
- PRESSURE_SORE: ConsultationPressureSoreTab,
- DIALYSIS: ConsultationDialysisTab,
- };
-
const consultationTabProps: ConsultationTabProps = {
consultationId,
facilityId,
@@ -168,6 +182,19 @@ export const ConsultationDetails = (props: any) => {
const SelectedTab = TABS[tab];
+ const hasActiveShiftingRequest = () => {
+ if (activeShiftingData.length > 0) {
+ return [
+ "PENDING",
+ "APPROVED",
+ "DESTINATION APPROVED",
+ "PATIENT TO BE PICKED UP",
+ ].includes(activeShiftingData[activeShiftingData.length - 1].status);
+ }
+
+ return false;
+ };
+
if (isLoading) {
return
{label}
-
- {diagnoses.slice(0, !showMore ? nshow : undefined).map((diagnosis) => (
-
{diagnosis.label}
- ))}
+ {diagnoses.slice(0, !showMore ? nshow : undefined).map((diagnosis) =>
+ diagnosis.id === consultationData.icd11_principal_diagnosis ? (
+
+
{diagnosis.label}
+
+
+
+
+
+ ) : (
+
{diagnosis.label}
+ )
+ )}
{diagnoses.length > nshow && (
<>
{!showMore ? (
@@ -255,17 +292,33 @@ export const ConsultationDetails = (props: any) => {
{!consultationData.discharge_date && (
-
- navigate(
- `/facility/${patientData.facility}/patient/${patientData.id}/shift/new`
- )
- }
- className="btn btn-primary m-1 w-full hover:text-white"
- >
-
+ {hasActiveShiftingRequest() ? (
+
+ navigate(
+ `/shifting/${
+ activeShiftingData[activeShiftingData.length - 1].id
+ }`
+ )
+ }
+ className="btn btn-primary m-1 w-full hover:text-white"
+ >
+
+ ) : (
+
+ navigate(
+ `/facility/${patientData.facility}/patient/${patientData.id}/shift/new`
+ )
+ }
+ className="btn btn-primary m-1 w-full hover:text-white"
+ >
+
+ )}
{
triggerGoal("Doctor Connect Clicked", {
@@ -359,22 +412,6 @@ export const ConsultationDetails = (props: any) => {
)*/}
- {consultationData.icd11_principal_diagnosis && (
-
- d.id === consultationData.icd11_principal_diagnosis
- )!,
- ]}
- />
- )}
-
{
{
setIsLoading(true);
const res = await dispatchAction(getPatient({ id: patientId }));
if (res.data) {
- setPatientName(res.data.name);
- setFacilityName(res.data.facility_object.name);
if (isUpdate) {
- const form = { ...state.form };
- form.action = TELEMEDICINE_ACTIONS.find(
- (a) => a.id === res.data.action
- )?.text;
- dispatch({ type: "set_form", form });
+ dispatch({
+ type: "set_form",
+ form: { ...state.form, action: res.data.action },
+ });
}
+ setPatientName(res.data.name);
+ setFacilityName(res.data.facility_object.name);
}
} else {
setPatientName("");
@@ -302,6 +301,49 @@ export const ConsultationForm = (props: any) => {
!!state.form.symptoms.length && !state.form.symptoms.includes(1);
const isOtherSymptomsSelected = state.form.symptoms.includes(9);
+ const handleFormFieldChange: FieldChangeEventHandler = (event) => {
+ if (event.name === "consultation_status" && event.value === "1") {
+ dispatch({
+ type: "set_form",
+ form: {
+ ...state.form,
+ consultation_status: 1,
+ symptoms: [1],
+ symptoms_onset_date: new Date(),
+ category: "Critical",
+ suggestion: "DD",
+ },
+ });
+ } else if (event.name === "suggestion" && event.value === "DD") {
+ dispatch({
+ type: "set_form",
+ form: {
+ ...state.form,
+ suggestion: "DD",
+ consultation_notes: "Patient declared dead",
+ verified_by: "Declared Dead",
+ },
+ });
+ } else if (
+ event.name === "icd11_diagnoses_object" ||
+ event.name === "icd11_provisional_diagnoses_object"
+ ) {
+ dispatch({
+ type: "set_form",
+ form: {
+ ...state.form,
+ [event.name]: event.value,
+ icd11_principal_diagnosis: undefined,
+ },
+ });
+ } else {
+ dispatch({
+ type: "set_form",
+ form: { ...state.form, [event.name]: event.value },
+ });
+ }
+ };
+
const fetchData = useCallback(
async (status: statusType) => {
if (!patientId) setIsLoading(true);
@@ -352,7 +394,7 @@ export const ConsultationForm = (props: any) => {
death_confirmed_doctor: res.data?.death_confirmed_doctor || "",
InvestigationAdvice: res.data.investigation,
};
- dispatch({ type: "set_form", form: formData });
+ dispatch({ type: "set_form", form: { ...state.form, ...formData } });
setBed(formData.bed);
if (res.data.last_daily_round) {
@@ -364,7 +406,7 @@ export const ConsultationForm = (props: any) => {
setIsLoading(false);
}
},
- [dispatchAction, id]
+ [dispatchAction, id, patientName, patientId]
);
useAbortableEffect(
@@ -745,49 +787,6 @@ export const ConsultationForm = (props: any) => {
}
};
- const handleFormFieldChange: FieldChangeEventHandler = (event) => {
- if (event.name === "consultation_status" && event.value === "1") {
- dispatch({
- type: "set_form",
- form: {
- ...state.form,
- consultation_status: 1,
- symptoms: [1],
- symptoms_onset_date: new Date(),
- category: "Critical",
- suggestion: "DD",
- },
- });
- } else if (event.name === "suggestion" && event.value === "DD") {
- dispatch({
- type: "set_form",
- form: {
- ...state.form,
- suggestion: "DD",
- consultation_notes: "Patient declared dead",
- verified_by: "Declared Dead",
- },
- });
- } else if (
- event.name === "icd11_diagnoses_object" ||
- event.name === "icd11_provisional_diagnoses_object"
- ) {
- dispatch({
- type: "set_form",
- form: {
- ...state.form,
- [event.name]: event.value,
- icd11_principal_diagnosis: undefined,
- },
- });
- } else {
- dispatch({
- type: "set_form",
- form: { ...state.form, [event.name]: event.value },
- });
- }
- };
-
const handleDoctorSelect = (event: FieldChangeEvent) => {
if (event.value?.id) {
dispatch({
@@ -1347,12 +1346,12 @@ export const ConsultationForm = (props: any) => {
option.desc}
- optionValue={(option) => option.text}
+ optionDescription={() => ""}
/>
diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index 84b3e62ef9e..75ab72d168c 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -30,7 +30,7 @@ import { useDispatch } from "react-redux";
import { useHLSPLayer } from "../../../Common/hooks/useHLSPlayer";
import useKeyboardShortcut from "use-keyboard-shortcut";
import useFullscreen from "../../../Common/hooks/useFullscreen.js";
-import { triggerGoal } from "../../Common/Plausible.js";
+import { triggerGoal } from "../../../Integrations/Plausible.js";
import useAuthUser from "../../../Common/hooks/useAuthUser.js";
interface IFeedProps {
diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
index 8376a0ad299..b069b371a72 100644
--- a/src/Components/Facility/DischargeModal.tsx
+++ b/src/Components/Facility/DischargeModal.tsx
@@ -75,7 +75,7 @@ const DischargeModal = ({
const [latestClaim, setLatestClaim] = useState();
const [isCreateClaimLoading, setIsCreateClaimLoading] = useState(false);
const [isSendingDischargeApi, setIsSendingDischargeApi] = useState(false);
- const [facility, setFacility] = useState({ id: 0, name: "" }); // for referred to external
+ const [facility, setFacility] = useState();
const [errors, setErrors] = useState({});
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/Facility/Investigations/Reports/ReportTable.tsx b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
index 0826ff904fc..1f20ec94180 100644
--- a/src/Components/Facility/Investigations/Reports/ReportTable.tsx
+++ b/src/Components/Facility/Investigations/Reports/ReportTable.tsx
@@ -2,7 +2,7 @@ import { getColorIndex, rowColor, transformData } from "./utils";
import ButtonV2 from "../../../Common/components/ButtonV2";
import { InvestigationResponse } from "./types";
-import { formatDateTime } from "../../../../Utils/utils";
+import { formatAge, formatDateTime } from "../../../../Utils/utils";
import { FC } from "react";
const ReportRow = ({ data, name, min, max }: any) => {
@@ -53,6 +53,7 @@ interface ReportTableProps {
patientDetails?: {
name: string;
age: number;
+ date_of_birth: string;
hospitalName: string;
};
investigationData: InvestigationResponse;
@@ -83,7 +84,14 @@ const ReportTable: FC = ({
{patientDetails && (
Name: {patientDetails.name}
-
Age: {patientDetails.age}
+
+ Age:{" "}
+ {formatAge(
+ patientDetails.age,
+ patientDetails.date_of_birth,
+ true
+ )}
+
Hospital: {patientDetails.hospitalName}
)}
diff --git a/src/Components/Facility/Investigations/Reports/index.tsx b/src/Components/Facility/Investigations/Reports/index.tsx
index c4c69bc9169..ab5380c62ca 100644
--- a/src/Components/Facility/Investigations/Reports/index.tsx
+++ b/src/Components/Facility/Investigations/Reports/index.tsx
@@ -100,8 +100,9 @@ const InvestigationReports = ({ id }: any) => {
const [patientDetails, setPatientDetails] = useState<{
name: string;
age: number;
+ date_of_birth: string;
hospitalName: string;
- }>({ name: "", age: -1, hospitalName: "" });
+ }>({ name: "", age: -1, date_of_birth: "", hospitalName: "" });
const [state, dispatch] = useReducer(
investigationReportsReducer,
initialState
@@ -220,6 +221,7 @@ const InvestigationReports = ({ id }: any) => {
setPatientDetails({
name: res.data.name,
age: res.data.age,
+ date_of_birth: res.data.date_of_birth,
hospitalName: res.data.facility_object.name,
});
}
@@ -227,6 +229,7 @@ const InvestigationReports = ({ id }: any) => {
setPatientDetails({
name: "",
age: -1,
+ date_of_birth: "",
hospitalName: "",
});
}
diff --git a/src/Components/Facility/LegacyMonitorCard.tsx b/src/Components/Facility/LegacyMonitorCard.tsx
index 9f9fb8f1ea0..61bff3d607b 100644
--- a/src/Components/Facility/LegacyMonitorCard.tsx
+++ b/src/Components/Facility/LegacyMonitorCard.tsx
@@ -4,6 +4,7 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
import { PatientModel } from "../Patient/models";
import LegacyPatientVitalsCard from "../Patient/LegacyPatientVitalsCard";
import { AssetLocationObject } from "../Assets/AssetTypes";
+import { formatAge } from "../../Utils/utils";
interface MonitorCardProps {
facilityId: string;
@@ -28,7 +29,7 @@ export const LegacyMonitorCard = ({
{patient.name}
- {patient.age}y |{" "}
+ {formatAge(patient.age, patient.date_of_birth)} |{" "}
{GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
index dbca307d38b..3fbd80ac8b2 100644
--- a/src/Components/Facility/TreatmentSummary.tsx
+++ b/src/Components/Facility/TreatmentSummary.tsx
@@ -10,7 +10,7 @@ import { statusType, useAbortableEffect } from "../../Common/utils";
import { PatientModel } from "../Patient/models";
import { GENDER_TYPES } from "../../Common/constants";
-import { formatDate, formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDate, formatDateTime } from "../../Utils/utils";
const Loading = lazy(() => import("../Common/Loading"));
const TreatmentSummary = (props: any) => {
@@ -132,7 +132,8 @@ const TreatmentSummary = (props: any) => {
- Age : {patientData.age}
+ Age : {" "}
+ {formatAge(patientData.age, patientData.date_of_birth, true)}
Date of admission :
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index cc34140e7a9..de2c6af698a 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -223,5 +223,4 @@ export interface CurrentBed {
export type ICD11DiagnosisModel = {
id: string;
label: string;
- parentId: string | null;
};
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index d06067af957..5f33c6388c5 100644
--- 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) => {
/>
+ {hasSelection && !loading && !required && (
+
+ {
+ e.preventDefault();
+ onChange(null);
+ }}
+ />
+
+ {t("clear_selection")}
+
+
+ )}
{loading ? (
) : (
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index bbc60643faf..c4b3ea3686e 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -165,7 +165,7 @@ export const Autocomplete =
(props: AutocompleteProps) => {
{value?.icon}
{value && !props.isLoading && !props.required && (
-