@byu-oit/vue-decision-processing-components 8.34.1 → 8.35.8

package/ReportViewer.vue

@@ -1,165 +1,165 @@
-<!--
-   Copyright 2018 Brigham Young University
-
-   Licensed under the Apache License, Version 2.0 (the "License")
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
--->
-<template>
-  <section class="report-viewer p-2">
-    <div class="accordion">
-      <div v-for="(category, i) of categories" :key="category" class="card">
-        <div @click="show(i)" class="card-header"><h6>{{ category }}</h6></div>
-        <div :class="{ collapse: true, show: i === shownCategory }">
-          <div>
-            <ul class="list">
-              <li
-                v-for="report of reportsWithCategory(category)"
-                :key="report.name"
-                :class="listItemClass(report)"
-              >
-                <dl @click="select(report)" class="p-1">
-                  <dt>{{ report.description }}</dt>
-                  <dd>{{ report.long_description }}</dd>
-                </dl>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <Report
-        v-if="selectedReport"
-        :report-name="selectedReport.name"
-        :base-url="calculatedBaseUrl"
-        :detail="showDetail"
-        :chart="showChart"
-      />
-    </div>
-  </section>
-</template>
-<script>
-import Report from './Report'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'ReportViewer',
-  components: { Report },
-  props: {
-    packetBaseUrl: {
-      type: String,
-      required: true
-    },
-    appBaseUrl: {
-      type: String,
-      required: true
-    }
-  },
-  data () {
-    return {
-      shownCategory: -1,
-      selectedReport: null
-    }
-  },
-  computed: {
-    ...mapState({
-      reports: state => state.reports.list
-    }),
-    categories () {
-      const reports = this.reports
-      const allObjectCategories = reports.map(o => o.category ? o.category : 'Other')
-      const addToSet = (set, o) => set.add(o)
-      const uniqueCategories = Array.from(allObjectCategories.reduce(addToSet, new Set()))
-      return uniqueCategories
-    },
-    showDetail () {
-      if (this.selectedReport.content_type) {
-        return this.selectedReport.content_type.includes('text/csv')
-      } else {
-        return true
-      }
-    },
-    showChart () {
-      if (this.selectedReport.content_type) {
-        return this.selectedReport.content_type.includes('image/svg+xml')
-      } else {
-        return false
-      }
-    },
-    calculatedBaseUrl () {
-      if (this.selectedReport.appService === 'new') {
-        return this.appBaseUrl + '/proxy/report'
-      } else if (this.selectedReport.appService === 'old') {
-        return this.appBaseUrl + '/report'
-      } else if (this.selectedReport.appService === 'packet') {
-        return this.packetBaseUrl + '/report'
-      }
-
-      let reportUrl = ''
-      if (this.selectedReport.appService) {
-        reportUrl = this.appBaseUrl
-      } else {
-        reportUrl = this.packetBaseUrl
-      }
-      if (this.selectedReport.proxy) {
-        reportUrl = reportUrl + '/proxy'
-      }
-      return reportUrl + '/report'
-    }
-  },
-  methods: {
-    show (i) {
-      this.shownCategory = i
-    },
-    select (report) {
-      this.selectedReport = report
-    },
-    reportsWithCategory (category) {
-      const allReports = Object.values(this.reports)
-      if(category === 'Other') {
-        return allReports.filter(o => !o.category)
-      }
-      return allReports.filter(o => o.category === category)
-    },
-    listItemClass (report) {
-      if(this.selectedReport && this.selectedReport.name === report.name) {
-        return 'bg-primary text-white'
-      }
-      return ''
-    }
-  }
-}
-</script>
-<style scoped>
-  .list{
-    -webkit-padding-start: 0;
-    padding: 0;
-    list-style-type: none;
-    list-style-position: outside;
-  }
-  .report-viewer{
-    display: grid;
-    grid-template-columns: 1fr 4fr;
-    grid-gap: 0.5rem;
-    min-height: 60vh;
-  }
-  dl {
-    cursor: pointer;
-    margin: 0;
-  }
-  li {
-    border-bottom: thin solid #aaa;
-  }
-  li:hover {
-    background-color: var(--light, gray);
-  }
-</style>
+<!--
+   Copyright 2018 Brigham Young University
+
+   Licensed under the Apache License, Version 2.0 (the "License")
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+-->
+<template>
+  <section class="report-viewer p-2">
+    <div class="accordion">
+      <div v-for="(category, i) of categories" :key="category" class="card">
+        <div @click="show(i)" class="card-header"><h6>{{ category }}</h6></div>
+        <div :class="{ collapse: true, show: i === shownCategory }">
+          <div>
+            <ul class="list">
+              <li
+                v-for="report of reportsWithCategory(category)"
+                :key="report.name"
+                :class="listItemClass(report)"
+              >
+                <dl @click="select(report)" class="p-1">
+                  <dt>{{ report.description }}</dt>
+                  <dd>{{ report.long_description }}</dd>
+                </dl>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <Report
+        v-if="selectedReport"
+        :report-name="selectedReport.name"
+        :base-url="calculatedBaseUrl"
+        :detail="showDetail"
+        :chart="showChart"
+      />
+    </div>
+  </section>
+</template>
+<script>
+import Report from './Report'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'ReportViewer',
+  components: { Report },
+  props: {
+    packetBaseUrl: {
+      type: String,
+      required: true
+    },
+    appBaseUrl: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      shownCategory: -1,
+      selectedReport: null
+    }
+  },
+  computed: {
+    ...mapState({
+      reports: state => state.reports.list
+    }),
+    categories () {
+      const reports = this.reports
+      const allObjectCategories = reports.map(o => o.category ? o.category : 'Other')
+      const addToSet = (set, o) => set.add(o)
+      const uniqueCategories = Array.from(allObjectCategories.reduce(addToSet, new Set()))
+      return uniqueCategories
+    },
+    showDetail () {
+      if (this.selectedReport.content_type) {
+        return this.selectedReport.content_type.includes('text/csv')
+      } else {
+        return true
+      }
+    },
+    showChart () {
+      if (this.selectedReport.content_type) {
+        return this.selectedReport.content_type.includes('image/svg+xml')
+      } else {
+        return false
+      }
+    },
+    calculatedBaseUrl () {
+      if (this.selectedReport.appService === 'new') {
+        return this.appBaseUrl + '/proxy/report'
+      } else if (this.selectedReport.appService === 'old') {
+        return this.appBaseUrl + '/report'
+      } else if (this.selectedReport.appService === 'packet') {
+        return this.packetBaseUrl + '/report'
+      }
+
+      let reportUrl = ''
+      if (this.selectedReport.appService) {
+        reportUrl = this.appBaseUrl
+      } else {
+        reportUrl = this.packetBaseUrl
+      }
+      if (this.selectedReport.proxy) {
+        reportUrl = reportUrl + '/proxy'
+      }
+      return reportUrl + '/report'
+    }
+  },
+  methods: {
+    show (i) {
+      this.shownCategory = i
+    },
+    select (report) {
+      this.selectedReport = report
+    },
+    reportsWithCategory (category) {
+      const allReports = Object.values(this.reports)
+      if(category === 'Other') {
+        return allReports.filter(o => !o.category)
+      }
+      return allReports.filter(o => o.category === category)
+    },
+    listItemClass (report) {
+      if(this.selectedReport && this.selectedReport.name === report.name) {
+        return 'bg-primary text-white'
+      }
+      return ''
+    }
+  }
+}
+</script>
+<style scoped>
+  .list{
+    -webkit-padding-start: 0;
+    padding: 0;
+    list-style-type: none;
+    list-style-position: outside;
+  }
+  .report-viewer{
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+    grid-gap: 0.5rem;
+    min-height: 60vh;
+  }
+  dl {
+    cursor: pointer;
+    margin: 0;
+  }
+  li {
+    border-bottom: thin solid #aaa;
+  }
+  li:hover {
+    background-color: var(--light, gray);
+  }
+</style>

