Improve visual feedback when filters are applied in CNS and Live Feed…

… page (#8156) * Update CNS Setting and Filters * Update live monitoring settings and filters * fix checks for button state
ohcnetwork · Jul 17, 2024 · a990d8d · a990d8d
1 parent 7264652
commit a990d8d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 40 deletions.
diff --git a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
@@ -7,6 +7,7 @@ import useFilters from "../../../Common/hooks/useFilters";
 import { Fragment } from "react";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import useSlug from "../../../Common/hooks/useSlug";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   perPageLimit: number;
@@ -16,6 +17,7 @@ interface Props {
 }
 
 const LiveMonitoringFilters = (props: Props) => {
+  const { t } = useTranslation();
   const facilityId = useSlug("facility");
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: props.perPageLimit,
@@ -25,9 +27,9 @@ const LiveMonitoringFilters = (props: Props) => {
     <div className="flex flex-row-reverse items-center gap-4 md:flex-row">
       <Popover className="relative">
         <Popover.Button>
-          <ButtonV2 variant="secondary" border>
+          <ButtonV2 variant={qParams.location ? "primary" : "secondary"} border>
             <CareIcon icon="l-setting" className="text-lg" />
-            Settings and Filters
+            {t("settings_and_filters")}
           </ButtonV2>
         </Popover.Button>
         <Transition
@@ -73,37 +75,6 @@ const LiveMonitoringFilters = (props: Props) => {
                     />
                   </div>
                 </div>
-                {/* <CheckBoxFormField
-                  name="in_use_by_consultation"
-                  label="Hide cameras without patient"
-                  value={qParams.in_use_by_consultation === "true"}
-                  onChange={({ name, value }) => {
-                    if (value) {
-                      updateQuery({ [name]: value });
-                    } else {
-                      removeFilter(name);
-                    }
-                  }}
-                  labelClassName="text-sm"
-                  errorClassName="hidden"
-                />
-                <CheckBoxFormField
-                  name="is_working"
-                  label="Camera is Working"
-                  value={
-                    qParams.is_working === "true" ||
-                    qParams.is_working === undefined
-                  }
-                  onChange={({ name, value }) => {
-                    if (value) {
-                      updateQuery({ [name]: value });
-                    } else {
-                      removeFilter(name);
-                    }
-                  }}
-                  labelClassName="text-sm"
-                  errorClassName="hidden"
-                /> */}
                 <ButtonV2
                   variant="secondary"
                   border

diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
@@ -48,8 +48,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
       asset_class: "HL7MONITOR",
       ordering: qParams.ordering || "bed__name",
       bed_is_occupied:
-        (qParams.hide_monitors_without_patient ?? "true") === "true" ||
-        undefined,
+        qParams.monitors_without_patient === "true" ? undefined : "true",
     },
   });
 
@@ -81,9 +80,17 @@ export default function CentralNursingStation({ facilityId }: Props) {
         <div className="flex flex-row-reverse items-center gap-4 md:flex-row">
           <Popover className="relative">
             <Popover.Button>
-              <ButtonV2 variant="secondary" border>
+              <ButtonV2
+                variant={
+                  qParams.location ||
+                  qParams.monitors_without_patient === "true"
+                    ? "primary"
+                    : "secondary"
+                }
+                border
+              >
                 <CareIcon icon="l-setting" className="text-lg" />
-                Settings and Filters
+                {t("settings_and_filters")}
               </ButtonV2>
             </Popover.Button>
             <Transition
@@ -150,10 +157,10 @@ export default function CentralNursingStation({ facilityId }: Props) {
                       errorClassName="hidden"
                     />
                     <CheckBoxFormField
-                      name="hide_monitors_without_patient"
-                      label="Hide Monitors without Patient"
+                      name="monitors_without_patient"
+                      label="Include monitors without patient"
                       value={JSON.parse(
-                        qParams.hide_monitors_without_patient ?? true,
+                        qParams.monitors_without_patient ?? "false",
                       )}
                       onChange={(e) => updateQuery({ [e.name]: `${e.value}` })}
                       labelClassName="text-sm"

diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
@@ -46,6 +46,7 @@
   "apply": "Apply",
   "filter_by": "Filter By",
   "filter": "Filter",
+  "settings_and_filters": "Settings and Filters",
   "ordering": "Ordering",
   "phone_number": "Phone Number",
   "international_mobile": "International Mobile",