Add gallery hub filter panel

foundation_cms/gallery_hub/models/gallery_page.py

@@ -1,4 +1,5 @@
 from django.db import models
+from django.utils.translation import gettext_lazy as _
 from modelcluster.fields import ParentalKey
 from wagtail.admin.panels import (
     FieldPanel,
@@ -9,6 +10,7 @@
 from wagtail.models import Orderable, Page
 
 from foundation_cms.base.models.abstract_base_page import AbstractBasePage
+from foundation_cms.gallery_hub.models.project_page import ProjectPage
 from foundation_cms.mixins.hero_image import HeroImageMixin
 
 
@@ -57,28 +59,96 @@ class Meta:
 
     template = "patterns/pages/gallery_hub/gallery_page.html"
 
+    @staticmethod
+    def _filter_option(tag):
+        return {
+            "label": tag.name,
+            "value": tag.slug,
+        }
+
+    @staticmethod
+    def _country_filter_option(country):
+        return {
+            "label": country.name,
+            "value": country.code,
+        }
+
     def get_context(self, request):
         context = super().get_context(request)
 
-        featured = [
-            item.project.specific
-            for item in self.featured_projects.select_related("project").all()
-            if item.project_id is not None
-        ]
+        featured_project_ids = tuple(
+            self.featured_projects.filter(project_id__isnull=False).values_list("project_id", flat=True)
+        )
+        featured_by_id = {
+            page.id: page
+            for page in ProjectPage.objects.filter(id__in=featured_project_ids)
+            .select_related("expert")
+            .prefetch_related(
+                "topics",
+                "program_label",
+            )
+        }
+        featured = [featured_by_id[project_id] for project_id in featured_project_ids if project_id in featured_by_id]
 
         topics = sorted(
-            {tag.name for page in featured for tag in page.topics.all()},
+            {tag.slug: tag for page in featured for tag in page.topics.all()}.values(),
+            key=lambda tag: tag.name,
         )
         program_labels = sorted(
-            {label.name for page in featured for label in page.program_label.all()},
+            {label.slug: label for page in featured for label in page.program_label.all()}.values(),
+            key=lambda label: label.name,
         )
         program_years = sorted(
             {page.program_year for page in featured if page.program_year},
+            reverse=True,
+        )
+        countries = sorted(
+            {
+                page.expert.location.code: page.expert.location
+                for page in featured
+                if page.expert and page.expert.location
+            }.values(),
+            key=lambda country: country.name,
         )
 
         context["featured_projects"] = featured
-        context["filter_topics"] = topics
-        context["filter_program_labels"] = program_labels
-        context["filter_program_years"] = program_years
+        context["filter_categories"] = (
+            {
+                "key": "topic",
+                "label": _("Topic"),
+                "options": tuple(self._filter_option(tag) for tag in topics),
+                "expanded": True,
+            },
+            {
+                "key": "program",
+                "label": _("Program"),
+                "options": tuple(self._filter_option(label) for label in program_labels),
+                "expanded": False,
+            },
+            {
+                "key": "year",
+                "label": _("Year"),
+                "options": tuple({"label": str(year), "value": str(year)} for year in program_years),
+                "expanded": False,
+            },
+            {
+                "key": "country",
+                "label": _("Country"),
+                "options": tuple(self._country_filter_option(country) for country in countries),
+                "expanded": False,
+            },
+        )
+        context["project_filter_data"] = [
+            {
+                "id": str(page.id),
+                "filters": {
+                    "topic": tuple(tag.slug for tag in page.topics.all()),
+                    "program": tuple(label.slug for label in page.program_label.all()),
+                    "year": (str(page.program_year),) if page.program_year else (),
+                    "country": (page.expert.location.code,) if page.expert and page.expert.location else (),
+                },
+            }
+            for page in featured
+        ]
 
         return context

foundation_cms/static/js/components/gallery_hub/config.js

@@ -29,6 +29,13 @@ export const GALLERY_HUB_SELECTORS = {
   projectListItemShell: "[data-gallery-hub-project-list-item-shell]",
   projectListSlot: "[data-gallery-hub-project-list-slot]",
   filterSlot: "[data-gallery-hub-filter-slot]",
+  filterPanel: "[data-gallery-hub-filter-panel]",
+  filterCategory: "[data-gallery-hub-filter-category]",
+  filterCategoryToggle: "[data-gallery-hub-filter-category-toggle]",
+  filterOptions: "[data-gallery-hub-filter-options]",
+  filterChip: "[data-gallery-hub-filter-chip]",
+  filterApply: "[data-gallery-hub-filter-apply]",
+  filterReset: "[data-gallery-hub-filter-reset]",
 };
 
 /**
@@ -81,6 +88,16 @@ export const GALLERY_HUB_VIEW_MODES = {
   project: "project",
 };
 
+/**
+ * Gallery Hub modal ids used by template data attributes and JS state.
+ *
+ * @type {{projectList: string, filter: string}}
+ */
+export const GALLERY_HUB_MODAL_IDS = {
+  projectList: "project-list",
+  filter: "filter",
+};
+
 /**
  * CSS custom property updated with the available viewport height.
  *