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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="pvm != null">
+  <div v-if="value != null">
     selected row: {{ selectedRow }}
     <!-- Title and menu -->
     <v-col cols="12">
@@ -31,14 +31,15 @@
     </v-col>
     <!-- 
     <span class="text-caption"
-      >[selected su_index: {{ pvm.selectedScheduledUserItemIndex }}]</span
+      >[selected su_index: {{ activeItemIndex }}]</span
     > -->
-    <template v-if="pvm.scheduledUserItemCount > 1">
+    <template v-if="showTable">
       <!-- ################################ SCHEDULED USERS TABLE ############################### -->
       <v-col cols="12">
         <v-data-table
           :headers="headerList"
           :items="itemList"
+          item-key="index"
           v-model="selectedRow"
           class="elevation-1"
           disable-pagination
@@ -48,28 +49,19 @@
           data-cy="scheduledUsersTable"
           dense
           :item-class="itemRowClasses"
-          item-key="index"
-          @click:row="selectItem"
+          @click:row="handleRowClick"
           :show-select="$vuetify.breakpoint.xs"
           single-select
         >
-          <!-- <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.hasSelectedScheduledUserItem">
+    <template v-if="activeItemIndex != null">
       <v-col cols="12" sm="6" lg="4" xl="3">
         <gz-decimal
           v-model="
-            value.items[pvm.selectedItemIndex].scheduledUsers[
-              pvm.selectedScheduledUserItemIndex
-            ].estimatedQuantity
+            value.items[activeWoItemIndex].scheduledUsers[activeItemIndex]
+              .estimatedQuantity
           "
           :readonly="formState.readOnly"
           :label="$ay.t('WorkOrderItemScheduledUserEstimatedQuantity')"
@@ -78,8 +70,8 @@
           :error-messages="
             form().serverErrors(
               this,
-              `Items[${pvm.selectedItemIndex}].scheduledUsers[
-              ${pvm.selectedScheduledUserItemIndex}
+              `Items[${activeWoItemIndex}].scheduledUsers[
+              ${activeItemIndex}
             ].estimatedQuantity`
             )
           "
@@ -88,8 +80,8 @@
             form().required(this, 'scheduledUsers.EstimatedQuantity')
           ]"
           @input="
-            fieldValueChanged(`Items[${pvm.selectedItemIndex}].scheduledUsers[
-              ${pvm.selectedScheduledUserItemIndex}
+            fieldValueChanged(`Items[${activeWoItemIndex}].scheduledUsers[
+              ${activeItemIndex}
             ].estimatedQuantity`)
           "
         ></gz-decimal>
@@ -109,9 +101,11 @@
 */
 export default {
   data() {
-    return { selectedRow: [] };
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
-
   props: {
     value: {
       default: null,
@@ -120,15 +114,18 @@ export default {
     pvm: {
       default: null,
       type: Object
+    },
+    activeWoItemIndex: {
+      default: null,
+      type: Number
     }
   },
-
   methods: {
     newItem() {
-      let newIndex = this.value.items[this.pvm.selectedItemIndex].scheduledUsers
+      let newIndex = this.value.items[this.activeWoItemIndex].scheduledUsers
         .length;
 
-      this.value.items[this.pvm.selectedItemIndex].scheduledUsers.push({
+      this.value.items[this.activeWoItemIndex].scheduledUsers.push({
         id: 0,
         concurrency: 0,
         userId: null,
@@ -137,29 +134,45 @@ export default {
         stopDate: null,
         serviceRateId: null,
         isDirty: true,
-        workOrderItemId: this.value.items[this.pvm.selectedItemIndex].id
+        workOrderItemId: this.value.items[this.activeWoItemIndex].id
       });
-      this.pvm.setDirty();
-      this.pvm.selectedScheduledUserItemIndex = newIndex;
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
     },
     async deleteItem() {
       if ((await window.$gz.dialog.confirmDelete()) != true) {
         return;
       }
-      this.value.items[this.pvm.selectedItemIndex].scheduledUsers.splice(
-        this.pvm.selectedScheduledUserItemIndex,
+
+      let o = this.value.items[this.activeWoItemIndex].scheduledUsers[
+        this.activeItemIndex
+      ];
+
+      if (o.id != 0) {
+        //it's a previously saved item so it needs to be removed at the server too
+        this.$emit("graph-item-deleted", {
+          atype: window.$gz.type.WorkOrderItemScheduledUser,
+          id: o.id
+        });
+      }
+      this.value.items[this.activeWoItemIndex].scheduledUsers.splice(
+        this.activeItemIndex,
         1
       );
-      if (this.pvm.scheduledUserItemCount > 0) {
-        this.pvm.selectedScheduledUserItemIndex =
-          this.pvm.scheduledUserItemCount - 1;
+
+      //if only one record left then display it otherwise just let the datatable show what the user can click on
+      if (this.value.items[this.activeWoItemIndex].scheduledUsers.length == 1) {
+        this.selectedRow = [{ index: 0 }];
+        this.activeItemIndex = 0;
       } else {
-        this.pvm.selectedScheduledUserItemIndex = null;
+        this.selectedRow = [];
+        this.activeItemIndex = null; //select nothing in essence resetting a child selects and this one too clearing form
       }
     },
-    selectItem: function(item) {
-      this.selectedRow = [item];
-      this.pvm.selectedScheduledUserItemIndex = item.index;
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
+      this.selectedRow = [{ index: item.index }];
     },
     form() {
       return window.$gz.form;
@@ -167,8 +180,8 @@ export default {
     fieldValueChanged(ref) {
       if (!this.formState.loading && !this.formState.readonly) {
         //flag this record dirty so it gets picked up by save
-        this.value.items[this.pvm.selectedItemIndex].scheduledUsers[
-          this.pvm.selectedScheduledUserItemIndex
+        this.value.items[this.activeWoItemIndex].scheduledUsers[
+          this.activeItemIndex
         ].isDirty = true;
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
@@ -254,7 +267,7 @@ IN ORDER: start, stop, quantity, user, rate
       return headers;
     },
     itemList: function() {
-      return this.value.items[this.pvm.selectedItemIndex].scheduledUsers.map(
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.map(
         (x, i) => {
           return {
             index: i,
@@ -287,6 +300,9 @@ IN ORDER: start, stop, quantity, user, rate
     formCustomTemplateKey: function() {
       return this.pvm.formCustomTemplateKey;
     },
+    showTable: function() {
+      return this.value.items[this.activeWoItemIndex].scheduledUsers.length > 1;
+    },
     canAdd: function() {
       return (
         !this.value.isLockedAtServer &&

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

@@ -1,6 +1,5 @@
 <template>
   <div v-if="value != null">
-    selected row: {{ selectedRow }}
     <!-- Title and menu -->
     <v-col cols="12">
       <v-menu offset-y>
@@ -84,6 +83,7 @@
         v-if="pvm.subRights.scheduledUsers.visible"
         v-model="value"
         :pvm="pvm"
+        :active-wo-item-index="activeItemIndex"
         data-cy="woItemScheduledUsers"
       />
     </template>