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

Author: jiromaykin

src/open_inwoner/mijn_afval/views.py

@@ -79,6 +79,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,
@@ -194,6 +209,89 @@ def _format_bag_objects(bag_objects: list[BAGObject]) -> 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 AfvalView(LoginRequiredMixin, BaseBreadcrumbMixin, AppConfigMixin, TemplateView):
     template_name = "pages/mijn_afval/index.html"
 
@@ -218,14 +316,19 @@ def get_context_data(self, **kwargs):
 
         client = AfvalApiClient(base_url="")
         data = client.fetch_bag_objects_for_bsn(bsn=self.request.user.bsn)
+        formatted_data = _format_bag_objects(data)
+
+        # Extract filter options from the formatted data
+        filter_groups = _extract_filter_options(formatted_data)
 
         # check for apphook config in case it is manually deleted (defensive)
         page_heading = self.config.page_heading if self.config else _("Mijn Afval")
         page_description = self.config.page_description if self.config else ""
 
         context.update(
             {
-                "afval_data": _format_bag_objects(data),
+                "afval_data": formatted_data,
+                "filter_groups": filter_groups,
                 "page_heading": page_heading,
                 "page_description": page_description,
             }

src/open_inwoner/react/components/FilterButton/FilterButton.scss

@@ -0,0 +1,54 @@
+.filter-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #0066cc;
+    outline-offset: 2px;
+  }
+
+  &--active {
+    position: relative;
+  }
+}
+
+.filter-button__content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filter-button__label {
+  white-space: nowrap;
+}
+
+.filter-button__indicator {
+  display: flex;
+  align-items: center;
+  margin-left: 0.5rem;
+  color: #00a63d;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

src/open_inwoner/react/components/FilterButton/FilterButton.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import { AnyComponent as AC } from 'preact';
+import { useRef } from 'preact/hooks';
+import { MaterialIcon } from '../MaterialIcon';
+import './FilterButton.scss';
+
+export interface IFilterButtonProps {
+  label?: string;
+  currentUrl?: string;
+  ariaLabel?: string;
+}
+
+const FilterButton: AC<IFilterButtonProps> = ({
+  label = 'Filters',
+  currentUrl = '',
+  ariaLabel = 'Filters',
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Check if there are active filters by parsing the URL
+  const hasActiveFilters =
+    currentUrl &&
+    new URLSearchParams(new URL(currentUrl, window.location.origin).search)
+      .size > 0;
+
+  const handleClick = () => {
+    // Try to find and open the modal directly (for Storybook/simple cases)
+    const modal = document.querySelector('oip-filter-modal') as any;
+    if (modal && typeof modal.openModal === 'function') {
+      modal.openModal();
+    }
+
+    // Also dispatch an event for other listeners (for complex page setups)
+    const event = new CustomEvent('open-filter-modal', { bubbles: true });
+    buttonRef.current?.dispatchEvent(event);
+  };
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      class={clsx('filter-button', {
+        'filter-button--active': hasActiveFilters,
+      })}
+      onClick={handleClick}
+      aria-label={ariaLabel}
+      title={label}
+    >
+      <div class="filter-button__content">
+        <MaterialIcon name="filter_alt" />
+        <span class="filter-button__label">{label}</span>
+      </div>
+
+      {hasActiveFilters && (
+        <div class="filter-button__indicator">
+          <MaterialIcon name="check" />
+          <span class="sr-only">Gekozen filters</span>
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default FilterButton;

src/open_inwoner/react/components/FilterButton/constants.ts

@@ -0,0 +1,12 @@
+import { WebComponentDefinition } from '@react/lib/web-component';
+import type { IFilterButtonProps } from './FilterButton';
+
+export const FILTER_BUTTON_DEFINITION: WebComponentDefinition<
+  'oip-filter-button',
+  IFilterButtonProps
+> = {
+  tagName: 'oip-filter-button',
+  propNames: ['label', 'currentUrl', 'ariaLabel'],
+  options: { shadow: false },
+  importer: () => import('./FilterButton'),
+};

src/open_inwoner/react/components/FilterButton/index.ts

@@ -0,0 +1,8 @@
+// Preact Component
+export { default as FilterButton } from './FilterButton';
+
+// Types
+export type { IFilterButtonProps } from './FilterButton';
+
+// Constants
+export * from './constants';