From fd3b34b2eb3eef332aa85abcf3155d9b37fc886e Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Fri, 29 May 2020 15:16:16 -0400
Subject: [PATCH] introduces sidebar fields

---
 demo/collections/AllFields.js                 |  6 ++
 .../components/forms/RenderFields/index.js    | 56 ++++++++++---------
 .../views/collections/Edit/Default.js         | 10 ++++
 .../views/collections/Edit/index.scss         | 16 +++++-
 4 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/demo/collections/AllFields.js b/demo/collections/AllFields.js
index 3f1c17186e..8b439277ee 100644
--- a/demo/collections/AllFields.js
+++ b/demo/collections/AllFields.js
@@ -59,6 +59,12 @@ const AllFields = {
       required: true,
       hasMany: true,
     },
+    {
+      name: 'checkbox',
+      type: 'checkbox',
+      label: 'Checkbox',
+      position: 'sidebar',
+    },
   ],
   timestamps: true,
 };
diff --git a/src/client/components/forms/RenderFields/index.js b/src/client/components/forms/RenderFields/index.js
index 812b789368..cf696b944e 100644
--- a/src/client/components/forms/RenderFields/index.js
+++ b/src/client/components/forms/RenderFields/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import './index.scss';
 
 const RenderFields = ({
-  fieldSchema, initialData, customComponents, fieldTypes,
+  fieldSchema, initialData, customComponents, fieldTypes, filter,
 }) => {
   if (fieldSchema) {
     return (
@@ -12,36 +12,40 @@ const RenderFields = ({
         {fieldSchema.map((field, i) => {
           const { defaultValue } = field;
           if (field?.hidden !== 'api' && field?.hidden !== true) {
-            let FieldComponent = field?.hidden === 'admin' ? fieldTypes.hidden : fieldTypes[field.type];
+            if ((filter && typeof filter === 'function' && filter(field)) || !filter) {
+              let FieldComponent = field?.hidden === 'admin' ? fieldTypes.hidden : fieldTypes[field.type];
 
-            if (customComponents?.[field.name]?.field) {
-              FieldComponent = customComponents[field.name].field;
-            }
+              if (customComponents?.[field.name]?.field) {
+                FieldComponent = customComponents[field.name].field;
+              }
+
+              if (FieldComponent) {
+                return (
+                  <FieldComponent
+                    fieldTypes={fieldTypes}
+                    key={field.name}
+                    {...field}
+                    validate={field.validate ? value => field.validate(value, field) : undefined}
+                    defaultValue={initialData[field.name] || defaultValue}
+                  />
+                );
+              }
 
-            if (FieldComponent) {
               return (
-                <FieldComponent
-                  fieldTypes={fieldTypes}
-                  key={field.name}
-                  {...field}
-                  validate={field.validate ? value => field.validate(value, field) : undefined}
-                  defaultValue={initialData[field.name] || defaultValue}
-                />
+                <div
+                  className="missing-field"
+                  key={i}
+                >
+                  No matched field found for
+                  {' '}
+                  &quot;
+                  {field.label}
+                  &quot;
+                </div>
               );
             }
 
-            return (
-              <div
-                className="missing-field"
-                key={i}
-              >
-                No matched field found for
-                {' '}
-                &quot;
-                {field.label}
-                &quot;
-              </div>
-            );
+            return null;
           }
 
           return null;
@@ -56,6 +60,7 @@ const RenderFields = ({
 RenderFields.defaultProps = {
   initialData: {},
   customComponents: {},
+  filter: null,
 };
 
 RenderFields.propTypes = {
@@ -67,6 +72,7 @@ RenderFields.propTypes = {
   fieldTypes: PropTypes.shape({
     hidden: PropTypes.func,
   }).isRequired,
+  filter: PropTypes.func,
 };
 
 export default RenderFields;
diff --git a/src/client/components/views/collections/Edit/Default.js b/src/client/components/views/collections/Edit/Default.js
index 0e7e228f51..9435ddc7fa 100644
--- a/src/client/components/views/collections/Edit/Default.js
+++ b/src/client/components/views/collections/Edit/Default.js
@@ -74,6 +74,7 @@ const DefaultEditView = (props) => {
               }
             </header>
             <RenderFields
+              filter={field => (!field.position || (field.position && field.position !== 'sidebar'))}
               fieldTypes={fieldTypes}
               fieldSchema={fields}
               initialData={data}
@@ -85,6 +86,15 @@ const DefaultEditView = (props) => {
             <PreviewButton generatePreviewURL={preview} />
             <FormSubmit>Save</FormSubmit>
           </div>
+          <div className={`${baseClass}__sidebar-fields`}>
+            <RenderFields
+              filter={field => field.position === 'sidebar'}
+              position="sidebar"
+              fieldTypes={fieldTypes}
+              fieldSchema={fields}
+              initialData={data}
+            />
+          </div>
           {isEditing && (
             <ul className={`${baseClass}__meta`}>
               <li>
diff --git a/src/client/components/views/collections/Edit/index.scss b/src/client/components/views/collections/Edit/index.scss
index e86d754077..80382165f4 100644
--- a/src/client/components/views/collections/Edit/index.scss
+++ b/src/client/components/views/collections/Edit/index.scss
@@ -8,6 +8,10 @@
     align-items: flex-start;
   }
 
+  &__main {
+    // max-width: base(20);
+  }
+
   &__header {
     h1 {
       word-break: break-all;
@@ -33,13 +37,14 @@
 
   &__sidebar {
     padding-bottom: base(1);
-    width: base(16);
+    width: base(20);
     display: flex;
     flex-direction: column;
   }
 
   &__document-actions,
-  &__meta {
+  &__meta,
+  &__sidebar-fields {
     padding-left: base(1.5);
   }
 
@@ -72,6 +77,10 @@
     }
   }
 
+  &__sidebar-fields {
+    margin-bottom: base(1.5);
+  }
+
   &__meta {
     margin: auto 0 0 0;
     list-style: none;
@@ -110,7 +119,8 @@
     }
 
     &__document-actions,
-    &__meta {
+    &__meta,
+    &__sidebar-fields {
       padding-left: $baseline;
     }