@pocketprep/ui-kit 3.4.64 → 3.4.65

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -396,6 +396,19 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     convertSelectedMatrixChoiceToCheckboxGrid () {
         const checkboxGrid = this.defaultCheckboxGrid
+
+        // Reset this.selectedColumnHeaders string[][] in case in headers are still in the arrays
+        // Let selectedMatrixChoices set those columns
+        const columnMatrixLabels = this.question.matrixLabels?.rows
+        const defaultSelectedColumnLabels: string[][] = []
+        if (columnMatrixLabels) {
+            columnMatrixLabels.forEach(() => {
+                defaultSelectedColumnLabels.push([])
+            })
+
+            this.selectedColumnHeaders = defaultSelectedColumnLabels
+        }
+
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
             const columnIndex = Number(choice.split('_').pop()) - 1
@@ -417,6 +430,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
             const columnIndex = Number(choice.split('_').pop()) - 1
             if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[columnIndex]) {
                 const columnHeader = this.question.matrixLabels?.columns[columnIndex]
+                // In case a column header is still in selectedColumnHeaders, remove it first and let
+                // selectedMatrixChoices add selected column header based on selected choices
+                this.selectedColumnHeaders[rowIndex].pop()
                 this.selectedColumnHeaders[rowIndex].push(columnHeader)
             }
             if (radioBtnGrid && radioBtnGrid[rowIndex]) {
@@ -429,6 +445,18 @@ export default class MobileMatrixChoicesContainer extends Vue {
     checkboxRowClicked (rowIndex: number, columnIndex: number) {
         if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
             this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+            const columnHeader = this.question.matrixLabels?.columns[columnIndex]
+
+            if (this.selectedColumnHeaders && this.selectedColumnHeaders[rowIndex] && columnHeader) {
+                if (this.selectedColumnHeaders[rowIndex].includes(columnHeader)) {
+                    const columnHeaderIndex = this.selectedColumnHeaders[rowIndex].indexOf(columnHeader)
+                    if (columnHeaderIndex !== -1) {
+                        this.selectedColumnHeaders[rowIndex].splice(columnHeaderIndex, 1)
+                    }
+                } else {
+                    this.selectedColumnHeaders[rowIndex].push(columnHeader)
+                }
+            }
         }
     }
 
@@ -469,29 +497,6 @@ export default class MobileMatrixChoicesContainer extends Vue {
         }
     }
 
-    @Watch('matrixCheckboxGrid', { deep: true })
-    addRemoveCheckboxColumnHeaders () {
-        if (this.matrixCheckboxGrid) {
-            const selectedCheckboxColumnLabels: string[][] = []
-            this.matrixCheckboxGrid.forEach((row, rowIndex) => {
-                selectedCheckboxColumnLabels.push([])
-                row.forEach((choice, choiceIndex) => {
-                    if (
-                        choice 
-                        && this.question.matrixLabels?.columns 
-                        && this.question.matrixLabels?.columns[choiceIndex]
-                    ) {
-                        const columnLabel = this.question.matrixLabels?.columns[choiceIndex]
-                        if (selectedCheckboxColumnLabels[rowIndex]) {
-                            selectedCheckboxColumnLabels[rowIndex].push(columnLabel)
-                        }
-                    }
-                })
-                this.selectedColumnHeaders = selectedCheckboxColumnLabels
-            })
-        }
-    }
-
     @Watch('matrixRadioGrid', { deep: true })
     matrixRadioGridChange () {
         if (this.matrixChoiceLayout && this.matrixRadioGrid && (!this.reviewMode || !this.showMatrixAnswers)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.64",
+  "version": "3.4.65",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {