Add record list configuration for columns text wrap

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) {
+    fields: {
+      immediate: true,
+      handler (fields) {
+        if (fields) {
           this.filteredFields = this.module.filterFields(fields)
+        }
+      },
     },
   },
 

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) {

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>

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"

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"

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>

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"

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 () {

client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue

@@ -128,6 +128,27 @@
                 </b-form-text>
               </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>
 
@@ -825,6 +846,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, CInputRole } = components
 
 export default {
@@ -841,6 +863,7 @@ export default {
     RecordListFilter,
     Draggable,
     CInputRole,
+    ColumnPicker,
   },
 
   extends: base,
@@ -880,6 +903,13 @@ export default {
       ]
     },
 
+    textWrapDisplayOptions () {
+      return [
+        { value: 'text-wrap', text: this.$t('recordList.record.wrapText') },
+        { value: 'text-nowrap', text: this.$t('recordList.record.showFullText') },
+      ]
+    },
+
     recordListModule () {
       if (this.options.moduleID !== NoID) {
         return this.getModuleByID(this.options.moduleID)
@@ -1050,6 +1080,12 @@ export default {
       this.checkboxLabel = {}
       this.resolvedRoles = {}
     },
+
+    onUpdateTextWrapOption (fields = []) {
+      if (this.options.textStyles.noWrapFields) {
+        this.options.textStyles.noWrapFields = fields.map(f => f.fieldID)
+      }
+    },
   },
 }
 </script>

lib/js/src/compose/types/page-block/record-list.ts

@@ -69,6 +69,10 @@ export interface Options {
   filterPresets: FilterPreset[];
   showRecordPerPageOption: boolean;
   openRecordInEditMode: boolean;
+
+  textStyles: {
+    noWrapFields: Array<string>
+  }
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -124,6 +128,10 @@ const defaults: Readonly<Options> = Object.freeze({
   filterPresets: [],
   showRecordPerPageOption: false,
   openRecordInEditMode: false,
+
+  textStyles: {
+    noWrapFields: [],
+  },
 })
 
 export class PageBlockRecordList extends PageBlock {
@@ -150,7 +158,7 @@ export class PageBlockRecordList extends PageBlock {
       'recordDisplayOption',
       'magnifyOption',
       'recordSelectorDisplayOption',
-      'addRecordDisplayOption'
+      'addRecordDisplayOption',
     )
 
     Apply(this.options, o, Number, 'perPage', 'refreshRate')
@@ -205,6 +213,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> {

locale/en/corteza-webapp-compose/block.yaml

@@ -514,6 +514,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