@eeacms/volto-group-block 5.0.0 → 6.0.0

package/.project.eslintrc.js

@@ -1,7 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project');    // __dirname
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
 const packageJson = require(path.join(projectRootPath, 'package.json'));
 const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
 

package/CHANGELOG.md

@@ -4,11 +4,23 @@ 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).
 
-### [5.0.0](https://github.com/eea/volto-group-block/compare/4.3.8...5.0.0) - 27 October 2022
+### [6.0.0](https://github.com/eea/volto-group-block/compare/5.0.1...6.0.0) - 24 March 2023
+
+#### :hammer_and_wrench: Others
+
+- (feat): Possibility to copy/cut/paste blocks within section group block - refs #157469 [dobri1408 - [`e9fc098`](https://github.com/eea/volto-group-block/commit/e9fc09825ba2ae258feb77864491d97d94c585b4)]
+- test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`2f42e7c`](https://github.com/eea/volto-group-block/commit/2f42e7c19a1da5a9c6a883cb4f101e8fa224ff94)]
+### [5.0.1](https://github.com/eea/volto-group-block/compare/5.0.0...5.0.1) - 16 November 2022
 
 #### :nail_care: Enhancements
 
-- refactor: Latest volto compatibility [Miu Razvan - [`f4d7a93`](https://github.com/eea/volto-group-block/commit/f4d7a933c166d5501a5e147fdd6664840a67047e)]
+- change(group): use BlockDataForm instead of InlineForm for schema enhancer support within Edit block view [David Ichim - [`9211075`](https://github.com/eea/volto-group-block/commit/921107596d19b96f2d749d59763b8f9909c469f2)]
+
+#### :hammer_and_wrench: Others
+
+- test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`9f995f7`](https://github.com/eea/volto-group-block/commit/9f995f73f9866643c944ce44175b45d2f16dffca)]
+- test(cypress): Rename [Alin Voinea - [`814d50c`](https://github.com/eea/volto-group-block/commit/814d50c7c88ab2675c4d7f042feff6aa233c1c7e)]
+## [5.0.0](https://github.com/eea/volto-group-block/compare/4.3.8...5.0.0) - 27 October 2022
 
 #### :hammer_and_wrench: Others
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "volto-group-block: Volto block to be used to group other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,10 +18,9 @@
     "type": "git",
     "url": "git@github.com:eea/volto-group-block.git"
   },
-  "dependencies": {},
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },

package/src/components/manage/Blocks/Group/Edit.jsx

@@ -1,12 +1,16 @@
 import React, { useState } from 'react';
-import { isEmpty } from 'lodash';
+import { isEmpty, without } from 'lodash';
 import {
   BlocksForm,
   SidebarPortal,
   Icon,
-  InlineForm,
+  BlockDataForm,
+  BlocksToolbar,
 } from '@plone/volto/components';
-import { emptyBlocksForm } from '@plone/volto/helpers';
+import {
+  emptyBlocksForm,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
 import delightedSVG from '@plone/volto/icons/delighted.svg';
 import dissatisfiedSVG from '@plone/volto/icons/dissatisfied.svg';
 import PropTypes from 'prop-types';
@@ -28,15 +32,72 @@ const Edit = (props) => {
     manage,
     formDescription,
   } = props;
+  const onSelectBlock = (id, isMultipleSelection, event, activeBlock) => {
+    let newMultiSelected = [];
+    let selected = id;
+
+    if (isMultipleSelection) {
+      selected = null;
+      const blocksLayoutFieldname = getBlocksLayoutFieldname(data?.data);
+      const blocks_layout = data?.data[blocksLayoutFieldname].items;
+      if (event.shiftKey) {
+        const anchor =
+          multiSelected.length > 0
+            ? blocks_layout.indexOf(multiSelected[0])
+            : blocks_layout.indexOf(activeBlock);
+        const focus = blocks_layout.indexOf(id);
+        if (anchor === focus) {
+          newMultiSelected = [id];
+        } else if (focus > anchor) {
+          newMultiSelected = [...blocks_layout.slice(anchor, focus + 1)];
+        } else {
+          newMultiSelected = [...blocks_layout.slice(focus, anchor + 1)];
+        }
+      }
+      if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
+        if (multiSelected.includes(id)) {
+          selected = null;
+          newMultiSelected = without(multiSelected, id);
+        } else {
+          newMultiSelected = [...(multiSelected || []), id];
+        }
+      }
+    }
 
+    setSelectedBlock(selected);
+    setMultiSelected(newMultiSelected);
+  };
   const metadata = props.metadata || props.properties;
+  const [multiSelected, setMultiSelected] = useState([]);
   const data_blocks = data?.data?.blocks;
   const properties = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
 
   const [selectedBlock, setSelectedBlock] = useState(
     properties.blocks_layout.items[0],
   );
-
+  const changeBlockData = (newBlockData) => {
+    let pastedBlocks = newBlockData.blocks_layout.items.filter((blockID) => {
+      if (data?.data?.blocks_layout.items.find((x) => x === blockID))
+        return false;
+      return true;
+    });
+    const selectedIndex =
+      data.data.blocks_layout.items.indexOf(selectedBlock) + 1;
+    onChangeBlock(block, {
+      ...data,
+      data: {
+        ...data?.data,
+        ...newBlockData,
+        blocks_layout: {
+          items: [
+            ...data.data.blocks_layout.items.slice(0, selectedIndex),
+            ...pastedBlocks,
+            ...data.data.blocks_layout.items.slice(selectedIndex),
+          ],
+        },
+      },
+    });
+  };
   React.useEffect(() => {
     if (
       isEmpty(data_blocks) &&
@@ -165,6 +226,28 @@ const Edit = (props) => {
       >
         {data.title || 'Section'}
       </legend>
+      {selected ? (
+        <BlocksToolbar
+          selectedBlock={Object.keys(selectedBlock || {})[0]}
+          selectedBlocks={multiSelected}
+          onSetSelectedBlocks={(blockIds) => {
+            setMultiSelected(blockIds);
+          }}
+          formData={data.data}
+          onSelectBlock={(id, l, e) => {
+            const isMultipleSelection = e
+              ? e.shiftKey || e.ctrlKey || e.metaKey
+              : false;
+
+            onSelectBlock(id, isMultipleSelection, e, selectedBlock);
+          }}
+          onChangeBlocks={(newBlockData) => {
+            changeBlockData(newBlockData);
+          }}
+        />
+      ) : (
+        ''
+      )}
       <BlocksForm
         metadata={metadata}
         properties={properties}
@@ -173,8 +256,11 @@ const Edit = (props) => {
         allowedBlocks={data.allowedBlocks}
         title={data.placeholder}
         description={instructions}
-        onSelectBlock={(id) => {
-          setSelectedBlock(id);
+        onSelectBlock={(id, l, e) => {
+          const isMultipleSelection = e
+            ? e.shiftKey || e.ctrlKey || e.metaKey
+            : false;
+          onSelectBlock(id, isMultipleSelection, e, selectedBlock);
         }}
         onChangeFormData={(newFormData) => {
           onChangeBlock(block, {
@@ -223,6 +309,7 @@ const Edit = (props) => {
                 )}
               </>
             }
+            multiSelected={multiSelected.includes(blockProps.block)}
           >
             {editBlock}
           </EditBlockWrapper>
@@ -237,7 +324,7 @@ const Edit = (props) => {
           </Segment>
         )}
         {!data?.readOnlySettings && (
-          <InlineForm
+          <BlockDataForm
             schema={EditSchema}
             title="Section (Group) settings"
             formData={data}