re-factor / cleanup

ayanova/src/components/work-order-item-tasks.vue

@@ -14,8 +14,8 @@
                 large
                 icon
                 v-bind="attrs"
-                v-on="on"
                 data-cy="woItemTasksHeader"
+                v-on="on"
               >
                 <v-icon small color="primary">$ayiEllipsisV</v-icon>
               </v-btn>
@@ -30,8 +30,8 @@
             </v-list-item>
             <v-list-item
               v-if="canAdd"
-              @click="taskGroupDialog = true"
               data-cy="woItemTaskGroupSelect"
+              @click="taskGroupDialog = true"
             >
               <v-list-item-icon>
                 <v-icon>$ayiTasks</v-icon>
@@ -66,10 +66,10 @@
         <!-- ############################################################### -->
         <v-col cols="12" class="mb-10">
           <v-data-table
+            v-model="selectedRow"
             :headers="headerList"
             :items="itemList"
             item-key="index"
-            v-model="selectedRow"
             class="elevation-1"
             disable-pagination
             disable-filtering
@@ -78,9 +78,9 @@
             data-cy="expensesTable"
             dense
             :item-class="itemRowClasses"
-            @click:row="handleRowClick"
             :show-select="$vuetify.breakpoint.xs"
             single-select
+            @click:row="handleRowClick"
           >
           </v-data-table>
         </v-col>
@@ -90,8 +90,8 @@
         <v-btn
           v-if="canDelete && isDeleted"
           large
-          @click="unDeleteItem"
           color="primary"
+          @click="unDeleteItem"
           >{{ $ay.t("Undelete")
           }}<v-icon right large>$ayiTrashRestoreAlt</v-icon></v-btn
         >
@@ -104,15 +104,15 @@
           xl="3"
         >
           <v-text-field
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].sequence
             "
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
             :label="$ay.t('Sequence')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