package/RequestAccess.vue

@@ -1,14 +1,14 @@
-<template>
-  <section>
-    <p>You do not currently have access to this system. If you are an employee in the admissions
-    office, you may request access now, and one of the admissions officers will be able to grant
-    access.</p>
-
-    <button class="btn btn-primary">Request Access</button>
-  </section>
-</template>
-<script>
-  export default {
-    name: 'RequestAccess'
-  }
-</script>
+<template>
+  <section>
+    <p>You do not currently have access to this system. If you are an employee in the admissions
+    office, you may request access now, and one of the admissions officers will be able to grant
+    access.</p>
+
+    <button class="btn btn-primary">Request Access</button>
+  </section>
+</template>
+<script>
+  export default {
+    name: 'RequestAccess'
+  }
+</script>

package/RequestAccessList.vue

@@ -1,45 +1,45 @@
-<template>
-  <div>
-    <table class="table table-hover table-bordered">
-      <caption>14 active requests</caption>
-      <thead class="thead-light">
-        <tr>
-          <th>Name</th>
-          <th>ID</th>
-          <th>Requested On</th>
-          <th>Role</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row of data" :key="row.id">
-          <td>{{row.name}}</td>
-          <td>{{row.id}}</td>
-          <td>{{row.requestedOn}}</td>
-          <td>
-            <select>
-              <option value="student">Student</option>
-              <option value="processor">Processor</option>
-              <option value="officer">Officer</option>
-            </select>
-          </td>
-          <td>
-            <button class="btn btn-success">Grant</button>
-            <button class="btn btn-danger">Delete</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'RequestAccessList',
-    props: {
-      'data': {
-        type: Array,
-        default: []
-      }
-    }
-  }
-</script>
+<template>
+  <div>
+    <table class="table table-hover table-bordered">
+      <caption>14 active requests</caption>
+      <thead class="thead-light">
+        <tr>
+          <th>Name</th>
+          <th>ID</th>
+          <th>Requested On</th>
+          <th>Role</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row of data" :key="row.id">
+          <td>{{row.name}}</td>
+          <td>{{row.id}}</td>
+          <td>{{row.requestedOn}}</td>
+          <td>
+            <select>
+              <option value="student">Student</option>
+              <option value="processor">Processor</option>
+              <option value="officer">Officer</option>
+            </select>
+          </td>
+          <td>
+            <button class="btn btn-success">Grant</button>
+            <button class="btn btn-danger">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'RequestAccessList',
+    props: {
+      'data': {
+        type: Array,
+        default: []
+      }
+    }
+  }
+</script>

