@byu-oit/vue-decision-processing-components 8.36.2 → 8.37.0-0

package/DetailsEndorsement.vue

@@ -29,7 +29,7 @@
 </template>
 <script>
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faHourglassHalf, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+  import { faCheck, faExclamationTriangle, faSquare, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
   import { mapState, mapGetters } from 'vuex'
 
   export default {
@@ -44,19 +44,70 @@
       endorsementPendingFlag () { return this.flagByValue('EP') },
       endorsementDeniedFlag () { return this.flagByValue('ED') },
       endorsementIssuesFlag () { return this.flagByValue('EI') },
+      endorsementNewFlag () { return this.flagByValue('endorsement')},
       icon () {
+        if (this.endorsementNewFlag != null){
+          switch(this.endorsementNewFlag.state.toLowerCase()){
+            case 'pass':
+              return faCheck
+            case 'fail':
+              return faMinus
+            case 'error':
+              return faExclamationTriangle
+            case 'indeterminate':
+              return faSquare
+            default:
+              return faExclamationTriangle
+          }
+        }
+        //BELOW THIS IS THE OLD SYSTEM'S FLAG LOGIC (before the 'state' column was added)
         if (this.endorsementDeniedFlag.isActive) return faExclamationTriangle
         else if (this.endorsementIssuesFlag.isActive) return faExclamationTriangle
         else if (this.endorsementPendingFlag.isActive) return faHourglassHalf
         return faCheck
       },
       statusClass () {
+        if (this.endorsementNewFlag != null){
+          switch(this.endorsementNewFlag.state.toLowerCase()){
+            case 'pass':
+              return { 'text-success': true }
+            case 'fail':
+              return { 'text-danger': true }
+            case 'error':
+              return { 'text-danger': true, 'font-weight-bold': true }
+            case 'indeterminate':
+              return { 'text-dark': true }
+            default:
+              return { 'text-danger': true, 'font-weight-bold': true }
+          }
+        }
+        //BELOW THIS IS THE OLD SYSTEM'S FLAG LOGIC (before the 'state' column was added)
         if (this.endorsementDeniedFlag.isActive) return { 'text-danger': true }
         else if (this.endorsementIssuesFlag.isActive) return { 'text-danger': true }
         else if (this.endorsementPendingFlag.isActive) return { 'text-dark': true, 'font-weight-bold': true }
         return { 'text-success': true }
       },
       endorsementStatus () {
+        if (this.endorsementNewFlag != null) {
+          if (this.endorsementNewFlag.message != null && this.endorsementNewFlag.message.length > 0) {
+            return this.endorsementNewFlag.message
+          }
+          else {
+            switch (this.endorsementNewFlag.state.toLowerCase()) {
+              case 'pass':
+                return 'Everything looks good!'
+              case 'fail':
+                return 'Requires additional attention.'
+              case 'error':
+                return 'An error occurred. Try again later.'
+              case 'indeterminate':
+                return 'No data available.'
+              default:
+                return 'An error occurred. Try again later.'
+            }
+          }
+        }
+        //BELOW THIS IS THE OLD SYSTEM'S FLAG LOGIC (before the 'state' column was added)
         if (this.endorsementDeniedFlag.isActive) return `Endorsement Denied`
         else if (this.endorsementIssuesFlag.isActive) return `Endorsement Issues`
         else if (this.endorsementPendingFlag.isActive) return `Endorsement Pending`

package/DetailsFlagSection.vue

@@ -23,6 +23,7 @@
       <button :class="btnClass" @click="flagModal">
         {{btnText}}
       </button>
+<!--      <slot name="refreshButton"></slot>-->
     </div>
     <div v-if="hasSummary" class="summary">
       <slot name="summary"></slot>
@@ -32,13 +33,11 @@
       <slot></slot>
     </div>
   </div>
-</span>
 </template>
 <script>
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+  import { faCheck,faExclamationTriangle,faSquare,faMinus } from '@fortawesome/free-solid-svg-icons'
   import { mapGetters } from 'vuex'
-
   import ExpandIndicator from './ExpandIndicator'
 
   export default {
@@ -58,7 +57,11 @@
       },
       'flagActiveColor': { type: String },
       'flagInactiveColor': { type: String },
-      'hideIfUnset': { type: Boolean }
+      'hideIfUnset': { type: Boolean },
+      'flagPassColor': { type: String, default: 'success' },
+      'flagErrorColor': { type: String, default: 'dark' },
+      'flagFailColor': { type: String, default: 'danger' },
+      'flagIndeterminateColor': { type: String, default: 'secondary' }
     },
     data () {
       return {
@@ -83,9 +86,46 @@
         return this.flag.isActive ? 'clear flag' : 'set flag'
       },
       flagIcon () {
+        //If there is no flag set, the state is 'indeterminate'
+        if (this.flag == null){
+          return faSquare
+        }
+        if (this.flag.state != null){
+          switch (this.flag.state.toLowerCase()){
+            case 'pass':
+              return faCheck
+            case 'fail':
+              return faMinus
+            case 'error':
+              return faExclamationTriangle
+            case 'indeterminate':
+              return faSquare
+            default:
+              return faExclamationTriangle
+          }
+        }
         return this.flag.isActive ? faExclamationTriangle : faCheck
       },
       flagBg () {
+        //If there is no flag set, the state is 'indeterminate'
+        if (this.flag == null){
+          return `bg-${this.flagIndeterminateColor}`
+        }
+        if (this.flag.state != null){
+          switch (this.flag.state.toLowerCase()){
+            case 'pass':
+              return `bg-${this.flagPassColor}`
+            case 'fail':
+              return `bg-${this.flagFailColor}`
+            case 'error':
+              return `bg-${this.flagErrorColor}`
+            case 'indeterminate':
+              return `bg-${this.flagIndeterminateColor}`
+            default:
+              return `bg-${this.flagErrorColor}`
+          }
+        }
+
         const stateAware = this.flagActiveColor && this.flagInactiveColor
         if (!stateAware) return `bg-${this.flagType}`
 

package/package.json

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

package/parsers/packet.js

@@ -12,6 +12,8 @@ export const parseFlag = f => {
   const clearedBy = get(f, 'id_cleared_by.description')
   const clearedById = get(f, 'id_cleared_by.value')
   const type = get(f, 'type.value')
+  const state = get(f, 'state.value')
+  const message = get(f, 'message.value')
   return {
     dateTimeCleared,
     setBy,
@@ -21,7 +23,9 @@ export const parseFlag = f => {
     dateTimeSet,
     clearedBy,
     clearedById,
-    type
+    type,
+    state,
+    message
   }
 }
 

package/vuexModules/packet/flags.js

@@ -17,14 +17,21 @@ const blockingVirtualFlag = flags => {
 }
 
 const endorseVirtualFlag = flags => {
+  // Get new endorsement flag data
+  const endorsementNewFlag = flags.filter(f => f.value === 'endorsement')
+  if(endorsementNewFlag.length > 0) return endorsementNewFlag[0]
+
+  // Maintain old functionality
   const edFlag = flags.filter(f => f.value === 'ED').filter(f => f.isActive)
   const eiFlag = flags.filter(f => f.value === 'EI').filter(f => f.isActive)
   const allFlags = edFlag.concat(eiFlag)
   if (allFlags.length > 0) return allFlags[0]
-  const value = 'endorse'
+
+  // Default if no flag data is found
+  const value = 'endorsement'
   const name = 'Endorsement Problem'
   const type = 'Process'
-  return { value, name, type, isActive: false, isSet: false, isCleared: false, isBlocking: true }
+  return { value, name, type, isActive: false, isSet: false, isCleared: false, isBlocking: true, state: 'indeterminate' }
 }
 
 // getters
@@ -38,7 +45,7 @@ export const getters = {
     const flags = getters.flags
     if (flagValue === 'blocking') {
       return blockingVirtualFlag(flags)
-    } else if (flagValue === 'endorse') {
+    } else if (flagValue === 'endorsement') {
       return endorseVirtualFlag(flags)
     }
     const flag = flags.find(({ value }) => value === flagValue)
@@ -86,7 +93,9 @@ export const convertFlag = flag => {
     dateTimeSet,
     setBy,
     dateTimeCleared,
-    clearedBy
+    clearedBy,
+    state,
+    message
   } = flag
   const isBlocking = /process|wait/i.test(type)
   return {
@@ -100,7 +109,9 @@ export const convertFlag = flag => {
     setBy,
     dateTimeCleared,
     clearedBy,
-    isBlocking
+    isBlocking,
+    state,
+    message
   }
 }