prevent deleting first accordion block child

eea · Nov 18, 2020 · f99fd66 · f99fd66
1 parent 3ee30e0
commit f99fd66
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 4 deletions.
diff --git a/src/components/manage/Blocks/Accordion/Edit.jsx b/src/components/manage/Blocks/Accordion/Edit.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { isEmpty } from 'lodash';
 import { BlocksForm } from '@eeacms/volto-blocks-form/components';
-import { Segment, Button } from 'semantic-ui-react';
+import { Segment, Button, Grid } from 'semantic-ui-react';
 import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
 import { SidebarPortal, Icon } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
@@ -125,8 +125,22 @@ const Edit = (props) => {
               >
                 {({ draginfo }, editBlock, blockProps) => (
                   <EditBlockWrapper
+                    accordionData={coldata}
+                    colId={colId}
                     draginfo={draginfo}
                     blockProps={blockProps}
+                    onChangeFormData={(newFormData) => {
+                      onChangeBlock(block, {
+                        ...data,
+                        data: {
+                          ...coldata,
+                          blocks: {
+                            ...coldata.blocks,
+                            [colId]: newFormData,
+                          },
+                        },
+                      });
+                    }}
                     extraControls={
                       <>
                         <Button

diff --git a/src/components/manage/Blocks/Accordion/EditBlockWrapper.jsx b/src/components/manage/Blocks/Accordion/EditBlockWrapper.jsx
@@ -7,6 +7,8 @@ import includes from 'lodash/includes';
 import isBoolean from 'lodash/isBoolean';
 import { defineMessages, injectIntl } from 'react-intl';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { deleteBlock } from './util';
+import { previousBlockId } from '@eeacms/volto-blocks-form/helpers';
 
 import dragSVG from '@plone/volto/icons/drag.svg';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
@@ -58,22 +60,40 @@ class EditBlockWrapper extends React.Component {
   blockNode = React.createRef();
 
   render() {
-    const { intl, blockProps, draginfo, extraControls, children } = this.props;
+    const {
+      intl,
+      blockProps,
+      draginfo,
+      extraControls,
+      children,
+      onChangeFormData,
+      accordionData,
+      colId,
+    } = this.props;
 
     const {
       allowedBlocks,
       block,
       data,
-      onDeleteBlock,
       onMutateBlock,
       selected,
+      onSelectBlock,
     } = blockProps;
     const type = data['@type'];
     const { disableNewBlocks } = data;
 
     // const visible = selected && blockHasValue(block) && !block.fixed;
     // visibility: visible ? 'visible' : 'hidden',
 
+    const onDeleteBlock = (id, selectPrev) => {
+      const previous = previousBlockId(accordionData, id, colId);
+
+      const newFormData = deleteBlock(accordionData, id, colId);
+      onChangeFormData(newFormData);
+
+      onSelectBlock(selectPrev ? previous : null);
+    };
+
     const required = isBoolean(data.required)
       ? data.required
       : includes(blocks.requiredBlocks, type);

diff --git a/src/components/manage/Blocks/Accordion/editor.less b/src/components/manage/Blocks/Accordion/editor.less
@@ -20,6 +20,12 @@
   .accordion-title {
     background: #f3f4f5;
   }
+
+  .block {
+    .block-add-button {
+      display: none;
+    }
+  }
 }
 
 .align-arrow-left {

diff --git a/src/components/manage/Blocks/Accordion/util.js b/src/components/manage/Blocks/Accordion/util.js
@@ -1,6 +1,7 @@
 import { v4 as uuid } from 'uuid';
 import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
-import { map } from 'lodash';
+import { map, omit, without, keys } from 'lodash';
+
 import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
@@ -40,3 +41,23 @@ export const GroupblockHasValue = (content) => {
   });
   return blockValue.length === 1 ? blockValue[0] : true;
 };
+
+export const deleteBlock = (formData, blockId, colId) => {
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const panelData = formData[blocksFieldname][colId];
+
+  return {
+    ...panelData,
+    [blocksLayoutFieldname]: {
+      items:
+        panelData[blocksLayoutFieldname].items.length > 1
+          ? without(panelData[blocksLayoutFieldname].items, blockId)
+          : panelData[blocksLayoutFieldname].items,
+    },
+    [blocksFieldname]:
+      keys(panelData[blocksFieldname]).length > 2
+        ? omit(panelData[blocksFieldname], [blockId])
+        : panelData[blocksFieldname],
+  };
+};