@byu-oit/vue-decision-processing-components 8.37.0-0 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byu-oit/vue-decision-processing-components",
-  "version": "8.37.0-0",
+  "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/vuexModules/packet/flags.js

@@ -34,6 +34,21 @@ const endorseVirtualFlag = flags => {
   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
 export const getters = {
   flags (state) {
@@ -47,6 +62,8 @@ export const getters = {
       return blockingVirtualFlag(flags)
     } 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 }