From fae1a32d8dab7e257e6f27d2982379a0522ff4eb Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 26 Sep 2024 19:34:43 -0400
Subject: [PATCH 1/8] Saving progress 1

---
 src/components/renderer/form-record-list.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 0d0f83f4b..3cad2f504 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -46,7 +46,7 @@
               <b-form-checkbox 
               v-model="selectedRows" 
               :value="item" 
-              @change="handleMultipleSelection()"/>
+              @change="onMultipleSelectionChange()"/>
             </template>
             <template v-if="isFiledownload(field, item)">
               <span href="#" @click="downloadFile(item, field.key, index)">{{
@@ -262,6 +262,13 @@ export default {
       collectionData: {},
       selectedRow: null,
       selectedRows: [], 
+      output: {
+        fields: {
+          carBrand: "",
+          year: null
+        }
+      },
+      onlyObject: {}
     };
   },
   computed: {
@@ -379,16 +386,19 @@ export default {
     this.$root.$emit("record-list-option", this.source?.sourceOptions);
   },
   methods: {
+    componentOutput(data) {
+      this.$emit('input',  data);
+    },
     onRadioChange(selectedItem) {
       if(this.source.singleField) {
         const valueOfColumn = selectedItem[this.source.singleField];
-        // TODO: Save this valueOfColumn into CUSTOM STORE variable required in next ticket
+        this.componentOutput(valueOfColumn);
       } else {
-        // TODO: Save the entire ROW into CUSTOM STORE variable required in next ticket
+        this.componentOutput(selectedItem);
       }
     },
-    handleMultipleSelection() {
-      // TODO: Save this.selectedRows into CUSTOM STORE variable required in next ticket
+    onMultipleSelectionChange() {
+      this.componentOutput(this.selectedRows);
     },
     onCollectionChange(collectionId,pmql) {
       let param = {params:{pmql:pmql}};

From 78bcc4184bb63fbc42772909a6418cdfc88dbe76 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Fri, 27 Sep 2024 10:19:28 -0400
Subject: [PATCH 2/8] saving progress record list output variable working ok

---
 src/components/renderer/form-record-list.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 3cad2f504..dfc5b02bc 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -321,6 +321,9 @@ export default {
         data: value,
         lastSortConfig: false
       };
+      console.log("this.value: ", this.value);
+      console.log("this.collectionData: ", this.collectionData);
+      console.log("tableData: ", data);
       return data;
     },
     // The fields used for our vue table
@@ -390,8 +393,9 @@ export default {
       this.$emit('input',  data);
     },
     onRadioChange(selectedItem) {
-      if(this.source.singleField) {
+      if(this.source?.singleField) {
         const valueOfColumn = selectedItem[this.source.singleField];
+        console.log("valueOfColumn: ", valueOfColumn);
         this.componentOutput(valueOfColumn);
       } else {
         this.componentOutput(selectedItem);

From 25774650757b84f462c1a3d46ea3c91939bff46e Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Fri, 27 Sep 2024 16:42:17 -0400
Subject: [PATCH 3/8] ready for PR

---
 .../inspector/collection-data-source.vue      |  7 -------
 src/components/renderer/form-record-list.vue  | 20 +++++++------------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/components/inspector/collection-data-source.vue b/src/components/inspector/collection-data-source.vue
index 76fcb4ef0..8b2e4c857 100644
--- a/src/components/inspector/collection-data-source.vue
+++ b/src/components/inspector/collection-data-source.vue
@@ -64,13 +64,6 @@
           v-model="quantityRecords"
           />
         </div>
-
-        <label class="mt-3">{{ $t("Variable to store selection") }}</label>
-        <b-input 
-          id="variable-store-selection"
-          v-model="variableStore"
-          placeholder="Variable Name"/>
-
       </div>
     </div>
   </template>
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index dfc5b02bc..a5af67299 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -261,14 +261,7 @@ export default {
       currentRowIndex: null,
       collectionData: {},
       selectedRow: null,
-      selectedRows: [], 
-      output: {
-        fields: {
-          carBrand: "",
-          year: null
-        }
-      },
-      onlyObject: {}
+      selectedRows: []
     };
   },
   computed: {
@@ -305,10 +298,14 @@ export default {
       console.log("refs vuetable not exists");
     },
     tableData() {
-      const value = Object.keys(this.collectionData).length !== 0 ? this.collectionData : (this.value || []);
+      const value = Array.isArray(this.collectionData) && this.collectionData.length
+        ? this.collectionData
+        : (Array.isArray(this.value) ? this.value : []);
+
       const from = this.paginatorPage - 1;
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.lastPage = Math.ceil(value.length / this.perPage);
+
       const data = {
         total: value.length,
         per_page: this.perPage,
@@ -321,10 +318,8 @@ export default {
         data: value,
         lastSortConfig: false
       };
-      console.log("this.value: ", this.value);
-      console.log("this.collectionData: ", this.collectionData);
-      console.log("tableData: ", data);
       return data;
+      
     },
     // The fields used for our vue table
     tableFields() {
@@ -395,7 +390,6 @@ export default {
     onRadioChange(selectedItem) {
       if(this.source?.singleField) {
         const valueOfColumn = selectedItem[this.source.singleField];
-        console.log("valueOfColumn: ", valueOfColumn);
         this.componentOutput(valueOfColumn);
       } else {
         this.componentOutput(selectedItem);

From b313a663f53b565f4e78a9dd445da4b7c7bfe6ca Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Mon, 30 Sep 2024 17:37:32 -0400
Subject: [PATCH 4/8] fixing pagination.spec.js

---
 src/components/inspector/page-select.vue | 1 +
 tests/e2e/specs/Pagination.spec.js       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/inspector/page-select.vue b/src/components/inspector/page-select.vue
index c761e3a5d..7f2b7d10e 100644
--- a/src/components/inspector/page-select.vue
+++ b/src/components/inspector/page-select.vue
@@ -9,6 +9,7 @@
       :show-labels="false"
       :options="options.map(option => option.value)"
       :custom-label="getLabelFromValue"
+      data-cy="inspector-eventData"
     >
       <template slot="noResult">
         {{ $t('No elements found. Consider changing the search query.') }}
diff --git a/tests/e2e/specs/Pagination.spec.js b/tests/e2e/specs/Pagination.spec.js
index 00f285903..20e16884e 100644
--- a/tests/e2e/specs/Pagination.spec.js
+++ b/tests/e2e/specs/Pagination.spec.js
@@ -76,7 +76,7 @@ beforeEach(() => {
   cy.get("[data-cy=screen-element-container]").click();
   cy.get("[data-cy=accordion-Configuration]").click();
   cy.get(".form-check-label").click();
-  cy.get("div.multiselect").click();
+  cy.get("[data-cy=inspector-eventData]").click();
   cy.get(
     '.multiselect__element > .multiselect__option span:contains("page2")'
   ).click();

From 1b85b3598c328049f31b14742d089e94974ca6df Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 1 Oct 2024 22:06:58 -0400
Subject: [PATCH 5/8] Merging last changes

---
 .../inspector/collection-data-source.vue      |  7 ---
 src/components/renderer/form-record-list.vue  | 62 ++++++++++++++++---
 2 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/components/inspector/collection-data-source.vue b/src/components/inspector/collection-data-source.vue
index 8b2e4c857..bc08411fd 100644
--- a/src/components/inspector/collection-data-source.vue
+++ b/src/components/inspector/collection-data-source.vue
@@ -57,13 +57,6 @@
         <option disabled value="">{{ $t("Select a column") }}</option>
           </b-form-select>
         </div>
-        <div class="mt-3" v-if="dataSelectionOptions === 'multiple-records'">
-          <label id="quantity-records">{{ $t('Quantity of selectable records') }}</label>
-         <b-input 
-          id="quantity-records"
-          v-model="quantityRecords"
-          />
-        </div>
       </div>
     </div>
   </template>
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index a5af67299..e7670bd5f 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -39,14 +39,15 @@
               <b-form-radio
                 v-model="selectedRow"
                 :value="item"
-                @change="onRadioChange(item)"
+                @change="onRadioChange(item, index)"
               />
             </template>
             <template v-if="field.key === 'checkbox'">
               <b-form-checkbox 
               v-model="selectedRows" 
-              :value="item" 
-              @change="onMultipleSelectionChange()"/>
+              :value="item"
+              :checked="selected"
+              @change="onMultipleSelectionChange(index)"/>
             </template>
             <template v-if="isFiledownload(field, item)">
               <span href="#" @click="downloadFile(item, field.key, index)">{{
@@ -261,7 +262,10 @@ export default {
       currentRowIndex: null,
       collectionData: {},
       selectedRow: null,
-      selectedRows: []
+      selectedRows: [],
+      selectedIndex: null, 
+      rows: [],
+      i: 1
     };
   },
   computed: {
@@ -302,6 +306,10 @@ export default {
         ? this.collectionData
         : (Array.isArray(this.value) ? this.value : []);
 
+      if(this.value) {
+        this.selectedIndex = this.value.selectedRowIndex;
+      }
+
       const from = this.paginatorPage - 1;
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.lastPage = Math.ceil(value.length / this.perPage);
@@ -318,8 +326,23 @@ export default {
         data: value,
         lastSortConfig: false
       };
-      return data;
-      
+
+       // Enable Radio button selected when process finishes
+       if (this.selectedIndex !== null && this.selectedIndex < data.data.length) {
+        this.selectedRow = data.data[this.selectedIndex];
+      }
+
+      //Enable Checkbox selected when process finishes
+      if (Array.isArray(this.value) && this.value.length > 0) {
+        if(this.rows.length === 0) {
+          this.value.forEach(item => {
+              if (item.hasOwnProperty('selectedRowsIndex')) {
+                  this.selectedRows.push(data.data[item.selectedRowsIndex]);
+              } 
+          });
+        }
+      }
+      return data;      
     },
     // The fields used for our vue table
     tableFields() {
@@ -342,7 +365,7 @@ export default {
         fields.unshift({
           key: 'checkbox',
           label: '',
-          sortable: false,
+          sortable: false
         });
       }
       
@@ -387,16 +410,35 @@ export default {
     componentOutput(data) {
       this.$emit('input',  data);
     },
-    onRadioChange(selectedItem) {
+    onRadioChange(selectedItem, index) {
       if(this.source?.singleField) {
-        const valueOfColumn = selectedItem[this.source.singleField];
+        let valueOfColumn = selectedItem[this.source.singleField];
         this.componentOutput(valueOfColumn);
       } else {
+        selectedItem = { ...selectedItem, selectedRowIndex: index};
         this.componentOutput(selectedItem);
       }
     },
-    onMultipleSelectionChange() {
+    onMultipleSelectionChange(selIndex) {
+      this.collectionData.forEach((item, index) => {
+          this.selectedRows.forEach((selectedItem) => {
+              // Compares both objects all keys and values
+              if (this.areObjectsEqual(selectedItem, item)) {
+                  // Adds`selectedRowIndex` with index iteration
+                  selectedItem.selectedRowsIndex = index;
+              }
+          });
+      });
       this.componentOutput(this.selectedRows);
+      this.rows.push(selIndex);
+    },
+    areObjectsEqual(obj1, obj2) {
+        const keys1 = Object.keys(obj1);
+        const keys2 = Object.keys(obj2);
+
+        if (keys1.length !== keys2.length) return false;
+
+        return keys1.every(key => obj1[key] === obj2[key]);
     },
     onCollectionChange(collectionId,pmql) {
       let param = {params:{pmql:pmql}};

From dc2b90b9633837ff9f903e4dbe42a5b1930a7cf3 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 2 Oct 2024 09:43:06 -0400
Subject: [PATCH 6/8] fixing pagination with radio buttons

---
 src/components/renderer/form-record-list.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index e7670bd5f..54d87ac18 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -46,7 +46,6 @@
               <b-form-checkbox 
               v-model="selectedRows" 
               :value="item"
-              :checked="selected"
               @change="onMultipleSelectionChange(index)"/>
             </template>
             <template v-if="isFiledownload(field, item)">
@@ -411,11 +410,12 @@ export default {
       this.$emit('input',  data);
     },
     onRadioChange(selectedItem, index) {
+      const globalIndex = (this.currentPage - 1) * this.perPage + index;
       if(this.source?.singleField) {
         let valueOfColumn = selectedItem[this.source.singleField];
         this.componentOutput(valueOfColumn);
       } else {
-        selectedItem = { ...selectedItem, selectedRowIndex: index};
+        selectedItem = { ...selectedItem, selectedRowIndex: globalIndex};
         this.componentOutput(selectedItem);
       }
     },

From edd6255b7c3c64764e0f6d446eab9c6bc344811a Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 2 Oct 2024 09:46:37 -0400
Subject: [PATCH 7/8] solving radio buttons pagination

---
 src/components/renderer/form-record-list.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index e7670bd5f..54d87ac18 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -46,7 +46,6 @@
               <b-form-checkbox 
               v-model="selectedRows" 
               :value="item"
-              :checked="selected"
               @change="onMultipleSelectionChange(index)"/>
             </template>
             <template v-if="isFiledownload(field, item)">
@@ -411,11 +410,12 @@ export default {
       this.$emit('input',  data);
     },
     onRadioChange(selectedItem, index) {
+      const globalIndex = (this.currentPage - 1) * this.perPage + index;
       if(this.source?.singleField) {
         let valueOfColumn = selectedItem[this.source.singleField];
         this.componentOutput(valueOfColumn);
       } else {
-        selectedItem = { ...selectedItem, selectedRowIndex: index};
+        selectedItem = { ...selectedItem, selectedRowIndex: globalIndex};
         this.componentOutput(selectedItem);
       }
     },

From 0c9ec72bb97e6f51d815052928487c33bcfd1f55 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 2 Oct 2024 22:23:46 -0400
Subject: [PATCH 8/8] saving select all checkbox option working ok

---
 src/components/renderer/form-record-list.vue | 60 +++++++++++++++-----
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 54d87ac18..2b230880a 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -33,21 +33,35 @@
           :current-page="currentPage"
           data-cy="table"
         >
-          <template #cell()="{ index, field, item }">
+          <!-- Slot header for checkbox (Select All) -->
+          <template #head(checkbox)="data">
+            <b-form-checkbox
+              v-model="allRowsSelected"
+              @change="selectAllRows"
+              :indeterminate="indeterminate"
+              aria-label="Select All"
+            />
+          </template>
 
-            <template v-if="field.key === 'radio'">
-              <b-form-radio
-                v-model="selectedRow"
-                :value="item"
-                @change="onRadioChange(item, index)"
-              />
-            </template>
-            <template v-if="field.key === 'checkbox'">
-              <b-form-checkbox 
+          <template #cell(checkbox)="{ index, item }">
+            <b-form-checkbox 
               v-model="selectedRows" 
               :value="item"
-              @change="onMultipleSelectionChange(index)"/>
-            </template>
+              @change="onMultipleSelectionChange(index)"
+            />
+          </template>
+
+          <template #cell(radio)="{ index, item }">
+            <b-form-radio
+              v-model="selectedRow"
+              :value="item"
+              @change="onRadioChange(item, index)"
+              
+            />
+          </template>
+
+          <template #cell()="{ index, field, item }">
+
             <template v-if="isFiledownload(field, item)">
               <span href="#" @click="downloadFile(item, field.key, index)">{{
                 mustache(field.key, item)
@@ -264,10 +278,13 @@ export default {
       selectedRows: [],
       selectedIndex: null, 
       rows: [],
-      i: 1
+      selectAll: false
     };
   },
   computed: {
+    indeterminate() {
+      return this.selectedRows.length > 0 && this.selectedRows.length < this.tableData.data.length;
+    },
     popupConfig() {
       const config = [];
       config[this.form] = this.formConfig[this.form];
@@ -406,6 +423,23 @@ export default {
     this.$root.$emit("record-list-option", this.source?.sourceOptions);
   },
   methods: {
+    selectAllRows() {
+      if (this.allRowsSelected) {
+        const updatedRows = this.tableData.data.map((item, index) => {
+          return {
+            ...item,
+            selectedRowsIndex: index
+          };
+        });
+
+        this.selectedRows = updatedRows;
+        this.collectionData = updatedRows;
+        this.onMultipleSelectionChange();
+      } else {
+        this.selectedRows = [];
+        this.onMultipleSelectionChange();
+      }
+    },
     componentOutput(data) {
       this.$emit('input',  data);
     },