@eeacms/volto-cca-policy 0.2.57 → 0.2.59

package/CHANGELOG.md

@@ -4,7 +4,30 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.2.57](https://github.com/eea/volto-cca-policy/compare/0.2.56...0.2.57) - 22 July 2024
+### [0.2.59](https://github.com/eea/volto-cca-policy/compare/0.2.58...0.2.59) - 12 August 2024
+
+#### :hammer_and_wrench: Others
+
+- Don't hardcode to last 5 years [Tiberiu Ichim - [`475d7e1`](https://github.com/eea/volto-cca-policy/commit/475d7e17a8faeec9115298bd38f30db51b038a36)]
+### [0.2.58](https://github.com/eea/volto-cca-policy/compare/0.2.57...0.2.58) - 12 August 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`30f4774`](https://github.com/eea/volto-cca-policy/commit/30f4774d7d21cb5bbb4f2782a42c0223fde00e90)]
+
+#### :hammer_and_wrench: Others
+
+- Improve css for broken links [Tiberiu Ichim - [`ef17b71`](https://github.com/eea/volto-cca-policy/commit/ef17b71c4ae6c19202e110f8baca0055d05ad670)]
+- Update GeolocationWidgetMapContainer.jsx [Tiberiu Ichim - [`3da08d2`](https://github.com/eea/volto-cca-policy/commit/3da08d2476bb73a792843d4bc20b3219cb32f65f)]
+- Add test [Tiberiu Ichim - [`751ed81`](https://github.com/eea/volto-cca-policy/commit/751ed81a26de0fde987ab51fcb0bb70ceaeea600)]
+- Stylint fix [Tiberiu Ichim - [`303bb86`](https://github.com/eea/volto-cca-policy/commit/303bb865cdcbb34af23e6f635a0bc9eb41782ef9)]
+- Add start-backend target [Tiberiu Ichim - [`2dbf5df`](https://github.com/eea/volto-cca-policy/commit/2dbf5df311347350f8c42ee3daf3dbd2a840c85a)]
+- No console.log [Tiberiu Ichim - [`06125f9`](https://github.com/eea/volto-cca-policy/commit/06125f9e65de369caacf71a00a8c77d7bc0202b3)]
+- Fixes [Tiberiu Ichim - [`4f00318`](https://github.com/eea/volto-cca-policy/commit/4f00318c0bbb1aea68348cf7efa5684ed1b68fef)]
+- Add filters and sorting [Tiberiu Ichim - [`f6aa329`](https://github.com/eea/volto-cca-policy/commit/f6aa329610180b6e72e879bc38c2c51ed5e65d6c)]
+- Use react-table [Tiberiu Ichim - [`9d6af3a`](https://github.com/eea/volto-cca-policy/commit/9d6af3a0dfcf99bf52c6619ef14f62a047aa0b73)]
+- Add brokenlinks component [Tiberiu Ichim - [`d9a6230`](https://github.com/eea/volto-cca-policy/commit/d9a6230f94021ee2900830284ef2fda8563fe5d0)]
+### [0.2.57](https://github.com/eea/volto-cca-policy/compare/0.2.56...0.2.57) - 23 July 2024
 
 ### [0.2.56](https://github.com/eea/volto-cca-policy/compare/0.2.55...0.2.56) - 22 July 2024
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.57",
+  "version": "0.2.59",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -39,6 +39,7 @@
     "@eeacms/volto-slate-label": "^0.6.0",
     "@eeacms/volto-tabs-block": "^7.5.1",
     "@elastic/search-ui": "1.21.2",
+    "@tanstack/react-table": "8.19.3",
     "d3-array": "^2.12.1",
     "jotai": "^1.6.0",
     "query-string": "7.1.0",

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.jsx

@@ -69,7 +69,7 @@ const makeSearchBlockQuery = ({ base, query, field, value }) => {
 const makeEEASearchQuery = ({ base, field, value, extraFilters }) => {
   // TODO: don't hardcode the language
   const allFields = [
-    ['issued.date', 'Last 5 years'],
+    // ['issued.date', 'Last 5 years'],
     ['language', 'en'],
     [field, value],
     ...(extraFilters?.map(({ id, value }) => [id, value]) || []),

package/src/components/theme/Views/BrokenLinks.jsx

@@ -0,0 +1,284 @@
+import { expandToBackendURL } from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
+import React from 'react';
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from 'semantic-ui-react';
+
+import './brokenlinks.less';
+
+function Filter({ column }) {
+  const columnFilterValue = column.getFilterValue();
+  const { filterVariant } = column.columnDef.meta ?? {};
+  const handleRangeNumberChangeMin = React.useCallback(
+    (value) => {
+      column.setFilterValue((old) => [value, old?.[1]]);
+    },
+    [column],
+  );
+  const handleRangeNumberChangeMax = React.useCallback(
+    (value) => column.setFilterValue((old) => [old?.[0], value]),
+    [column],
+  );
+
+  const handleTextChange = React.useCallback(
+    (value) => column.setFilterValue(value),
+    [column],
+  );
+
+  return filterVariant === 'range' ? (
+    <div>
+      <div className="flex space-x-2">
+        {/* See faceted column filters example for min max values functionality */}
+        <DebouncedInput
+          type="number"
+          value={columnFilterValue?.[0] ?? ''}
+          onChange={handleRangeNumberChangeMin}
+          placeholder={`Min`}
+          className="w-24 border shadow rounded"
+        />
+        <DebouncedInput
+          type="number"
+          value={columnFilterValue?.[1] ?? ''}
+          onChange={handleRangeNumberChangeMax}
+          placeholder={`Max`}
+          className="w-24 border shadow rounded"
+        />
+      </div>
+      <div className="h-1" />
+    </div>
+  ) : filterVariant === 'select' ? (
+    <select
+      onBlur={(e) => column.setFilterValue(e.target.value)}
+      onChange={(e) => column.setFilterValue(e.target.value)}
+      value={columnFilterValue?.toString()}
+    >
+      {/* See faceted column filters example for dynamic select options */}
+      <option value="">All</option>
+      <option value="complicated">complicated</option>
+      <option value="relationship">relationship</option>
+      <option value="single">single</option>
+    </select>
+  ) : (
+    <DebouncedInput
+      className="w-36 border shadow rounded"
+      onChange={handleTextChange}
+      placeholder={`Search...`}
+      type="text"
+      value={columnFilterValue ?? ''}
+    />
+    // See faceted column filters example for datalist search suggestions
+  );
+}
+
+// A typical debounced input react component
+function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}) {
+  const [value, setValue] = React.useState(initialValue);
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value, debounce, onChange]);
+
+  return (
+    <input
+      {...props}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+}
+
+export function BrokenLinksComponent({ reactTable }) {
+  const { createColumnHelper } = reactTable;
+
+  const [results, setResults] = React.useState({});
+
+  React.useEffect(() => {
+    const url = expandToBackendURL('/@broken_links');
+    let isMounted = true;
+    async function handler() {
+      try {
+        const response = await fetch(url);
+        const results = await response.json();
+        const data = Array.from(Object.values(results.broken_links));
+        if (isMounted) setResults(data);
+      } catch {
+        // eslint-disable-next-line no-console
+        console.error('Error in fetching broken links');
+      }
+    }
+    handler();
+    return () => (isMounted = false);
+  }, []);
+
+  const columnHelper = createColumnHelper();
+  const columns = React.useMemo(
+    () => [
+      columnHelper.accessor('url', {
+        header: () => 'URL',
+        cell: (info) => <a href={info.getValue()}>{info.getValue()}</a>,
+        filterFn: 'includesString',
+      }),
+      columnHelper.accessor('status', {
+        header: () => 'Status',
+        filterFn: 'includesString',
+      }),
+      columnHelper.accessor('date', {
+        header: () => 'Last checked',
+        filterFn: 'includesString',
+      }),
+
+      columnHelper.accessor('object_url', {
+        header: () => 'Reference from',
+        cell: (info) => <a href={info.getValue()}>{info.getValue()}</a>,
+        filterFn: 'includesString',
+      }),
+    ],
+    [columnHelper],
+  );
+
+  return (
+    <FilteredTable data={results} columns={columns} reactTable={reactTable} />
+  );
+}
+
+function FilteredTable({ reactTable, data, columns }) {
+  const {
+    useReactTable,
+    getPaginationRowModel,
+    getCoreRowModel,
+    flexRender,
+    getFilteredRowModel,
+    getSortedRowModel,
+  } = reactTable;
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <div className="broken-links-table ui container">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHeaderCell key={header.id} className={header.id}>
+                  {header.isPlaceholder ? null : (
+                    <>
+                      <div
+                        tabIndex="-1"
+                        role="button"
+                        onKeyDown={header.column.getToggleSortingHandler()}
+                        {...{
+                          className: header.column.getCanSort()
+                            ? 'cursor-pointer select-none'
+                            : '',
+                          onClick: header.column.getToggleSortingHandler(),
+                        }}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                        {{
+                          asc: ' 🔼',
+                          desc: ' 🔽',
+                        }[header.column.getIsSorted()] ?? null}
+                      </div>
+                      {header.column.getCanFilter() ? (
+                        <div>
+                          <Filter column={header.column} />
+                        </div>
+                      ) : null}
+                    </>
+                  )}
+                </TableHeaderCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.map((row) => {
+            return (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+      <div className="pagination">
+        <Button
+          onClick={() => table.firstPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<<'}
+        </Button>
+        <Button
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<'}
+        </Button>
+        <Button
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>'}
+        </Button>
+        <Button
+          onClick={() => table.lastPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>>'}
+        </Button>
+        <select
+          value={table.getState().pagination.pageSize}
+          onChange={(e) => {
+            table.setPageSize(Number(e.target.value));
+          }}
+          onBlur={(e) => {
+            table.setPageSize(Number(e.target.value));
+          }}
+        >
+          {[10, 20, 30, 40, 50].map((pageSize) => (
+            <option key={pageSize} value={pageSize}>
+              {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+export default injectLazyLibs(['reactTable'])(BrokenLinksComponent);

package/src/components/theme/Views/BrokenLinks.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import { BrokenLinksComponent } from './BrokenLinks';
+
+const mockStore = configureStore();
+
+describe('BrokenLinksComponent', () => {
+  it('should render the component', async () => {
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const reactTable = await import('@tanstack/react-table');
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <BrokenLinksComponent reactTable={reactTable} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/theme/Views/brokenlinks.less

@@ -0,0 +1,21 @@
+.broken-links-table {
+  td {
+    max-width: 200px;
+  }
+
+  a {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    // max-width: 200px;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .select-none {
+    user-select: none;
+  }
+}

package/src/components/theme/Widgets/GeolocationWidget.jsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'semantic-ui-react';
+import { Input, Label } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 
 import { injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';
-import MapContainer from '@eeacms/volto-cca-policy/components/theme/Widgets/GeolocationWidgetMapContainer';
+import MapContainer from './GeolocationWidgetMapContainer';
+
+import './geolocation.css';
 
 const defaultValue = {
   latitude: 55.6761,
@@ -16,6 +18,7 @@ const GeolocationWidget = (props) => {
   const { id, value, onChange } = props;
 
   const [address, setAddress] = useState('');
+  const [isFetching, setIsFetching] = useState();
 
   const handleAddressChange = (event) => {
     setAddress(event.target.value);
@@ -34,9 +37,11 @@ const GeolocationWidget = (props) => {
     const path = `${base}${corsProxyPath}/${url}`;
 
     let locations;
+    setIsFetching(true);
     try {
       const response = await fetch(path);
       locations = await response.json();
+      setIsFetching(false);
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log('error in fetching location', e);
@@ -59,10 +64,19 @@ const GeolocationWidget = (props) => {
       <div className="ui form">
         <div className="inline fields">
           <div className="field">
-            <Input type="text" value={address} onChange={handleAddressChange} />
+            <Input
+              type="text"
+              value={address}
+              onChange={handleAddressChange}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSearch(e);
+              }}
+            />
           </div>
           <div className="field">
-            <button onClick={handleSearch}>Search</button>
+            <button onClick={handleSearch}>
+              {isFetching ? 'Loading' : 'Search'}
+            </button>
           </div>
         </div>
       </div>
@@ -70,10 +84,14 @@ const GeolocationWidget = (props) => {
         key={mapKey}
         longitude={value?.longitude || defaultValue.longitude}
         latitude={value?.latitude || defaultValue.latitude}
+        onChange={({ latitude, longitude }) =>
+          onChange(id, { ...value, longitude, latitude })
+        }
       />
       <div className="ui form">
         <div className="inline fields">
           <div className="field">
+            <Label>Latitude</Label>
             <Input
               type="number"
               placeholder="latitude"
@@ -84,6 +102,7 @@ const GeolocationWidget = (props) => {
             />
           </div>
           <div className="field">
+            <Label>Longitude</Label>
             <Input
               type="number"
               placeholder="longitude"

package/src/components/theme/Widgets/GeolocationWidgetMapContainer.jsx

@@ -1,12 +1,72 @@
-import React, { useState } from 'react';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import {
   Controls,
   Interactions,
   Layer,
-  Map,
   Layers,
+  Map,
 } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import React, { useState } from 'react';
+import { useMapContext } from '@eeacms/volto-openlayers-map/hocs';
+
+function PinInteraction({ longitude, latitude, onChange }) {
+  const mapContext = useMapContext();
+  const { addLayer, addInteraction, map } = mapContext;
+
+  React.useEffect(() => {
+    if (
+      !map ||
+      typeof latitude === 'undefined' ||
+      typeof longitude === 'undefined'
+    )
+      return;
+
+    // Create a feature (the pin) and set it to be draggable
+    const pin = new ol.ol.Feature({
+      geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude])), // Initial location
+    });
+
+    // Style for the pin
+    pin.setStyle(
+      new ol.style.Style({
+        image: new ol.style.Icon({
+          anchor: [0.5, 1],
+          src: 'https://openlayers.org/en/latest/examples/data/icon.png',
+        }),
+      }),
+    );
+
+    // Create a vector layer to hold the pin
+    const vectorSource = new ol.source.Vector({
+      features: [pin],
+    });
+
+    const vectorLayer = new ol.layer.Vector({
+      source: vectorSource,
+    });
+
+    map.addLayer(vectorLayer);
+
+    // Add drag interaction
+    const dragInteraction = new ol.interaction.Modify({
+      source: vectorSource,
+      pixelTolerance: 20,
+    });
+
+    map.addInteraction(dragInteraction);
+
+    // Log the new position when the pin is dragged
+    dragInteraction.on('modifyend', function (event) {
+      const feature = event.features.getArray()[0];
+      const coordinates = feature.getGeometry().getCoordinates();
+      const lonLat = ol.proj.toLonLat(coordinates);
+      const [longitude, latitude] = lonLat;
+      onChange({ latitude, longitude });
+    });
+  }, [addInteraction, addLayer, map, onChange, latitude, longitude]);
+
+  return null;
+}
 
 const TileSetLoader = (props) => {
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -31,7 +91,7 @@ const TileSetLoader = (props) => {
 };
 
 const MapContainer = (props) => {
-  const { longitude, latitude, source } = props;
+  const { longitude, latitude, source, onChange } = props;
   return (
     <Map
       view={{
@@ -44,15 +104,20 @@ const MapContainer = (props) => {
     >
       <Layers>
         <Controls attribution={false} zoom={false} />
+        <PinInteraction
+          latitude={latitude}
+          longitude={longitude}
+          onChange={onChange}
+        />
         <Interactions
           doubleClickZoom={true}
-          dragAndDrop={false}
+          dragAndDrop={true}
           dragPan={true}
           keyboardPan={true}
           keyboardZoom={true}
           mouseWheelZoom={true}
           pointer={true}
-          select={false}
+          select={true}
         />
         <Layer.Tile source={source} zIndex={0} />
       </Layers>

package/src/components/theme/Widgets/geolocation.css

@@ -0,0 +1,3 @@
+.geolocation-field .ol-map {
+  cursor: pointer;
+}

package/src/index.js

@@ -1,3 +1,4 @@
+import loadable from '@loadable/component';
 import { compose } from 'redux';
 import { Sitemap } from '@plone/volto/components';
 import DefaultView from '@plone/volto/components/theme/View/DefaultView';
@@ -35,6 +36,7 @@ import europeanComissionLogo from '@eeacms/volto-cca-policy/../theme/assets/imag
 import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo-white.svg';
 
 import './slate-styles.less';
+import BrokenLinks from './components/theme/Views/BrokenLinks';
 
 const getEnv = () => (typeof window !== 'undefined' ? window.env : process.env);
 
@@ -59,8 +61,8 @@ const applyConfig = (config) => {
       ...(config.settings.externalRoutes || []),
       {
         match: {
-          path: new RegExp(voltoLocationsRegex),
           exact: false,
+          path: new RegExp(voltoLocationsRegex),
           strict: false,
         },
         url(payload) {
@@ -75,10 +77,10 @@ const applyConfig = (config) => {
     'nominatim.openstreetmap.org',
   ];
 
-  // if (!config.settings.loadables.d3)
-  //   config.settings.loadables.d3 = loadable.lib(() => import('d3'));
-  // if (!config.settings.loadables.d3Geo)
-  //   config.settings.loadables.d3Geo = loadable.lib(() => import('d3-geo'));
+  if (!config.settings.loadables.reactTable)
+    config.settings.loadables.reactTable = loadable.lib(() =>
+      import('@tanstack/react-table'),
+    );
 
   config.settings.dateLocale = 'en-gb';
   config.settings.isMultilingual = true;
@@ -376,9 +378,19 @@ const applyConfig = (config) => {
       component: Sitemap,
     },
 
+    {
+      path: `/broken-links`,
+      component: BrokenLinks,
+    },
+
     ...(config.addonRoutes || []),
   ];
 
+  config.settings.nonContentRoutes = [
+    ...config.settings.nonContentRoutes,
+    '/broken-links',
+  ];
+
   config.settings.appExtras = [
     ...(config.settings.appExtras || []),
     {

package/theme/elements/list.overrides

@@ -1,3 +1,4 @@
-ol.ui.list, .ui.bulleted.list {
+ol.ui.list,
+.ui.bulleted.list {
   margin-left: 0;
-}
+}

package/theme/globals/site.overrides

@@ -23,8 +23,8 @@
 .view-wrapper > .ui.list,
 [id='page-document'] > .ui.bulleted.list,
 .view-wrapper > .ui.bulleted.list {
-  margin-left: auto !important;
   margin-right: auto !important;
+  margin-left: auto !important;
 }
 
 .ui.ordered.list,