Add: organization field to the table and csv export in ProviderActivi…

…ties
UNICEFECAR · Sep 16, 2024 · 7d7f5d6 · 7d7f5d6
1 parent 61cdba0
commit 7d7f5d6
Showing 1 changed file with 47 additions and 3 deletions.
diff --git a/src/blocks/ProviderActivities/ProviderActivities.jsx b/src/blocks/ProviderActivities/ProviderActivities.jsx
@@ -58,6 +58,11 @@ export const ProviderActivities = ({ isLoading, data, providerName }) => {
         sortingKey: "campaignName",
         isCentered: true,
       },
+      {
+        label: t("organization"),
+        sortingKey: "organizationName",
+        isCentered: true,
+      },
     ];
   }, [i18n.language]);
 
@@ -72,7 +77,8 @@ export const ProviderActivities = ({ isLoading, data, providerName }) => {
       csv += `${row.displayName},`;
       csv += `${getFormattedDate(row.time, false)},`;
       csv += `${price},`;
-      csv += `${row.campaignName || "N/A"}`;
+      csv += `${row.campaignName || "N/A"},`;
+      csv += `${row.organizationName || "N/A"}`;
     });
 
     const reportDate = new Date().toISOString().split("T")[0];
@@ -99,7 +105,16 @@ export const ProviderActivities = ({ isLoading, data, providerName }) => {
       ? activity.campaignName === currentFilters.campaign
       : true;
 
-    return isStartDateMatching && isEndDateMatching && isCampaignMatching;
+    const isOrganizationMatching = currentFilters.organization
+      ? activity.organizationName === currentFilters.organization
+      : true;
+
+    return (
+      isStartDateMatching &&
+      isEndDateMatching &&
+      isCampaignMatching &&
+      isOrganizationMatching
+    );
   };
 
   const handleFilterSave = (currentFilters) => {
@@ -130,6 +145,7 @@ export const ProviderActivities = ({ isLoading, data, providerName }) => {
         {activity.price ? `${activity.price}${currencySymbol}` : t("free")}
       </p>,
       <p className="text centered">{activity.campaignName || "N/A"}</p>,
+      <p className="text centered">{activity.organizationName || "N/A"}</p>,
     ];
   });
 
@@ -142,6 +158,17 @@ export const ProviderActivities = ({ isLoading, data, providerName }) => {
     };
   });
 
+  let organizationOptions = Array.from(
+    new Set(
+      data?.filter((x) => x.organizationName).map((x) => x.organizationName)
+    )
+  ).map((x) => {
+    return {
+      value: x,
+      label: x,
+    };
+  });
+
   return (
     <Block classes="provider-activities">
       <BaseTable
@@ -163,17 +190,26 @@ export const ProviderActivities = ({ isLoading, data, providerName }) => {
         handleClose={() => setIsFilterOpen(false)}
         handleSave={handleFilterSave}
         campaignOptions={campaignOptions}
+        organizationOptions={organizationOptions}
         t={t}
       />
     </Block>
   );
 };
 
-const Filters = ({ isOpen, handleClose, handleSave, t, campaignOptions }) => {
+const Filters = ({
+  isOpen,
+  handleClose,
+  handleSave,
+  t,
+  campaignOptions,
+  organizationOptions,
+}) => {
   const initialData = {
     startDate: "",
     endDate: "",
     campaign: "",
+    organization: "",
   };
   const [data, setData] = useState(initialData);
 
@@ -212,6 +248,14 @@ const Filters = ({ isOpen, handleClose, handleSave, t, campaignOptions }) => {
               options={campaignOptions}
             />
           )}
+          {organizationOptions.length > 0 && (
+            <DropdownWithLabel
+              label={t("organization")}
+              selected={data.organization}
+              setSelected={(value) => handleChange("organization", value)}
+              options={organizationOptions}
+            />
+          )}
           <div className="provider-activities__filter-modal__date-container">
             <Input
               type="date"