From 54057c72674c520370f6b840ed428cd786cff0ad Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Mon, 28 Sep 2020 08:37:02 +0300
Subject: [PATCH] Add layout field, WIP

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx | 27 +++++++++++++++++++++++----
 src/ColumnsBlock/schema.js            | 10 +++++++---
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index f00e826..e410884 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -15,6 +15,7 @@ import ColumnVariations from './ColumnVariations';
 import EditBlockWrapper from './EditBlockWrapper';
 
 import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
+import { variants } from '@eeacms/volto-columns-block/grid';
 import { makeStyleSchema, getStyle } from '@eeacms/volto-columns-block/Styles';
 
 import tuneSVG from '@plone/volto/icons/tune.svg';
@@ -118,6 +119,20 @@ class ColumnsBlockEdit extends React.Component {
     }
   };
 
+  getColumnsBlockSchema = () => {
+    const schema = ColumnsBlockSchema();
+    const { data } = this.props;
+    const { gridCols } = data;
+    console.log('gridcols', gridCols);
+    const available_variants = variants.filter(
+      ({ defaultData }) => defaultData.gridCols.length === gridCols.length,
+    );
+    schema.properties.layout.choices = available_variants.map(
+      ({ defaultData, title }) => [defaultData.gridCols, title],
+    );
+    return schema;
+  };
+
   render() {
     const { block, data, onChangeBlock, pathname, selected } = this.props;
 
@@ -223,12 +238,16 @@ class ColumnsBlockEdit extends React.Component {
               <>
                 <Segment>
                   <Button onClick={() => this.setState({ activeColumn: null })}>
-                    Edit column block
+                    Edit parent column block
                   </Button>
                 </Segment>
                 <InlineForm
                   schema={ColumnSchema}
-                  title="Edit column"
+                  title={`Column ${
+                    columnList
+                      .map(([colId]) => colId)
+                      .indexOf(this.state.activeColumn) + 1
+                  }`}
                   onChangeField={this.onChangeColumnSettings}
                   formData={
                     data?.coldata?.columns?.[this.state.activeColumn]
@@ -238,8 +257,8 @@ class ColumnsBlockEdit extends React.Component {
               </>
             ) : (
               <InlineForm
-                schema={ColumnsBlockSchema}
-                title="Edit columns block"
+                schema={this.getColumnsBlockSchema()}
+                title="Columns block"
                 onChangeField={(id, value) => {
                   onChangeBlock(block, {
                     ...data,
diff --git a/src/ColumnsBlock/schema.js b/src/ColumnsBlock/schema.js
index f8982d1..4b9b2f5 100644
--- a/src/ColumnsBlock/schema.js
+++ b/src/ColumnsBlock/schema.js
@@ -15,13 +15,13 @@ export const ColumnSchema = {
   required: [],
 };
 
-export const ColumnsBlockSchema = {
+export const ColumnsBlockSchema = () => ({
   title: 'Columns block',
   fieldsets: [
     {
       id: 'default',
       title: 'Default',
-      fields: ['block_title', 'coldata'], //  'nrColumns'
+      fields: ['coldata', 'layout'], //  'nrColumns', 'block_title'
     },
   ],
   properties: {
@@ -34,6 +34,10 @@ export const ColumnsBlockSchema = {
       type: 'columns',
       schema: ColumnSchema,
     },
+    layout: {
+      title: 'Layout',
+      choices: [],
+    },
   },
   required: ['title'],
-};
+});