re-factor / cleanup

ayanova/src/components/quote-state.vue

@@ -14,10 +14,10 @@
           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
                   >
@@ -92,17 +92,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
                       >
@@ -137,13 +137,6 @@
 </template>
 <script>
 export default {
-  data() {
-    return {
-      selectedStatus: null,
-      openDialog: false
-    };
-  },
-
   props: {
     value: {
       default: null,
@@ -165,6 +158,53 @@ 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
+
+      //ok, 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;
+      }
+
+      //ok, 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() {
@@ -249,47 +289,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
-
-      //ok, 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;
-      }
-
-      //ok, 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>