@eeacms/volto-bise-policy 1.3.11 → 1.3.13

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyResults.test.jsx

@@ -0,0 +1,160 @@
+import './mockJsdom';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import CaseStudyResults from './CaseStudyResults';
+import Pagination, { paginationItems } from './Pagination';
+
+const makeItem = (index) => ({
+  geometry: { type: 'Point', coordinates: [0, 0] },
+  properties: {
+    title: `Case ${index}`,
+    path: `/case-${index}`,
+    current_status: 'ongoing',
+    measures: [],
+  },
+});
+
+const items = Array.from({ length: 12 }, (_, index) => makeItem(index + 1));
+
+const renderResults = (props = {}) =>
+  render(
+    <IntlProvider locale="en">
+      <CaseStudyResults
+        items={items}
+        sortBy="title"
+        onSortChange={jest.fn()}
+        perPage={8}
+        onPerPageChange={jest.fn()}
+        page={1}
+        onPageChange={jest.fn()}
+        {...props}
+      />
+    </IntlProvider>,
+  );
+
+describe('CaseStudyResults', () => {
+  test('reports the total result count, not the page size', () => {
+    renderResults();
+    expect(screen.getByText('Found 12 case studies')).toBeInTheDocument();
+  });
+
+  test('uses the singular form for one result', () => {
+    renderResults({ items: items.slice(0, 1) });
+    expect(screen.getByText('Found 1 case study')).toBeInTheDocument();
+  });
+
+  test('renders only the current page of cards', () => {
+    renderResults();
+    expect(screen.getAllByRole('article')).toHaveLength(8);
+  });
+
+  test('renders the second page', () => {
+    renderResults({ page: 2 });
+    expect(screen.getAllByRole('article')).toHaveLength(4);
+  });
+
+  test('changes sort and page size', () => {
+    const onSortChange = jest.fn();
+    const onPerPageChange = jest.fn();
+    renderResults({ onSortChange, onPerPageChange });
+
+    fireEvent.change(screen.getByLabelText('Sort by'), {
+      target: { value: 'newest' },
+    });
+    fireEvent.change(screen.getByLabelText('per page'), {
+      target: { value: '16' },
+    });
+
+    expect(onSortChange).toHaveBeenCalledWith('newest');
+    expect(onPerPageChange).toHaveBeenCalledWith(16);
+  });
+
+  test('shows an empty state with a reset action', () => {
+    const onResetFilters = jest.fn();
+    renderResults({ items: [], onResetFilters });
+
+    expect(
+      screen.getByText('No case studies match your filters'),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Reset filters' }));
+
+    expect(onResetFilters).toHaveBeenCalled();
+  });
+
+  test('marks the selected card', () => {
+    renderResults({ selectedPath: '/case-3' });
+
+    expect(
+      screen
+        .getAllByRole('article')
+        .filter((card) => card.dataset.selected === 'true'),
+    ).toHaveLength(1);
+  });
+});
+
+describe('Pagination', () => {
+  test('shows every page when the list is short', () => {
+    expect(paginationItems(1, 5)).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  test('windows long lists with ellipsis markers', () => {
+    expect(paginationItems(1, 20)).toEqual([1, 2, 'end-ellipsis', 20]);
+    expect(paginationItems(10, 20)).toEqual([
+      1,
+      'start-ellipsis',
+      9,
+      10,
+      11,
+      'end-ellipsis',
+      20,
+    ]);
+  });
+
+  test('renders the current page and pages through', () => {
+    const onPageChange = jest.fn();
+    render(
+      <IntlProvider locale="en">
+        <Pagination page={2} pageCount={3} onPageChange={onPageChange} />
+      </IntlProvider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Page 2' })).toHaveAttribute(
+      'aria-current',
+      'page',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  test('renders a single, current page with both steps disabled', () => {
+    render(
+      <IntlProvider locale="en">
+        <Pagination page={1} pageCount={1} onPageChange={jest.fn()} />
+      </IntlProvider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Page 1' })).toHaveAttribute(
+      'aria-current',
+      'page',
+    );
+    expect(screen.queryByRole('button', { name: 'Page 2' })).toBeNull();
+    expect(
+      screen.getByRole('button', { name: 'Previous page' }),
+    ).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
+  });
+
+  test('renders nothing when there are no pages', () => {
+    const { container } = render(
+      <IntlProvider locale="en">
+        <Pagination page={1} pageCount={0} onPageChange={jest.fn()} />
+      </IntlProvider>,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/FacetPopover.jsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import cx from 'classnames';
+
+import messages from './messages';
+
+const normalize = (value) => String(value).trim().toLowerCase();
+
+export function filterOptions(options, search) {
+  const needle = normalize(search);
+  if (!needle) return options;
+
+  return options.filter((option) =>
+    normalize(
+      `${option.label} ${option.value} ${option.family || ''}`,
+    ).includes(needle),
+  );
+}
+
+function selectedLabel(groups, filters) {
+  const selected = groups.flatMap((group) =>
+    group.options.filter((option) =>
+      (filters[group.facet] || []).includes(option.value),
+    ),
+  );
+
+  if (!selected.length) return null;
+  if (selected.length === 1) return selected[0].label;
+
+  return null;
+}
+
+/**
+ * Trigger + panel holding checkbox groups, one group per facet. Used both for
+ * the combined measure/typology control and for the single-facet dropdowns.
+ * Ticking a box calls `onToggle`, which applies the change immediately.
+ */
+export default function FacetPopover({
+  id,
+  label,
+  groups,
+  filters = {},
+  onToggle,
+  className,
+}) {
+  const intl = useIntl();
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState('');
+  const wrapperRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const searchRef = React.useRef(null);
+
+  const close = React.useCallback(() => {
+    setOpen(false);
+    setSearch('');
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) return undefined;
+
+    const onDocumentClick = (event) => {
+      if (!wrapperRef.current?.contains(event.target)) close();
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== 'Escape') return;
+      close();
+      triggerRef.current?.focus();
+    };
+
+    document.addEventListener('click', onDocumentClick);
+    document.addEventListener('keydown', onKeyDown);
+    searchRef.current?.focus();
+
+    return () => {
+      document.removeEventListener('click', onDocumentClick);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [close, open]);
+
+  const totalOptions = groups.reduce(
+    (total, group) => total + group.options.length,
+    0,
+  );
+  const selectedCount = groups.reduce(
+    (total, group) => total + (filters[group.facet] || []).length,
+    0,
+  );
+  const singleLabel = selectedLabel(groups, filters);
+  const summary =
+    selectedCount === 1 && singleLabel
+      ? singleLabel
+      : selectedCount > 1
+        ? intl.formatMessage(messages.selectedCount, {
+            label,
+            count: selectedCount,
+          })
+        : label;
+
+  const visibleGroups = groups.map((group) => ({
+    ...group,
+    visible: filterOptions(group.options, search),
+  }));
+  const hasMatches = visibleGroups.some((group) => group.visible.length > 0);
+
+  return (
+    <div className={cx('facet-popover', className)} ref={wrapperRef}>
+      <button
+        type="button"
+        ref={triggerRef}
+        className={cx('facet-trigger', { active: selectedCount > 0 })}
+        aria-expanded={open}
+        aria-controls={`${id}-panel`}
+        onClick={() => setOpen((wasOpen) => !wasOpen)}
+      >
+        <span className="facet-trigger-label" title={summary}>
+          {summary}
+        </span>
+        <i aria-hidden="true" className="icon angle down" />
+      </button>
+
+      {open ? (
+        <div
+          className="facet-panel"
+          id={`${id}-panel`}
+          role="group"
+          aria-label={label}
+        >
+          {totalOptions > 7 ? (
+            <input
+              ref={searchRef}
+              type="search"
+              className="facet-search"
+              value={search}
+              placeholder={intl.formatMessage(messages.searchValues)}
+              aria-label={intl.formatMessage(messages.searchValues)}
+              onChange={(event) => setSearch(event.target.value)}
+            />
+          ) : null}
+
+          {hasMatches ? (
+            visibleGroups.map((group) =>
+              group.visible.length === 0 ? null : (
+                <fieldset className="facet-group" key={group.facet}>
+                  {group.title ? <legend>{group.title}</legend> : null}
+                  <div className="facet-options">
+                    {group.visible.map((option) => (
+                      <label className="facet-option" key={option.value}>
+                        <input
+                          type="checkbox"
+                          value={option.value}
+                          checked={(filters[group.facet] || []).includes(
+                            option.value,
+                          )}
+                          onChange={() => onToggle(group.facet, option.value)}
+                        />
+                        <span className="facet-option-label">
+                          {option.label}
+                        </span>
+                        <span className="facet-option-count">
+                          {' '}
+                          ({option.count})
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                </fieldset>
+              ),
+            )
+          ) : (
+            <p className="facet-empty">
+              {totalOptions === 0
+                ? intl.formatMessage(messages.noOptionsAvailable)
+                : intl.formatMessage(messages.noMatchingOptions)}
+            </p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/manage/Blocks/CaseStudyExplorer/FacetPopover.test.jsx

@@ -0,0 +1,125 @@
+import './mockJsdom';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import FacetPopover, { filterOptions } from './FacetPopover';
+
+const manyOptions = Array.from({ length: 9 }, (_, index) => ({
+  value: `value-${index}`,
+  label: `Option ${index}`,
+  count: index,
+}));
+
+const renderPopover = (props = {}) =>
+  render(
+    <IntlProvider locale="en">
+      <FacetPopover
+        id="test"
+        label="Legislation"
+        groups={[{ facet: 'legislation', options: manyOptions }]}
+        filters={{ legislation: [] }}
+        onToggle={jest.fn()}
+        {...props}
+      />
+    </IntlProvider>,
+  );
+
+describe('FacetPopover', () => {
+  test('shows the facet label when nothing is selected', () => {
+    renderPopover();
+    expect(screen.getByRole('button')).toHaveTextContent('Legislation');
+  });
+
+  test('shows the single selected label', () => {
+    renderPopover({ filters: { legislation: ['value-3'] } });
+    expect(screen.getByRole('button')).toHaveTextContent('Option 3');
+  });
+
+  test('shows a count when several values are selected', () => {
+    renderPopover({ filters: { legislation: ['value-1', 'value-2'] } });
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'Legislation (2 selected)',
+    );
+  });
+
+  test('is closed until the trigger is clicked', () => {
+    renderPopover();
+    expect(screen.queryByRole('group', { name: 'Legislation' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(
+      screen.getByRole('group', { name: 'Legislation' }),
+    ).toBeInTheDocument();
+  });
+
+  test('renders options with their counts and toggles them', () => {
+    const onToggle = jest.fn();
+    renderPopover({ onToggle });
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.getByLabelText(/Option 0\b/)).toBeInTheDocument();
+    expect(
+      screen.getByText('(0)', { selector: '.facet-option-count' }),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText(/Option 4\b/));
+
+    expect(onToggle).toHaveBeenCalledWith('legislation', 'value-4');
+  });
+
+  test('filters options with the search box when there are many', () => {
+    renderPopover();
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.change(screen.getByRole('searchbox'), {
+      target: { value: 'option 7' },
+    });
+
+    expect(screen.getByLabelText(/Option 7\b/)).toBeInTheDocument();
+    expect(screen.queryByLabelText(/Option 1\b/)).toBeNull();
+  });
+
+  test('shows the empty state when nothing matches', () => {
+    renderPopover();
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.change(screen.getByRole('searchbox'), {
+      target: { value: 'zzz' },
+    });
+
+    expect(screen.getByText('No matching values')).toBeInTheDocument();
+  });
+
+  test('hides the search box for short option lists', () => {
+    renderPopover({
+      groups: [{ facet: 'legislation', options: manyOptions.slice(0, 3) }],
+    });
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(screen.queryByRole('searchbox')).toBeNull();
+  });
+
+  test('closes on Escape and on an outside click', () => {
+    renderPopover();
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('group', { name: 'Legislation' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(document.body);
+    expect(screen.queryByRole('group', { name: 'Legislation' })).toBeNull();
+  });
+
+  test('filterOptions matches label, value and family', () => {
+    const options = [
+      { value: 'NRPM_001', label: 'Prevent conversion', family: 'MA' },
+      { value: 'NRPM_020', label: 'Restore forest', family: 'MB' },
+    ];
+
+    expect(filterOptions(options, '')).toHaveLength(2);
+    expect(filterOptions(options, 'ma')).toEqual([options[0]]);
+    expect(filterOptions(options, 'nrpm_020')).toEqual([options[1]]);
+    expect(filterOptions(options, 'forest')).toEqual([options[1]]);
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/FilterPanel.jsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import cx from 'classnames';
+
+import FacetPopover from './FacetPopover';
+import messages from './messages';
+import { STATUS_COLORS } from './utils';
+import { hasActiveFilters } from './filters';
+
+const DROPDOWN_FACETS = [
+  { facet: 'legislation', label: messages.facetLegislation },
+  { facet: 'ecosystem', label: messages.facetEcosystem },
+  { facet: 'bioregion', label: messages.facetBioregion },
+  { facet: 'scale', label: messages.facetScale },
+];
+
+const STATUSES = [
+  { value: 'planned', label: messages.statusPlanned },
+  { value: 'ongoing', label: messages.statusOngoing },
+  { value: 'completed', label: messages.statusCompleted },
+];
+
+function StatusFacet({ facets = [], filters, onToggle }) {
+  const intl = useIntl();
+  const selected = filters.status || [];
+  const counts = facets.reduce((accumulator, option) => {
+    accumulator[option.value] = option.count;
+    return accumulator;
+  }, {});
+
+  return (
+    <div className="facet-status">
+      <span className="facet-status-label" id="cse-status-label">
+        {intl.formatMessage(messages.facetStatus)}
+      </span>
+      <div
+        className="facet-status-buttons"
+        role="group"
+        aria-labelledby="cse-status-label"
+      >
+        {STATUSES.map((status) => {
+          const isSelected = selected.includes(status.value);
+
+          return (
+            <button
+              type="button"
+              key={status.value}
+              className={cx('facet-status-button', { active: isSelected })}
+              aria-pressed={isSelected}
+              onClick={() => onToggle('status', status.value)}
+            >
+              <span
+                className="facet-status-dot"
+                style={{ backgroundColor: STATUS_COLORS[status.value] }}
+                aria-hidden="true"
+              />
+              <span className="facet-status-text">
+                {intl.formatMessage(status.label)}
+              </span>
+              <span className="facet-status-count">
+                ({counts[status.value] || 0})
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function SearchMeasures({ value = '', onChange }) {
+  const intl = useIntl();
+
+  return (
+    <div className="cse-search">
+      <label className="cse-search-label" htmlFor="cse-search-input">
+        {intl.formatMessage(messages.searchMeasuresLabel)}
+      </label>
+      <div className="cse-search-field">
+        <i className="icon ri-search-line" aria-hidden="true" />
+        <input
+          id="cse-search-input"
+          type="search"
+          className="cse-search-input"
+          value={value}
+          placeholder={intl.formatMessage(messages.searchMeasuresPlaceholder)}
+          onChange={(event) => onChange(event.target.value)}
+        />
+        {value ? (
+          <button
+            type="button"
+            className="cse-search-clear"
+            aria-label={intl.formatMessage(messages.clearSearch)}
+            onClick={() => onChange('')}
+          >
+            <i className="icon ri-close-line" aria-hidden="true" />
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Filter panel: a free-text search over the measures implemented and the
+ * typology of measures, four single-facet dropdowns and the current-status
+ * toggles. Every change is applied immediately - `onQueryChange` and
+ * `onToggle` update the filters the map and the list read from - so there is
+ * no Apply button and no staged draft.
+ */
+export default function FilterPanel({
+  facets = {},
+  filters = {},
+  onToggle,
+  onQueryChange,
+  onReset,
+}) {
+  const intl = useIntl();
+  const canReset = hasActiveFilters(filters);
+
+  return (
+    <section className="cse-filter-panel" aria-labelledby="cse-filter-title">
+      <header className="cse-filter-header">
+        <div className="cse-filter-heading">
+          <span className="cse-filter-icon" aria-hidden="true">
+            <i className="icon ri-filter-3-line" />
+          </span>
+          <h2 className="cse-filter-title" id="cse-filter-title">
+            {intl.formatMessage(messages.filterPanelTitle)}
+          </h2>
+          {/* <span className="cse-filter-subtitle">
+            {intl.formatMessage(messages.filterPanelHint)}
+          </span> */}
+        </div>
+        <div className="cse-filter-actions">
+          <button
+            type="button"
+            className="cse-reset-filters"
+            onClick={onReset}
+            disabled={!canReset}
+          >
+            <i className="icon ri-refresh-line" aria-hidden="true" />
+            {intl.formatMessage(messages.resetFilters)}
+          </button>
+        </div>
+      </header>
+
+      <div className="cse-filter-row cse-filter-row-primary">
+        <SearchMeasures value={filters.query} onChange={onQueryChange} />
+      </div>
+
+      <div className="cse-filter-row cse-filter-row-secondary">
+        {DROPDOWN_FACETS.map(({ facet, label }) => (
+          <FacetPopover
+            key={facet}
+            id={facet}
+            label={intl.formatMessage(label)}
+            filters={filters}
+            onToggle={onToggle}
+            groups={[{ facet, options: facets[facet] || [] }]}
+          />
+        ))}
+        <StatusFacet
+          facets={facets.status}
+          filters={filters}
+          onToggle={onToggle}
+        />
+      </div>
+    </section>
+  );
+}