ayanova/src/api/gzform.js

@@ -679,6 +679,50 @@ export default {
     return ret;
   },
   ///////////////////////////////
+  // childRowHasError
+  // returns true if error exists for row
+  // else returns false
+  // (actual errors not returned just for row indicator,
+  // user opens child edit form to see exact error)
+  //
+  childRowHasError(vm, collectionName, rowIndex) {
+    //todo: this just shows server errors, not local form errors
+    //maybe find if there is any place that records item errors (form?)
+
+    //No server errors?
+    if (window.$gz.util.objectIsEmpty(vm.formState.serverError)) {
+      //nothing to process
+      return null;
+    }
+
+    //no detail errors?
+    if (window.$gz.util.objectIsEmpty(vm.formState.serverError.details)) {
+      //nothing to process
+      return null;
+    }
+
+    //Might be an error, check if collectionName is in error collection
+    //this is what we're dealing with
+    // { "code": "2200", "details": [ { "message": "LT:PurchaseOrderReceiptItemQuantityReceivedErrorInvalid", "target": "Items[0].QuantityReceived", "error": "2203" } ], "message": "ErrorAPI2200" }
+    let rowErrorTargetStart = `${collectionName}[${rowIndex}].`.toLowerCase();
+
+    //filter in items that start with the row collection name and index provided
+    let ret = vm.formState.serverError.details.some(function(o) {
+      // console.log("childrowHasError:", {
+      //   tgt: o.target.toLowerCase(),
+      //   tgtstrt: rowErrorTargetStart
+      // });
+      if (!o.target) {
+        return false;
+      }
+      let r = o.target.toLowerCase().includes(rowErrorTargetStart);
+
+      return r;
+    });
+
+    return ret;
+  },
+  ///////////////////////////////
   // ShowMe
   // (returns false if the field has been set to hidden by the user in the formcustomtemplate)
   // NOTE: that in a form this should only be used with non stock-required fields, if they are already required they cannot be hidden

ayanova/src/views/inv-purchase-order.vue

@@ -222,6 +222,7 @@
           </v-col>
 
           <!-- ################################ PURCHASE ORDER ITEMS LIST ############################### -->
+          {{ formState.serverError }}
           <v-col cols="12">
             <v-data-table
               :headers="headerList"
@@ -233,7 +234,7 @@
               hide-default-footer
               data-cy="itemsTable"
               dense
-              :item-class="rowClasses"
+              :item-class="poItemsRowClasses"
             >
               <template v-slot:top>
                 <span class="title">{{ $ay.t("PurchaseOrderItemList") }}</span>
@@ -324,7 +325,7 @@
                     :label="$ay.t('Part')"
                     ref="Items.PartId"
                     data-cy="Items.PartId"
-                    :rules="[form().required(this, 'Items.PartId')]"                    
+                    :rules="[form().required(this, 'Items.PartId')]"
                   ></gz-pick-list>
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
@@ -848,8 +849,12 @@ export default {
     }
   },
   methods: {
-    rowClasses: function(item, index) {
-      console.log("row_classes", { item: item });
+    poItemsRowClasses: function(item) {
+      let hasError = this.form().childRowHasError(this, "Items", item.index);
+      if (hasError) {
+        return "error";
+      }
+      //console.log("row_classes", { item: item, hasError: hasError });
       //if item.index in errors collection then highlight the row
       // if (item.calories < 200) {
       //   return "orange"; //can also return multiple classes e.g ["orange","disabled"]