@eeacms/volto-clms-theme 1.1.203 → 1.1.205

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.205](https://github.com/eea/volto-clms-theme/compare/1.1.204...1.1.205) - 18 December 2024
+
+#### :rocket: New Features
+
+- feat: add a drag-and-drop field in the dataset to arrange the technical documents in the accordion - refs #271669 [ana-oprea - [`8aebc43`](https://github.com/eea/volto-clms-theme/commit/8aebc43986f30b0092a0ac77f3e653cfc94a179d)]
+
+### [1.1.204](https://github.com/eea/volto-clms-theme/compare/1.1.203...1.1.204) - 9 December 2024
+
+#### :bug: Bug Fixes
+
+- fix: In downloads page, sometimes the dataset name is not loaded - refs #279962 [ana-oprea - [`48a85bf`](https://github.com/eea/volto-clms-theme/commit/48a85bfb55262082e7d8e26716ac47ef3159ae4e)]
+
 ### [1.1.203](https://github.com/eea/volto-clms-theme/compare/1.1.202...1.1.203) - 3 December 2024
 
 ### [1.1.202](https://github.com/eea/volto-clms-theme/compare/1.1.201...1.1.202) - 20 November 2024

package/package.json

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

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingView.jsx

@@ -116,12 +116,30 @@ const CclRelatedListingView = (props) => {
   }, [data, id, uid, dispatch]);
 
   React.useEffect(() => {
-    if (sLoaded) {
-      p_functions.setOriginalDataList([...searchSubrequests.items]);
-      p_functions.setDataList([...searchSubrequests.items]);
+    if (sLoaded && properties?.technical_documents_order) {
+      const orderMap = new Map(
+        properties?.technical_documents_order.items?.map((item, index) => [
+          item.id,
+          index,
+        ]) || [],
+      );
+
+      // Sort libraries based on the technical_documents_order
+      const sorted = [...libraries].sort(
+        (a, b) =>
+          (orderMap.get(a['@id']) ?? Infinity) -
+          (orderMap.get(b['@id']) ?? Infinity),
+      );
+
+      p_functions.setOriginalDataList([...sorted]);
+      p_functions.setDataList([...sorted]);
+    }
+    if (sLoaded && !properties?.technical_documents_order) {
+      p_functions.setOriginalDataList([...libraries]);
+      p_functions.setDataList([...libraries]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sLoaded]);
+  }, [sLoaded, properties.technical_documents_order, libraries]);
 
   return (
     <>

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -35,10 +35,10 @@ const DataSetInfoContent = (props) => {
     if (UID) {
       dispatch(
         searchContent(
-          '',
+          'en/technical-library',
           {
             portal_type: 'TechnicalLibrary',
-            path: '/',
+            path: 'en/technical-library',
             associated_datasets: UID,
             b_size: 99999,
           },

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -41,7 +41,7 @@ const DatasetNaming = (props) => {
   const { dataset } = props;
   return (
     <>
-      {`${dataset['name'] ? dataset['name'] : 'loading...'} -
+      {`${dataset['name'] || dataset['DatasetTitle'] || 'loading...'} -
     ${
       dataset?.OutputFormat
         ? dataset?.OutputFormat

package/src/components/Widgets/OrderDocumentsWidget.jsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { searchContent } from '@plone/volto/actions';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import dragSVG from '@plone/volto/icons/drag.svg';
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+const DocumentItem = React.memo(({ item, provided }) => (
+  <div
+    ref={provided.innerRef}
+    {...provided.draggableProps}
+    {...provided.dragHandleProps}
+    className="document-item"
+    role="listitem"
+    aria-label={`Draggable item: ${item.title}`}
+  >
+    <div style={{ display: 'inline-block' }}>
+      <Button icon basic aria-label="Drag handle">
+        <Icon
+          name={dragSVG}
+          size="20px"
+          color="#878f93"
+          className="content drag handle"
+        />
+      </Button>
+    </div>
+    <div>{item.title}</div>
+  </div>
+));
+
+const OrderDocumentsWidget = (props) => {
+  const { id, formData, onChange, value } = props;
+  const UID = formData?.UID;
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  const [documentsList, setDocumentsList] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  const fetchDocuments = useCallback(() => {
+    if (UID) {
+      const sort_on = ['documentation_sorting', 'sortable_title'];
+      const sort_order = ['ascending', 'ascending'];
+
+      setIsLoading(true);
+      dispatch(
+        searchContent(
+          'en/technical-library',
+          {
+            portal_type: 'TechnicalLibrary',
+            path: 'en/technical-library',
+            associated_datasets: UID,
+            sort_on: sort_on,
+            sort_order: sort_order,
+            b_size: 99999,
+          },
+          id,
+        ),
+      ).finally(() => setIsLoading(false));
+    }
+  }, [id, UID, dispatch]);
+
+  const handleDragEnd = useCallback(
+    (result) => {
+      if (!result.destination) return;
+
+      const reorderedList = reorder(
+        documentsList,
+        result.source.index,
+        result.destination.index,
+      );
+
+      onChange(id, { items: reorderedList });
+      setDocumentsList(reorderedList);
+    },
+    [documentsList, onChange, id],
+  );
+
+  const memoizedList = useMemo(
+    () => (
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Droppable droppableId="documents">
+          {(provided) => (
+            <div
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+              className="documents-list"
+              role="list"
+              aria-label="Draggable documents list"
+            >
+              {documentsList.map((item, index) => (
+                <Draggable key={item.id} draggableId={item.id} index={index}>
+                  {(provided) => (
+                    <DocumentItem item={item} provided={provided} />
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    ),
+    [documentsList, handleDragEnd],
+  );
+
+  useEffect(() => {
+    fetchDocuments();
+  }, [fetchDocuments, location]);
+
+  useEffect(() => {
+    if (searchSubrequests?.[id]?.items) {
+      const libraries = searchSubrequests[id].items;
+      const receivedDocumentsList = libraries.map((item) => ({
+        id: item['@id'],
+        title: item.title,
+      }));
+
+      if (value?.items?.length < receivedDocumentsList.length) {
+        const newItems = receivedDocumentsList.filter(
+          (item) => !value.items.some((item2) => item2.id === item.id),
+        );
+        setDocumentsList([...value.items, ...newItems]);
+      } else {
+        setDocumentsList(value.items);
+      }
+    }
+  }, [searchSubrequests, id, value]);
+
+  return (
+    <FormFieldWrapper
+      {...props}
+      draggable={true}
+      className="drag-drop-list-widget"
+    >
+      <div className="order-documents-area">
+        <div className="documents-list-header">
+          <div>Technical Document Title</div>
+        </div>
+        {isLoading ? (
+          <div className="loading-documents">Loading documents...</div>
+        ) : (
+          memoizedList
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+OrderDocumentsWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  formData: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string,
+        title: PropTypes.string,
+      }),
+    ),
+  }),
+};
+
+export default React.memo(OrderDocumentsWidget);

package/src/components/Widgets/OrderDocumentsWidget.test.jsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import OrderDocumentsWidget from './OrderDocumentsWidget';
+import { MemoryRouter } from 'react-router-dom';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore([]);
+
+jest.mock('@plone/volto/actions', () => ({
+  searchContent: jest.fn(() => ({
+    type: 'SEARCH_CONTENT',
+    path: 'en/technical-library',
+    subrequest: 'test-widget',
+  })),
+}));
+
+describe('OrderDocumentsWidget', () => {
+  const SPACE = { keyCode: 32 };
+  const ARROW_UP = { keyCode: 38 };
+  const ARROW_DOWN = { keyCode: 40 };
+
+  let store;
+  let mockOnChange;
+  let initialState;
+
+  beforeEach(() => {
+    initialState = {
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      search: {
+        subrequests: {
+          testId: {
+            items: [
+              { '@id': 'doc1', title: 'Document 1' },
+              { '@id': 'doc2', title: 'Document 2' },
+              { '@id': 'doc3', title: 'Document 3' },
+            ],
+          },
+        },
+      },
+    };
+    store = mockStore(initialState);
+    mockOnChange = jest.fn();
+    store.dispatch = jest.fn(() => Promise.resolve());
+  });
+
+  it('renders the widget with documents', async () => {
+    act(() => {
+      render(
+        <Provider store={store}>
+          <MemoryRouter>
+            <OrderDocumentsWidget
+              id="testId"
+              formData={{ UID: 'someUID' }}
+              onChange={mockOnChange}
+              value={{ items: [] }}
+            />
+          </MemoryRouter>
+        </Provider>,
+      );
+    });
+    await Promise.resolve();
+
+    expect(screen.getByText('Technical Document Title')).toBeInTheDocument();
+    expect(screen.getByText('Document 1')).toBeInTheDocument();
+    expect(screen.getByText('Document 2')).toBeInTheDocument();
+    expect(screen.getByText('Document 3')).toBeInTheDocument();
+  });
+
+  it('shows loading state when fetching documents', async () => {
+    act(() => {
+      render(
+        <Provider store={store}>
+          <MemoryRouter>
+            <OrderDocumentsWidget
+              id="testId"
+              formData={{ UID: 'someUID' }}
+              onChange={mockOnChange}
+              value={{ items: [] }}
+            />
+          </MemoryRouter>
+        </Provider>,
+      );
+    });
+
+    expect(screen.getByText('Loading documents...')).toBeInTheDocument();
+  });
+
+  it('calls onChange with reordered documents after drag-and-drop', async () => {
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <OrderDocumentsWidget
+            id="testId"
+            formData={{ UID: 'someUID' }}
+            onChange={mockOnChange}
+            value={{
+              items: [
+                { id: 'doc1', title: 'Document 1' },
+                { id: 'doc2', title: 'Document 2' },
+                { id: 'doc3', title: 'Document 3' },
+              ],
+            }}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    await Promise.resolve();
+
+    const dragItem = container.querySelector(
+      'div[aria-label="Draggable item: Document 1"]',
+    );
+
+    fireEvent.keyDown(dragItem, SPACE);
+    fireEvent.keyDown(dragItem, ARROW_DOWN);
+    fireEvent.keyDown(dragItem, SPACE);
+
+    expect(mockOnChange).toHaveBeenCalledWith('testId', {
+      items: [
+        { id: 'doc2', title: 'Document 2' },
+        { id: 'doc1', title: 'Document 1' },
+        { id: 'doc3', title: 'Document 3' },
+      ],
+    });
+
+    const dragItem2 = container.querySelector(
+      'div[aria-label="Draggable item: Document 3"]',
+    );
+
+    fireEvent.keyDown(dragItem2, SPACE);
+    fireEvent.keyDown(dragItem2, ARROW_UP);
+    fireEvent.keyDown(dragItem2, SPACE);
+
+    expect(mockOnChange).toHaveBeenCalledWith('testId', {
+      items: [
+        { id: 'doc2', title: 'Document 2' },
+        { id: 'doc3', title: 'Document 3' },
+        { id: 'doc1', title: 'Document 1' },
+      ],
+    });
+  });
+
+  it('updates state when new documents are fetched from Redux', async () => {
+    const { rerender } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <OrderDocumentsWidget
+            id="testId"
+            formData={{ UID: 'someUID' }}
+            onChange={mockOnChange}
+            value={{ items: [] }}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    await Promise.resolve();
+
+    const updatedState = {
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      search: {
+        subrequests: {
+          testId: {
+            items: [
+              { '@id': 'doc1', title: 'Document 1' },
+              { '@id': 'doc2', title: 'Document 2' },
+              { '@id': 'doc3', title: 'Document 3' },
+              { '@id': 'doc4', title: 'Document 4' },
+            ],
+          },
+        },
+      },
+    };
+
+    const updatedStore = mockStore(updatedState);
+    mockOnChange = jest.fn();
+    updatedStore.dispatch = jest.fn(() => Promise.resolve());
+
+    act(() => {
+      rerender(
+        <Provider store={updatedStore}>
+          <MemoryRouter>
+            <OrderDocumentsWidget
+              id="testId"
+              formData={{ UID: 'someUID' }}
+              onChange={mockOnChange}
+              value={{ items: [] }}
+            />
+          </MemoryRouter>
+        </Provider>,
+      );
+    });
+
+    await Promise.resolve();
+
+    expect(screen.getByText('Document 1')).toBeInTheDocument();
+    expect(screen.getByText('Document 2')).toBeInTheDocument();
+    expect(screen.getByText('Document 3')).toBeInTheDocument();
+    expect(screen.getByText('Document 4')).toBeInTheDocument();
+  });
+});

package/src/index.js

@@ -30,6 +30,7 @@ import CLMSTechnicalLibraryView from './components/CLMSTechnicalLibraryView/CLMS
 import CLMSProductionUpdatesView from './components/CLMSProductionUpdatesView/CLMSProductionUpdatesView';
 
 // WIDGET
+import OrderDocumentsWidget from './components/Widgets/OrderDocumentsWidget';
 import BoundingWidget from './components/Widgets/BoundingWidget';
 import ContactWidget from './components/Widgets/ContactWidget';
 import DatasetDownloadInformationWidget from './components/Widgets/DatasetDownloadInformationWidget';
@@ -98,6 +99,7 @@ const applyConfig = (config) => {
   config.widgets.type.tabs = TabsWidget;
   config.widgets.widget = {
     ...config.widgets.widget,
+    order_docs_widget: OrderDocumentsWidget,
     bounding_widget: BoundingWidget,
     layer_widget: MapLayersWidget,
     downloadable_files_widget: DownloadableFilesTableWidget,

package/theme/site/extras/custom.overrides

@@ -22,4 +22,5 @@
 @import 'ccl-tabs';
 @import 'meeting';
 @import 'downloadable-files-table-widget';
-@import 'video';
+@import 'video';
+@import 'order-documents-widget';

package/theme/site/extras/order-documents-widget.less

@@ -0,0 +1,67 @@
+.order-documents-area {
+  width: 100%;
+  max-width: 800px;
+  margin: 16px auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  [data-rbd-draggable-context-id] {
+    margin-bottom: 0.5rem;
+  }
+
+  /* Table header */
+  .documents-list-header {
+    display: flex;
+    background-color: #f5f5f5;
+    padding: 12px 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .documents-list-header div {
+    text-align: left;
+  }
+
+  /* List container */
+  .documents-list {
+    display: flex;
+    flex-direction: column;
+    color: @clmsGreen;
+  }
+
+  /* Individual document items (rows) */
+  .document-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #ffffff;
+    transition: background-color 0.2s ease;
+    cursor: grab;
+  }
+
+  .document-item:last-child {
+    border-bottom: none;
+  }
+
+  .document-item:hover {
+    background-color: #f9f9f9;
+  }
+
+  /* Columns within a row */
+  .document-item div {
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Dragging styles */
+  .document-item[aria-grabbed='true'] {
+    background-color: #f0f8ff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}