@byu-oit/vue-decision-processing-components 8.37.2 → 8.37.3

package/DetailsFlagSection.vue

@@ -72,6 +72,14 @@
       ...mapGetters(['flagByValue']),
       flag () { return this.flagByValue(this.flagValue) },
       btnClass () {
+        if (this.flag.state != null && this.flag.state != '') {
+          return {
+            'btn' : true,
+            'btn-sm' : true,
+            'btn-outline-secondary' : ['indeterminate', 'pass'].includes(this.flag.state.toLowerCase()),
+            'btn-outline-danger' : ['fail', 'error'].includes(this.flag.state.toLowerCase())
+          }
+        }
         const set = this.flag.isSet
         const cleared = this.flag.isCleared
         return {
@@ -83,6 +91,9 @@
         }
       },
       btnText () {
+        if (this.flag.state != null && this.flag.state != '') {
+          return ['pass', 'indeterminate'].includes(this.flag.state.toLowerCase()) ? 'set flag' : 'clear flag'
+        }
         return this.flag.isActive ? 'clear flag' : 'set flag'
       },
       flagIcon () {
@@ -90,7 +101,7 @@
         if (this.flag == null){
           return faSquare
         }
-        if (this.flag.state != null){
+        if (this.flag.state != null && this.flag.state != '') {
           switch (this.flag.state.toLowerCase()){
             case 'pass':
               return faCheck
@@ -111,7 +122,7 @@
         if (this.flag == null){
           return `bg-${this.flagIndeterminateColor}`
         }
-        if (this.flag.state != null){
+        if (this.flag.state != null && this.flag.state != ''){
           switch (this.flag.state.toLowerCase()){
             case 'pass':
               return `bg-${this.flagPassColor}`

package/FlagDialog.vue

@@ -38,7 +38,7 @@
     </div>
     <span class="modal-footer">
       <button v-if="editing" class="btn btn-outline-primary" @click="updateFlag">Save</button>
-      <button v-else class="btn btn-outline-primary" @click="startEditing">{{flag.isSet ? flag.isCleared ? 'Reset' : 'Clear' : 'Set'}} Flag</button>
+      <button v-else class="btn btn-outline-primary" @click="startEditing">{{ startEditingText() }} Flag</button>
       <button class="btn btn-outline-secondary" @click="close">Cancel</button>
     </span>
   </div>
@@ -72,14 +72,6 @@ export default {
       note: ''
     }
   },
-  watch: {
-    flag (newValue) {
-      // Go straight to editing if the flag is unset, no status to display
-      if (newValue.isActive !== undefined && !newValue.isActive) {
-        this.editing = true
-      }
-    }
-  },
   methods: {
     ...mapActions(['flagUpdate']),
     beforeOpen (event) {
@@ -99,14 +91,27 @@ export default {
       this.editing = true
     },
     updateFlag () {
-      const {isSet, isCleared} = this.flag
-      const newFlagState = isSet ? isCleared ? 'set' : 'clear' : 'set'
+      let newFlagState;
+      if (this.flag.state != null && this.flag.state != '') {
+        newFlagState = ['indeterminate', 'pass'].includes(this.flag.state.toLowerCase()) ? 'set' : 'clear'
+      }
+      else {
+        const {isSet, isCleared} = this.flag
+        newFlagState = isSet ? isCleared ? 'set' : 'clear' : 'set'
+      }
       return this.flagUpdate({
         applicationUuid: this.appId,
         flagState: newFlagState,
         flagValue: this.flag.value,
         note: this.note
       }).then(() => this.$modal.hide('flag-modal'))
+    },
+    startEditingText () {
+      const state = this.flag.state
+      if (state != null && state != '') {
+        return ['indeterminate', 'pass'].includes(state.toLowerCase()) ? 'Set' : 'Clear'
+      }
+      return this.flag.isSet ? this.flag.isCleared ? 'Reset' : 'Clear' : 'Set'
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byu-oit/vue-decision-processing-components",
-  "version": "8.37.2",
+  "version": "8.37.3",
   "description": "Vue components shared between decision processing systems for the CES schools.",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",