@eeacms/volto-clms-theme 1.1.208 → 1.1.210

package/CHANGELOG.md

@@ -4,6 +4,24 @@ 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.210](https://github.com/eea/volto-clms-theme/compare/1.1.209...1.1.210) - 10 February 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-279774 (feat): Improved calendar selection [Urkorue - [`ab4c043`](https://github.com/eea/volto-clms-theme/commit/ab4c043e4a81c90bdcbdbdd0bf707da17037c34e)]
+### [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.210",
   "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/CLMSDownloadCartView/Fields/TimeseriesPicker.jsx

@@ -79,7 +79,7 @@ export const TimeseriesPicker = (props) => {
             <DatePicker
               id="start_date"
               inline
-              selectsRange
+              selectsRange={download_limit_temporal_extent < 360 ? true : false}
               className="datepicker"
               minDate={new Date(start)}
               maxDate={new Date(end)}
@@ -87,14 +87,38 @@ export const TimeseriesPicker = (props) => {
               endDate={item?.TemporalFilter?.EndDate}
               // selectsStart
               onChange={(e) => {
-                item.TemporalFilter = {
-                  StartDate: e[0],
-                  EndDate: e[1],
-                };
-                setStartValue(e[0]);
-                setEndValue(e[1]);
+                if (download_limit_temporal_extent < 360) {
+                  if (download_limit_temporal_extent > 180 && e[1]) {
+                    e[1].setMonth(e[1].getMonth() + 1);
+                    e[1].setDate(e[1].getDate() - 1);
+                  }
+                  item.TemporalFilter = {
+                    StartDate: e[0],
+                    EndDate: e[1],
+                  };
+                  setStartValue(e[0]);
+                  setEndValue(e[1]);
+                } else {
+                  let e2 = new Date(e);
+                  e2.setDate(e2.getDate() + 364);
+                  item.TemporalFilter = {
+                    StartDate: e,
+                    EndDate: e2,
+                  };
+                  setStartValue(e);
+                  setEndValue(e2);
+                }
               }}
               dateFormat="dd.MM.yyyy"
+              showMonthYearPicker={
+                download_limit_temporal_extent > 180 &&
+                download_limit_temporal_extent < 360
+                  ? true
+                  : false
+              }
+              showYearPicker={
+                download_limit_temporal_extent >= 360 ? true : false
+              }
               calendarStartDay={1}
               popperPlacement="top"
               dropdownMode="select"
@@ -114,21 +138,52 @@ export const TimeseriesPicker = (props) => {
                 </span>
               )}
               <br />
-              Click the start and end dates, and then apply.
+              {download_limit_temporal_extent < 180 && (
+                <span>Click the start and end dates, and then apply.</span>
+              )}
+              {download_limit_temporal_extent > 180 &&
+                download_limit_temporal_extent < 360 && (
+                  <span>Click the start and end months, and then apply.</span>
+                )}
+              {download_limit_temporal_extent > 360 && (
+                <span>Click the year, and then apply.</span>
+              )}
               {(!startValue ||
                 !endValue ||
                 !isValidDateRange({
                   start: startValue,
                   end: endValue,
                   limit: download_limit_temporal_extent,
-                })) && (
-                <span>
-                  {' '}
-                  Allowed time range of {
-                    download_limit_temporal_extent
-                  } days.{' '}
-                </span>
-              )}
+                })) &&
+                download_limit_temporal_extent < 180 && (
+                  <span>
+                    {' '}
+                    Allowed time range of {
+                      download_limit_temporal_extent
+                    } days.{' '}
+                  </span>
+                )}
+              {(!startValue ||
+                !endValue ||
+                !isValidDateRange({
+                  start: startValue,
+                  end: endValue,
+                  limit: download_limit_temporal_extent,
+                })) &&
+                download_limit_temporal_extent > 180 &&
+                download_limit_temporal_extent < 360 && (
+                  <span> Allowed time range of 6 months. </span>
+                )}
+              {(!startValue ||
+                !endValue ||
+                !isValidDateRange({
+                  start: startValue,
+                  end: endValue,
+                  limit: download_limit_temporal_extent,
+                })) &&
+                download_limit_temporal_extent > 360 && (
+                  <span> Allowed time range of 1 year. </span>
+                )}
               <CclButton
                 isButton={true}
                 mode={'filled'}

package/src/components/CLMSDownloadCartView/cart-table.less

@@ -121,3 +121,50 @@ div.mb-2 {
   margin-bottom: 1rem !important;
   margin-inline: 2rem !important;
 }
+
+// .react-datepicker__month{
+//   display: none;
+// }
+
+// .react-datepicker__day-names{
+//   display: none;
+// }
+
+// .react-datepicker__month-container{
+//   width: 100%;
+// }
+
+.react-datepicker__month-text--in-range {
+  background-color: #7c8921 !important;
+}
+
+.react-datepicker__month-text--in-selecting-range {
+  background-color: #7c8921 !important;
+}
+
+.react-datepicker__month-text--range-start {
+  background-color: rgba(160, 177, 40, 0.2) !important;
+  color: black;
+}
+
+.react-datepicker__month-text--range-end {
+  background-color: rgba(160, 177, 40, 0.2) !important;
+  color: black;
+}
+
+.react-datepicker__year-text--in-range {
+  background-color: #7c8921 !important;
+}
+
+.react-datepicker-year-header {
+  width: 100%;
+  color: white;
+}
+
+.react-datepicker__year-wrapper {
+  max-width: 260px;
+}
+
+.react-datepicker__month-container {
+  width: 100%;
+}

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;
+  }
 }