@byu-oit/vue-decision-processing-components 8.36.1 → 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/SearchForm.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="search-form p-2">
+    <form @submit.prevent="doSearch(null)">
+      <div class="p-1 d-inline-block">
+        <div class="custom-control custom-switch">
+          <input type="checkbox" class="custom-control-input float-end" id="searchNewAppSwitch" v-model="searchNewApp">
+          <label class="custom-control-label" for="searchNewAppSwitch">{{ searchNewApp ? 'NEW' : 'OLD' }} App</label>
+        </div>
+
+        <label for="lastNameInput">Last Name/ID</label>
+        <input id="lastName00Input" v-model="lastName" @focus="$event.target.select()">
+
+        <label for="firstNameInput">First Name</label>
+        <input id="firstNameInput" v-model="firstName" @focus="$event.target.select()">
+
+        <label for="monthInput">Birthdate</label>
+        <input id="monthInput" aria-label="month" placeholder="mm" v-model="month" @focus="$event.target.select()" @blur="month = month.length===1 ? '0' + month : month" size="2" maxlength="2" :required="day !== '' || year !== ''">
+        <input id="dayInput" aria-label="day" placeholder="dd" v-model="day" @focus="$event.target.select()" @blur="day = day.length===1 ? '0' + day : day" size="2" maxlength="2" :required="month !== '' || year !== ''">
+        <input id="yearInput" aria-label="year" placeholder="yyyy" v-model="year" @focus="$event.target.select()" size="4" maxlength="4" :required="month !== '' || day !== ''">
+      </div>
+
+      <button id="submitBtn" type="submit" class="btn btn-sm btn-outline-primary">
+        {{searching ? 'Searching' : 'Search'}}
+        <FontAwesomeIcon v-if="searching" :icon="icon" :spin="searching" />
+      </button>
+    </form>
+    <SearchResults :results="results" @searchPaginate="doSearch" @select="$emit('select', { appId: $event, searchNewApp })" />
+  </div>
+</template>
+<script>
+import SearchResults from './SearchResults.vue'
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+import {faSpinner} from '@fortawesome/free-solid-svg-icons'
+import {mapActions} from "vuex";
+
+export default {
+  name: 'SearchForm',
+  components: {
+    SearchResults,
+    FontAwesomeIcon
+  },
+  data() {
+    return {
+      lastName: '',
+      firstName: '',
+      month: '',
+      day: '',
+      year: '',
+      results: {},
+      searchNewApp: true,
+      searching: false
+    }
+  },
+  computed: {
+    icon() {
+      return faSpinner
+    },
+    birthDate() {
+      if (!(this.year.length === 4 && this.month.length === 2 && this.day.length === 2)) {
+        return ''
+      }
+      return this.year + '-' + this.month + '-' + this.day
+    }
+  },
+  methods: {
+    // mapActions is a Vuex helper function that maps stored actions to a local method
+    ...mapActions({
+      oldSearchFunction: 'oldAppSearch',
+      newSearchFunction: 'newAppSearch'
+    }),
+
+    async doSearch(pageLink) {
+      this.lastName = this.lastName.trim()
+      this.firstName = this.firstName.trim()
+
+      if (this.searchNewApp) {
+        this.results = await this.newAppSearch()
+      } else {
+        this.results = await this.oldAppSearch(pageLink)
+      }
+
+      if (!this.results) return
+
+      if (this.results.people.length === 1) {
+        this.$emit('select', {appId: this.results.people[0].appId, searchNewApp: this.searchNewApp})
+      } else {
+        this.$modal.show('search-results')
+      }
+
+      // clear search fields
+      this.lastName = ''
+      this.firstName = ''
+      this.year = ''
+      this.month = ''
+      this.day = ''
+    },
+    async newAppSearch() {
+      const params = {}
+      if (this.lastName.length > 0) {
+        if (this.firstName.length > 0) {
+          params.surname = this.lastName
+          params.first_name = this.firstName
+        } else {
+          params.search = this.lastName
+        }
+      } else if (this.firstName.length > 0) {
+        params.first_name = this.firstName
+      }
+      if (this.birthDate) {
+        params.birth_date = this.birthDate
+      }
+
+      if (Object.keys(params).length === 0) {
+        alert('No search terms specified!')
+        return
+      }
+
+      this.searching = true
+      return this.newSearchFunction(params)
+          .finally(() => this.searching = false)
+    },
+    async oldAppSearch(pageLink) {
+      let params = {}
+      if (this.lastName.length > 0) {
+        if (this.firstName.length > 0) {
+          params.last_name = this.lastName
+          params.first_name = this.firstName
+          if (this.birthDate) {
+            params.birth = this.birthDate
+          }
+        } else if (this.birthDate) {
+          params.last_name = this.lastName
+          params.birth = this.birthDate
+        } else {
+          params.search = this.lastName
+        }
+      } else if (this.firstName.length > 0) {
+        params.first_name = this.firstName
+        if (this.birthDate) {
+          params.birth = this.birthDate
+        }
+      }
+      if (Object.keys(params).length === 0) {
+        alert('No search terms specified!')
+        return
+      }
+
+      this.searching = true
+      return this.oldSearchFunction(params, pageLink)
+          .finally(() => this.searching = false)
+    }
+  }
+}
+</script>
+<style scoped>
+.search-form {
+  box-shadow: inset 0rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
+}
+
+.custom-switch .custom-control-label::before,
+.custom-control-label::before {
+  right: -2.25rem;
+  left: unset;
+}
+
+.custom-switch .custom-control-label::after,
+.custom-control-label::after {
+  right: calc(-1.5rem + 2px);
+  left: unset;
+}
+
+.custom-switch {
+  display: inherit;
+  padding-right: 2.25rem;
+  padding-left: unset;
+}
+</style>

