@eeacms/volto-bise-policy 1.2.32 → 1.2.34

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

@@ -0,0 +1,330 @@
+import React from 'react';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
+
+import {
+  centerAndResetMapZoom,
+  scrollToElement,
+  zoomMapToFeatures,
+} from './utils';
+
+const showPageNr = (pageNr, currentPage, numberOfPages) => {
+  // show first 5 pages
+  if (currentPage < 4 && pageNr <= 5) {
+    return true;
+  }
+
+  // show last 5 pages
+  if (numberOfPages - currentPage < 4 && numberOfPages - pageNr < 5) {
+    return true;
+  }
+
+  if (
+    currentPage >= 4 &&
+    numberOfPages - currentPage >= 4 &&
+    pageNr >= currentPage - 2 &&
+    pageNr <= currentPage + 2
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+function CaseStudyList(props) {
+  const { selectedCase, onSelectedCase, pointsSource, map, searchInput, ol } =
+    props;
+  const reSearch = new RegExp(`\\b(${searchInput})\\b`, 'gi');
+  const [currentPage, setCurrentPage] = React.useState(1);
+
+  const features = pointsSource
+    .getFeatures(selectedCase)
+    .sort((item1, item2) =>
+      item1.values_.title.localeCompare(item2.values_.title),
+    );
+  const numberOfPages = Math.ceil(features.length / 10);
+
+  const displayFatures = features.slice(
+    10 * (currentPage - 1),
+    10 * currentPage,
+  );
+
+  return displayFatures.length === 0 ? (
+    <>
+      <h3 style={{ margin: 'calc(2rem - 0.1em) 0 1rem' }}>
+        We could not find any results for your search criteria
+      </h3>
+      <ul>
+        <li>check the selected filters</li>
+      </ul>
+    </>
+  ) : (
+    <>
+      <div className="listing">
+        {selectedCase ? (
+          <div
+            className="content-box u-item listing-item result-item"
+            style={{
+              marginTop: '2em',
+              padding: 'em',
+              // border: '3px solid #f2f2f2',
+              // borderTop: '1em solid #f2f2f2',
+              paddingTop: 0,
+              backgroundColor: '#f2f2f2',
+              border: 'none',
+            }}
+          >
+            <div className="slot-top">
+              <div className="listing-body">
+                <h3 className="listing-header">
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={selectedCase.path}
+                    title={selectedCase.title}
+                    datatest-id="selected-case"
+                  >
+                    {selectedCase.title}
+                  </a>
+                </h3>
+                <p className="listing-description">
+                  {selectedCase.description}
+                </p>
+                <div className="slot-bottom">
+                  <div className="result-bottom">
+                    {/* <div className="result-info">
+                      <span className="result-info-title">Typology of measures:</span>
+                      <span>
+                        {selectedCase.typology_of_measures
+                          ? selectedCase.typology_of_measures.join(', ')
+                          : ''}
+                      </span>
+                    </div> */}
+                    {/* <div className="result-info">
+                      <span className="result-info-title">
+                        Measures implemented:
+                      </span>
+                      {selectedCase.measures_implemented.map((measure, index) => {
+                        return (
+                          <span>
+                            <a
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              href={measure.path}
+                            >
+                              {measure.title}
+                              {index !==
+                              selectedCase.measures_implemented.length - 1
+                                ? ', '
+                                : ''}
+                            </a>
+                          </span>
+                        );
+                      })}
+                    </div> */}
+                    <div
+                      className="result-info show-on-map"
+                      tabIndex="0"
+                      role="button"
+                      onKeyDown={() => {}}
+                      onClick={() => {
+                        // scroll to the map
+                        scrollToElement('search-input');
+                        // reset map zoom
+                        onSelectedCase(null);
+                        centerAndResetMapZoom({ map, ol });
+                        map.getInteractions().array_[9].getFeatures().clear();
+                      }}
+                    >
+                      <span
+                        className="result-info-title"
+                        data-testid="reset-map"
+                      >
+                        Reset map
+                      </span>
+                      <i className="icon ri-map-2-line"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          displayFatures.map((item, index) => {
+            return (
+              <div className="u-item listing-item result-item" key={index}>
+                <div className="slot-top">
+                  <div className="listing-body">
+                    <h3 className="listing-header">
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={item.values_.path}
+                        title={item.values_.title}
+                      >
+                        {item.values_.title}
+                      </a>
+                    </h3>
+                    <p
+                      className="listing-description"
+                      dangerouslySetInnerHTML={{
+                        __html: searchInput
+                          ? item.values_.description.replaceAll(
+                              reSearch,
+                              '<b>$1</b>',
+                            )
+                          : item.values_.description,
+                      }}
+                    ></p>
+                    <div className="slot-bottom">
+                      <div className="result-bottom">
+                        {/* <div className="result-info">
+                          <span className="result-info-title">Typology of measures:</span>
+                          <span>{item.values_.typology_of_measures.join(', ')}</span>
+                        </div> */}
+                        {/* <div className="result-info">
+                          <span className="result-info-title">
+                            Measures implemented:
+                          </span>
+
+                          {item.values_.measures_implemented.map(
+                            (measure, index) => {
+                              return (
+                                <span key={index}>
+                                  <a
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    href={measure.path}
+                                  >
+                                    {measure.title}
+                                    {index !==
+                                    item.values_.measures_implemented.length - 1
+                                      ? ', '
+                                      : ''}
+                                  </a>
+                                </span>
+                              );
+                            },
+                          )}
+                        </div> */}
+                        <div
+                          className="result-info show-on-map"
+                          tabIndex="0"
+                          role="button"
+                          onKeyDown={() => {}}
+                          onClick={() => {
+                            map
+                              .getInteractions()
+                              .array_[9].getFeatures()
+                              .clear();
+                            // scroll to the map
+                            scrollToElement('ol-map-container');
+
+                            zoomMapToFeatures({
+                              map,
+                              features: [item],
+                              threshold: 5000,
+                              ol,
+                            });
+                            onSelectedCase(item.values_);
+
+                            setTimeout(() => {
+                              const coords =
+                                item.values_.geometry.flatCoordinates;
+                              const pixel = map.getPixelFromCoordinate(coords);
+                              map
+                                .getInteractions()
+                                .array_[9].getFeatures()
+                                .push(map.getFeaturesAtPixel(pixel)[0]);
+                            }, 1100);
+                          }}
+                        >
+                          <span className="result-info-title">Show on map</span>
+                          <i className="icon ri-road-map-line"></i>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+      {!selectedCase ? (
+        <div className="search-body-footer">
+          <div className="ui centered grid">
+            <div className="center aligned column">
+              <div className="prev-next-paging">
+                <div className="paging-wrapper">
+                  {currentPage !== 1 ? (
+                    <button
+                      className="ui button prev double-angle"
+                      onClick={() => {
+                        setCurrentPage(1);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}
+                  {currentPage !== 1 ? (
+                    <button
+                      className="ui button prev single-angle"
+                      onClick={() => {
+                        setCurrentPage(currentPage - 1);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}
+                  {Array.from(Array(numberOfPages).keys()).map((index) => {
+                    const pageNr = index + 1;
+                    return showPageNr(pageNr, currentPage, numberOfPages) ? (
+                      <button
+                        className={
+                          'ui button pagination-item' +
+                          (currentPage === pageNr ? ' active' : '')
+                        }
+                        onClick={() => {
+                          setCurrentPage(pageNr);
+                        }}
+                        key={index}
+                      >
+                        {pageNr}
+                      </button>
+                    ) : (
+                      ''
+                    );
+                  })}
+                  {currentPage !== numberOfPages ? (
+                    <button
+                      className="ui button next single-angle"
+                      onClick={() => {
+                        setCurrentPage(currentPage + 1);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}
+                  {currentPage !== numberOfPages ? (
+                    <button
+                      className="ui button next double-angle"
+                      onClick={() => {
+                        setCurrentPage(numberOfPages);
+                      }}
+                    ></button>
+                  ) : (
+                    ''
+                  )}{' '}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        ''
+      )}
+    </>
+  );
+}
+
+export default withOpenLayers(CaseStudyList);

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CaseStudyList from './CaseStudyListing';
+import {
+  centerAndResetMapZoom,
+  scrollToElement,
+  zoomMapToFeatures,
+} from './utils';
+
+jest.mock('@eeacms/volto-openlayers-map', () => ({
+  withOpenLayers: (Component) => Component,
+}));
+
+jest.mock('./utils', () => ({
+  centerAndResetMapZoom: jest.fn(),
+  scrollToElement: jest.fn(),
+  zoomMapToFeatures: jest.fn(),
+}));
+
+const mockMap = {
+  getInteractions: () => ({
+    array_: [
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {
+        getFeatures: () => ({
+          clear: jest.fn(),
+          push: jest.fn(),
+        }),
+      },
+    ],
+  }),
+  getPixelFromCoordinate: jest.fn(() => [100, 200]),
+  getFeaturesAtPixel: jest.fn(() => ['mockFeature']),
+};
+
+const mockPointsSource = {
+  getFeatures: () => [
+    {
+      values_: {
+        title: 'Feature 1',
+        path: '/feature1',
+        description: 'Description 1',
+        typology_of_measures: ['SectorA'],
+        measures_implemented: [{ title: 'M1', path: '/m1' }],
+        geometry: { flatCoordinates: [0, 0] },
+      },
+    },
+  ],
+};
+
+const selectedCase = {
+  title: 'Selected Title',
+  path: '/selected',
+  description: 'Selected description',
+  typology_of_measures: ['S1', 'S2'],
+  measures_implemented: [{ title: 'M1', path: '/m1' }],
+};
+
+describe('CaseStudyList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders empty state when no features', () => {
+    const emptyPointsSource = { getFeatures: () => [] };
+    const { getByText } = render(
+      <CaseStudyList
+        selectedCase={null}
+        onSelectedCase={jest.fn()}
+        pointsSource={emptyPointsSource}
+        searchInput=""
+        ol={{}}
+      />,
+    );
+
+    expect(
+      getByText('We could not find any results for your search criteria'),
+    ).toBeInTheDocument();
+    expect(getByText('check the selected filters')).toBeInTheDocument();
+  });
+
+  it('renders selectedCase details', () => {
+    const { getByText } = render(
+      <CaseStudyList
+        selectedCase={selectedCase}
+        onSelectedCase={jest.fn()}
+        pointsSource={mockPointsSource}
+        map={mockMap}
+        searchInput=""
+        ol={{}}
+      />,
+    );
+
+    expect(getByText('Selected Title')).toBeInTheDocument();
+    expect(getByText('Selected description')).toBeInTheDocument();
+    // Note: Sectors and NWRMs sections are commented out in the component
+    // So we only check the title and description render
+  });
+
+  it('calls reset map utils when clicking Reset map', () => {
+    const { getByTestId } = render(
+      <CaseStudyList
+        selectedCase={selectedCase}
+        onSelectedCase={jest.fn()}
+        pointsSource={mockPointsSource}
+        map={mockMap}
+        searchInput=""
+        ol={{}}
+      />,
+    );
+
+    fireEvent.click(getByTestId('reset-map'));
+
+    expect(scrollToElement).toHaveBeenCalledWith('search-input');
+    expect(centerAndResetMapZoom).toHaveBeenCalledWith({
+      map: mockMap,
+      ol: {},
+    });
+  });
+
+  it('renders features and highlights search term', () => {
+    const { getByText } = render(
+      <CaseStudyList
+        selectedCase={null}
+        onSelectedCase={jest.fn()}
+        pointsSource={mockPointsSource}
+        map={mockMap}
+        searchInput="match"
+        ol={{}}
+      />,
+    );
+
+    expect(getByText('Feature 1')).toBeInTheDocument();
+    expect(getByText('Feature 1').getAttribute('href')).toBe('/feature1');
+  });
+
+  it('calls zoomMapToFeatures and onSelectedCase when clicking Show on map', async () => {
+    const onSelectedCase = jest.fn();
+
+    const { getByText } = render(
+      <CaseStudyList
+        selectedCase={null}
+        onSelectedCase={onSelectedCase}
+        pointsSource={mockPointsSource}
+        map={mockMap}
+        searchInput=""
+        ol={{}}
+      />,
+    );
+
+    fireEvent.click(getByText('Show on map'));
+
+    expect(scrollToElement).toHaveBeenCalledWith('ol-map-container');
+    expect(zoomMapToFeatures).toHaveBeenCalled();
+    expect(onSelectedCase).toHaveBeenCalled();
+  });
+});