ayanova/src/components/work-order-items.vue

@@ -27,7 +27,30 @@
       >[selected index: {{ pvm.selectedItemIndex }}]</span
     >
     <template v-if="pvm.woItemCount > 1">
-      <!-- Workorder item table here -->
+      <!-- Workorder item table here, with a click it triggers selected item at parent which triggers form to open for edit below grid -->
+      <!-- ################################ WORK ORDER ITEMS LIST ############################### -->
+      <v-col cols="12">
+        <v-data-table
+          :headers="headerList"
+          :items="itemList"
+          class="elevation-1"
+          disable-pagination
+          disable-filtering
+          disable-sort
+          hide-default-footer
+          data-cy="itemsTable"
+          dense
+          :item-class="itemRowClasses"
+        >
+          <template v-slot:[`item.actions`]="{ item }">
+            <v-btn icon @click="selectItem(item)">
+              <v-icon :class="itemRowClasses(item)">
+                $ayiEdit
+              </v-icon>
+            </v-btn>
+          </template>
+        </v-data-table>
+      </v-col>
     </template>
     <template v-if="pvm.hasSelectedWoItem">
       <v-col v-if="form().showMe(this, 'TechNotes')" cols="12">
@@ -86,6 +109,9 @@ export default {
     newItem() {
       console.log("STUB: NEW ITEM");
     },
+    selectItem: function(item) {
+      this.pvm.selectedItemIndex = item.index;
+    },
     form() {
       return window.$gz.form;
     },
@@ -93,9 +119,116 @@ export default {
       if (!this.formState.loading && !this.formState.readonly) {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
+    },
+    itemRowClasses: function(item) {
+      if (this.form().childRowHasError(this, "Items", item.index)) {
+        return "font-weight-black font-italic error--text";
+      }
     }
   },
   computed: {
+    headerList: function() {
+      /*
+         public uint Concurrency { get; set; }
+        public string Notes { get; set; }//Was Summary
+        public string Wiki { get; set; }
+        public string CustomFields { get; set; }
+        public List<string> Tags { get; set; } = new List<string>();
+
+        [Required]
+        public long WorkOrderId { get; set; }
+        public string TechNotes { get; set; }
+        public long? WorkorderItemStatusId { get; set; }
+        public long? WorkorderItemPriorityId { get; set; }
+        public DateTime RequestDate { get; set; }
+        public bool WarrantyService { get; set; } = false;
+
+
+IN ORDER: notes, status, date, priority, warranty, tags
+
+except they will not prefill at server but will be set here since the wo differs from the po in that there is no instant update with new viz fields to populate from server
+and it's probably not a big list to fill anyway
+
+
+  If the column is a text, left-align it
+  If the column is a number or number + unit, (or date) right-align it (like excel)
+  */
+      let headers = [];
+      let vm = this;
+      headers.push({
+        text: vm.$ay.t("WorkOrderItemSummary"), //mandatory not hidden
+        align: "left",
+        value: "notes"
+      });
+
+      if (vm.form().showMe(vm, "Items.WorkOrderItemWorkOrderStatusID")) {
+        headers.push({
+          text: vm.$ay.t("WorkOrderItemWorkOrderStatusID"),
+          align: "left",
+          value: "status"
+        });
+      }
+
+      if (vm.form().showMe(vm, "Items.RequestDate")) {
+        headers.push({
+          text: vm.$ay.t("WorkOrderItemRequestDate"),
+          align: "right",
+          value: "requestDate"
+        });
+      }
+
+      if (vm.form().showMe(vm, "Items.WorkOrderItemPriorityID")) {
+        headers.push({
+          text: vm.$ay.t("WorkOrderItemPriorityID"),
+          align: "left",
+          value: "priority"
+        });
+      }
+
+      if (vm.form().showMe(vm, "Items.WorkOrderItemWarrantyService")) {
+        headers.push({
+          text: vm.$ay.t("WorkOrderItemWarrantyService"),
+          align: "center",
+          value: "warranty"
+        });
+      }
+
+      if (vm.form().showMe(vm, "Items.Tags")) {
+        headers.push({
+          text: vm.$ay.t("Tags"),
+          align: "left",
+          value: "tags"
+        });
+      }
+
+      headers.push({ text: "", value: "actions" });
+
+      return headers;
+    },
+    itemList: function() {
+      let vm = this;
+      return vm.value.items.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          notes: x.notes,
+          quantityReceived: window.$gz.locale.decimalLocalized(
+            x.quantityReceived,
+            vm.languageName
+          ),
+          status: x.workorderItemStatusId, //todo: get real status name etc here
+          requestDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.requestDate,
+            vm.timeZoneName,
+            vm.languageName,
+            vm.hour12
+          ),
+          priority: x.workorderItemPriorityId, //todo: get actual priority, color etc here
+          warranty: x.warrantyService,
+          tags: x.tags
+        };
+      });
+    },
     formState: function() {
       return this.pvm.formState;
     },