fix above Multiline table error reporting

Author: mvorisek

js/src/vue-components/multiline/multiline-body.component.js

@@ -10,7 +10,7 @@ export default {
                 :rowId="row.__atkml"
                 :isDeletable="isDeletableRow(row)"
                 :rowValues="row"
-                :error="getError(row.__atkml)"
+                :errors="getRowErrors(row.__atkml)"
                 @onTabLastColumn="onTabLastColumn(i)"
             ></AtkMultilineRow>
         </SuiTableBody>`,
@@ -37,12 +37,8 @@ export default {
         isDeletableRow: function (row) {
             return this.deletables.includes(row.__atkml);
         },
-        getError: function (rowId) {
-            if (rowId in this.errors) {
-                return this.errors[rowId];
-            }
-
-            return null;
+        getRowErrors: function (rowId) {
+            return this.errors[rowId] ? this.errors[rowId] : [];
         },
     },
 };

js/src/vue-components/multiline/multiline-header.component.js

@@ -7,7 +7,7 @@ export default {
             <SuiTableRow v-if="hasError()">
                 <SuiTableCell :style="{ background: 'none' }" />
                 <SuiTableCell :style="{ background: 'none' }"
-                    state="error"
+                    error="true"
                     v-for="column in filterVisibleColumns(columns)"
                     :textAlign="getTextAlign(column)"
                 >
@@ -34,7 +34,7 @@ export default {
                 </SuiTableHeaderCell>
             </SuiTableRow>
         </SuiTableHeader>`,
-    props: ['fields', 'state', 'errors', 'caption'],
+    props: ['fields', 'selectionState', 'errors', 'caption'],
     data: function () {
         return { columns: this.fields, isDeleteAll: false };
     },
@@ -92,10 +92,10 @@ export default {
     },
     computed: {
         isIndeterminate: function () {
-            return this.state === 'indeterminate';
+            return this.selectionState === 'indeterminate';
         },
         isChecked: function () {
-            return this.state === 'on';
+            return this.selectionState === 'on';
         },
     },
 };

js/src/vue-components/multiline/multiline-row.component.js

@@ -19,7 +19,7 @@ export default {
                 v-for="(column, i) in filterVisibleColumns(columns)"
                 v-bind="column.cellProps"
                 :width=null
-                :state="getErrorState(column)"
+                :error="hasColumnError(column)"
                 :style="{ overflow: 'visible' }"
                 @keydown.tab="onTab(i)"
             >
@@ -30,7 +30,7 @@ export default {
                 ></AtkMultilineCell>
             </SuiTableCell>
         </SuiTableRow>`,
-    props: ['fields', 'rowId', 'isDeletable', 'rowValues', 'error'],
+    props: ['fields', 'rowId', 'isDeletable', 'rowValues', 'errors'],
     data: function () {
         return { columns: this.fields };
     },
@@ -62,15 +62,8 @@ export default {
                 this.$emit('onTabLastColumn');
             }
         },
-        getErrorState: function (column) {
-            if (this.error) {
-                const error = this.error.filter((e) => column.name === e.name);
-                if (error.length > 0) {
-                    return 'error';
-                }
-            }
-
-            return null;
+        hasColumnError: function (column) {
+            return this.errors.some((v) => column.name === v.name);
         },
         getColumnWidth: function (column) {
             return column.fieldOptions ? column.fieldOptions.width : null;

js/src/vue-components/multiline/multiline.component.js

@@ -10,7 +10,7 @@ export default {
             <SuiTable v-bind="tableProp">
                 <AtkMultilineHeader
                     :fields="fieldData"
-                    :state="getMainToggleState"
+                    :selectionState="getMainToggleState"
                     :errors="errors"
                     :caption="caption"
                 ></AtkMultilineHeader>
@@ -276,14 +276,14 @@ export default {
          * deletables entries.
          */
         getMainToggleState: function () {
-            let state = 'off';
+            let res = 'off';
             if (this.deletables.length > 0) {
-                state = this.deletables.length === this.rowData.length
+                res = this.deletables.length === this.rowData.length
                     ? 'on'
                     : 'indeterminate';
             }
 
-            return state;
+            return res;
         },
         isDeleteDisable: function () {
             return this.deletables.length === 0;