Add: search filter in the OrganizationDetails block and adjust data h…

…andling when closing the filters modal
UNICEFECAR · Sep 17, 2024 · c2f6ae2 · c2f6ae2
1 parent 4d8ac90
commit c2f6ae2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/src/hooks/useGetOrganizationById.js b/src/hooks/useGetOrganizationById.js
@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { organizationSvc } from "@USupport-components-library/services";
 
 export const useGetOrganizationById = (organizationId, filters) => {
-  const { startDate, endDate, startTime, endTime, weekdays, weekends } =
+  const { startDate, endDate, startTime, endTime, weekdays, weekends, search } =
     filters;
 
   return useQuery({
@@ -15,6 +15,7 @@ export const useGetOrganizationById = (organizationId, filters) => {
       endTime,
       weekdays,
       weekends,
+      search,
     ],
     queryFn: async () => {
       const data = await organizationSvc.getOrganizationById(
@@ -39,12 +40,14 @@ export const useGetOrganizationById = (organizationId, filters) => {
         providers: data.providers.map((x) => ({
           providerDetailId: x.provider_detail_id,
           joinDate: x.provider_join_date,
+          leaveDate: x.provider_leave_date,
           name: `${x.name} ${x.patronym ? ` ${x.patronym}` : ""} ${x.surname}`,
           image: x.image,
           email: x.email,
           consultations_count: x.consultations_count || 0,
           consultations: x.consultations || [],
           clients: x.clients_count || 0,
+          futureConsultations: Number(x.future_consultations),
         })),
       };
     },

diff --git a/src/pages/OrganizationDetails/OrganizationDetails.jsx b/src/pages/OrganizationDetails/OrganizationDetails.jsx
@@ -13,15 +13,16 @@ import {
 } from "#hooks";
 
 import {
-  Loading,
   BaseTable,
   Block,
   Box,
-  Select,
-  Modal,
+  CheckBox,
   DateInput,
   DropdownWithLabel,
-  CheckBox,
+  Loading,
+  Modal,
+  InputSearch,
+  Select,
 } from "@USupport-components-library/src";
 import {
   getDateView,
@@ -35,6 +36,7 @@ import {
 const { firstDay, lastDay } = getFirstAndLastDayOfPastMonth();
 
 const initialFilters = {
+  search: "",
   startDate: firstDay,
   endDate: lastDay,
   startTime: "09:00",
@@ -102,6 +104,7 @@ export const OrganizationDetails = () => {
         sortingKey: "consultations",
       },
       { isCentered: true, label: t("joined_date"), sortingKey: "joinDate" },
+      { isCentered: true, label: t("leave_date"), sortingKey: "leaveDate" },
     ];
   }, [i18n.language]);
 
@@ -112,6 +115,9 @@ export const OrganizationDetails = () => {
         <p className="text centered">{item.clients}</p>,
         <p className="text centered">{item.consultations_count}</p>,
         <p className="text centered">{getDateView(item.joinDate)}</p>,
+        <p className="text centered">
+          {item.leaveDate ? getDateView(item.leaveDate) : "-"}
+        </p>,
       ];
     });
   }, [dataToDisplay]);
@@ -238,15 +244,30 @@ export const OrganizationDetails = () => {
     >
       <Modal
         isOpen={isFilterModalOpen}
-        closeModal={() => setIsFilterModalOpen(false)}
+        closeModal={() => {
+          setIsFilterModalOpen(false);
+          setFilters(appliedFilters);
+        }}
         heading={t("filters")}
         ctaLabel={t("apply")}
         ctaHandleClick={() => {
           setAppliedFilters(filters);
           setIsFilterModalOpen(false);
         }}
+        secondaryCtaLabel={t("reset_filters")}
+        secondaryCtaHandleClick={() => {
+          setFilters(initialFilters);
+          setAppliedFilters(initialFilters);
+          setIsFilterModalOpen(false);
+        }}
+        secondaryCtaType="secondary"
         classes="page__organization-details__filters-modal"
       >
+        <InputSearch
+          value={filters.search}
+          placeholder={t("search")}
+          onChange={(val) => setFilters({ ...filters, search: val })}
+        />
         <DateInput
           value={filters.startDate}
           label={t("start_date")}
@@ -298,16 +319,26 @@ export const OrganizationDetails = () => {
         heading={t("remove_provider")}
         text={t("remove_provider_subheading", {
           name: providerToRemove?.name,
+          organizationName: data?.name,
         })}
         ctaLabel={t("remove")}
+        ctaColor="red"
         ctaHandleClick={() => {
           removeProviderMutation.mutate({
             organizationId,
             providerDetailId: providerToRemove.providerDetailId,
           });
         }}
         isCtaLoading={removeProviderMutation.isLoading}
-      />
+      >
+        {providerToRemove?.futureConsultations && (
+          <h3 style={{ marginTop: "2rem" }}>
+            {t("has_future_consultations", {
+              count: providerToRemove?.futureConsultations,
+            })}
+          </h3>
+        )}
+      </Modal>
       <Modal
         isOpen={showAddProviderModal}
         closeModal={() => setShowAddProviderModal(false)}
@@ -331,7 +362,7 @@ export const OrganizationDetails = () => {
           }}
         />
       </Modal>
-      {isLoading ? (
+      {isLoading || isProvidersLoading ? (
         <Loading />
       ) : (
         <Block>