re-factor / cleanup

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

@@ -6,8 +6,8 @@
     <template>
       <div
         class="mb-6 mb-sm-0"
-        @click="openDialog = true"
         :data-cy="`${dataCy}:open`"
+        @click="openDialog = true"
       >
         <v-btn icon class="ml-n1 mr-2">
           <v-icon>{{ openIcon() }}</v-icon>
@@ -15,10 +15,10 @@
 
         <span class="text-h6">{{ pvm.currentState.name }}</span>
         <v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
-        <v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
+        <v-icon v-if="pvm.currentState.locked" color="primary" class="ml-4"
           >$ayiLock</v-icon
         >
-        <v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
+        <v-icon v-if="pvm.currentState.completed" color="primary" class="ml-4"
           >$ayiCheckCircle</v-icon
         >
       </div>
@@ -37,10 +37,10 @@
                 <span class="ml-3">{{ item.user }}</span>
                 <span class="font-weight-bold ml-3">{{ item.name }}</span>
                 <v-icon small :color="item.color" class="ml-4">$ayiFlag</v-icon>
-                <v-icon small color="primary" v-if="item.locked" class="ml-4"
+                <v-icon v-if="item.locked" small color="primary" class="ml-4"
                   >$ayiLock</v-icon
                 >
-                <v-icon small color="primary" v-if="item.completed" class="ml-4"
+                <v-icon v-if="item.completed" small color="primary" class="ml-4"
                   >$ayiCheckCircle</v-icon
                 >
               </div>
@@ -55,13 +55,13 @@
                   <v-icon small :color="item.color" class="ml-4"
                     >$ayiFlag</v-icon
                   >
-                  <v-icon small color="primary" v-if="item.locked" class="ml-4"
+                  <v-icon v-if="item.locked" small color="primary" class="ml-4"
                     >$ayiLock</v-icon
                   >
                   <v-icon
+                    v-if="item.completed"
                     small
                     color="primary"
-                    v-if="item.completed"
                     class="ml-4"
                     >$ayiCheckCircle</v-icon
                   >
@@ -78,8 +78,8 @@
                   dense
                   :label="$ay.t('NewStatus')"
                   prepend-icon="$ayiEdit"
-                  @click:prepend="handleEditStateClick()"
                   :data-cy="`${dataCy}:picker`"
+                  @click:prepend="handleEditStateClick()"
                 >
                   <template v-slot:item="data">
                     <v-list-item-avatar>
@@ -91,17 +91,17 @@
                           data.item.name
                         }}</span
                         ><v-icon
+                          v-if="data.item.locked"
                           small
                           color="disabled"
                           class="ml-2"
-                          v-if="data.item.locked"
                           >$ayiLock</v-icon
                         >
                         <v-icon
+                          v-if="data.item.completed"
                           color="disabled"
                           class="ml-1"
                           small
-                          v-if="data.item.completed"
                           >$ayiCheckCircle</v-icon
                         ></v-list-item-title
                       >
@@ -125,8 +125,8 @@
               color="blue darken-1"
               :disabled="selectedStatus == null"
               text
-              @click="save()"
               :data-cy="`${dataCy}:btnok`"
+              @click="save()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -137,13 +137,6 @@
 </template>
 <script>
 export default {
-  data() {
-    return {
-      selectedStatus: null,
-      openDialog: false
-    };
-  },
-
   props: {
     value: {
       default: null,
@@ -166,6 +159,48 @@ export default {
     readonly: Boolean,
     disabled: Boolean
   },
+  data() {
+    return {
+      selectedStatus: null,
+      openDialog: false
+    };
+  },
+  computed: {
+    hasState() {
+      return this.value.states != null && this.value.states.length > 0;
+    },
+    stateDisplayList() {
+      const ret = [];
+      this.value.states.forEach(z => {
+        ret.push(this.getStateForDisplay(z));
+      });
+      return ret;
+    },
+    canAdd: function() {
+      //first check most obvious disqualifying properties
+      if (!this.pvm.rights.change) {
+        return false;
+      }
+      //not currently locked, user has rights to do it so allow it
+      if (!this.value.isLockedAtServer) {
+        return true;
+      }
+      //locked, confirm if user can change it
+      //if any role then no problem
+      //only thing left to check is if the current user can unlock this
+      //get remove roles required for current state
+      const cs = this.pvm.currentState;
+      if (cs.removeRoles == null || cs.removeRoles == 0) {
+        //no state set yet
+        return true;
+      }
+      //need to check the role here against current user roles to see if this is valid
+      if (window.$gz.role.hasRole(cs.removeRoles)) {
+        return true;
+      }
+      return false;
+    }
+  },
 
   methods: {
     addState() {
@@ -248,42 +283,6 @@ export default {
         window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
-  },
-  computed: {
-    hasState() {
-      return this.value.states != null && this.value.states.length > 0;
-    },
-    stateDisplayList() {
-      const ret = [];
-      this.value.states.forEach(z => {
-        ret.push(this.getStateForDisplay(z));
-      });
-      return ret;
-    },
-    canAdd: function() {
-      //first check most obvious disqualifying properties
-      if (!this.pvm.rights.change) {
-        return false;
-      }
-      //not currently locked, user has rights to do it so allow it
-      if (!this.value.isLockedAtServer) {
-        return true;
-      }
-      //locked, confirm if user can change it
-      //if any role then no problem
-      //only thing left to check is if the current user can unlock this
-      //get remove roles required for current state
-      const cs = this.pvm.currentState;
-      if (cs.removeRoles == null || cs.removeRoles == 0) {
-        //no state set yet
-        return true;
-      }
-      //need to check the role here against current user roles to see if this is valid
-      if (window.$gz.role.hasRole(cs.removeRoles)) {
-        return true;
-      }
-      return false;
-    }
   }
 };
 </script>