Merge pull request #655 from CodeForAfrica/chore/add-collection-filter

Add column for collection to tools, organisation and contributors.
CodeForAfrica · Dec 5, 2023 · 128ae9c · 128ae9c
2 parents a0f81d9 + 06da9f6
commit 128ae9c
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 14 deletions.
diff --git a/apps/charterafrica/src/components/EcosystemList/EcosystemFilter.js b/apps/charterafrica/src/components/EcosystemList/EcosystemFilter.js
@@ -8,7 +8,8 @@ import { ControlledSearchInput } from "@/charterafrica/components/SearchInput";
 
 const EcosystemFilter = React.forwardRef(function EcosystemFilter(props, ref) {
   const { onChange, searchPlaceholder, values, filterOptions = [] } = props;
-
+  // Search input field spans 3 columns, so divide 9 by the filter options
+  const spans = Math.floor(9 / filterOptions.length);
   return (
     <Box sx={{ pb: 3.75 }} bgcolor="common.white" ref={ref}>
       <Grid
@@ -17,8 +18,9 @@ const EcosystemFilter = React.forwardRef(function EcosystemFilter(props, ref) {
         justifyContent="space-between"
         columnGap={1.25}
         rowGap={1.25}
+        sx={{ flexWrap: { lg: "nowrap" } }}
       >
-        <Grid item xs={12} lg={2}>
+        <Grid item xs={12} lg={3}>
           <ControlledSearchInput
             value={values.search}
             onChange={(e) => onChange({ search: e.target.value })}
@@ -31,15 +33,15 @@ const EcosystemFilter = React.forwardRef(function EcosystemFilter(props, ref) {
           />
         </Grid>
         {filterOptions.map((option) => {
-          if (option.type === "select" && option.options.length) {
+          if (option?.type === "select" && option.options.length) {
             const value = values[option.name] || "";
             const optValue = option.options.find((opt) => value === opt.value);
 
             const onItemChange = (_, v) => {
               onChange({ [option.name]: v });
             };
             return (
-              <Grid key={option.name} item xs={12} lg={3}>
+              <Grid key={option.name} item xs={12} lg={spans}>
                 <ComboBox
                   size="small"
                   options={option.options}

diff --git a/apps/charterafrica/src/components/Tool/Tool.js b/apps/charterafrica/src/components/Tool/Tool.js
@@ -34,6 +34,7 @@ const Tool = React.forwardRef(function Tool(props, ref) {
     tools,
     toolsTitle,
     externalLink,
+    classification,
   } = props;
   return (
     <Box bgcolor="common.white" ref={ref}>
@@ -145,7 +146,7 @@ const Tool = React.forwardRef(function Tool(props, ref) {
                 Collection
               </RichTypography>
               <RichTypography sx={{ mt: 1 }} variant="p3">
-                Tool
+                {classification}
               </RichTypography>
             </Box>
             <Contributors

diff --git a/apps/charterafrica/src/components/Tool/Tool.snap.js b/apps/charterafrica/src/components/Tool/Tool.snap.js
@@ -209,11 +209,6 @@ exports[`<Tool /> renders unchanged 1`] = `
             >
               Collection
             </div>
-            <div
-              class="MuiTypography-root MuiTypography-p3 css-1s3vopo-MuiTypography-root"
-            >
-              Tool
-            </div>
           </div>
           <div
             class="MuiBox-root css-46b038"

diff --git a/apps/charterafrica/src/lib/data/common/processPageContributors.js b/apps/charterafrica/src/lib/data/common/processPageContributors.js
@@ -8,7 +8,7 @@ import formatDateTime from "@/charterafrica/utils/formatDate";
 import labelsPerLocale from "@/charterafrica/utils/translationConstants";
 
 const queryBuilder = (query) => {
-  const { search, location } = query;
+  const { search, location, classification } = query;
   const fields = ["description", "fullName", "location", "externalId"];
   const where = {};
   if (search) {
@@ -17,6 +17,9 @@ const queryBuilder = (query) => {
   if (location) {
     where.location = { equals: location };
   }
+  if (classification) {
+    where.classification = { equals: classification };
+  }
   return where;
 };
 
@@ -128,6 +131,12 @@ async function processPageContributors(page, api, context) {
   }
   const { filters, title } = blocks[foundIndex];
   const filterLabels = labelsPerLocale[locale];
+  const collections = [
+    ...new Set(results.map((item) => item.classification)),
+  ].map((value) => ({
+    value: value ?? null,
+    label: value ?? null,
+  }));
   const filterOptions =
     filters?.map((filter) => {
       if (filter === "sort") {
@@ -154,6 +163,15 @@ async function processPageContributors(page, api, context) {
           })),
         };
       }
+      if (filter === "classification") {
+        return {
+          type: "select",
+          name: "classification",
+          label: filterLabels.collection,
+          multiple: true,
+          options: collections,
+        };
+      }
       return null;
     }) ?? [];
   const people = {

diff --git a/apps/charterafrica/src/lib/data/common/processPageOrganisations.js b/apps/charterafrica/src/lib/data/common/processPageOrganisations.js
@@ -5,7 +5,7 @@ import formatDateTime from "@/charterafrica/utils/formatDate";
 import labelsPerLocale from "@/charterafrica/utils/translationConstants";
 
 const queryBuilder = (query) => {
-  const { search, location } = query;
+  const { search, location, classification } = query;
   const fields = ["description", "location", "name", "externalId", "slug"];
   const where = {};
   if (search) {
@@ -14,6 +14,9 @@ const queryBuilder = (query) => {
   if (location) {
     where.location = { equals: location };
   }
+  if (classification) {
+    where.classification = { equals: classification };
+  }
   return where;
 };
 
@@ -117,6 +120,12 @@ async function processPageOrganisations(page, api, context) {
   }
   const { filters, title } = blocks[foundIndex];
   const filterLabels = labelsPerLocale[locale];
+  const collections = [
+    ...new Set(results.map((item) => item.classification)),
+  ].map((value) => ({
+    value: value ?? null,
+    label: value ?? null,
+  }));
   const filterOptions =
     filters?.map((filter) => {
       if (filter === "sort") {
@@ -143,6 +152,15 @@ async function processPageOrganisations(page, api, context) {
           })),
         };
       }
+      if (filter === "classification") {
+        return {
+          type: "select",
+          name: "classification",
+          label: filterLabels.collection,
+          multiple: true,
+          options: collections,
+        };
+      }
       return null;
     }) ?? [];
 

diff --git a/apps/charterafrica/src/lib/data/common/processPageTools.js b/apps/charterafrica/src/lib/data/common/processPageTools.js
@@ -8,7 +8,7 @@ import formatDateTime from "@/charterafrica/utils/formatDate";
 import labelsPerLocale from "@/charterafrica/utils/translationConstants";
 
 const queryBuilder = (query) => {
-  const { search, theme, homeCountry } = query;
+  const { search, theme, homeCountry, classification } = query;
   const where = {};
   if (search) {
     const fields = [
@@ -19,6 +19,7 @@ const queryBuilder = (query) => {
       "id",
       "slug",
       "homeCountry",
+      "classification",
     ];
     where.or = fields.map((field) => ({ [field]: { like: search } }));
   }
@@ -30,6 +31,9 @@ const queryBuilder = (query) => {
   if (theme) {
     where.theme = { equals: theme };
   }
+  if (classification) {
+    where.classification = { equals: classification };
+  }
   return where;
 };
 
@@ -104,6 +108,7 @@ async function processPageSingleTool(page, api, context) {
         commitText: filterLabels.lastCommit,
         forksText: filterLabels.forks,
         starsText: filterLabels.stars,
+        collection: tool.classification,
         externalLink: {
           href: tool.docLink ?? null,
         },
@@ -159,6 +164,12 @@ async function processPageTools(page, api, context) {
     value,
     label: value,
   }));
+  const collections = [...new Set(docs.map((item) => item.classification))].map(
+    (value) => ({
+      value: value ?? null,
+      label: value ?? null,
+    }),
+  );
   const filterLabels = labelsPerLocale[locale];
   const filterOptions = filters.map((filter) => {
     if (filter === "sort") {
@@ -197,6 +208,15 @@ async function processPageTools(page, api, context) {
         options: themes,
       };
     }
+    if (filter === "classification") {
+      return {
+        type: "select",
+        name: "classification",
+        label: filterLabels.collection,
+        multiple: true,
+        options: collections,
+      };
+    }
     return null;
   });
   const tool = {
@@ -212,7 +232,7 @@ async function processPageTools(page, api, context) {
 
   const { slugs, ...queryParams } = context.query;
   let swrKey = `/api/v1/resources/ecosystem`;
-  const qs = queryString({ ...queryParams, collection: "tools" });
+  const qs = queryString({ ...queryParams });
   if (qs) {
     swrKey = `${swrKey}?${qs}`;
   }

diff --git a/apps/charterafrica/src/lib/ecosystem/airtable/processData.js b/apps/charterafrica/src/lib/ecosystem/airtable/processData.js
@@ -124,6 +124,7 @@ export function processTool(item, config, { partnersData }) {
     link: getValue(data, toolTableColumns.url),
     operatingCountries,
     contributors: getValue(data, toolTableColumns.contributors),
+    classification: getValue(data, toolTableColumns.classification),
     source,
     supporters,
     partners,
@@ -168,6 +169,7 @@ export function processContributor(item, config) {
   );
   return {
     airtableId: data.id,
+    classification: getValue(data, contributorTableColumns.classification),
     externalId,
     repoLink,
     socialMedia,
@@ -231,6 +233,7 @@ export function processOrganisation(item, config, { partnersData }) {
     externalId,
     type: getValue(data, organisationTableColumns.type)?.replace(/&/g, "and"),
     repoLink: getValue(data, organisationTableColumns.source.url),
+    classification: getValue(data, organisationTableColumns.classification),
     supporters,
     partners,
     socialMedia,

diff --git a/apps/charterafrica/src/payload/blocks/Contributors.js b/apps/charterafrica/src/payload/blocks/Contributors.js
@@ -35,6 +35,14 @@ const Contributors = {
             fr: "Emplacement",
           },
         },
+        {
+          value: "classification",
+          label: {
+            en: "Collection",
+            fr: "Collection",
+            pt: "Coleção",
+          },
+        },
       ],
     },
     {

diff --git a/apps/charterafrica/src/payload/blocks/Organisations.js b/apps/charterafrica/src/payload/blocks/Organisations.js
@@ -35,6 +35,14 @@ const Contributors = {
             fr: "Emplacement",
           },
         },
+        {
+          value: "classification",
+          label: {
+            en: "Collection",
+            fr: "Collection",
+            pt: "Coleção",
+          },
+        },
       ],
     },
     {

diff --git a/apps/charterafrica/src/payload/blocks/Tools.js b/apps/charterafrica/src/payload/blocks/Tools.js
@@ -51,6 +51,14 @@ const Tools = {
             fr: "Emplacement",
           },
         },
+        {
+          value: "classification",
+          label: {
+            en: "Collection",
+            fr: "Collection",
+            pt: "Coleção",
+          },
+        },
       ],
     },
   ],

diff --git a/apps/charterafrica/src/payload/collections/Contributors.js b/apps/charterafrica/src/payload/collections/Contributors.js
@@ -48,6 +48,19 @@ const Contributors = {
         readOnly: true,
       },
     },
+    {
+      name: "classification",
+      type: "text",
+      admin: {
+        readOnly: true,
+      },
+      localized: true,
+      label: {
+        en: "Collection",
+        fr: "Collection",
+        pt: "Coleção",
+      },
+    },
     {
       name: "description",
       type: "textarea",

diff --git a/apps/charterafrica/src/payload/collections/Organisations.js b/apps/charterafrica/src/payload/collections/Organisations.js
@@ -46,6 +46,15 @@ const Organisations = {
         readOnly: true,
       },
     },
+    {
+      name: "classification",
+      type: "text",
+      admin: {
+        readOnly: true,
+      },
+      localized: true,
+      label: { en: "Collection", fr: "Collection", pt: "Collection" },
+    },
     // Can either be Non-Profit, For- Profit, Donor/ Investor, Charter Grantee
     {
       name: "type",

diff --git a/apps/charterafrica/src/payload/collections/Tools.js b/apps/charterafrica/src/payload/collections/Tools.js
@@ -113,6 +113,19 @@ const Tools = {
       localized: true,
       label: { en: "Theme", fr: "Thème", pt: "Tema" },
     },
+    {
+      name: "classification",
+      type: "text",
+      admin: {
+        readOnly: true,
+      },
+      localized: true,
+      label: {
+        en: "Collection",
+        fr: "Collection",
+        pt: "Coleção",
+      },
+    },
     {
       name: "techSkills",
       type: "array",