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

@@ -1,8 +1,6 @@
 <template>
   <div v-if="pvm != null">
-    <!-- implement the "four states" here -->
-    <!--  HIDDEN(already taken care of, just three I guess), EMPTY, SINGLE, MULTIPLE  -->
-
+    selected row: {{ selectedRow }}
     <!-- Title and menu -->
     <v-col cols="12">
       <v-menu offset-y>
@@ -97,17 +95,18 @@
         ></gz-decimal>
       </v-col>
     </template>
-    <!-- {{ pvm.hasSelectedScheduledUserItem }}<br />
-    {{ pvm.hasSelectedWoItem }}<br />
-    {{ pvm.selectedScheduledUserItemIndex }}<br />
-    {{ value.items[pvm.selectedItemIndex].scheduledUsers }}<br /> -->
   </div>
 </template>
 <script>
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /*  XXXeslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*
+  todo: sometimes grid row is not highlighted when edit form is exposed to match
+    I think after a new record is added it's not highlighting, needs some id wizardry I think
 
+
+*/
 export default {
   data() {
     return { selectedRow: [] };

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

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="pvm != null">
+  <div v-if="value != null">
+    selected row: {{ selectedRow }}
     <!-- Title and menu -->
     <v-col cols="12">
       <v-menu offset-y>
@@ -29,11 +30,7 @@
       </v-menu>
     </v-col>
 
-    <!-- items:{{ value.items }}<br /> 
-    <span class="text-caption"
-      >[selected index: {{ pvm.selectedItemIndex }}]</span
-    >-->
-    <template v-if="pvm.woItemCount > 1">
+    <template v-if="showTable">
       <!-- ################################ WORK ORDER ITEMS TABLE ############################### -->
       <v-col cols="12">
         <v-data-table
@@ -49,24 +46,17 @@
           data-cy="itemsTable"
           dense
           :item-class="itemRowClasses"
-          @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.hasSelectedWoItem">
+    <template v-if="activeItemIndex != null">
       <v-col v-if="form().showMe(this, 'WorkOrderItemSummary')" cols="12">
         <v-textarea
-          v-model="value.items[pvm.selectedItemIndex].notes"
+          v-model="value.items[activeItemIndex].notes"
           :readonly="formState.readOnly"
           :label="$ay.t('WorkOrderItemSummary')"
           :error-messages="form().serverErrors(this, 'notes')"
@@ -79,7 +69,7 @@
 
       <v-col v-if="form().showMe(this, 'WorkOrderItemTechNotes')" cols="12">
         <v-textarea
-          v-model="value.items[pvm.selectedItemIndex].techNotes"
+          v-model="value.items[activeItemIndex].techNotes"
           :readonly="formState.readOnly"
           :label="$ay.t('WorkOrderItemTechNotes')"
           :error-messages="form().serverErrors(this, 'techNotes')"
@@ -105,6 +95,9 @@
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 import GzWoItemScheduledUsers from "../components/work-order-item-scheduled-users.vue";
 /*
+    todo: stop using parent vm directly to control state in graph and instead pass down values via props to children and pass up values to parent via events
+      https://www.smashingmagazine.com/2020/01/data-components-vue-js/
+
       todo: can I turn control labels into hyperlinks for getting to feeder records?  If not then need to find a way to accomplish it        
                 e.g. can workorder status title be changed to a hyper link to status list
                 e.g. can projects title be turned to a hyper link to projects list
@@ -120,7 +113,10 @@ export default {
     GzWoItemScheduledUsers
   },
   data() {
-    return { selectedRow: [] };
+    return {
+      activeItemIndex: null,
+      selectedRow: []
+    };
   },
   props: {
     value: {
@@ -161,31 +157,27 @@ export default {
         units: [],
         outsideServices: []
       });
-      this.pvm.setDirty();
-      this.pvm.selectItem(newIndex);
+      this.$emit("change");
+      this.selectedRow = [{ index: newIndex }];
+      this.activeItemIndex = newIndex;
     },
     async deleteItem() {
       if ((await window.$gz.dialog.confirmDelete()) != true) {
         return;
       }
-      this.pvm.deleteItem(this.pvm.selectedItemIndex);
+      this.pvm.deleteItem(this.activeItemIndex);
     },
-    selectItem: function(item) {
-      this.selectedRow = [item];
-      this.pvm.selectedItemIndex = item.index;
-      //select children if 1 record to expose edit form in place
-      //or select none if more than one so that data table shows instead for selection
-      let woitem = this.value.items[item.index];
-      this.pvm.selectedScheduledUserItemIndex =
-        woitem.scheduledUsers.length == 1 ? 0 : null;
+    handleRowClick: function(item) {
+      this.activeItemIndex = item.index;
     },
+
     form() {
       return window.$gz.form;
     },
     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].isDirty = true;
+        this.value.items[this.activeItemIndex].isDirty = true;
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     },
@@ -303,6 +295,9 @@ and it's probably not a big list to fill anyway
     formCustomTemplateKey: function() {
       return this.pvm.formCustomTemplateKey;
     },
+    showTable: function() {
+      return this.value.items.length > 1;
+    },
     canAdd: function() {
       return (
         !this.value.isLockedAtServer &&
@@ -312,7 +307,7 @@ and it's probably not a big list to fill anyway
     },
     canDelete: function() {
       return (
-        this.pvm.hasSelectedWoItem &&
+        this.activeItemIndex != null &&
         !this.value.isLockedAtServer &&
         this.pvm.rights.change &&
         this.pvm.subRights.items.delete

ayanova/src/views/svc-workorder.vue

@@ -10,6 +10,7 @@
           :readonly="formState.readOnly"
           :pvm="this"
           data-cy="woHeader"
+          @change="setDirty()"
         />
         <GzWoItems
           v-model="obj"
@@ -17,6 +18,7 @@
           :readonly="formState.readOnly"
           :pvm="this"
           data-cy="woItems"
+          @change="setDirty()"
         />
       </v-form>
     </div>
@@ -311,15 +313,6 @@ export default {
     }
   },
   computed: {
-    hasSelectedWoItem: function() {
-      if (this.selectedItemIndex != null) {
-        return true;
-      }
-      return false;
-    },
-    woItemCount: function() {
-      return this.obj.items.length;
-    },
     hasSelectedScheduledUserItem: function() {
       if (
         this.hasSelectedWoItem &&
@@ -362,25 +355,9 @@ export default {
     }
   },
   methods: {
-    selectItem: function(itemIndex) {
-      if (itemIndex == this.selectedItemIndex) {
-        return;
-      }
-      if (itemIndex == null) {
-        //if there is only one then it should be selected otherwise null is ok for a bunch
-        if (this.woItemCount == 1) {
-          itemIndex = 0;
-        }
-      }
-      this.selectedItemIndex = itemIndex;
-      //reset all children
-      this.selectedScheduledUserItemIndex = null;
-      //todo: all children here
-      //this.selectedLaborIndex...blahblah etc
-    },
     deleteItem: function(itemIndex) {
       if (itemIndex == null) {
-        itemIndex = this.selectedItemIndex;
+        throw new Error("svc-workorder: delete item itemIndex is null!");
       }
       //add to deleted items if has concurrency / id
       let o = this.obj.items[itemIndex];