package/RoleSelector.vue

@@ -1,29 +1,29 @@
-<template>
-  <select :value="role" @input="updateRole($event.target.value)" class="form-control">
-    <option v-for="role of roles" :key="role" :value="role">
-      {{role}}
-    </option>
-  </select>
-</template>
-<script>
-import { mapState, mapMutations } from 'vuex'
-
-export default {
-  name: 'RoleSelector',
-  props: {
-    roles: Array,
-    required: true
-  },
-  computed: {
-    ...mapState({
-      role: state => state.userInfo.role
-    })
-  },
-  methods: {
-    ...mapMutations(['setRole']),
-    updateRole (val) {
-      this.setRole({ role: val })
-    }
-  }
-}
-</script>
+<template>
+  <select :value="role" @input="updateRole($event.target.value)" class="form-control">
+    <option v-for="role of roles" :key="role" :value="role">
+      {{role}}
+    </option>
+  </select>
+</template>
+<script>
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+  name: 'RoleSelector',
+  props: {
+    roles: Array,
+    required: true
+  },
+  computed: {
+    ...mapState({
+      role: state => state.userInfo.role
+    })
+  },
+  methods: {
+    ...mapMutations(['setRole']),
+    updateRole (val) {
+      this.setRole({ role: val })
+    }
+  }
+}
+</script>

