Replace Material UI components in src/Components/Shifting/ListFilter.tsx. Fixes #4996

cypress/e2e/shifting_spec/filter.cy.ts

@@ -15,29 +15,36 @@ describe("Shifting section filter", () => {
   it("filter by origin facility", () => {
     cy.intercept(/\/api\/v1\/getallfacilities/).as("facilities_filter");
     cy.get("[name='orgin_facility']")
-      .type("Dummy Facility 1")
+      .wait(100)
+      .type("Dummy")
       .wait("@facilities_filter");
-    cy.get("[role='option']").first().click();
+    cy.get("[name='orgin_facility']").wait(100).type("{downarrow}{enter}");
     cy.contains("Apply").click();
   });
 
   it("filter by assigned facility", () => {
     cy.intercept(/\/api\/v1\/getallfacilities/).as("facilities_filter");
     cy.get("[name='assigned_facility']")
-      .type("Dummy Shifting Center")
+      .wait(100)
+      .type("Dummy")
       .wait("@facilities_filter");
-    cy.get("[role='option']").first().click();
+    cy.get("[name='assigned_facility']").wait(100).type("{downarrow}{enter}");
     cy.contains("Apply").click();
   });
 
   it("filter by assigned to user", () => {
     cy.intercept(/\/api\/v1\/users/).as("users_filter");
-    cy.get("[id='assigned_to']")
+    cy.get("[id='assigned-to']")
       .wait(100)
       .type("cypress")
       .wait("@users_filter");
-    cy.get("[id='assigned_to']").wait(100).type("{downarrow}{enter}");
+    cy.get("[id='assigned-to']").wait(100).type("{downarrow}{enter}");
     cy.contains("Apply").click();
+
+    // cy.intercept(/\/api\/v1\/users/).as("users_filter");
+    // cy.get("[name='assigned_to']").type("cypress").wait("@users_filter");
+    // cy.get("[name='assigned_to']").type("{downarrow}{enter}");
+    // cy.contains("Apply").click();
   });
 
   it("filter by ordering", () => {
@@ -47,46 +54,115 @@ describe("Shifting section filter", () => {
       "DESC Modified Date",
       "ASC Created Date",
     ].forEach((select) => {
-      cy.get("[name='ordering']").select(select).wait(100);
+      cy.get("[id='ordering'] > div > button")
+        .click()
+        .wait(100)
+        .get("li")
+        .contains(select)
+        .click()
+        .wait(100);
       cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
       cy.contains("Apply").click().wait("@shifting_filter");
       cy.contains("Filters").click();
+      // cy.get("[name='ordering']").select(select).wait(100);
+      // cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
+      // cy.contains("Apply").click().wait("@shifting_filter");
+      // cy.contains("Filters").click();
     });
   });
 
   it("filter by emergency case", () => {
     ["yes", "no"].forEach((select) => {
-      cy.get("[name='emergency']").select(select).wait(100);
+      cy.get("[id='emergency'] > div > button")
+        .click()
+        .wait(100)
+        .get("li")
+        .contains(select)
+        .click()
+        .wait(100);
       cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
       cy.contains("Apply").click().wait("@shifting_filter");
       cy.contains("Filters").click();
+      // cy.get("[name='emergency']").select(select).wait(100);
+      // cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
+      // cy.contains("Apply").click().wait("@shifting_filter");
+      // cy.contains("Filters").click();
     });
   });
 
   it("filter by antenatal", () => {
     ["yes", "no"].forEach((select) => {
-      cy.get("[name='is_antenatal']").select(select);
+      cy.get("[id='is-antenatal'] > div > button")
+        .click()
+        .wait(100)
+        .get("li")
+        .contains(select)
+        .click()
+        .wait(100);
       cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
       cy.contains("Apply").click().wait("@shifting_filter");
       cy.contains("Filters").click();
+      // cy.get("[name='is-antenatal']").select(select);
+      // cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
+      // cy.contains("Apply").click().wait("@shifting_filter");
+      // cy.contains("Filters").click();
     });
   });
 
   it("filter by upshift case", () => {
     ["yes", "no"].forEach((select) => {
-      cy.get("[name='is_up_shift']").select(select);
+      cy.get("[id='is-up-shift'] > div > button")
+        .click()
+        .wait(100)
+        .get("li")
+        .contains(select)
+        .click()
+        .wait(100);
       cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
       cy.contains("Apply").click().wait("@shifting_filter");
       cy.contains("Filters").click();
+      // cy.get("[name='is-up-shift']").select(select);
+      // cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
+      // cy.contains("Apply").click().wait("@shifting_filter");
+      // cy.contains("Filters").click();
     });
   });
 
   it("filter by disease status", () => {
     ["POSITIVE", "SUSPECTED", "NEGATIVE", "RECOVERED"].forEach((select) => {
-      cy.get("[name='disease_status']").select(select);
+      cy.get("[id='disease-status'] > div > button")
+        .click()
+        .wait(100)
+        .get("li")
+        .contains(select)
+        .click()
+        .wait(100);
+      cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
+      cy.contains("Apply").click().wait("@shifting_filter");
+      cy.contains("Filters").click();
+      // cy.get("[name='disease_status']").select(select);
+      // cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
+      // cy.contains("Apply").click().wait("@shifting_filter");
+      // cy.contains("Filters").click();
+    });
+  });
+
+  it("filter by breathlessness level", () => {
+    ["NOT BREATHLESS", "MILD", "MODERATE", "SEVERE"].forEach((select) => {
+      cy.get("[id='breathlessness-level'] > div > button")
+        .click()
+        .wait(100)
+        .get("li")
+        .contains(select)
+        .click()
+        .wait(100);
       cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
       cy.contains("Apply").click().wait("@shifting_filter");
       cy.contains("Filters").click();
+      // cy.get("[name='breathlessness_level']").select(select);
+      // cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
+      // cy.contains("Apply").click().wait("@shifting_filter");
+      // cy.contains("Filters").click();
     });
   });
 
@@ -103,15 +179,27 @@ describe("Shifting section filter", () => {
   });
 
   it("filter by created date", () => {
-    cy.get("[name='created_date_after']").type("22/05/2020");
-    cy.get("[name='created_date_before']").type("09/09/2021");
+    cy.contains("Created Date")
+      .parent()
+      .within(() => {
+        cy.get("input[placeholder='Start date']").click();
+        cy.contains("1").click();
+        cy.get("input[placeholder='End date']").click();
+        cy.contains("21").click();
+      });
     cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
     cy.contains("Apply").click().wait("@shifting_filter");
   });
 
   it("filter by modified date", () => {
-    cy.get("[name='modified_date_after']").type("22/05/2020");
-    cy.get("[name='modified_date_before']").type("09/09/2021");
+    cy.contains("Modified Date")
+      .parent()
+      .within(() => {
+        cy.get("input[placeholder='Start date']").click();
+        cy.contains("1").click();
+        cy.get("input[placeholder='End date']").click();
+        cy.contains("21").click();
+      });
     cy.intercept(/\/api\/v1\/shift/).as("shifting_filter");
     cy.contains("Apply").click().wait("@shifting_filter");
   });

src/Components/Shifting/Commons.tsx

@@ -1,13 +1,13 @@
 export const limit = 14;
 
 export const initialFilterData = {
-  status: "--",
+  status: "",
   facility: "",
   orgin_facility: "",
   shifting_approving_facility: "",
   assigned_facility: "",
-  emergency: "--",
-  is_up_shift: "--",
+  emergency: "",
+  is_up_shift: "",
   limit: limit,
   patient_name: "",
   created_date_before: null,
@@ -17,30 +17,30 @@ export const initialFilterData = {
   patient_phone_number: "",
   offset: 0,
   ordering: null,
-  is_kasp: "--",
+  is_kasp: "",
   assigned_to: "",
   disease_status: "",
-  is_antenatal: "--",
+  is_antenatal: "",
   breathlessness_level: "",
 };
 
 export const formatFilter = (params: any) => {
   const filter = { ...initialFilterData, ...params };
   return {
-    status: filter.status === "--" ? null : filter.status,
+    status: filter.status === "" ? null : filter.status,
     facility: "",
     orgin_facility: filter.orgin_facility || undefined,
     shifting_approving_facility:
       filter.shifting_approving_facility || undefined,
     assigned_facility: filter.assigned_facility || undefined,
     emergency:
-      (filter.emergency && filter.emergency) === "--"
+      (filter.emergency && filter.emergency) === ""
         ? ""
         : filter.emergency === "yes"
         ? "true"
         : "false",
     is_up_shift:
-      (filter.is_up_shift && filter.is_up_shift) === "--"
+      (filter.is_up_shift && filter.is_up_shift) === ""
         ? ""
         : filter.is_up_shift === "yes"
         ? "true"
@@ -58,13 +58,13 @@ export const formatFilter = (params: any) => {
     disease_status: filter.disease_status || undefined,
     breathlessness_level: filter.breathlessness_level || undefined,
     is_kasp:
-      (filter.is_kasp && filter.is_kasp) === "--"
+      (filter.is_kasp && filter.is_kasp) === ""
         ? ""
         : filter.is_kasp === "yes"
         ? "true"
         : "false",
     is_antenatal:
-      (filter.is_antenatal && filter.is_antenatal) === "--"
+      (filter.is_antenatal && filter.is_antenatal) === ""
         ? ""
         : filter.is_antenatal === "yes"
         ? "true"