Add configurable column fields on public page record list

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

@@ -846,6 +846,8 @@ export default {
 
       abortableRequests: [],
       recordsPerPage: undefined,
+
+      customConfiguredFields: [],
     }
   },
 
@@ -965,7 +967,9 @@ export default {
         ? []
         : this.options.editFields.map(({ name }) => name)
 
-      if (this.options.fields.length > 0) {
+      if (this.customConfiguredFields.length > 0) {
+        fields = this.recordListModule.filterFields(this.customConfiguredFields)
+      } else if (this.options.fields.length > 0) {
         fields = this.recordListModule.filterFields(this.options.fields)
       } else {
         // Record list block does not have any configured fields
@@ -1062,6 +1066,7 @@ export default {
         this.createEvents()
         this.getStorageRecordListFilter()
         this.getStorageRecordListFilterPreset()
+        this.getStorageRecordListConfiguredFields()
         this.prepRecordList()
         this.refresh(true)
       },
@@ -1167,9 +1172,32 @@ export default {
 
     onUpdateFields (fields = []) {
       this.options.fields = [...fields]
+      this.setStorageRecordListConfiguredFields()
+
       this.$emit('save-fields', this.options.fields)
     },
 
+    setStorageRecordListConfiguredFields () {
+      try {
+        // Get record list configured fields from localStorage
+        setItem(`record-list-configured-columns-${this.uniqueID}`, this.options.fields.map((f) => f.fieldID))
+      } catch (e) {
+        console.warn(this.$t('notification:record-list.corrupted-configured-fields'))
+      }
+    },
+
+    getStorageRecordListConfiguredFields () {
+      try {
+        // Get record list configured fields from localStorage
+        this.customConfiguredFields = getItem(`record-list-configured-columns-${this.uniqueID}`)
+      } catch (e) {
+        // Land here if the configured fields is corrupted
+        console.warn(this.$t('notification:record-list.corrupted-configured-fields'))
+        // Remove filter from the local storage
+        removeItem(`record-list-configured-columns-${this.uniqueID}`)
+      }
+    },
+
     onSelectRow (selected, item) {
       if (selected) {
         if (this.selected.includes(item.id)) {
@@ -1727,7 +1755,6 @@ export default {
 
       try {
         // Get record list filters from localStorage
-        currentListFilters = getItem(`record-list-filters-${this.uniqueID}`)
         currentListFilters = this.recordListFilter
         setItem(`record-list-filters-${this.uniqueID}`, currentListFilters)
       } catch (e) {

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

@@ -753,6 +753,10 @@
                 <b-form-checkbox v-model="options.hideRecordReminderButton">
                   {{ $t('recordList.hideRecordReminderButton') }}
                 </b-form-checkbox>
+
+                <b-form-checkbox v-model="options.hideConfigureFieldsButton">
+                  {{ $t('recordList.hideConfigureFieldsButton') }}
+                </b-form-checkbox>
               </b-form-group>
             </b-col>
           </b-row>

client/web/compose/src/views/Admin/Modules/Records/List.vue

@@ -178,6 +178,8 @@ export default {
     }),
 
     handleFieldsSave (fields = []) {
+      fields = fields.map((f) => f.fieldID)
+
       if (!this.module.meta.ui) {
         this.module.meta.ui = { admin: { fields } }
       } else {

lib/js/src/compose/types/module.ts

@@ -230,6 +230,12 @@ export class Module {
     }
 
     if (IsOf(m, 'meta')) {
+      if (m.meta.ui && m.meta.ui.admin && m.meta.ui.admin.fields) {
+        if (!AreStrings(m.meta.ui.admin.fields)) {
+          m.meta.ui.admin.fields = m.meta.ui.admin.fields.map((f: any) => f.fieldID)
+        }
+      }
+
       this.meta = { ...m.meta }
     }
 
@@ -301,19 +307,19 @@ export class Module {
     }
 
     if (!AreStrings(requested)) {
-      requested = (requested as ModuleField[]).map((f: ModuleField) => f.name)
+      requested = (requested as ModuleField[]).map((f: ModuleField) => f.name || f.fieldID)
     }
 
     const out: ModuleField[] = []
 
     for (const r of requested) {
-      const sf = this.systemFields().find(f => r === f.name)
+      const sf = this.systemFields().find(f => r === f.name ||  r === f.fieldID)
       if (sf) {
         out.push(sf)
         continue
       }
 
-      const mf = this.fields.find(f => r === f.name)
+      const mf = this.fields.find(f => r === f.name ||  r === f.fieldID)
       if (mf) {
         out.push(mf)
       }

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

@@ -373,6 +373,7 @@ recordList:
   hideRecordEditButton: Hide edit record button
   hideRecordPermissionsButton: Hide record permissions button
   hideRecordReminderButton: Hide record reminder button
+  hideConfigureFieldsButton: Hide configure columns
   hideRecordViewButton: Hide view record button
   enableRecordPageNavigation: Users will be able to navigate to previous/next record
   import:

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

@@ -166,6 +166,7 @@ record:
     failed: Failed to evaluate record block field conditions
 record-list:
   corrupted-filter: Corrupted filter
+  corrupted-configured-fields: Corrupted configured columns
   incorrect-filter-structure: Incorrect structure of filter {{filterID}}
 report:
   listFetchFailed: Failed to fetch reports