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

package/FilterButton.vue

@@ -1,86 +1,86 @@
-<!--
-   Copyright 2019 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="{ 'dd-list': true, show: show }">
-    <button class="btn btn-outline-primary" :class="small ? 'btn-sm' : ''" @click="doShow">
-      <slot name="icon"></slot>
-      <slot name="label"></slot>
-      <FontAwesomeIcon :icon="arrowIcon" />
-    </button>
-    <div class="dd-click-detect" @click="doHide"></div>
-    <div class="dd-details">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faCaretSquareDown, faCaretSquareUp } from '@fortawesome/free-solid-svg-icons'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'FilterButton',
-  components: { FontAwesomeIcon },
-  props: {
-    show: Boolean,
-    small: Boolean
-  },
-  computed: {
-    arrowIcon() {
-      return this.show ? faCaretSquareUp : faCaretSquareDown
-    }
-  },
-  methods: {
-    doShow () {
-      this.$emit('show')
-    },
-    doHide () {
-      this.$emit('hide')
-    }
-  }
-}
-</script>
-<style scoped>
-.dd-list {
-  position: relative;
-}
-.dd-details {
-  position: absolute;
-  display: none;
-}
-.dd-list.show > .dd-details {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: auto;
-  grid-gap: 0.5rem;
-  background-color: white;
-  border: thin solid var(--gray-dark, #333);
-  cursor: pointer;
-  z-index: 100;
-}
-.dd-click-detect {
-  display: none;
-}
-.dd-list.show > .dd-click-detect {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100vw;
-  z-index: 99;
-}
-</style>
+<!--
+   Copyright 2019 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="{ 'dd-list': true, show: show }">
+    <button class="btn btn-outline-primary" :class="small ? 'btn-sm' : ''" @click="doShow">
+      <slot name="icon"></slot>
+      <slot name="label"></slot>
+      <FontAwesomeIcon :icon="arrowIcon" />
+    </button>
+    <div class="dd-click-detect" @click="doHide"></div>
+    <div class="dd-details">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCaretSquareDown, faCaretSquareUp } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'FilterButton',
+  components: { FontAwesomeIcon },
+  props: {
+    show: Boolean,
+    small: Boolean
+  },
+  computed: {
+    arrowIcon() {
+      return this.show ? faCaretSquareUp : faCaretSquareDown
+    }
+  },
+  methods: {
+    doShow () {
+      this.$emit('show')
+    },
+    doHide () {
+      this.$emit('hide')
+    }
+  }
+}
+</script>
+<style scoped>
+.dd-list {
+  position: relative;
+}
+.dd-details {
+  position: absolute;
+  display: none;
+}
+.dd-list.show > .dd-details {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  grid-gap: 0.5rem;
+  background-color: white;
+  border: thin solid var(--gray-dark, #333);
+  cursor: pointer;
+  z-index: 100;
+}
+.dd-click-detect {
+  display: none;
+}
+.dd-list.show > .dd-click-detect {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100vw;
+  z-index: 99;
+}
+</style>

package/FilterButtonAdmitPeriod.vue

@@ -1,109 +1,104 @@
-<!--
-   Copyright 2019 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>
-  <FilterButton @show="show = true" @hide="show = false" :show="show">
-    <FontAwesomeIcon slot="icon" :icon="calendarIcon" />
-    <span slot="label">Admit Period</span>
-    <button class="dropdown-item" @click="clearFilter">Show All</button>
-    <div
-      v-for="(admitPeriod, i) of admitPeriods"
-      :key="i"
-      class="dropdown-item"
-    >
-      <input
-        type="checkbox"
-        :id="`filter-button-admit-period-option-${i}`"
-        :value="admitPeriod"
-        :checked="selectedPeriods.includes(admitPeriod)"
-        @change="toggle(admitPeriod)"
-      ></input>
-      <label :for="`filter-button-admit-period-option-${i}`">{{ admitPeriod | yearTerm }}</label>
-    </div>
-  </FilterButton>
-</template>
-<script>
-import FilterButton from './FilterButton'
-import { yearTermLongFormat } from './dateTimeFormat'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons'
-import { mapGetters, mapMutations, mapActions } from 'vuex'
-
-export default {
-  name: 'FilterButtonAdmitPeriod',
-  components: { FilterButton, FontAwesomeIcon },
-  filters: { yearTerm: yearTermLongFormat },
-  props: {
-    admitPeriods: {
-      type: Array,
-      default() {
-        return [
-          '20223',
-          '20225',
-          '20231',
-          '20233',
-          '20235',
-          '20241',
-          '20243',
-          '20245'
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters(['packetListFilters']),
-    calendarIcon: () => faCalendarAlt,
-    activeFilter () {
-      const filters = this.packetListFilters
-      const admitPeriodFilter = filters.find(f => f.type === 'admitPeriod')
-      return admitPeriodFilter ? admitPeriodFilter.value : null
-    },
-    selectedPeriods () {
-      return this.activeFilter ? this.activeFilter.split(',') : []
-    }
-  },
-  data () {
-    return {
-      show: false
-    }
-  },
-  methods: {
-    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
-    ...mapActions(['fetchPacketList']),
-    setFilter(admitPeriod) {
-      this.setPacketListFilter({
-        type: 'admitPeriod',
-        value: admitPeriod
-      })
-      this.fetchPacketList({force: true})
-    },
-    toggle (admitPeriod) {
-      const isActive = this.selectedPeriods.includes(admitPeriod)
-      if (isActive) {
-        const newList = this.selectedPeriods.filter(p => p !== admitPeriod)
-        this.setFilter(newList.join(','))
-        return
-      }
-      const newList = this.selectedPeriods.concat(admitPeriod).sort()
-      this.setFilter(newList.join(','))
-    },
-    clearFilter() {
-      this.clearPacketListFilter({type: 'admitPeriod'})
-      this.fetchPacketList({force: true})
-      this.show = false
-    }
-  }
-}
-</script>
+<!--
+   Copyright 2019 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>
+  <FilterButton @show="show = true" @hide="show = false" :show="show">
+    <FontAwesomeIcon slot="icon" :icon="calendarIcon" />
+    <span slot="label">Admit Period</span>
+    <button class="dropdown-item" @click="clearFilter">Show All</button>
+    <div
+      v-for="(admitPeriod, i) of admitPeriods"
+      :key="i"
+      class="dropdown-item"
+    >
+      <input
+        type="checkbox"
+        :id="`filter-button-admit-period-option-${i}`"
+        :value="admitPeriod"
+        :checked="selectedPeriods.includes(admitPeriod)"
+        @change="toggle(admitPeriod)"
+      ></input>
+      <label :for="`filter-button-admit-period-option-${i}`">{{ admitPeriod | yearTerm }}</label>
+    </div>
+  </FilterButton>
+</template>
+<script>
+import FilterButton from './FilterButton'
+import { yearTermLongFormat } from './dateTimeFormat'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons'
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: 'FilterButtonAdmitPeriod',
+  components: { FilterButton, FontAwesomeIcon },
+  filters: { yearTerm: yearTermLongFormat },
+  props: {
+    admitPeriods: {
+      type: Array,
+      default() {
+        return [
+          '20241',
+          '20243',
+          '20245'
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['packetListFilters']),
+    calendarIcon: () => faCalendarAlt,
+    activeFilter () {
+      const filters = this.packetListFilters
+      const admitPeriodFilter = filters.find(f => f.type === 'admitPeriod')
+      return admitPeriodFilter ? admitPeriodFilter.value : null
+    },
+    selectedPeriods () {
+      return this.activeFilter ? this.activeFilter.split(',') : []
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
+    ...mapActions(['fetchPacketList']),
+    setFilter(admitPeriod) {
+      this.setPacketListFilter({
+        type: 'admitPeriod',
+        value: admitPeriod
+      })
+      this.fetchPacketList({force: true})
+    },
+    toggle (admitPeriod) {
+      const isActive = this.selectedPeriods.includes(admitPeriod)
+      if (isActive) {
+        const newList = this.selectedPeriods.filter(p => p !== admitPeriod)
+        this.setFilter(newList.join(','))
+        return
+      }
+      const newList = this.selectedPeriods.concat(admitPeriod).sort()
+      this.setFilter(newList.join(','))
+    },
+    clearFilter() {
+      this.clearPacketListFilter({type: 'admitPeriod'})
+      this.fetchPacketList({force: true})
+      this.show = false
+    }
+  }
+}
+</script>

package/FilterButtonAppType.vue

@@ -1,103 +1,103 @@
-<!--
-   Copyright 2019 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>
-  <FilterButton @show="show = true" @hide="show = false" :show="show">
-    <FontAwesomeIcon slot="icon" :icon="buttonIcon" />
-    <span slot="label">Applicant Type</span>
-    <button class="dropdown-item" @click="clearFilter">Show All</button>
-    <div
-      v-for="(type, i) of appTypes"
-      :key="i"
-      class="dropdown-item"
-    >
-      <input
-        type="checkbox"
-        :id="`filter-button-app-type-option-${i}`"
-        :value="type"
-        :checked="selectedTypes.includes(type)"
-        @change="toggle(type)"
-      ></input>
-      <label :for="`filter-button-app-type-option-${i}`">{{ type }}</label>
-    </div>
-  </FilterButton>
-</template>
-<script>
-import FilterButton from './FilterButton'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faUserTag } from '@fortawesome/free-solid-svg-icons'
-import { mapGetters, mapMutations, mapActions } from 'vuex'
-
-export default {
-  name: 'FilterButtonAppType',
-  components: { FilterButton, FontAwesomeIcon },
-  props: {
-    appTypes: {
-      type: Array,
-      default () {
-        return [
-          'NF',
-          'T',
-          'F'
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters(['packetListFilters']),
-    buttonIcon: () => faUserTag,
-    activeFilter () {
-      const filters = this.packetListFilters
-      const appTypeFilter = filters.find(f => f.type === 'applicantType')
-      return appTypeFilter ? appTypeFilter.value : null
-    },
-    selectedTypes () {
-      const val = this.activeFilter
-      return val ? val.split(',') : []
-    }
-  },
-  data () {
-    return {
-      show: false
-    }
-  },
-  methods: {
-    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
-    ...mapActions(['fetchPacketList']),
-    setFilter(applicantType) {
-      this.setPacketListFilter({
-        type: 'applicantType',
-        value: applicantType
-      })
-      this.fetchPacketList({force: true})
-    },
-    toggle (appType) {
-      const isActive = this.selectedTypes.includes(appType)
-      if (isActive) {
-        const newList = this.selectedTypes.filter(t => t !== appType)
-        this.setFilter(newList.join(','))
-        return
-      }
-      const newList = this.selectedTypes.concat(appType).sort()
-      this.setFilter(newList.join(','))
-    },
-    clearFilter() {
-      this.clearPacketListFilter({type: 'applicantType'})
-      this.fetchPacketList({force: true})
-      this.show = false
-    }
-  }
-}
-</script>
+<!--
+   Copyright 2019 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>
+  <FilterButton @show="show = true" @hide="show = false" :show="show">
+    <FontAwesomeIcon slot="icon" :icon="buttonIcon" />
+    <span slot="label">Applicant Type</span>
+    <button class="dropdown-item" @click="clearFilter">Show All</button>
+    <div
+      v-for="(type, i) of appTypes"
+      :key="i"
+      class="dropdown-item"
+    >
+      <input
+        type="checkbox"
+        :id="`filter-button-app-type-option-${i}`"
+        :value="type"
+        :checked="selectedTypes.includes(type)"
+        @change="toggle(type)"
+      ></input>
+      <label :for="`filter-button-app-type-option-${i}`">{{ type }}</label>
+    </div>
+  </FilterButton>
+</template>
+<script>
+import FilterButton from './FilterButton'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faUserTag } from '@fortawesome/free-solid-svg-icons'
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: 'FilterButtonAppType',
+  components: { FilterButton, FontAwesomeIcon },
+  props: {
+    appTypes: {
+      type: Array,
+      default () {
+        return [
+          'NF',
+          'T',
+          'F'
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['packetListFilters']),
+    buttonIcon: () => faUserTag,
+    activeFilter () {
+      const filters = this.packetListFilters
+      const appTypeFilter = filters.find(f => f.type === 'applicantType')
+      return appTypeFilter ? appTypeFilter.value : null
+    },
+    selectedTypes () {
+      const val = this.activeFilter
+      return val ? val.split(',') : []
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
+    ...mapActions(['fetchPacketList']),
+    setFilter(applicantType) {
+      this.setPacketListFilter({
+        type: 'applicantType',
+        value: applicantType
+      })
+      this.fetchPacketList({force: true})
+    },
+    toggle (appType) {
+      const isActive = this.selectedTypes.includes(appType)
+      if (isActive) {
+        const newList = this.selectedTypes.filter(t => t !== appType)
+        this.setFilter(newList.join(','))
+        return
+      }
+      const newList = this.selectedTypes.concat(appType).sort()
+      this.setFilter(newList.join(','))
+    },
+    clearFilter() {
+      this.clearPacketListFilter({type: 'applicantType'})
+      this.fetchPacketList({force: true})
+      this.show = false
+    }
+  }
+}
+</script>