package/SearchResults.vue

@@ -0,0 +1,113 @@
+<template>
+  <modal name="search-results" :width="dialogWidth" height="auto" :scrollable="true">
+    <div class="bg-light p-1 text-uppercase">Search Results</div>
+    <div class="search-results p-2">
+      <div class="results">
+        <table class="table table-sm table-striped table-hover">
+          <thead>
+          <th>Name</th>
+          <th>Birthday</th>
+          <th>BYU ID</th>
+          <th>Net ID</th>
+          <th>Applicant Type</th>
+          <th>Admit Period</th>
+          <th>Application Status</th>
+          <th>Submitted On</th>
+          </thead>
+          <tbody>
+          <tr v-for="row of filteredApps" :key="row.appId">
+            <td>
+              <a href="#" @click.prevent="$emit('select', row.appId)">
+                {{row.name}}
+              </a>
+            </td>
+            <td>{{row.dateOfBirth | dateFormat}}</td>
+            <td>{{row.byuId}}</td>
+            <td>{{row.netId}}</td>
+            <td>{{row.applicantType}}</td>
+            <td>{{row.admitPeriod | yearTerm }}</td>
+            <td>{{row.applicationStatus + (row.decisionQualifier ? ' | ' + row.decisionQualifier : '')}}</td>
+            <td>{{row.submittedDate | dateFormat}}</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <span class="modal-footer">
+        <input type="checkbox" v-model="showNonPending" id="showNonPending">
+        <label for="showNonPending">Show Closed/Past Applications</label>
+        <button v-if="results.prev" @click="prev" class="btn btn-outline-info">Prev Page</button>
+        <button v-if="results.next" @click="next" class="btn btn-outline-info">Next Page</button>
+        <button @click="close" class="btn btn-outline-secondary">Close</button>
+      </span>
+    </div>
+  </modal>
+</template>
+<script>
+export default {
+  name: 'SearchResults',
+  props: {
+    results: {
+      type: Object,
+      default() {
+        return {next: null, prev: null, people: []}
+      }
+    }
+  },
+  data() {
+    return {
+      showNonPending: false
+    }
+  },
+  computed: {
+    dialogWidth() {
+      const vw = v => {
+        const w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+        return (v * w) / 100
+      }
+      const desiredWidth = vw(80)
+      return Math.max(800, desiredWidth)
+    },
+    filteredApps() {
+      if (this.showNonPending) {
+        return this.results.people
+      }
+      if (!Array.isArray(this.results.people)) {
+        return []
+      }
+      console.log(this.results.people[0])
+      return this.results.people.filter(({applicationStatusValue}) => ['OPEN', 'SUBMITTED'].includes(applicationStatusValue))
+    }
+  },
+  methods: {
+    close() {
+      this.$modal.hide('search-results')
+    },
+    prev() {
+      const link = this.results.prev
+      this.$emit('searchPaginate', link)
+    },
+    next() {
+      const link = this.results.next
+      this.$emit('searchPaginate', link)
+    }
+  },
+  watch: {
+    $route: {
+      handler() {
+        this.close()
+      },
+      deep: true
+    },
+    results: {
+      handler() {
+        if (!this.showNonPending && this.results.people.length > 0 && this.filteredApps.length === 0) {
+          this.showNonPending = true
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byu-oit/vue-decision-processing-components",
-  "version": "8.36.1",
+  "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
   }
 }