Add record block layout options (wrap, no wrap)

cortezaproject · Sep 26, 2024 · 3c55de3 · 3c55de3
1 parent a60c65b
commit 3c55de3
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 8 deletions.
diff --git a/client/web/compose/src/components/ModuleFields/Editor/String.vue b/client/web/compose/src/components/ModuleFields/Editor/String.vue
@@ -17,7 +17,7 @@
       >
         <span
           :title="label"
-          class="d-inline-block mw-100"
+          class="d-flex"
         >
           {{ label }}
         </span>
@@ -26,6 +26,7 @@
 
         <slot name="tools" />
       </div>
+
       <div
         class="small text-muted"
         :class="{ 'mb-1': description }"

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Url.vue b/client/web/compose/src/components/ModuleFields/Editor/Url.vue
@@ -11,7 +11,7 @@
     >
       <div
         v-if="!valueOnly"
-        class="d-flex align-items-center text-primary p-0"
+        class="d-flex align-items-center text-primary px-0"
       >
         <span
           :title="label"
@@ -47,6 +47,7 @@
         lazy-formatter
       />
     </multi>
+
     <template
       v-else
     >

diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
@@ -12,7 +12,9 @@
 
     <div
       v-else-if="fieldModule"
+      ref="fieldContainer"
       class="mt-3 px-3"
+      :class="fieldLayoutClass"
     >
       <template v-for="field in fields">
         <b-form-group
@@ -23,13 +25,14 @@
           :label-cols-xl="options.horizontalFieldLayoutEnabled && '5'"
           :content-cols-md="options.horizontalFieldLayoutEnabled && '6'"
           :content-cols-xl="options.horizontalFieldLayoutEnabled && '7'"
-          class="field-container mb-3"
+          :class="columnWrapClass"
+          :style="fieldWidth"
         >
           <template #label>
             <div
               class="d-flex text-primary mb-0"
             >
-              <span class="d-inline-block mw-100">
+              <span class="d-flex">
                 {{ field.label || field.name }}
               </span>
 
@@ -108,6 +111,7 @@ import BulkEditModal from 'corteza-webapp-compose/src/components/Public/Record/B
 import users from 'corteza-webapp-compose/src/mixins/users'
 import records from 'corteza-webapp-compose/src/mixins/records'
 import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'
+import recordLayout from 'corteza-webapp-compose/src/mixins/recordLayout'
 
 export default {
   i18nOptions: {
@@ -125,6 +129,7 @@ export default {
     users,
     records,
     conditionalFields,
+    recordLayout,
   ],
 
   data () {
@@ -160,6 +165,16 @@ export default {
       })
     },
 
+    fieldLayoutClass () {
+      const classes = {
+        default: 'd-flex flex-column',
+        noWrap: 'd-flex gap-2',
+        wrap: 'row no-gutters',
+      }
+
+      return classes[this.options.recordFieldLayoutOption]
+    },
+
     fieldModule () {
       return this.options.referenceField ? this.referenceModule : this.module
     },
@@ -171,6 +186,14 @@ export default {
     processing () {
       return !this.fieldRecord || this.evaluating
     },
+
+    fieldWidth () {
+      if (this.options.recordFieldLayoutOption !== 'noWrap') {
+        return {}
+      }
+
+      return { 'min-width': '13rem' }
+    },
   },
 
   watch: {
@@ -213,6 +236,29 @@ export default {
         }
       },
     },
+
+    processing: {
+      handler (newVal) {
+        if (this.options.recordFieldLayoutOption !== 'wrap') return
+
+        if (!newVal && this.fieldModule) {
+          this.$nextTick(() => {
+            this.initializeResizeObserver(this.$refs.fieldContainer, this.options.recordFieldLayoutOption)
+          })
+        }
+      },
+    },
+
+    'options.recordFieldLayoutOption': {
+      handler (newVal) {
+        if (newVal === 'wrap' && this.fieldModule) {
+          this.initializeResizeObserver(this.$refs.fieldContainer, this.options.recordFieldLayoutOption)
+        } else if (this.resizeObserver) {
+          this.resizeObserver.unobserve(this.$refs.fieldContainer)
+          this.columnWrapClass = ''
+        }
+      },
+    },
   },
 
   beforeDestroy () {
@@ -318,3 +364,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.field-col > * {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+</style>
diff --git a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -50,6 +50,7 @@
             <c-input-checkbox
               v-model="options.horizontalFieldLayoutEnabled"
               switch
+              :disabled="options.recordFieldLayoutOption === 'noWrap'"
               :labels="checkboxLabel"
             />
           </b-form-group>
@@ -124,6 +125,24 @@
             />
           </b-form-group>
         </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('record.fieldsLayoutMode.label')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.recordFieldLayoutOption"
+              :options="recordFieldLayoutOptions"
+              :reduce="option => option.value"
+              :get-option-key="option => option.label"
+              @input="handleRecordFieldLayout"
+            />
+          </b-form-group>
+        </b-col>
       </b-row>
     </div>
 
@@ -295,6 +314,14 @@ export default {
       ]
     },
 
+    recordFieldLayoutOptions () {
+      return [
+        { value: 'default', label: this.$t('record.fieldsLayoutMode.default') },
+        { value: 'noWrap', label: this.$t('record.fieldsLayoutMode.noWrap') },
+        { value: 'wrap', label: this.$t('record.fieldsLayoutMode.wrap') },
+      ]
+    },
+
     recordSelectorFields () {
       return this.module.fields.filter(f => f.kind === 'Record' && !f.isMulti)
     },
@@ -374,6 +401,12 @@ export default {
           })
       }
     },
