Add layout field, WIP

eea · Sep 28, 2020 · 54057c7 · 54057c7
1 parent 470676f
commit 54057c7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git 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
@@ -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'],
-};
+});