Feature/FOUR-18109: STORY Column Configuration for Collections y Record List

src/DataProvider.js

@@ -303,7 +303,7 @@ export default {
       .catch((error) => {
         if (error.response && error.response.status === 404) {
           const data = { data: [] };
-          return [data, nonce];
+          return [data];
         }
         throw error;
       });

src/components/accordions.js

@@ -47,6 +47,7 @@ export default [
     },
     fields: [
       'fields',
+      'paginationOption',
       { name: 'options', hideFor: 'FormMultiColumn' },
     ],
     open: false,

src/components/inspector/collection-data-source.vue

@@ -7,13 +7,18 @@
           v-model="sourceOptions"
           :options="sourceDisplayOptions"
           data-cy="inspector-collection-data-source"
+          @change="displayOptionChange"
         />
+        <small class="form-text text-muted">{{
+        $t("A record list can display the data of a defined variable or a collection")
+      }}</small>
       </div>
       <div class="mt-2" v-if="sourceOptions === 'Collection'">
 
          <CollectionRecordsList 
          v-model="collectionFields"
-         :record-pmql="pmql"/>
+         :record-pmql="pmql"
+         @change="collectionChanged"/>
 
          <pmql-input
         v-model="pmql"
@@ -27,7 +32,7 @@
       >
       </pmql-input>
       <small class="form-text text-muted">{{
-        $t("Advanced data search")
+        $t("Leave this field empty to show all the records of the collection")
       }}</small>
         <label for="collectionsource">{{ $t("Data Selection") }}</label>
 
@@ -50,9 +55,11 @@
   <script>
 
   import CollectionRecordsList from "./collection-records-list.vue"
+  import { cloneDeep } from "lodash";
 
   const CONFIG_FIELDS = [
     "collectionFields",
+    "collectionFieldsColumns",
     "pmql",
     "sourceOptions"
 
@@ -69,6 +76,7 @@
         submitCollectionCheck: true,
         sourceDisplayOptions: [],
         collectionFields: [],
+        collectionFieldsColumns: [],
         pmql: null,
         sourceDisplayOptions: [
         {
@@ -82,6 +90,47 @@
       ]
       };
     },
+    methods: {
+      displayOptionChange() {
+        this.collectionFields = [];
+        this.collectionFieldsColumns = [];
+        this.pmql = null;
+        this.$root.$emit("collection-changed", true);
+      },
+      collectionChanged(data) {
+        if (Array.isArray(data)) {
+            const [firstItem] = data;
+            const collectionId = firstItem?.collection_id;
+            if(collectionId !== this.collectionFields.collectionId) {
+              this.$root.$emit("collection-changed", true);
+            }
+        }
+      },
+      changeCollectionColumns(columnsSelected) {
+        let selectedKeys = columnsSelected.map(column => column.content);
+
+        if (Array.isArray(this.collectionFieldsColumns?.dataRecordList)) {
+          this.collectionFieldsColumns.dataRecordList.forEach(record => {
+            let dataObject = record.data;
+
+            if (dataObject && typeof dataObject === 'object') {
+              Object.keys(dataObject).forEach(key => {
+                if (!selectedKeys.includes(key)) {
+                  delete dataObject[key];
+                } else {
+                  const matchingColumn = columnsSelected.find(column => column.content === key);
+
+                  if (matchingColumn && matchingColumn.key !== key) {
+                    dataObject[matchingColumn.key] = dataObject[key];
+                    delete dataObject[key];
+                  }
+                }
+              });
+            } 
+          });
+        }
+      }
+    },
     computed: {
       options() {
         return Object.fromEntries(
@@ -100,10 +149,16 @@
         immediate: true
       },
       sourceOptions: {
-        handler() {
-
+        handler(changeOption) {
+           this.$root.$emit("record-list-option", changeOption);
         }
       },
+      collectionFields: {
+        handler(collectionFieldsData) {
+           this.$root.$emit("record-list-collection", collectionFieldsData);
+        },
+        deep: true
+      },
       pmql: {
         handler(newPmql) {
             this.$root.$emit("change-pmql", newPmql);

src/components/inspector/collection-records-list.vue

@@ -76,7 +76,6 @@ export default {
   mounted() {
     this.$root.$on("change-pmql", (val) => {
       this.pmql = val;
-      this.onCollectionChange();
     });
     this.getCollections();
     if (this.collectionId) {
@@ -85,13 +84,12 @@ export default {
   },
   methods: {
     onCollectionChange() {
-      let param = {params:{pmql:this.pmql}};
-      const validParam = this.validatePmqlString(param.params.pmql) ? param : null;
       this.$dataProvider
-        .getCollectionRecordsList(this.collectionId, validParam)
+        .getCollectionRecordsList(this.collectionId)
         .then((response) => {
           this.dataRecordList = response.data;
         });
+      this.$emit('change', this.dataRecordList);
     },
     getCollections() {
       this.$dataProvider.getCollections().then((response) => {
@@ -106,10 +104,6 @@ export default {
         ];
       });
     },
-    validatePmqlString(pmql) {
-      const pmqlRegex = /^[a-zA-Z_][a-zA-Z0-9_]*\s*(=|<|>|<=|>=|!=)\s*('[^']*'|[0-9]+)$/;
-      return pmqlRegex.test(pmql);
-    },
     getFields() {
       if (!this.collectionId) {
         return;