+
+    handleRecordFieldLayout (v) {
+      if (v !== 'noWrap') return
+
+      this.block.options.horizontalFieldLayoutEnabled = false
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
@@ -13,13 +13,16 @@
 
     <div
       v-else-if="module"
-      class="mt-3 px-3"
+      ref="fieldContainer"
+      class="mt-3"
+      :class="fieldLayoutClass"
     >
       <template v-for="field in fields">
         <div
           v-if="canDisplay(field)"
           :key="field.id"
-          class="field-container mb-3"
+          :class="columnWrapClass"
+          :style="fieldWidth"
         >
           <field-editor
             v-if="isFieldEditable(field)"
@@ -41,7 +44,9 @@
               <div
                 class="d-flex align-items-center text-primary mb-0"
               >
-                <span class="d-inline-block mw-100">
+                <span
+                  class="d-flex"
+                >
                   {{ field.label || field.name }}
                 </span>
 
@@ -90,6 +95,7 @@ import records from 'corteza-webapp-compose/src/mixins/records'
 import FieldEditor from 'corteza-webapp-compose/src/components/ModuleFields/Editor'
 import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
 import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'
+import recordLayout from 'corteza-webapp-compose/src/mixins/recordLayout'
 import { debounce } from 'lodash'
 
 export default {
@@ -108,6 +114,7 @@ export default {
     users,
     records,
     conditionalFields,
+    recordLayout,
   ],
 
   props: {
@@ -137,6 +144,24 @@ export default {
       })
     },
 
+    fieldLayoutClass () {
+      const classes = {
+        default: 'd-flex flex-column px-3',
+        noWrap: 'd-flex gap-2 pl-3',
+        wrap: 'row no-gutters',
+      }
+
+      return classes[this.options.recordFieldLayoutOption]
+    },
+
+    fieldWidth () {
+      if (this.options.recordFieldLayoutOption !== 'noWrap') {
+        return {}
+      }
+
+      return { 'min-width': '20rem' }
+    },
+
     errorID () {
       const { recordID = NoID } = this.record || {}
       return recordID === NoID ? 'parent:0' : recordID
@@ -182,6 +207,25 @@ export default {
         })
       },
     },
+
+    processing: {
+      handler (newVal) {
+        if (this.options.recordFieldLayoutOption !== 'wrap') return
+
+        if (!newVal && this.module) {
+          this.$nextTick(() => {
+            this.initializeResizeObserver(this.$refs.fieldContainer)
+          })
+        } else if (this.resizeObserver) {
+          this.resizeObserver.unobserve(this.$refs.fieldContainer)
+          this.columnWrapClass = ''
+        }
+      },
+    },
+  },
+
+  beforeDestroy () {
+    this.destroyEvents(this.$refs.fieldContainer)
   },
 
   methods: {
@@ -210,3 +254,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.field-col > * {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+</style>
diff --git a/client/web/compose/src/mixins/recordLayout.js b/client/web/compose/src/mixins/recordLayout.js
@@ -0,0 +1,63 @@
+export default {
+  data () {
+    return {
+      resizeObserver: null,
+      columnWrapClass: '',
+    }
+  },
+
+  methods: {
+    initializeResizeObserver (el) {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          // Handle the resize event here
+          this.applyColumnClasses(entry.contentRect.width)
+        }
+      })
+
+      this.resizeObserver.observe(el)
+    },
+
+    applyColumnClasses (width) {
+      const breakpoints = {
+        xs: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+      }
+
+      const columnClasses = {
+        xs: 'col-12',
+        md: 'col-6',
+        lg: 'col-4',
+        xl: 'col-3',
+      }
+
+      let columnClass
+
+      switch (true) {
+        case width <= breakpoints.xs:
+          columnClass = columnClasses.xs
+          break
+        case width > breakpoints.xs && width <= breakpoints.md:
+          columnClass = columnClasses.md
+          break
+        case width > breakpoints.md && width <= breakpoints.lg:
+          columnClass = columnClasses.lg
+          break
+        default:
+          columnClass = columnClasses.xl
+          break
+      }
+
+      this.columnWrapClass = `field-col ${columnClass}`
+    },
+
+    destroyEvents (el) {
+      if (this.resizeObserver) {
+        this.resizeObserver.unobserve(el)
+        this.resizeObserver.disconnect()
+      }
+    },
+  },
+}