Add record list configuration for columns text wrap

cortezaproject · Apr 8, 2024 · 267bb39 · 267bb39
1 parent 71e7640
commit 267bb39
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 24 deletions.
diff --git a/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue b/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue
@@ -33,6 +33,7 @@
       <field-picker
         :module="module"
         :fields.sync="filteredFields"
+        :field-subset="fieldSubset"
         style="height: 71vh;"
       />
     </b-modal>
@@ -78,6 +79,12 @@ export default {
       type: String,
       default: 'light',
     },
+
+    fieldSubset: {
+      type: Array,
+      required: false,
+      default: () => null,
+    },
   },
 
   data () {
@@ -89,8 +96,13 @@ export default {
   },
 
   watch: {
-    fields (fields) {
-      this.filteredFields = this.module.filterFields(fields)
+    fields: {
+      immediate: true,
+      handler (fields) {
+        if (fields) {
+          this.filteredFields = this.module.filterFields(fields)
+        }
+      },
     },
   },
 

diff --git a/client/web/compose/src/components/Common/FieldPicker.vue b/client/web/compose/src/components/Common/FieldPicker.vue
@@ -133,7 +133,9 @@ export default {
 
       let sysFields = []
 
-      if (!this.disableSystemFields) {
+      if (this.disableSystemFields && mFields) {
+        mFields = mFields.filter(({ isSystem }) => !isSystem)
+      } else if (!this.fieldSubset) {
         sysFields = this.module.systemFields().map(sf => {
           sf.label = this.$t(`field:system.${sf.name}`)
           return sf
@@ -142,10 +144,6 @@ export default {
         if (this.systemFields) {
           sysFields = sysFields.filter(({ name }) => this.systemFields.find(sf => sf === name))
         }
-      } else {
-        if (mFields) {
-          mFields = mFields.filter(({ isSystem }) => !isSystem)
-        }
       }
 
       if (!this.disableSorting && mFields) {

diff --git a/client/web/compose/src/components/ModuleFields/Viewer/DateTime.vue b/client/web/compose/src/components/ModuleFields/Viewer/DateTime.vue
@@ -10,10 +10,6 @@ export default {
       }
       return this.value ? this.field.formatValue(this.value) : null
     },
-
-    classes () {
-      return this.field.isMulti ? ['multiline'] : []
-    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/ModuleFields/Viewer/Email.vue b/client/web/compose/src/components/ModuleFields/Viewer/Email.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="classes">
     <span
       v-for="(v, index) of formattedValue"
       :key="index"

diff --git a/client/web/compose/src/components/ModuleFields/Viewer/Geometry.vue b/client/web/compose/src/components/ModuleFields/Viewer/Geometry.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="classes">
     <span
       v-for="(c, index) of localValue"
       :key="index"

diff --git a/client/web/compose/src/components/ModuleFields/Viewer/String.vue b/client/web/compose/src/components/ModuleFields/Viewer/String.vue
@@ -6,7 +6,7 @@
     >
       <p
         :style="{ 'white-space': field.options.useRichTextEditor && 'pre-line' }"
-        :class="{ 'multiline': field.isMulti || field.options.multiLine }"
+        :class="[ 'multiline' && field.isMulti || field.options.multiLine, ...classes ]"
         v-html="formatted"
       />
     </div>
@@ -19,5 +19,21 @@ import base from './base'
 
 export default {
   extends: base,
+
+  computed: {
+    classes () {
+      const classes = []
+      const { fieldID } = this.field
+      const { textStyles = {} } = this.extraOptions
+
+      if (this.field.isMulti || this.field.options.multiLine) {
+        classes.push('multiline')
+      } else if (textStyles.noWrapFields && textStyles.noWrapFields.includes(fieldID)) {
+        classes.push('text-nowrap')
+      }
+
+      return classes
+    },
+  },
 }
 </script>
diff --git a/client/web/compose/src/components/ModuleFields/Viewer/Url.vue b/client/web/compose/src/components/ModuleFields/Viewer/Url.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="classes">
     <span
       v-for="(v, index) of formattedValue"
       :key="index"

diff --git a/client/web/compose/src/components/ModuleFields/Viewer/base.vue b/client/web/compose/src/components/ModuleFields/Viewer/base.vue
@@ -67,10 +67,17 @@ export default {
     },
 
     classes () {
+      const classes = []
+      const { fieldID } = this.field
+      const { textStyles = {} } = this.extraOptions
+
       if (this.field.isMulti) {
-        return ['multiline']
+        classes.push('multiline')
+      } else if (textStyles.noWrapFields && textStyles.noWrapFields.includes(fieldID)) {
+        classes.push('text-nowrap')
       }
-      return []
+
+      return classes
     },
 
     options () {

diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -86,7 +86,12 @@
                 class="mb-3"
                 style="height: 40vh;"
               />
+            </b-col>
 
+            <b-col
+              cols="12"
+              md="6"
+            >
               <b-form-group
                 :label="$t('recordList.hideConfigureFieldsButton')"
                 label-class="text-primary"
@@ -99,6 +104,27 @@
                 />
               </b-form-group>
             </b-col>
+
+            <b-col
+              cols="12"
+              md="6"
+            >
+              <b-form-group
+                :label="$t('recordList.record.textStyles')"
+                label-class="text-primary"
+              >
+                <column-picker
+                  size="sm"
+                  variant="light"
+                  :module="recordListModule"
+                  :fields="options.textStyles.noWrapFields || []"
+                  :field-subset="options.fields.length ? options.fields : recordListModule.fields"
+                  @updateFields="onUpdateTextWrapOption"
+                >
+                  {{ $t('recordList.record.configureNonWrappingFelids') }}
+                </column-picker>
+              </b-form-group>
+            </b-col>
           </b-row>
         </div>
 
@@ -854,6 +880,7 @@ import AutomationTab from './Shared/AutomationTab'
 import FieldPicker from 'corteza-webapp-compose/src/components/Common/FieldPicker'
 import RecordListFilter from 'corteza-webapp-compose/src/components/Common/RecordListFilter'
 import { components } from '@cortezaproject/corteza-vue'
+import ColumnPicker from 'corteza-webapp-compose/src/components/Admin/Module/Records/ColumnPicker'
 const { CInputPresort } = components
 
 export default {
@@ -869,6 +896,7 @@ export default {
     CInputPresort,
     RecordListFilter,
     Draggable,
+    ColumnPicker,
   },
 
   extends: base,
@@ -906,6 +934,13 @@ export default {
       ]
     },
 
+    textWrapDisplayOptions () {
+      return [
+        { value: 'text-wrap', text: this.$t('recordList.record.wrapText') },
+        { value: 'text-nowrap', text: this.$t('recordList.record.showFullText') },
+      ]
+    },
+
     moduleOptions () {
       return [
         { moduleID: NoID, name: this.$t('general.label.none') },
@@ -1067,6 +1102,12 @@ export default {
       this.checkboxLabel = {}
       this.roleOptions = []
     },
+
+    onUpdateTextWrapOption (fields = []) {
+      if (this.options.textStyles.noWrapFields) {
+        this.options.textStyles.noWrapFields = fields.map(f => f.fieldID)
+      }
+    },
   },
 }
 </script>

diff --git a/lib/js/src/compose/types/page-block/record-list.ts b/lib/js/src/compose/types/page-block/record-list.ts
@@ -51,26 +51,30 @@ export interface Options {
   positionField?: string;
   refField?: string;
   editFields?: unknown[];
-  
+
   // When adding a new record, link it to parent when available
   linkToParent: boolean;
-  
+
   // Should records be opened in a new tab
   // legacy field that has been removed but we keep it for backwards compatibility
   openInNewTab: boolean;
-  
+
   // Are table rows selectable
   selectable: boolean;
   selectMode: 'multi' | 'single' | 'range';
-  
+
   // Ordered list of buttons to display in the block
   selectionButtons: Array<Button>;
-  
+
   bulkRecordEditEnabled: boolean;
   inlineRecordEditEnabled: boolean;
   filterPresets: FilterPreset[];
   showRecordPerPageOption: boolean;
   openRecordInEditMode: boolean;
+
+  textStyles: {
+    noWrapFields: Array<string>
+  }
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -126,6 +130,10 @@ const defaults: Readonly<Options> = Object.freeze({
   filterPresets: [],
   showRecordPerPageOption: false,
   openRecordInEditMode: false,
+
+  textStyles: {
+    noWrapFields: [],
+  },
 })
 
 export class PageBlockRecordList extends PageBlock {
@@ -152,7 +160,7 @@ export class PageBlockRecordList extends PageBlock {
       'recordDisplayOption',
       'magnifyOption',
       'recordSelectorDisplayOption',
-      'addRecordDisplayOption'
+      'addRecordDisplayOption',
     )
 
     Apply(this.options, o, Number, 'perPage', 'refreshRate')
@@ -207,6 +215,10 @@ export class PageBlockRecordList extends PageBlock {
     if (o.selectionButtons) {
       this.options.selectionButtons = o.selectionButtons.map(b => new Button(b))
     }
+
+    if (o.textStyles) {
+      this.options.textStyles = o.textStyles
+    }
   }
 
   async fetch (api: ComposeAPI, recordListModule: Module, filter: {[_: string]: unknown}): Promise<object> {

diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
@@ -501,6 +501,9 @@ recordList:
     recordDisplayOptions: On record click
     recordSelectorDisplayOptions: On record selector click
     addRecordOptions: On add record click 
+    textStyles: Text Styles
+    configureNonWrappingFelids: Configure non-wrapping fields
+    showFullText: Show full text
   recordPage: record page
   refField:
     footnote: Field that links records with the parent record
@@ -856,4 +859,4 @@ tabs:
     addBlock: Add new block
 
 noConfiguration: Block not configured correctly
-interpolationFootnote: Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)
+interpolationFootnote: Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)