@eeacms/volto-clms-theme 1.1.240 → 1.1.241

package/CHANGELOG.md

@@ -4,11 +4,16 @@ 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).
 
-### [1.1.240](https://github.com/eea/volto-clms-theme/compare/1.1.239...1.1.240) - 30 May 2025
+### [1.1.241](https://github.com/eea/volto-clms-theme/compare/1.1.240...1.1.241) - 11 June 2025
 
 #### :hammer_and_wrench: Others
 
-- Refs #287636 - Add CDSE data source. [GhitaB - [`972944f`](https://github.com/eea/volto-clms-theme/commit/972944f1fb36010cbf828b2afba78b2db3690c27)]
+- fix lint [ana-oprea - [`29cd33a`](https://github.com/eea/volto-clms-theme/commit/29cd33a4798f2a429acfa7ad18b08c9ad2f1532a)]
+- Refs #286059 - Technical Library search: hide Back to search home, not needed for this config. [GhitaB - [`eeeee74`](https://github.com/eea/volto-clms-theme/commit/eeeee74d742454a624db930f90072cbf90e80fc8)]
+- Refs #286059 - Technical Library search: clusters tabs style. [GhitaB - [`4a8614d`](https://github.com/eea/volto-clms-theme/commit/4a8614d99459eaf98bb06b8a8569e6df59079b8e)]
+- Refs #286059 - Technical Library search: Disable Include archived content filter. [GhitaB - [`b92daf8`](https://github.com/eea/volto-clms-theme/commit/b92daf8e265833523091c4690bc0e0a6e77a9753)]
+### [1.1.240](https://github.com/eea/volto-clms-theme/compare/1.1.239...1.1.240) - 30 May 2025
+
 ### [1.1.239](https://github.com/eea/volto-clms-theme/compare/1.1.238...1.1.239) - 28 May 2025
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.240",
+  "version": "1.1.241",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Result/search-styles.less

@@ -7,6 +7,18 @@ body.clmsSearchTechnicalLibrary-view {
 }
 
 .searchapp.searchapp-clmsSearchTechnicalLibrary {
+  a.back-link {
+    display: none;
+  }
+
+  .ui.secondary.pointing.content-section-tabs.menu {
+    .active.item {
+      border-color: @clms-primary;
+    }
+
+    overflow-x: visible !important;
+  }
+
   i.icon.window.minimize:before {
     content: '⇕';
   }

package/src/customizations/@eeacms/volto-react-table-widget/components/Widgets/EditableTable.jsx

@@ -0,0 +1,225 @@
+import { Pagination, Table, Ref } from 'semantic-ui-react';
+import { usePagination, useTable } from 'react-table';
+import { Icon } from '@plone/volto/components';
+import React from 'react';
+import { compose } from 'redux';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
+import paginationRightSVG from '@plone/volto/icons/right-key.svg';
+import plusSVG from '@plone/volto/icons/circle-plus.svg';
+import dragSVG from '@plone/volto/icons/drag.svg';
+import { EditableCell } from '@eeacms/volto-react-table-widget/components/Widgets/EditableCell';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+const defaultColumn = {
+  Cell: EditableCell,
+};
+
+function EditableTable(props) {
+  const {
+    columns,
+    data,
+    updateCell,
+    removeRow,
+    addRowAfter,
+    reorderRow,
+    selectedRow,
+    setSelectedRow,
+    schema,
+    reactSelect,
+  } = props;
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    page,
+    pageCount,
+    gotoPage,
+    setPageSize,
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+      updateCell,
+      selectedRow,
+      setSelectedRow,
+      schema,
+      reactSelect,
+    },
+    usePagination,
+  );
+  if (data.length === 0) {
+    addRowAfter({ key: 'Enter' }, 0, pageIndex, pageSize);
+  }
+  React.useEffect(() => {
+    gotoPage(pageIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const handleDragEnd = (result) => {
+    if (!result.destination || !reorderRow) {
+      return;
+    }
+
+    const { source, destination } = result;
+
+    if (source.index !== destination.index) {
+      reorderRow(source.index, destination.index, pageIndex, pageSize);
+    }
+  };
+  // Render the UI for your table
+  return (
+    <>
+      <Table celled {...getTableProps()}>
+        <Table.Header>
+          {headerGroups.map((headerGroup, key) => (
+            <Table.Row key={key} {...headerGroup.getHeaderGroupProps()}>
+              <Table.HeaderCell width={1}></Table.HeaderCell>
+              {headerGroup.headers.map((column) => (
+                <Table.HeaderCell {...column.getHeaderProps()}>
+                  {column.render('Header')}
+                </Table.HeaderCell>
+              ))}
+              <Table.HeaderCell>{'Actions'}</Table.HeaderCell>
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <DragDropContext onDragEnd={handleDragEnd}>
+          <Droppable droppableId="table-body">
+            {(provided) => (
+              <Ref innerRef={provided.innerRef}>
+                <Table.Body
+                  {...getTableBodyProps()}
+                  {...provided.droppableProps}
+                >
+                  {page.map((row, i) => {
+                    prepareRow(row);
+                    return (
+                      <Draggable
+                        key={
+                          row.original['@id'] ||
+                          `row-${pageIndex * pageSize + i}`
+                        }
+                        draggableId={
+                          row.original['@id'] ||
+                          `row-${pageIndex * pageSize + i}`
+                        }
+                        index={i}
+                      >
+                        {(provided, snapshot) => (
+                          <Ref innerRef={provided.innerRef}>
+                            <Table.Row
+                              className={`
+                              ${
+                                selectedRow === pageIndex * pageSize + i
+                                  ? 'selected-row'
+                                  : ''
+                              }
+                              ${snapshot.isDragging ? 'dragging' : ''}
+                            `}
+                              {...row.getRowProps()}
+                              {...provided.draggableProps}
+                            >
+                              <Table.Cell {...provided.dragHandleProps}>
+                                <Icon name={dragSVG} size="18px" />
+                              </Table.Cell>
+                              {row.cells.map((cell) => {
+                                return (
+                                  <Table.Cell {...cell.getCellProps()}>
+                                    {cell.render('Cell')}
+                                  </Table.Cell>
+                                );
+                              })}
+                              <Table.Cell>
+                                <div className={'row-actions'}>
+                                  <span
+                                    onClick={(e) => {
+                                      addRowAfter(e, i, pageIndex, pageSize);
+                                    }}
+                                    onKeyDown={(e) => {
+                                      addRowAfter(e, i, pageIndex, pageSize);
+                                    }}
+                                    tabIndex={0}
+                                    role="button"
+                                    className="row-action"
+                                  >
+                                    <Icon name={plusSVG} size="23px" />
+                                  </span>
+                                  <span
+                                    onClick={(e) =>
+                                      removeRow(e, i, pageIndex, pageSize)
+                                    }
+                                    onKeyDown={(e) =>
+                                      removeRow(e, i, pageIndex, pageSize)
+                                    }
+                                    tabIndex={0}
+                                    role="button"
+                                    className="row-action"
+                                  >
+                                    <Icon
+                                      name={deleteSVG}
+                                      size="23px"
+                                      color="red"
+                                    />
+                                  </span>
+                                </div>
+                              </Table.Cell>
+                            </Table.Row>
+                          </Ref>
+                        )}
+                      </Draggable>
+                    );
+                  })}
+                  {provided.placeholder}
+                </Table.Body>
+              </Ref>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </Table>
+      <div className="pagination-wrapper react-table-pagination">
+        <Pagination
+          activePage={pageIndex + 1}
+          totalPages={pageCount}
+          onPageChange={(e, { activePage }) => {
+            gotoPage(activePage - 1);
+          }}
+          firstItem={null}
+          lastItem={null}
+          prevItem={{
+            content: <Icon name={paginationLeftSVG} size="18px" />,
+            icon: true,
+            'aria-disabled': pageIndex + 1 === 1,
+            className: pageIndex + 1 === 1 ? 'disabled' : null,
+          }}
+          nextItem={{
+            content: <Icon name={paginationRightSVG} size="18px" />,
+            icon: true,
+            'aria-disabled': pageIndex + 1 === pageCount,
+            className: pageIndex + 1 === pageCount ? 'disabled' : null,
+          }}
+        ></Pagination>
+        {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+        <select
+          style={{ maxWidth: '7rem' }}
+          value={pageSize}
+          onChange={(e) => {
+            setPageSize(Number(e.target.value));
+          }}
+        >
+          {[10, 25, 50, 100].map((pageSize) => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </>
+  );
+}
+
+export default compose(injectLazyLibs(['reactSelect']))(EditableTable);

package/src/customizations/@eeacms/volto-react-table-widget/components/Widgets/ReactTableWidget.jsx

@@ -0,0 +1,274 @@
+import '@eeacms/volto-react-table-widget/components/Widgets/react-table-widget.css';
+
+import { Button, Modal, Segment, Grid } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { CSVLink } from 'react-csv';
+import EditableTable from './EditableTable';
+import React from 'react';
+import { Toast } from '@plone/volto/components';
+import { toast } from 'react-toastify';
+import { useCSVReader } from 'react-papaparse';
+import { v4 as uuid } from 'uuid';
+
+const messages = defineMessages({
+  csv_file_imported_correctly: {
+    id: 'CSV file imported correctly',
+    defaultMessage: 'CSV file imported correctly',
+  },
+  import_new_imported_item_count: {
+    id: 'Imported item count',
+    defaultMessage: '{count} new items imported',
+  },
+  import_modified_item_count: {
+    id: 'Modified item count',
+    defaultMessage: '{count} items modified',
+  },
+  import_csv_file: {
+    id: 'Import CSV file',
+    defaultMessage: 'Import CSV file',
+  },
+  export_csv_file: {
+    id: 'Export CSV file',
+    defaultMessage: 'Export CSV file',
+  },
+  undo_all_modifications: {
+    id: 'Undo all modifications',
+    defaultMessage: 'Undo all modifications',
+  },
+  undo_header: {
+    id: 'Undo',
+    defaultMessage: 'Undo',
+  },
+  undo_message: {
+    id: 'Undo message',
+    defaultMessage: 'Undo message',
+  },
+});
+
+const ReactDataTableWidget = (props) => {
+  let {
+    schema,
+    value,
+    onChange,
+    id,
+    csvexport,
+    csvimport,
+    undomodifications,
+    fieldSet,
+  } = props;
+
+  const intl = useIntl();
+  const header_columns = schema.fieldsets[0].fields.map((field) => {
+    return { Header: schema.properties[field]?.title, accessor: field };
+  });
+
+  const tablecolumns = React.useMemo(
+    () => [...header_columns],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const [originalData] = React.useState(value);
+  const [hasModifiedData, setHasModifiedData] = React.useState(false);
+  const [selectedRow, setSelectedRow] = React.useState(0);
+
+  const updateCell = (rowIndex, columnId, updateValue) => {
+    setHasModifiedData(true);
+    const newvalue = value.map((v, i) =>
+      i !== rowIndex ? v : { ...v, [columnId]: updateValue },
+    );
+    onChange(id, newvalue);
+  };
+
+  const removeRow = (event, rowIndex, pageIndex, pageSize) => {
+    setHasModifiedData(true);
+    if (event.type === 'click' || event.key === 'Enter') {
+      setSelectedRow(pageIndex * pageSize + rowIndex);
+      const newvalue = value.filter(
+        (v, i) => i !== pageIndex * pageSize + rowIndex,
+      );
+      onChange(id, newvalue);
+    }
+  };
+
+  const addRowAfter = (event, rowIndex, pageIndex, pageSize) => {
+    setHasModifiedData(true);
+    if (event.type === 'click' || event.key === 'Enter') {
+      let newRowValue = {};
+      schema.fieldsets[0].fields.forEach((field) => {
+        newRowValue[field] = '';
+      });
+      setSelectedRow(pageIndex * pageSize + rowIndex + 1);
+      const newvalue = [
+        ...value.slice(0, pageIndex * pageSize + rowIndex + 1),
+        { '@id': uuid(), ...newRowValue },
+        ...value.slice(pageIndex * pageSize + rowIndex + 1),
+      ];
+      onChange(id, newvalue);
+    }
+  };
+
+  const reorderRow = (draggedRowIndex, dropRowIndex, pageIndex, pageSize) => {
+    setHasModifiedData(true);
+    const absoluteDraggedIndex = pageIndex * pageSize + draggedRowIndex;
+    const absoluteDropIndex = pageIndex * pageSize + dropRowIndex;
+
+    // Validate indices are within bounds
+    if (
+      absoluteDraggedIndex < 0 ||
+      absoluteDraggedIndex >= value.length ||
+      absoluteDropIndex < 0 ||
+      absoluteDropIndex >= value.length
+    ) {
+      return;
+    }
+
+    const newData = [...value];
+    const [movedRow] = newData.splice(absoluteDraggedIndex, 1);
+
+    newData.splice(absoluteDropIndex, 0, movedRow);
+
+    onChange(id, newData);
+    setSelectedRow(absoluteDropIndex);
+  };
+
+  const resetData = () => {
+    onChange(id, originalData);
+    setSelectedRow(0);
+    setHasModifiedData(false);
+  };
+
+  const csvcolumns = tablecolumns.map((d) => {
+    return {
+      label: d.accessor,
+      key: d.accessor,
+    };
+  });
+
+  csvcolumns.push({
+    label: '@id',
+    key: '@id',
+  });
+
+  const { CSVReader } = useCSVReader();
+  return (
+    <div className="inline field">
+      <Grid>
+        <Grid.Row stretched>
+          <Grid.Column width={4}>
+            <div className="wrapper">
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control*/}
+              <label id={`fieldset-${fieldSet}-field-label-${id}`}>
+                {schema.title}
+              </label>
+            </div>
+          </Grid.Column>
+          <Grid.Column width={8}>
+            <p className="help">{schema.description}</p>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+      <Segment basic textAlign="center">
+        {undomodifications && (
+          <Modal
+            trigger={
+              <Button
+                onClick={(e) => {
+                  e.preventDefault();
+                }}
+                disabled={!hasModifiedData}
+              >
+                {intl.formatMessage(messages.undo_all_modifications)}
+              </Button>
+            }
+            header={intl.formatMessage(messages.undo_header)}
+            content={intl.formatMessage(messages.undo_message)}
+            actions={[
+              'Cancel',
+              {
+                key: 'ok',
+                content: 'OK',
+                positive: true,
+                onClick: () => {
+                  resetData();
+                },
+              },
+            ]}
+          />
+        )}
+
+        {csvexport && (
+          <CSVLink
+            className="ui button"
+            filename={`${schema.title} export.csv`}
+            separator=";"
+            data={value}
+          >
+            {intl.formatMessage(messages.export_csv_file)}
+          </CSVLink>
+        )}
+
+        {csvimport && (
+          <CSVReader
+            onUploadAccepted={(results) => {
+              let newdatacount = 0;
+              let newdata = results.data.map((item) => {
+                if (!item['@id']) {
+                  newdatacount += 1;
+                  return {
+                    ...item,
+                    '@id': uuid(),
+                  };
+                }
+                return item;
+              });
+              let modifiedcount = newdata.length - newdatacount;
+              onChange(id, newdata);
+              toast.success(
+                <Toast
+                  success
+                  autoClose={5000}
+                  content={`${intl.formatMessage(
+                    messages.csv_file_imported_correctly,
+                  )} ${intl.formatMessage(
+                    messages.import_new_imported_item_count,
+                    {
+                      count: newdatacount,
+                    },
+                  )} ${intl.formatMessage(messages.import_modified_item_count, {
+                    count: modifiedcount,
+                  })}`}
+                />,
+              );
+            }}
+            config={{ header: true }}
+          >
+            {({ getRootProps, ProgressBar }) => (
+              <>
+                <Button type="button" {...getRootProps()}>
+                  {intl.formatMessage(messages.import_csv_file)}
+                </Button>
+                <ProgressBar />
+              </>
+            )}
+          </CSVReader>
+        )}
+
+        <EditableTable
+          columns={tablecolumns}
+          data={value}
+          updateCell={updateCell}
+          removeRow={removeRow}
+          addRowAfter={addRowAfter}
+          reorderRow={reorderRow}
+          selectedRow={selectedRow}
+          setSelectedRow={setSelectedRow}
+          schema={schema}
+        />
+      </Segment>
+    </div>
+  );
+};
+
+export default ReactDataTableWidget;

package/src/search/facets.js

@@ -19,4 +19,9 @@ if (facet && facet.default && Array.isArray(facet.default.values)) {
   facet.default.values[0] = 'All time';
 }
 
+// Disable Include archived content filter
+const facet_is_archived = facets.find((f) => f.field === 'IncludeArchived');
+if (facet_is_archived && facet_is_archived.showInSecondaryFacetsList) {
+  facet_is_archived.showInSecondaryFacetsList = false;
+}
 export default facets;