ayanova/src/components/work-order-item-scheduled-users.vue

@@ -24,10 +24,10 @@
         </v-list>
       </v-menu>
     </v-col>
-
+    <!-- 
     <span class="text-caption"
       >[selected su_index: {{ pvm.selectedScheduledUserItemIndex }}]</span
-    >
+    > -->
     <template v-if="pvm.scheduledUserItemCount > 1">
       <!-- ################################ SCHEDULED USERS TABLE ############################### -->
       <v-col cols="12">
@@ -39,7 +39,7 @@
           disable-filtering
           disable-sort
           hide-default-footer
-          data-cy="itemsTable"
+          data-cy="scheduledUsersTable"
           dense
           :item-class="itemRowClasses"
           @click:row="selectItem"
@@ -94,6 +94,9 @@ export default {
     newItem() {
       console.log("STUB: NEW ITEM");
     },
+    selectItem: function(item) {
+      this.pvm.selectedScheduledUserItemIndex = item.index;
+    },
     form() {
       return window.$gz.form;
     },
@@ -101,9 +104,110 @@ export default {
       if (!this.formState.loading && !this.formState.readonly) {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
+    },
+    itemRowClasses: function(item) {
+      if (this.form().childRowHasError(this, "ScheduledUsers", item.index)) {
+        return "font-weight-black font-italic error--text";
+      }
     }
   },
   computed: {
+    headerList: function() {
+      /*
+            public long? UserId { get; set; }
+        public decimal EstimatedQuantity { get; set; }
+        public DateTime? StartDate { get; set; }
+        public DateTime? StopDate { get; set; }
+        public long? ServiceRateId { get; set; }
+
+
+IN ORDER: start, stop, quantity, user, rate
+
+
+
+
+  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 = [];
+
+      if (
+        this.form().showMe(
+          this,
+          "ScheduledUsers.WorkOrderItemScheduledUserStartDate"
+        )
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
+          align: "right",
+          value: "startDate"
+        });
+      }
+
+      if (
+        this.form().showMe(
+          this,
+          "ScheduledUsers.WorkOrderItemScheduledUserStopDate"
+        )
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
+          align: "right",
+          value: "stopDate"
+        });
+      }
+
+      if (
+        this.form().showMe(
+          this,
+          "ScheduledUsers.WorkOrderItemScheduledUserEstimatedQuantity"
+        )
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
+          align: "right",
+          value: "quantity"
+        });
+      }
+
+      headers.push({
+        text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
+        align: "left",
+        value: "userViz"
+      });
+
+      headers.push({
+        text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
+        align: "left",
+        value: "rateViz"
+      });
+      // headers.push({ text: "", value: "actions" });
+
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.startDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+
+          stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.stopDate,
+            this.pvm.timeZoneName,
+            this.pvm.languageName,
+            this.pvm.hour12
+          ),
+          userViz: x.userViz,
+          rateViz: x.rateViz
+        };
+      });
+    },
     formState: function() {
       return this.pvm.formState;
     },