Working automatic replacement of last block in column

eea · Oct 9, 2020 · 0726bc7 · 0726bc7
1 parent b905b92
commit 0726bc7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid, Segment } from 'semantic-ui-react';
-import { isEmpty } from 'lodash';
+import { isEmpty, clone } from 'lodash';
 import { SidebarPortal, Icon } from '@plone/volto/components'; // BlocksForm, Icon,
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
@@ -11,7 +11,7 @@ import { Button } from 'semantic-ui-react';
 import { blocks } from '~/config';
 
 import { ColumnsBlockSchema } from './schema';
-import { getColumns, empty } from './utils';
+import { getColumns, empty, defaultNewColumn } from './utils';
 import ColumnVariations from './ColumnVariations';
 import EditBlockWrapper from './EditBlockWrapper';
 
@@ -150,6 +150,23 @@ class ColumnsBlockEdit extends React.Component {
         });
       }
     }
+
+    // fill empty columns
+    if (this.props.data.data?.blocks) {
+      for (const colId in this.props.data.data?.blocks) {
+        const col = clone(this.props.data.data?.blocks[colId]);
+
+        if (col.blocks_layout.items.length === 0) {
+          const newCol = defaultNewColumn();
+
+          const fd = clone(this.props.properties);
+          fd.blocks[this.props.block].data.blocks[colId] = newCol;
+
+          this.props.onChangeField('blocks', fd.blocks);
+          this.props.onChangeField('blocks_layout', fd.blocks_layout);
+        }
+      }
+    }
   }
 
   render() {

diff --git a/src/ColumnsBlock/EditBlockWrapper.jsx b/src/ColumnsBlock/EditBlockWrapper.jsx
@@ -12,8 +12,6 @@ import dragSVG from '@plone/volto/icons/drag.svg';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
-import { getColumns } from './utils';
-
 const messages = defineMessages({
   unknownBlock: {
     id: 'Unknown Block',
@@ -76,8 +74,6 @@ class EditBlockWrapper extends React.Component {
     // const visible = selected && blockHasValue(block) && !block.fixed;
     // visibility: visible ? 'visible' : 'hidden',
 
-    const showDeleteButton = getColumns(blockProps.properties).length > 1;
-
     const required = isBoolean(data.required)
       ? data.required
       : includes(blocks.requiredBlocks, type);
@@ -129,7 +125,7 @@ class EditBlockWrapper extends React.Component {
                   <Icon name={addSVG} className="" size="19px" />
                 </Button>
               )}
-              {!required && showDeleteButton && (
+              {!required && (
                 <Button
                   icon
                   basic

diff --git a/src/ColumnsBlock/utils.js b/src/ColumnsBlock/utils.js
@@ -1,5 +1,6 @@
 import { v4 as uuid } from 'uuid';
 import { emptyBlocksForm } from '@eeacms/volto-blocks-form/helpers';
+import { settings } from '~/config';
 
 export const getColumns = (data) => {
   return (data?.blocks_layout?.items || []).map((id) => [
@@ -24,3 +25,13 @@ export const empty = (count) => {
     },
   };
 };
+
+export const defaultNewColumn = () => {
+  const id = uuid();
+  return {
+    blocks: { [id]: { '@type': settings.defaultBlockType } },
+    blocks_layout: {
+      items: [id],
+    },
+  };
+};