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

package/DetailsTestScores.vue

@@ -1,131 +1,131 @@
-<!--
-   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>
-  <table class="table table-borderless table-sm">
-    <thead>
-      <tr>
-        <th>Test Name</th>
-        <th>Test Date</th>
-        <th>Date Processed</th>
-        <th class="composite">Composite Score</th>
-        <th>Scores</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(ts, i) in orderedTestScores">
-        <td>
-          {{ts.testName}}
-          <template v-if="ts.selfReported">
-            <br>
-            <strong><em>Self Reported</em></strong>
-          </template>
-          <template v-if="!ts.optIn">
-            <br>
-            <strong><em>Opt-Out</em></strong>
-          </template>
-        </td>
-        <td>{{ts.testDate | dateFormat}}</td>
-        <td>{{ts.dateProcessed | dateFormat}}</td>
-        <td v-if="/^SAT/.test(ts.testName)" class="composite">
-          <span class="badge badge-primary x-lg">{{ts.compositeScore}}</span>
-          <br>
-          <span class="bold">({{ts.compositeScore | sat2ActFilter}} ACT)</span>
-        </td>
-        <td v-else class="composite">
-          <span class="badge badge-primary x-lg">{{ts.compositeScore | removeLeadingZeros}}</span>
-        </td>
-        <td>
-          <table class="table table-borderless table-sm" v-if="ts.testComponents.length > 0">
-            <thead>
-              <th v-for="sub in ts.testComponents" :key="sub.name">{{sub.name}}</th>
-            </thead>
-            <tbody>
-              <td v-for="sub in ts.testComponents" :key="sub.name">{{sub.score | removeLeadingZeros}}</td>
-            </tbody>
-          </table>
-        </td>
-      </tr>
-      <tr v-if="testScores.length===0">
-        <td colspan="4">No test scores recorded</td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-<script>
-import { mapGetters } from 'vuex'
-import { dateFormat } from './dateTimeFormat'
-import { sat2ActFilter } from './sat2Act'
-
-function yearMonth2Date (yearMonth) {
-  if (!/^[0-9]{4}-[0-9]{2}$/.test(yearMonth)) {
-    return yearMonth
-  }
-  const year = yearMonth.slice(0, 4)
-  const month = yearMonth.slice(5, 7)
-  return new Date(year, parseInt(month) - 1)
-}
-
-export default {
-  name: 'DetailsTestScores',
-  computed: {
-    ...mapGetters([ 'testScores' ]),
-
-    orderedTestScores() {
-      // sort test scores by test date
-      const scores = this.testScores.slice().sort((a, b) => {
-        const dt1 = yearMonth2Date(a.testDate)
-        const dt2 = yearMonth2Date(b.testDate)
-        if (!dt1 instanceof Date && !dt2 instanceof Date) return 0
-        if (!dt1 instanceof Date) return 1
-        if (!dt2 instanceof Date) return -1
-
-        return dt1 < dt2 ? 1 : -1
-      })
-
-      // sort 'reading' before 'listening' for TOEFL test
-      for (let score of scores) {
-        if (!score.testComponents || score.testName !== 'TOEFL') continue
-        score.testComponents = score.testComponents.sort((a, b) => {
-          if (a.name === 'listening' && b.name === 'reading') return 1
-          return 0
-        })
-      }
-      return scores
-    }
-  },
-  filters: {
-    dateFormat,
-    sat2ActFilter,
-    removeLeadingZeros: function (value) {
-      if ( (!value) || !(/^\d+$/.test(value)) ) return value // leave as is if not a string of numbers
-      return parseInt(value, 10) // remove leading zeros
-    }
-  }
-}
-</script>
-<style scoped>
-.composite {
-  text-align: center;
-  vertical-align: center;
-}
-.x-lg {
-  font-size: 1.4rem;
-  font-weight: 700;
-}
-.bold {
-  font-weight: 700;
-}
-</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>
+  <table class="table table-borderless table-sm">
+    <thead>
+      <tr>
+        <th>Test Name</th>
+        <th>Test Date</th>
+        <th>Date Processed</th>
+        <th class="composite">Composite Score</th>
+        <th>Scores</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(ts, i) in orderedTestScores">
+        <td>
+          {{ts.testName}}
+          <template v-if="ts.selfReported">
+            <br>
+            <strong><em>Self Reported</em></strong>
+          </template>
+          <template v-if="!ts.optIn">
+            <br>
+            <strong><em>Opt-Out</em></strong>
+          </template>
+        </td>
+        <td>{{ts.testDate | dateFormat}}</td>
+        <td>{{ts.dateProcessed | dateFormat}}</td>
+        <td v-if="/^SAT/.test(ts.testName)" class="composite">
+          <span class="badge badge-primary x-lg">{{ts.compositeScore}}</span>
+          <br>
+          <span class="bold">({{ts.compositeScore | sat2ActFilter}} ACT)</span>
+        </td>
+        <td v-else class="composite">
+          <span class="badge badge-primary x-lg">{{ts.compositeScore | removeLeadingZeros}}</span>
+        </td>
+        <td>
+          <table class="table table-borderless table-sm" v-if="ts.testComponents.length > 0">
+            <thead>
+              <th v-for="sub in ts.testComponents" :key="sub.name">{{sub.name}}</th>
+            </thead>
+            <tbody>
+              <td v-for="sub in ts.testComponents" :key="sub.name">{{sub.score | removeLeadingZeros}}</td>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+      <tr v-if="testScores.length===0">
+        <td colspan="4">No test scores recorded</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { dateFormat } from './dateTimeFormat'
+import { sat2ActFilter } from './sat2Act'
+
+function yearMonth2Date (yearMonth) {
+  if (!/^[0-9]{4}-[0-9]{2}$/.test(yearMonth)) {
+    return yearMonth
+  }
+  const year = yearMonth.slice(0, 4)
+  const month = yearMonth.slice(5, 7)
+  return new Date(year, parseInt(month) - 1)
+}
+
+export default {
+  name: 'DetailsTestScores',
+  computed: {
+    ...mapGetters([ 'testScores' ]),
+
+    orderedTestScores() {
+      // sort test scores by test date
+      const scores = this.testScores.slice().sort((a, b) => {
+        const dt1 = yearMonth2Date(a.testDate)
+        const dt2 = yearMonth2Date(b.testDate)
+        if (!dt1 instanceof Date && !dt2 instanceof Date) return 0
+        if (!dt1 instanceof Date) return 1
+        if (!dt2 instanceof Date) return -1
+
+        return dt1 < dt2 ? 1 : -1
+      })
+
+      // sort 'reading' before 'listening' for TOEFL test
+      for (let score of scores) {
+        if (!score.testComponents || score.testName !== 'TOEFL') continue
+        score.testComponents = score.testComponents.sort((a, b) => {
+          if (a.name === 'listening' && b.name === 'reading') return 1
+          return 0
+        })
+      }
+      return scores
+    }
+  },
+  filters: {
+    dateFormat,
+    sat2ActFilter,
+    removeLeadingZeros: function (value) {
+      if ( (!value) || !(/^\d+$/.test(value)) ) return value // leave as is if not a string of numbers
+      return parseInt(value, 10) // remove leading zeros
+    }
+  }
+}
+</script>
+<style scoped>
+.composite {
+  text-align: center;
+  vertical-align: center;
+}
+.x-lg {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+.bold {
+  font-weight: 700;
+}
+</style>

package/ExpandIndicator.vue

@@ -1,75 +1,75 @@
-<!--
-   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>
-  <div class="wrapper" @click="toggle">
-    <template v-if="!hideText">
-      <template v-if="collapsed">more</template>
-      <template v-else>less</template>
-    </template>
-    <font-awesome-layers>
-      <font-awesome-icon :icon="circleIcon" />
-      <font-awesome-icon :icon="plusMinusIcon" transform="shrink-6" />
-    </font-awesome-layers>
-  </div>
-</template>
-<script>
-  import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-  import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
-  import { faCircle } from '@fortawesome/free-regular-svg-icons'
-
-  export default {
-    name: 'ExpandIndicator',
-    components: { FontAwesomeIcon, FontAwesomeLayers },
-    props: {
-      collapsed: {
-        type: Boolean,
-        default: false
-      },
-      hideText: {
-        type: Boolean,
-        default: false
-      }
-    },
-    computed: {
-      circleIcon () { return faCircle },
-      plusIcon () { return faPlus },
-      minusIcon () { return faMinus },
-      plusMinusIcon () {
-        if (this.collapsed) {
-          return this.plusIcon
-        }
-        return this.minusIcon
-      }
-    },
-    methods: {
-      toggle () {
-        this.$emit('toggle')
-        if (this.collapsed) {
-          this.$emit('update:collapsed', false)
-        } else {
-          this.$emit('update:collapsed', true)
-        }
-      }
-    }
-  }
-</script>
-<style scoped>
-  .wrapper {
-    text-transform: uppercase;
-    /* padding: 0.5rem; */
-    cursor: pointer;
-  }
-</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>
+  <div class="wrapper" @click="toggle">
+    <template v-if="!hideText">
+      <template v-if="collapsed">more</template>
+      <template v-else>less</template>
+    </template>
+    <font-awesome-layers>
+      <font-awesome-icon :icon="circleIcon" />
+      <font-awesome-icon :icon="plusMinusIcon" transform="shrink-6" />
+    </font-awesome-layers>
+  </div>
+</template>
+<script>
+  import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+  import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
+  import { faCircle } from '@fortawesome/free-regular-svg-icons'
+
+  export default {
+    name: 'ExpandIndicator',
+    components: { FontAwesomeIcon, FontAwesomeLayers },
+    props: {
+      collapsed: {
+        type: Boolean,
+        default: false
+      },
+      hideText: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      circleIcon () { return faCircle },
+      plusIcon () { return faPlus },
+      minusIcon () { return faMinus },
+      plusMinusIcon () {
+        if (this.collapsed) {
+          return this.plusIcon
+        }
+        return this.minusIcon
+      }
+    },
+    methods: {
+      toggle () {
+        this.$emit('toggle')
+        if (this.collapsed) {
+          this.$emit('update:collapsed', false)
+        } else {
+          this.$emit('update:collapsed', true)
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  .wrapper {
+    text-transform: uppercase;
+    /* padding: 0.5rem; */
+    cursor: pointer;
+  }
+</style>

package/ExternalLink.vue

@@ -1,34 +1,34 @@
-<template>
-  <a :href="href" target="_blank" data-disable-navigate="true">
-    <button v-if="buttonColor" :class="`btn-sm ${outline ? 'btn-outline-' : 'btn-'}${buttonColor}`">
-      <slot></slot>
-      <font-awesome-icon :icon="icon"/>
-    </button>
-    <template v-else>
-      <slot></slot>
-      <font-awesome-icon :icon="icon"/>
-    </template>
-  </a>
-</template>
-<script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
-
-export default {
-  name: 'ExternalLink',
-  components: { FontAwesomeIcon },
-  props: {
-    href: {
-      type: String,
-      required: true
-    },
-    buttonColor: String,
-    outline: Boolean
-  },
-  computed: {
-    icon () {
-      return faExternalLinkAlt
-    }
-  }
-}
-</script>
+<template>
+  <a :href="href" target="_blank" data-disable-navigate="true">
+    <button v-if="buttonColor" :class="`btn-sm ${outline ? 'btn-outline-' : 'btn-'}${buttonColor}`">
+      <slot></slot>
+      <font-awesome-icon :icon="icon"/>
+    </button>
+    <template v-else>
+      <slot></slot>
+      <font-awesome-icon :icon="icon"/>
+    </template>
+  </a>
+</template>
+<script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+
+export default {
+  name: 'ExternalLink',
+  components: { FontAwesomeIcon },
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    buttonColor: String,
+    outline: Boolean
+  },
+  computed: {
+    icon () {
+      return faExternalLinkAlt
+    }
+  }
+}
+</script>

package/FilterBreadcrumb.vue

@@ -1,85 +1,85 @@
-<template>
-  <div class="grid" v-if="filterDisplay">
-    <span>Displaying Only:</span>
-    <div class="filters">
-      <span v-for="item of filterDisplay" :key="item">
-        {{ item }}
-      </span>
-    </div>
-    <slot></slot>
-  </div>
-</template>
-<script>
-import { mapGetters } from 'vuex'
-import { yearTermLongFormat } from './dateTimeFormat'
-
-export default {
-  name: 'FilterBreadcrumb',
-  props: {
-    filters: {
-      type: Array
-    }
-  },
-  computed: {
-    ...mapGetters(['usersById', 'packetListFilters']),
-    filterDisplay() {
-      const filters = this.filters || this.packetListFilters
-      if (!filters || filters.length === 0) {
-        return ''
-      }
-
-      const filterObjectToString = ({ type, value }) => {
-        const values = value.split(',')
-        if(values.length === 0) {
-          return null
-        }
-
-        if (type === 'admitPeriod') {
-          return `Admit Period${values.length > 1 ? 's' : ''}: ${values.map(yearTermLongFormat).join(', ')}`
-        } else if (type === 'applicantType') {
-          return `App Type${values.length > 1 ? 's' : ''}: ${values.join(', ')}`
-        } else if (type === 'assignedTo') {
-          return `Assigned To: ${values.map(id => this.usersById(id).name).join(' or ')}`
-        } else if (type === 'sex') {
-          return `Sex: ${values.join(' or ')}`
-        } else if (type === 'population') {
-          return `Population${values.length > 1 ? 's' : ''}: ${values.map(pop => {
-            return {
-              IA: 'International',
-              HI: 'Hawaii',
-              IW: 'iWork'
-            }[pop] || 'Unknown'
-          }).join(', ')}`
-        } else if (type === 'act') {
-          return `ACT: >= ${values.join(', ')}`
-        } else if (type === 'gpa') {
-          return `GPA: >= ${values.join(', ')}`
-        } else if (type === 'cumulativeGpa') {
-          return `Cumulative College GPA: >= ${values.join(', ')}`
-        } else {
-          const typeTitle = type.replace(/^\S/, letter => letter.toUpperCase())
-          return `${typeTitle}: ${values.join(', ')}`
-        }
-      }
-
-      return filters.map(filterObjectToString).filter(s => !!s)
-    }
-  }
-}
-</script>
-<style scoped>
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, auto) 1fr;
-  align-items: center;
-  padding-top: 0.5rem;
-}
-.filters {
-  background-color: #e0e0e0;
-  padding: 0.25rem 0.5rem;
-  border-radius: 5px;
-}
-.filters > span:not(:first-child)::before {
-  content: ' / ';
-}
-</style>
+<template>
+  <div class="grid" v-if="filterDisplay">
+    <span>Displaying Only:</span>
+    <div class="filters">
+      <span v-for="item of filterDisplay" :key="item">
+        {{ item }}
+      </span>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { yearTermLongFormat } from './dateTimeFormat'
+
+export default {
+  name: 'FilterBreadcrumb',
+  props: {
+    filters: {
+      type: Array
+    }
+  },
+  computed: {
+    ...mapGetters(['usersById', 'packetListFilters']),
+    filterDisplay() {
+      const filters = this.filters || this.packetListFilters
+      if (!filters || filters.length === 0) {
+        return ''
+      }
+
+      const filterObjectToString = ({ type, value }) => {
+        const values = value.split(',')
+        if(values.length === 0) {
+          return null
+        }
+
+        if (type === 'admitPeriod') {
+          return `Admit Period${values.length > 1 ? 's' : ''}: ${values.map(yearTermLongFormat).join(', ')}`
+        } else if (type === 'applicantType') {
+          return `App Type${values.length > 1 ? 's' : ''}: ${values.join(', ')}`
+        } else if (type === 'assignedTo') {
+          return `Assigned To: ${values.map(id => this.usersById(id).name).join(' or ')}`
+        } else if (type === 'sex') {
+          return `Sex: ${values.join(' or ')}`
+        } else if (type === 'population') {
+          return `Population${values.length > 1 ? 's' : ''}: ${values.map(pop => {
+            return {
+              IA: 'International',
+              HI: 'Hawaii',
+              IW: 'iWork'
+            }[pop] || 'Unknown'
+          }).join(', ')}`
+        } else if (type === 'act') {
+          return `ACT: >= ${values.join(', ')}`
+        } else if (type === 'gpa') {
+          return `GPA: >= ${values.join(', ')}`
+        } else if (type === 'cumulativeGpa') {
+          return `Cumulative College GPA: >= ${values.join(', ')}`
+        } else {
+          const typeTitle = type.replace(/^\S/, letter => letter.toUpperCase())
+          return `${typeTitle}: ${values.join(', ')}`
+        }
+      }
+
+      return filters.map(filterObjectToString).filter(s => !!s)
+    }
+  }
+}
+</script>
+<style scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, auto) 1fr;
+  align-items: center;
+  padding-top: 0.5rem;
+}
+.filters {
+  background-color: #e0e0e0;
+  padding: 0.25rem 0.5rem;
+  border-radius: 5px;
+}
+.filters > span:not(:first-child)::before {
+  content: ' / ';
+}
+</style>