@byu-oit/vue-decision-processing-components 8.36.1 → 8.36.2

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.36.2",
   "description": "Vue components shared between decision processing systems for the CES schools.",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",