@eeacms/volto-clms-theme 1.0.75 → 1.0.76

package/CHANGELOG.md

@@ -4,8 +4,17 @@ 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.0.76](https://github.com/eea/volto-clms-theme/compare/1.0.75...1.0.76)
+
+- add modal when download requests are both standard downloads or prepackaged files [`#219`](https://github.com/eea/volto-clms-theme/pull/219)
+- upgrade volto-accordion-block [`cf8a7a6`](https://github.com/eea/volto-clms-theme/commit/cf8a7a6909b1d38f855ef01f0642add7e882e804)
+- add modal when downloading files are prepackaged and mapviewer [`c974d37`](https://github.com/eea/volto-clms-theme/commit/c974d37f42fd13d0de53416c36ed4b8f8a8ba2c0)
+
 #### [1.0.75](https://github.com/eea/volto-clms-theme/compare/1.0.74...1.0.75)
 
+> 1 March 2022
+
+- New release [`#218`](https://github.com/eea/volto-clms-theme/pull/218)
 - add elvis operator [`#217`](https://github.com/eea/volto-clms-theme/pull/217)
 - no need to tinker with dates, we configure the listing in Volto [`#215`](https://github.com/eea/volto-clms-theme/pull/215)
 - use new placeholder image [`#216`](https://github.com/eea/volto-clms-theme/pull/216)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -30,7 +30,7 @@
     "@eeacms/volto-taxonomy"
   ],
   "dependencies": {
-    "@eeacms/volto-accordion-block": "3.4.7",
+    "@eeacms/volto-accordion-block": "3.4.13",
     "@eeacms/volto-arcgis-block": "*",
     "@eeacms/volto-clms-utils": "0.1.6",
     "@eeacms/volto-columns-block": "4.4.3",

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -4,7 +4,7 @@
  * @module components/CLMSDownloadCartView/CLMSCartContent
  */
 
-import { Checkbox, Segment, Select } from 'semantic-ui-react';
+import { Checkbox, Grid, Modal, Segment, Select } from 'semantic-ui-react';
 import React, { useEffect, useState } from 'react';
 import {
   getCartObjectFromMapviewer,
@@ -30,10 +30,16 @@ import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 const CLMSCartContent = (props) => {
   const { localSessionCart } = props;
   const dispatch = useDispatch();
-  const cart = useSelector((state) => state.cart_items.items);
   const { removeCartItem, removeCartItems } = useCartState();
+
+  // component states
+  const [openedModal, setOpenedModal] = useState(false);
   const [cartSelection, setCartSelection] = useState([]);
   const [loadingTable, setLoadingTable] = useState(false);
+  const [cartItems, setCartItems] = useState([]);
+
+  // state connections
+  const cart = useSelector((state) => state.cart_items.items);
   const post_download_in_progress = useSelector(
     (state) => state.downloadtool.post_download_in_progress,
   );
@@ -46,8 +52,6 @@ const CLMSCartContent = (props) => {
   );
   const nutsnames = useSelector((state) => state.nutsnames.nutsnames);
 
-  const [cartItems, setCartItems] = useState([]);
-
   useEffect(() => {
     dispatch(getProjections());
     dispatch(getFormatConversionTable());
@@ -139,7 +143,7 @@ const CLMSCartContent = (props) => {
     dispatch(getDownloadtool());
   };
 
-  function startDownloading() {
+  const startDownloading = () => {
     setLoadingTable(true);
     window.scrollTo(0, 0);
 
@@ -161,7 +165,21 @@ const CLMSCartContent = (props) => {
         setLoadingTable(false);
         toast.error(<Toast autoClose={5000} title={'Something went wrong.'} />);
       });
-  }
+  };
+
+  const downloadModal = () => {
+    let selectedItems = getSelectedCartItems();
+    const hasPrepackaged =
+      selectedItems.filter((item) => item.file_id).length > 0;
+    const hasMapSelection =
+      selectedItems.filter((item) => item.area).length > 0;
+    if (!(hasMapSelection && hasPrepackaged)) {
+      startDownloading();
+    } else {
+      setOpenedModal(true);
+    }
+  };
+
   const setProjectionValue = (unique_id, value) => {
     const objIndex = cartItems.findIndex((obj) => obj.unique_id === unique_id);
     cartItems[objIndex].projection = value;
@@ -346,12 +364,70 @@ const CLMSCartContent = (props) => {
       )}
       {cartItems?.length !== 0 && (
         <CclButton
-          onClick={() => startDownloading()}
+          onClick={() => downloadModal()}
           disabled={cartSelection.length === 0}
         >
           Start downloading
         </CclButton>
       )}
+      <Modal
+        // onClose={() => closeModal()}
+        // onOpen={() => openModal()}
+        open={openedModal}
+        // trigger={trigger}
+        className={'modal-clms'}
+        size={'fullscreen'}
+      >
+        <Modal.Header>Download processing</Modal.Header>
+        <Modal.Content>
+          <div className={'modal-clms-background'}>
+            <div className={'modal-clms-container'}>
+              {'The download is going to be processed in two different files.'}
+              <br />
+              <br />
+              <strong>Prepackaged files:</strong>
+              <ul>
+                {getSelectedCartItems()
+                  .filter((item) => item.file_id)
+                  .map((item, key) => (
+                    <li key={key}>{item.name}</li>
+                  ))}
+              </ul>
+              <br />
+              <strong>Map viewer selection:</strong>
+              <ul>
+                {getSelectedCartItems()
+                  .filter((item) => item.area)
+                  .map((item, key) => (
+                    <li key={key}>{item.name}</li>
+                  ))}
+              </ul>
+            </div>
+          </div>
+        </Modal.Content>
+        <Modal.Actions>
+          <Grid columns={2} stackable textAlign="center">
+            <Grid.Row verticalAlign="middle">
+              <Grid.Column>
+                <CclButton onClick={() => setOpenedModal(false)}>
+                  Cancel
+                </CclButton>
+              </Grid.Column>
+              <Grid.Column>
+                <CclButton
+                  mode={'filled'}
+                  onClick={() => {
+                    setOpenedModal(false);
+                    startDownloading();
+                  }}
+                >
+                  Accept
+                </CclButton>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Modal.Actions>
+      </Modal>
     </>
   );
 };