@eeacms/volto-clms-theme 1.1.208 → 1.1.209

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.209](https://github.com/eea/volto-clms-theme/compare/1.1.208...1.1.209) - 30 January 2025
+
+#### :rocket: New Features
+
+- feat: Improve the order of documents in the technical library of the product/product group - refs #283044 [ana-oprea - [`6feba8a`](https://github.com/eea/volto-clms-theme/commit/6feba8a82ec84a6186cee3da719de7b10a356947)]
+
+#### :bug: Bug Fixes
+
+- fix(test): modify widget tests for dataset and add test for product content type [ana-oprea - [`d7534cc`](https://github.com/eea/volto-clms-theme/commit/d7534cc4f26e77bcfcc91d3988f4f974ec3116f4)]
+
+#### :hammer_and_wrench: Others
+
+- fix eslint [ana-oprea - [`785ccf8`](https://github.com/eea/volto-clms-theme/commit/785ccf86f60e3275b7f392fb3b47f0eb6845f7b2)]
 ### [1.1.208](https://github.com/eea/volto-clms-theme/compare/1.1.207...1.1.208) - 13 January 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.208",
+  "version": "1.1.209",
   "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/CclRelatedListingEdit.jsx

@@ -27,7 +27,7 @@ const CclRelatedListingEdit = (props) => {
       (variation) => variation.id === data.variation,
     );
     TemplateView = theVariation?.template;
-    template_id = theVariation.templateId;
+    template_id = theVariation.templateID;
   } else {
     TemplateView = defaultVariation.template;
     template_id = defaultVariation.id;

package/src/components/Widgets/OrderDocumentsWidget.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
@@ -41,34 +41,39 @@ const DocumentItem = React.memo(({ item, provided }) => (
 const OrderDocumentsWidget = (props) => {
   const { id, formData, onChange, value } = props;
   const UID = formData?.UID;
+  const contentType = formData?.['@type'] || undefined;
   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 [documentsList, setDocumentsList] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
 
   const fetchDocuments = useCallback(() => {
-    if (UID) {
-      const sort_on = ['documentation_sorting', 'sortable_title'];
-      const sort_order = ['ascending', 'ascending'];
+    const sort_on = ['documentation_sorting', 'sortable_title'];
+    const sort_order = ['ascending', 'ascending'];
 
+    if (UID) {
       setIsLoading(true);
+      const searchParams = {
+        portal_type: 'TechnicalLibrary',
+        path: 'en/technical-library',
+        sort_on: sort_on,
+        sort_order: sort_order,
+        b_size: 99999,
+      };
+
+      if (contentType === 'DataSet') {
+        searchParams.associated_datasets = UID;
+      } else if (contentType === 'Product') {
+        searchParams.associated_products = UID;
+      }
+
       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,
-        ),
+        searchContent('en/technical-library', searchParams, id),
       ).finally(() => setIsLoading(false));
     }
-  }, [id, UID, dispatch]);
+  }, [id, UID, contentType, dispatch]);
 
   const handleDragEnd = useCallback(
     (result) => {
@@ -86,8 +91,8 @@ const OrderDocumentsWidget = (props) => {
     [documentsList, onChange, id],
   );
 
-  const memoizedList = useMemo(
-    () => (
+  const memoizedList = useMemo(() => {
+    return (
       <DragDropContext onDragEnd={handleDragEnd}>
         <Droppable droppableId="documents">
           {(provided) => (
@@ -110,9 +115,8 @@ const OrderDocumentsWidget = (props) => {
           )}
         </Droppable>
       </DragDropContext>
-    ),
-    [documentsList, handleDragEnd],
-  );
+    );
+  }, [documentsList, handleDragEnd]);
 
   useEffect(() => {
     fetchDocuments();
@@ -130,9 +134,9 @@ const OrderDocumentsWidget = (props) => {
         const newItems = receivedDocumentsList.filter(
           (item) => !value.items.some((item2) => item2.id === item.id),
         );
-        setDocumentsList([...value.items, ...newItems]);
+        setDocumentsList([...value?.items, ...newItems]);
       } else {
-        setDocumentsList(value.items);
+        setDocumentsList(value?.items);
       }
     }
   }, [searchSubrequests, id, value]);
@@ -143,6 +147,18 @@ const OrderDocumentsWidget = (props) => {
       draggable={true}
       className="drag-drop-list-widget"
     >
+      {contentType === 'Product' && (
+        <Button
+          basic
+          size="small"
+          type="button"
+          onClick={() => setIsVisible((prev) => !prev)}
+          aria-label="Toggle document list visibility"
+          className="order-docs-button"
+        >
+          {isVisible ? 'Hide' : 'Show'}
+        </Button>
+      )}
       <div className="order-documents-area">
         <div className="documents-list-header">
           <div>Technical Document Title</div>
@@ -150,7 +166,7 @@ const OrderDocumentsWidget = (props) => {
         {isLoading ? (
           <div className="loading-documents">Loading documents...</div>
         ) : (
-          memoizedList
+          (contentType === 'DataSet' || isVisible) && memoizedList
         )}
       </div>
     </FormFieldWrapper>

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

@@ -55,7 +55,7 @@ describe('OrderDocumentsWidget', () => {
           <MemoryRouter>
             <OrderDocumentsWidget
               id="testId"
-              formData={{ UID: 'someUID' }}
+              formData={{ UID: 'someUID', '@type': 'DataSet' }}
               onChange={mockOnChange}
               value={{ items: [] }}
             />
@@ -80,7 +80,7 @@ describe('OrderDocumentsWidget', () => {
               id="testId"
               formData={{ UID: 'someUID' }}
               onChange={mockOnChange}
-              value={{ items: [] }}
+              value={{ items: [], '@type': 'DataSet' }}
             />
           </MemoryRouter>
         </Provider>,
@@ -96,7 +96,7 @@ describe('OrderDocumentsWidget', () => {
         <MemoryRouter>
           <OrderDocumentsWidget
             id="testId"
-            formData={{ UID: 'someUID' }}
+            formData={{ UID: 'someUID', '@type': 'DataSet' }}
             onChange={mockOnChange}
             value={{
               items: [
@@ -151,7 +151,7 @@ describe('OrderDocumentsWidget', () => {
         <MemoryRouter>
           <OrderDocumentsWidget
             id="testId"
-            formData={{ UID: 'someUID' }}
+            formData={{ UID: 'someUID', '@type': 'DataSet' }}
             onChange={mockOnChange}
             value={{ items: [] }}
           />
@@ -190,7 +190,7 @@ describe('OrderDocumentsWidget', () => {
           <MemoryRouter>
             <OrderDocumentsWidget
               id="testId"
-              formData={{ UID: 'someUID' }}
+              formData={{ UID: 'someUID', '@type': 'DataSet' }}
               onChange={mockOnChange}
               value={{ items: [] }}
             />
@@ -206,4 +206,35 @@ describe('OrderDocumentsWidget', () => {
     expect(screen.getByText('Document 3')).toBeInTheDocument();
     expect(screen.getByText('Document 4')).toBeInTheDocument();
   });
+
+  it('renders the widget with documents', async () => {
+    act(() => {
+      render(
+        <Provider store={store}>
+          <MemoryRouter>
+            <OrderDocumentsWidget
+              id="testId"
+              formData={{ UID: 'someUID', '@type': 'Product' }}
+              onChange={mockOnChange}
+              value={{ items: [] }}
+            />
+          </MemoryRouter>
+        </Provider>,
+      );
+    });
+    await Promise.resolve();
+
+    expect(screen.getByText('Show')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Show'));
+
+    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();
+
+    expect(screen.getByText('Hide')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Hide'));
+
+    expect(screen.getByText('Technical Document Title')).toBeInTheDocument();
+  });
 });

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

@@ -1,7 +1,7 @@
 .order-documents-area {
   width: 100%;
   max-width: 800px;
-  margin: 16px auto;
+  margin: 16px 0;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   overflow: hidden;
@@ -41,6 +41,7 @@
     background-color: #ffffff;
     transition: background-color 0.2s ease;
     cursor: grab;
+    box-shadow: none;
   }
 
   .document-item:last-child {
@@ -64,4 +65,26 @@
     background-color: #f0f8ff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
+
+  .document-item {
+    .ui.basic.icon.button[aria-label='Drag handle'] {
+      box-shadow: none;
+    }
+  }
+}
+
+.field-wrapper-technical_documents_order {
+  .ui.basic.button.order-docs-button {
+    display: inline-block;
+    padding: 7px 10px;
+    border: 2px solid #007eb1;
+    margin-top: 20px;
+    border-radius: 10px;
+    color: #007eb1 !important;
+    cursor: pointer;
+    opacity: 0.8;
+    box-shadow: none;
+    max-width: 200px;
+    text-align: center;
+  }
 }