-            "
             :rules="[
               form().integerValid(
                 this,
@@ -125,12 +125,12 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
+            type="number"
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].sequence`
               )
             "
-            type="number"
           ></v-text-field>
         </v-col>
 
@@ -147,6 +147,9 @@
           xl="3"
         >
           <v-select
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex].status
             "
@@ -156,9 +159,6 @@
             :readonly="formState.readOnly || isDeleted"
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskWorkOrderItemTaskCompletionType')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].status`
-            "
             data-cy="usertype"
             :rules="[
               form().integerValid(
@@ -189,21 +189,21 @@
           xl="3"
         >
           <gz-pick-list
-            :aya-type="$ay.ayt().User"
-            variant="tech"
-            :show-edit-icon="!value.userIsRestrictedType"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedByUserId
             "
+            :aya-type="$ay.ayt().User"
+            variant="tech"
+            :show-edit-icon="!value.userIsRestrictedType"
             :readonly="
               formState.readOnly || isDeleted || value.userIsRestrictedType
             "
             :disabled="isDeleted"
             :label="$ay.t('WorkOrderItemTaskUser')"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedByUserId`
-            "
             data-cy="expenseUser"
             :error-messages="
               form().serverErrors(
@@ -228,16 +228,16 @@
           xl="3"
         >
           <gz-date-time-picker
-            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
+            :ref="
+              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
+            "
             v-model="
               value.items[activeWoItemIndex].tasks[activeItemIndex]
                 .completedDate
             "
+            :label="$ay.t('WorkOrderItemTaskCompletedDate')"
             :readonly="formState.readOnly"
             :disabled="isDeleted"
-            :ref="
-              `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].completedDate`
-            "
             data-cy="travelCompletedDate"
             :error-messages="
               form().serverErrors(
@@ -255,6 +255,7 @@
 
         <v-col v-if="form().showMe(this, 'WorkOrderItemTaskTaskID')" cols="12">
           <v-textarea
+            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             v-model="value.items[activeWoItemIndex].tasks[activeItemIndex].task"
             :readonly="formState.readOnly || value.userIsRestrictedType"
             :disabled="isDeleted"
@@ -271,14 +272,13 @@
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             ]"
-            :ref="`Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`"
             data-cy="task"
+            auto-grow
             @input="
               fieldValueChanged(
                 `Items[${activeWoItemIndex}].tasks[${activeItemIndex}].task`
               )
             "
-            auto-grow
           ></v-textarea>
         </v-col>
       </template>
@@ -288,21 +288,21 @@
     <!-- ################################################################################-->
     <template>
       <v-row justify="center">
-        <v-dialog max-width="600px" v-model="taskGroupDialog">
+        <v-dialog v-model="taskGroupDialog" max-width="600px">
           <v-card>
             <v-card-title> </v-card-title>
             <v-card-text>
               <gz-pick-list
+                ref="selectedTaskGroup"
+                v-model="selectedTaskGroup"
                 :aya-type="$ay.ayt().TaskGroup"
                 show-edit-icon
-                v-model="selectedTaskGroup"
                 :label="$ay.t('TaskGroupList')"
-                ref="selectedTaskGroup"
                 data-cy="selectedTaskGroup"
               ></gz-pick-list>
             </v-card-text>
             <v-card-actions>
-              <v-btn text @click="taskGroupDialog = false" color="primary">{{
+              <v-btn text color="primary" @click="taskGroupDialog = false">{{
                 $ay.t("Cancel")
               }}</v-btn>
               <v-spacer></v-spacer>
@@ -310,9 +310,9 @@
                 :disabled="selectedTaskGroup == null"
                 color="primary"
                 text
-                @click="addTaskGroup()"
                 class="ml-4"
                 data-cy="woItemTaskGroupAdd"
+                @click="addTaskGroup()"
                 >{{ $ay.t("Add") }}</v-btn
               >
             </v-card-actions>
@@ -324,17 +324,6 @@
 </template>
 <script>
 export default {
-  created() {
-    this.setDefaultView();
-  },
-  data() {
-    return {
-      activeItemIndex: null,
-      selectedRow: [],
-      taskGroupDialog: false,
-      selectedTaskGroup: null
-    };
-  },
   props: {
     value: {
       default: null,
@@ -353,6 +342,127 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {
+      activeItemIndex: null,
+      selectedRow: [],
+      taskGroupDialog: false,
+      selectedTaskGroup: null
+    };
+  },
+  computed: {
+    isDeleted: function() {
+      if (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
+        null
+      ) {
+        this.setDefaultView();
+        return true;
+      }
+      return (
+        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
+          .deleted === true
+      );
+    },
+    parentDeleted: function() {
+      return this.value.items[this.activeWoItemIndex].deleted === true;
+    },
+
+    headerList: function() {
+      const headers = [];
+
+      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
+        headers.push({
+          text: this.$ay.t("Sequence"),
+          align: "left",
+          value: "sequence"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskTaskID"),
+          align: "start",
+          value: "task"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskUser"),
+          align: "start",
+          value: "completedByUserViz"
+        });
+      }
+
+      if (
+        this.form().showMe(
+          this,
+          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
+        )
+      ) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
+          align: "start",
+          value: "statusViz"
+        });
+      }
+
+      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
+        headers.push({
+          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
+          align: "right",
+          value: "completedDate"
+        });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.value.items[this.activeWoItemIndex].tasks
+        .map((x, i) => {
+          return {
+            index: i,
+            id: x.id,
+            sequence: x.sequence,
+            task: x.task,
+            completedByUserViz: x.completedByUserViz,
+            statusViz: x.statusViz,
+            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+              x.completedDate,
+              this.pvm.timeZoneName,
+              this.pvm.languageName,
+              this.pvm.hour12
+            )
+          };
+        })
+        .sort((a, b) => a.sequence - b.sequence);
+    },
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    },
+    hasData: function() {
+      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
+    },
+    hasSelection: function() {
+      return this.activeItemIndex != null;
+    },
+    canAdd: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    },
+    canDelete: function() {
+      return (
+        this.activeItemIndex != null &&
+        this.canDeleteAll &&
+        !this.value.userIsRestrictedType
+      );
+    },
+    canDeleteAll: function() {
+      return this.pvm.rights.change && !this.value.userIsRestrictedType;
+    }
+  },
   watch: {
     activeWoItemIndex(val, oldVal) {
       if (val != oldVal) {
@@ -377,6 +487,9 @@ export default {
       }
     }
   },
+  created() {
+    this.setDefaultView();
+  },
   methods: {
     async addTaskGroup() {
       const res = await window.$gz.api.get(
@@ -545,119 +658,6 @@ export default {
       }
       return ret;
     }
-  },
-  computed: {
-    isDeleted: function() {
-      if (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex] ==
-        null
-      ) {
-        this.setDefaultView();
-        return true;
-      }
-      return (
-        this.value.items[this.activeWoItemIndex].tasks[this.activeItemIndex]
-          .deleted === true
-      );
-    },
-    parentDeleted: function() {
-      return this.value.items[this.activeWoItemIndex].deleted === true;
-    },
-
-    headerList: function() {
-      const headers = [];
-
-      if (this.form().showMe(this, "WorkOrderItemTaskSequence")) {
-        headers.push({
-          text: this.$ay.t("Sequence"),
-          align: "left",
-          value: "sequence"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskTaskID")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskTaskID"),
-          align: "start",
-          value: "task"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskUser")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskUser"),
-          align: "start",
-          value: "completedByUserViz"
-        });
-      }
-
-      if (
-        this.form().showMe(
-          this,
-          "WorkOrderItemTaskWorkOrderItemTaskCompletionType"
-        )
-      ) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskWorkOrderItemTaskCompletionType"),
-          align: "start",
-          value: "statusViz"
-        });
-      }
-
-      if (this.form().showMe(this, "WorkOrderItemTaskCompletedDate")) {
-        headers.push({
-          text: this.$ay.t("WorkOrderItemTaskCompletedDate"),
-          align: "right",
-          value: "completedDate"
-        });
-      }
-      return headers;
-    },
-    itemList: function() {
-      return this.value.items[this.activeWoItemIndex].tasks
-        .map((x, i) => {
-          return {
-            index: i,
-            id: x.id,
-            sequence: x.sequence,
-            task: x.task,
-            completedByUserViz: x.completedByUserViz,
-            statusViz: x.statusViz,
-            completedDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-              x.completedDate,
-              this.pvm.timeZoneName,
-              this.pvm.languageName,
-              this.pvm.hour12
-            )
-          };
-        })
-        .sort((a, b) => a.sequence - b.sequence);
-    },
-    formState: function() {
-      return this.pvm.formState;
-    },
-    formCustomTemplateKey: function() {
-      return this.pvm.formCustomTemplateKey;
-    },
-    hasData: function() {
-      return this.value.items[this.activeWoItemIndex].tasks.length > 0;
-    },
-    hasSelection: function() {
-      return this.activeItemIndex != null;
-    },
-    canAdd: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    },
-    canDelete: function() {
-      return (
-        this.activeItemIndex != null &&
-        this.canDeleteAll &&
-        !this.value.userIsRestrictedType
-      );
-    },
-    canDeleteAll: function() {
-      return this.pvm.rights.change && !this.value.userIsRestrictedType;
-    }
   }
 };
 </script>