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

package/DetailsCesHold.vue

@@ -15,126 +15,82 @@
 -->
 <template>
   <div class="ces-hold">
-    <span
-       v-if="loaded"
-       :class="holdSet ? flagClass : noFlagClass"
-    >
-      <font-awesome-icon :icon="holdIcon" />
-      {{ holdSet ? 'CES Standards Hold' : 'No CES Standards Hold' }}
-    </span>
-    <span v-else-if="error" class="text-error">
-      <font-awesome-icon :icon="holdIcon" />
-      Error checking CES Standards Hold
-    </span>
-    <span v-else class="text-gray">
-      <font-awesome-icon :icon="spinner" spin />
-      Loading...
+    <span :class="statusClass">
+      <font-awesome-icon :icon="flagIcon" />
+
+      {{cesHoldStatus}}
     </span>
   </div>
 </template>
 <script>
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faCheck, faExclamationTriangle, faQuestionCircle, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCheck, faExclamationTriangle, faSquare, faMinus, faHourglassHalf, faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 
-  import { mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 
-  export default {
-    name: 'DetailsCesHold',
-    components: {
-      FontAwesomeIcon
-    },
-    props: {
-      flagClass: {
-        type: String,
-        default: 'text-error'
-      },
-      noFlagClass: {
-        type: String,
-        default: 'text-secondary'
-      }
-    },
-    data () {
-      return {
-        error: false,
-        loaded: false,
-        holdSet: false
-      }
-    },
-    computed: {
-      ...mapState({
-        env: 'environment',
-        applicantId: state => state.application.applicantId,
-        applicantFirstName: state => state.application.basic.preferredFirstName,
-        applicantSurname: state => state.application.basic.surname,
-        applicantDob: state => state.application.personalRecords.dateOfBirth
-      }),
-      spinner () { return faSpinner },
-      holdIcon () {
-        return this.holdSet ? faExclamationTriangle : this.error ? faQuestionCircle : faCheck
+export default {
+  name: 'DetailsCesHold',
+  components: {
+    FontAwesomeIcon
+  },
+  computed: {
+    ...mapGetters([ 'flagByValue' ]),
+    flag() { return this.flagByValue('cesHolds') },
+    statusClass() {
+      if (this.flag != null){
+        switch(this.flag.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 }
+        }
       }
     },
-    methods: {
-      getByuId: async function () {
-        try {
-          const surname = this.applicantSurname ? this.applicantSurname.trim() : ''
-          const preferredFirstName = this.applicantFirstName ? this.applicantFirstName.trim() : ''
-          const applicantDob = this.applicantDob ? new Date(this.applicantDob).toISOString().split('T')[0].trim() : ''
-          const url = this.env === 'production'
-              ? `https://api.byu.edu/byuapi/persons/v4/?preferred_first_name=${preferredFirstName}&surname=${surname}&vital_record.date_of_birth=${applicantDob}`
-              : `https://api-sandbox.byu.edu/byuapi/persons/v4/?preferred_first_name=${preferredFirstName}&surname=${surname}&vital_record.date_of_birth=${applicantDob}`
-
-          const { body, status } = await window.byu.auth.request({ url })
-          if (status >= 400) {
-            this.error = true
-            return null
-          }
-
-          const data = JSON.parse(body)
-          const recordCount = data.values.length
-
-          if (recordCount !== 1) {
-            return null
-          }
-
-          return data.values[0].byu_id.value
-        } catch (err) {
-          console.error(err)
-          this.error = true
+    flagIcon() {
+      if (this.flag != 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
         }
       }
     },
-    async mounted () {
-      const applicantId = this.applicantId ? this.applicantId : await this.getByuId()
-      if (!applicantId) {
-        this.error = true
-        return
-      }
-      try {
-        const url = this.env !== 'development'
-            ? `https://api.byu.edu/recordsYAPI/v1.0/student/byuId/${applicantId.trim()}/CESflagsHolds`
-            : `https://api-sandbox.byu.edu/recordsYAPI/v1.0/student/byuId/${applicantId.trim()}/CESflagsHolds`
-        const { body, status } = await window.byu.auth.request({ url })
-        if (status >= 400) {
-          this.error = true
-          return
+    cesHoldStatus() {
+      if (this.flag != null) {
+        if (this.flag.message != null && this.flag.message.length > 0) {
+          return this.flag.message
         }
-        const data = JSON.parse(body)
-        const recordCount = data.metadata.rows
-
-        if (recordCount > 0) {
-          this.holdSet = true
-          this.$emit('ces-hold-set')
-        } else {
-          this.$emit('ces-hold-clear')
+        else {
+          switch (this.flag.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.'
+          }
         }
-
-        this.loaded = true
-      } catch (err) {
-        console.error(err)
-        this.error = true
       }
     }
   }
+}
 </script>
 <style scoped>
 </style>

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-1",
   "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,36 @@ 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' }
+}
+
+const cesHoldsVirtualFlag = flags => {
+  const cesHoldsFlag = flags.filter(f => f.value === 'cesHolds')
+  if (cesHoldsFlag.length > 0) return cesHoldsFlag[0]
+
+  const cesFlags = flags.find(f => f.value === 'CES')
+  if (cesFlags != null) {
+    return { ...cesFlags, state: 'fail' }
+  }
+
+  const value = 'cesHolds'
+  const name = 'CES Standard Hold'
+  const type = 'Process'
+  return { value, name, type, isActive: false, isSet: false, isCleared: false, isBlocking: true, state: 'indeterminate' }
 }
 
 // getters
@@ -38,8 +60,10 @@ export const getters = {
     const flags = getters.flags
     if (flagValue === 'blocking') {
       return blockingVirtualFlag(flags)
-    } else if (flagValue === 'endorse') {
+    } else if (flagValue === 'endorsement') {
       return endorseVirtualFlag(flags)
+    }  else if (flagValue === 'cesHolds') {
+      return cesHoldsVirtualFlag(flags)
     }
     const flag = flags.find(({ value }) => value === flagValue)
     return flag || { value: flagValue, name: flagValueToName(flagValue), isSet: false, isCleared: false, isActive: false }
@@ -86,7 +110,9 @@ export const convertFlag = flag => {
     dateTimeSet,
     setBy,
     dateTimeCleared,
-    clearedBy
+    clearedBy,
+    state,
+    message
   } = flag
   const isBlocking = /process|wait/i.test(type)
   return {
@@ -100,7 +126,9 @@ export const convertFlag = flag => {
     setBy,
     dateTimeCleared,
     clearedBy,
-    isBlocking
+    isBlocking,
+    state,
+    message
   }
 }