[#2111] set-up for filter web-components

Author: jiromaykin

CHANGELOG.rst

@@ -22,6 +22,7 @@ Nieuwe features
   in Docker/Kubernetes.
 * [:gh:`2107`]: Productie logs worden weggeschreven als JSON voor gebruik in log analyse
   tools.
+* [:gh:`2111`]: Filter-drowdowns and mobiele filters in pop-up scherm toegeveogd ten behoeve van de ‘Mijn Afval’ app.
 * [:gh:`2113`]: Diagram (chart.js) toegevoegd ten behoeve van de ‘Mijn Afval’ app.
 * [:gh:`2119`, :gh:`2182`, :pr:`2151`]: API-client en configuratie voor 'Mijn Afval' aangemaakt.
 

package-lock.json

@@ -120,6 +120,21 @@ class _BAGObjectData(TypedDict):
     containers: list[_AfvalContainerData]
 
 
+class _FilterChoice(TypedDict):
+    """A single choice in a filter group."""
+
+    value: str
+    label: str
+
+
+class _FilterGroup(TypedDict):
+    """A group of filter choices."""
+
+    name: str
+    label: str
+    choices: list[_FilterChoice]
+
+
 def _format_container_for_table(
     ledigingen: list[_LedigingData],
     totaal_gewicht: str,
@@ -260,6 +275,89 @@ def _format_afval_profiel(profiel: AfvalProfiel) -> list[_BAGObjectData]:
     return result
 
 
+def _extract_filter_options(afval_data: list[_BAGObjectData]) -> list[_FilterGroup]:
+    """
+    Extract unique filter options from the formatted afval data.
+
+    Args:
+        afval_data: List of formatted BAG object data
+
+    Returns:
+        List of filter groups with their available choices
+    """
+    addresses: dict[str, str] = {}  # value: label
+    container_types: dict[str, str] = {}  # value: label
+    periods: dict[str, str] = {}  # year: year (as label)
+
+    # Extract unique values from the data
+    for bag_obj in afval_data:
+        # Extract address
+        if bag_obj["object_address"]:
+            addresses[bag_obj["object_address"]] = bag_obj["object_address"]
+
+        # Extract container types and periods
+        for container in bag_obj["containers"]:
+            # Container type
+            container_type = container["type"]
+            if container_type not in container_types:
+                container_types[container_type] = _get_container_type_label(
+                    container_type
+                )
+
+            # Extract years from ledigingen dates
+            for lediging in container["ledigingen"]:
+                # Date format is "dd-mm-yyyy", extract year
+                date_parts = lediging["tijdstip_datum"].split("-")
+                if len(date_parts) == 3:
+                    year = date_parts[2]
+                    if year not in periods:
+                        periods[year] = _("Jaar {year}").format(year=year)
+
+    # Build filter groups
+    filter_groups: list[_FilterGroup] = []
+
+    # Adres filter
+    if addresses:
+        filter_groups.append(
+            {
+                "name": "adres",
+                "label": _("Adres"),
+                "choices": [
+                    {"value": value, "label": label}
+                    for value, label in sorted(addresses.items())
+                ],
+            }
+        )
+
+    # Type container filter
+    if container_types:
+        filter_groups.append(
+            {
+                "name": "type-container",
+                "label": _("Type container"),
+                "choices": [
+                    {"value": value, "label": label}
+                    for value, label in sorted(container_types.items())
+                ],
+            }
+        )
+
+    # Periode filter (sorted by year descending)
+    if periods:
+        filter_groups.append(
+            {
+                "name": "periode",
+                "label": _("Periode"),
+                "choices": [
+                    {"value": value, "label": label}
+                    for value, label in sorted(periods.items(), reverse=True)
+                ],
+            }
+        )
+
+    return filter_groups
+
+
 class AfvalProfielView(
     LoginRequiredMixin, BaseBreadcrumbMixin, AppConfigMixin, TemplateView
 ):
@@ -305,7 +403,7 @@ def get_context_data(self, **kwargs):
         afval_config = MijnAfvalConfig.get_solo()
 
         if not (openafval_service := afval_config.openafval_service):
-            messages.error(_("This module is not yet configured"))
+            messages.error(self.request, _("This module is not yet configured"))
             return context
 
         api_client = build_zgw_client(
@@ -320,11 +418,19 @@ def get_context_data(self, **kwargs):
             messages.error(
                 self.request,
                 _(
-                    "We kunnen uw afvalgegevens momenteel niet ophalen. "
-                    "Probeer het later opnieuw."
+                    "We kunnen uw afvalgegevens momenteel niet ophalen. Probeer het later opnieuw."
                 ),
             )
             afval_data = []
 
-        context["afval_data"] = afval_data
+        # Extract filter options from the formatted data for the frontend filters
+        filter_groups = _extract_filter_options(afval_data)
+
+        context.update(
+            {
+                "afval_data": afval_data,
+                "filter_groups": filter_groups,
+            }
+        )
+
         return context

src/open_inwoner/mijn_afval/views.py

@@ -0,0 +1,45 @@
+// FilterTag - Active filter pills/tags
+
+.oip-filter-tags {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-medium, 0.75rem);
+  flex-wrap: wrap;
+  margin-bottom: var(--spacing-large, 1rem);
+  margin-top: var(--spacing-medium, 0.75rem);
+}
+
+.oip-filter-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-small, 0.5rem);
+  padding: 12px 16px;
+  border: 1px solid var(--color-primary);
+  border-radius: 3px;
+  background-color: white;
+  color: var(--font-color-body);
+  font-size: var(--font-size-body, 1rem);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: var(--color-gray-lightest);
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+}
+
+.oip-filter-tag__label {
+  font-weight: 500;
+}
+
+.oip-filter-tag__close {
+  font-size: var(--font-size-body-large, 1.0625rem);
+  font-weight: bold;
+  line-height: 1;
+  cursor: pointer;
+}