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

@@ -1,15 +1,18 @@
 <template>
   <div>
     <span class="text-caption">{{ $ay.t("WorkOrderStatus") }}</span>
+    <template v-if="hasState">
+      <br />
+      {{ currentState.color }}
+      <v-icon large :color="currentState.color">$ayiFlag</v-icon
+      ><span class="text-h5">{{ currentState.name }}</span>
+      <v-icon large v-if="currentState.locked">$ayiLock</v-icon>
+      <v-icon large v-if="currentState.completed">$ayiCheckCircle</v-icon>
+    </template>
     <div>
+      {{ pvm.selectLists.wostatus }}
       <template v-if="canAdd">
         <h5>editable state here</h5>
-        <h6>{{ lastState }}</h6>
-        {{ pvm.selectLists.wostatus }}
-      </template>
-      <template v-else>
-        <h5>read only state here</h5>
-        {{ lastState }}
       </template>
     </div>
 
@@ -65,11 +68,28 @@ export default {
     }
   },
   computed: {
-    lastState() {
-      if (!this.value.states) {
-        return "UNKNOWN";
+    hasState() {
+      return this.value.states != null && this.value.states.length > 0;
+    },
+    currentState() {
+      //return actual status object from top level shell based on current state
+      //if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess
+
+      if (this.value.states == null) {
+        //Not set yet so return not set state
+        return {
+          id: 0,
+          name: "NOT SET YET",
+          active: true,
+          color: "#000000",
+          completed: false,
+          locked: false
+        };
       } else {
-        return this.value.states[this.value.states.length - 1];
+        //find it in the states collection
+        //pvm.selectLists.wostates
+        //and return here
+        //return this.value.states[this.value.states.length - 1];
       }
     },
     canAdd: function() {