package/Search.vue

@@ -1,22 +1,22 @@
-<template>
-  <span>
-    <FontAwesomeIcon :icon="searchIcon"/> SEARCH
-  </span>
-</template>
-<script>
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faSearch } from '@fortawesome/free-solid-svg-icons'
-
-  export default {
-    name: 'Search',
-    components: { FontAwesomeIcon },
-    computed: {
-      searchIcon () { return faSearch }
-    }
-  }
-</script>
-<style scoped>
-  span {
-    vertical-align: middle;
-  }
-</style>
+<template>
+  <span>
+    <FontAwesomeIcon :icon="searchIcon"/> SEARCH
+  </span>
+</template>
+<script>
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { faSearch } from '@fortawesome/free-solid-svg-icons'
+
+  export default {
+    name: 'Search',
+    components: { FontAwesomeIcon },
+    computed: {
+      searchIcon () { return faSearch }
+    }
+  }
+</script>
+<style scoped>
+  span {
+    vertical-align: middle;
+  }
+</style>

package/ShowApplicantIds.vue

@@ -0,0 +1,100 @@
+<template>
+    <modal
+      name="show-applicant-ids-modal"
+      height="auto"
+      scrollable
+      draggable
+    >
+    <div class="bg-light p-1 text-uppercase">Applicant Id's</div>
+    <div>
+        <table class="table table-bordered">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th>Application Id</th>
+                    <td>{{ applicationId }}</td>
+                </tr>
+                <tr>
+                    <th>Net Id</th>
+                    <td>{{ netId }}</td>
+                </tr>
+                <tr>
+                    <th>Byu Id</th>
+                    <td>{{ applicantId }}</td>
+                </tr>
+                <tr>
+                    <th>Person Id</th>
+                    <td>{{ personId }}</td>
+                </tr>
+                <tr>
+                    <th>Central Processing Id</th>
+                    <td>{{ cpId }}</td>
+                </tr>
+                <tr>
+                    <th>Rsvp Id</th>
+                    <td>{{ rsvpId }}</td>
+                </tr>
+                <tr>
+                    <th>Ces Id</th>
+                    <td>{{ cesId }}</td>
+                </tr>
+                <tr>
+                    <th>Pathway Id</th>
+                    <td>{{ pathId }}</td>
+                </tr>
+                <tr>
+                    <th>Church Account Id</th>
+                    <td>{{ churchAccountId }}</td>
+                </tr>
+                <tr>
+                    <th>Church Account Username</th>
+                    <td>{{ churchUserName }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <span class="modal-footer">
+        <button @click="close" type="button" class="btn btn-sm btn-outline-danger">Close</button>
+    </span>
+    </modal>
+</template>
+<script>
+    import { mapState } from 'vuex'
+
+    export default {
+        name: 'ShowApplicantIds',
+        computed:{
+            ...mapState({
+                netId: state => state.application.netId,
+                applicantId: state => state.application.applicantId,
+                personId: state => state.application.personId,
+                cpId: state => state.newApp.cpId,
+                rsvpId: state => state.newApp.rsvpId,
+                cesId: state => state.newApp.cesId,
+                applicationId: state => state.newApp.appId,
+                pathId: state => state.newApp.pathId,
+                churchAccountId: state => state.newApp.churchAccountId,
+                churchUserName: state => state.newApp.churchUserName,
+            })
+        },
+        methods: {
+            close () {
+                this.$modal.hide('show-applicant-ids-modal')
+            },
+        }
+    }
+</script>
+<style scoped>
+    .applicant {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: 1fr 1fr;
+        grid-column-gap: 0.5rem;
+    }
+
+</style>