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

package/FilterButtonAssignedTo.vue

@@ -1,96 +1,96 @@
-<!--
-   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">Assigned To</span>
-    <button class="dropdown-item" @click="clearFilter">Show All</button>
-    <div 
-      v-for="(user, i) of users"
-      :key="user.byuId"
-      class="dropdown-item"
-    >
-      <input
-        type="checkbox"
-        :id="`filter-button-assigned-to-option-${i}`"
-        :value="user.byuId"
-        :checked="selectedUsers.includes(user.byuId)"
-        @change="toggle(user.byuId)"
-      ></input>
-      <label :for="`filter-button-assigned-to-option-${i}`">{{ user.name }}</label>
-    </div>
-  </FilterButton>
-</template>
-<script>
-import FilterButton from './FilterButton'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faUser } from '@fortawesome/free-solid-svg-icons'
-import { mapMutations, mapActions, mapGetters } from 'vuex'
-
-export default {
-  name: 'FilterButtonAssignedTo',
-  components: { FilterButton, FontAwesomeIcon },
-  computed: {
-    ...mapGetters(['usersByRole', 'packetListFilters']),
-    buttonIcon: () => faUser,
-    users() {
-      const counselors = this.usersByRole('Counselor')
-      const processors = this.usersByRole('Processor')
-      return counselors.concat(processors)
-    },
-    activeFilter () {
-      const filters = this.packetListFilters
-      const admitPeriodFilter = filters.find(f => f.type === 'assignedTo')
-      return admitPeriodFilter ? admitPeriodFilter.value : null
-    },
-    selectedUsers () {
-      const val = this.activeFilter
-      return val ? val.split(',') : []
-    }
-  },
-  data () {
-    return {
-      show: false
-    }
-  },
-  methods: {
-    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
-    ...mapActions(['fetchPacketList']),
-    setFilter(assignedTo) {
-      this.setPacketListFilter({
-        type: 'assignedTo',
-        value: assignedTo
-      })
-      this.fetchPacketList({force: true})
-    },
-    toggle (userId) {
-      const isActive = this.selectedUsers.includes(userId)
-      if (isActive) {
-        const newList = this.selectedUsers.filter(u => u !== userId)
-        this.setFilter(newList.join(','))
-        return
-      }
-      const newList = this.selectedUsers.concat(userId).sort()
-      this.setFilter(newList.join(','))
-    },
-    clearFilter() {
-      this.clearPacketListFilter({type: 'assignedTo'})
-      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">Assigned To</span>
+    <button class="dropdown-item" @click="clearFilter">Show All</button>
+    <div 
+      v-for="(user, i) of users"
+      :key="user.byuId"
+      class="dropdown-item"
+    >
+      <input
+        type="checkbox"
+        :id="`filter-button-assigned-to-option-${i}`"
+        :value="user.byuId"
+        :checked="selectedUsers.includes(user.byuId)"
+        @change="toggle(user.byuId)"
+      ></input>
+      <label :for="`filter-button-assigned-to-option-${i}`">{{ user.name }}</label>
+    </div>
+  </FilterButton>
+</template>
+<script>
+import FilterButton from './FilterButton'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { mapMutations, mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'FilterButtonAssignedTo',
+  components: { FilterButton, FontAwesomeIcon },
+  computed: {
+    ...mapGetters(['usersByRole', 'packetListFilters']),
+    buttonIcon: () => faUser,
+    users() {
+      const counselors = this.usersByRole('Counselor')
+      const processors = this.usersByRole('Processor')
+      return counselors.concat(processors)
+    },
+    activeFilter () {
+      const filters = this.packetListFilters
+      const admitPeriodFilter = filters.find(f => f.type === 'assignedTo')
+      return admitPeriodFilter ? admitPeriodFilter.value : null
+    },
+    selectedUsers () {
+      const val = this.activeFilter
+      return val ? val.split(',') : []
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
+    ...mapActions(['fetchPacketList']),
+    setFilter(assignedTo) {
+      this.setPacketListFilter({
+        type: 'assignedTo',
+        value: assignedTo
+      })
+      this.fetchPacketList({force: true})
+    },
+    toggle (userId) {
+      const isActive = this.selectedUsers.includes(userId)
+      if (isActive) {
+        const newList = this.selectedUsers.filter(u => u !== userId)
+        this.setFilter(newList.join(','))
+        return
+      }
+      const newList = this.selectedUsers.concat(userId).sort()
+      this.setFilter(newList.join(','))
+    },
+    clearFilter() {
+      this.clearPacketListFilter({type: 'assignedTo'})
+      this.fetchPacketList({force: true})
+      this.show = false
+    }
+  }
+}
+</script>

package/FilterButtonClearFilters.vue

@@ -1,65 +1,65 @@
-<!--
-   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>
-  <button class="btn btn-outline-primary" @click="clearAll">
-    <FontAwesomeIcon :icon="eyeIcon" />
-    <span>Clear Filters</span>
-  </button>
-</template>
-<script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faEye } from '@fortawesome/free-solid-svg-icons'
-import { mapState, mapMutations, mapActions } from 'vuex'
-
-export default {
-  name: 'FilterButton',
-  components: { FontAwesomeIcon },
-  computed: {
-    ...mapState({
-      filters: s => s.packetList.filters
-    }),
-    eyeIcon() {
-      return faEye
-    }
-  },
-  methods: {
-    ...mapMutations(['clearPacketListFilter']),
-    ...mapActions(['fetchPacketList']),
-    clearAll () {
-      this.clearPacketListFilter({ all: true })
-      this.fetchPacketList({force: true})
-    }
-  }
-}
-</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;
-}
-</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>
+  <button class="btn btn-outline-primary" @click="clearAll">
+    <FontAwesomeIcon :icon="eyeIcon" />
+    <span>Clear Filters</span>
+  </button>
+</template>
+<script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faEye } from '@fortawesome/free-solid-svg-icons'
+import { mapState, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: 'FilterButton',
+  components: { FontAwesomeIcon },
+  computed: {
+    ...mapState({
+      filters: s => s.packetList.filters
+    }),
+    eyeIcon() {
+      return faEye
+    }
+  },
+  methods: {
+    ...mapMutations(['clearPacketListFilter']),
+    ...mapActions(['fetchPacketList']),
+    clearAll () {
+      this.clearPacketListFilter({ all: true })
+      this.fetchPacketList({force: true})
+    }
+  }
+}
+</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;
+}
+</style>

package/FilterButtonSex.vue

@@ -1,105 +1,105 @@
-<!--
-   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="femaleIcon" />
-    <FontAwesomeIcon slot="icon" :icon="maleIcon" />
-    <span slot="label">Sex</span>
-    <button class="dropdown-item" @click="clearFilter">Show All</button>
-    <div
-      v-for="(admitPeriod, i) of sexes"
-      :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 { faFemale, faMale } from '@fortawesome/free-solid-svg-icons'
-import { mapGetters, mapMutations, mapActions } from 'vuex'
-
-export default {
-  name: 'FilterButtonAdmitPeriod',
-  components: { FilterButton, FontAwesomeIcon },
-  filters: { yearTerm: yearTermLongFormat },
-  props: {
-    sexes: {
-      type: Array,
-      default() {
-        return [
-          'F',
-          'M'
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters(['packetListFilters']),
-    femaleIcon: () => faFemale,
-    maleIcon: () => faMale,
-    activeFilter () {
-      const filters = this.packetListFilters
-      const sexFilter = filters.find(f => f.type === 'sex')
-      return sexFilter ? sexFilter.value : null
-    },
-    selectedPeriods () {
-      return this.activeFilter ? this.activeFilter.split(',') : []
-    }
-  },
-  data () {
-    return {
-      show: false
-    }
-  },
-  methods: {
-    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
-    ...mapActions(['fetchPacketList']),
-    setFilter(sex) {
-      this.setPacketListFilter({
-        type: 'sex',
-        value: sex
-      })
-      this.fetchPacketList({force: true})
-    },
-    toggle (sex) {
-      const isActive = this.selectedPeriods.includes(sex)
-      if (isActive) {
-        const newList = this.selectedPeriods.filter(p => p !== sex)
-        this.setFilter(newList.join(','))
-        return
-      }
-      const newList = this.selectedPeriods.concat(sex).sort()
-      this.setFilter(newList.join(','))
-    },
-    clearFilter() {
-      this.clearPacketListFilter({type: 'sex'})
-      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="femaleIcon" />
+    <FontAwesomeIcon slot="icon" :icon="maleIcon" />
+    <span slot="label">Sex</span>
+    <button class="dropdown-item" @click="clearFilter">Show All</button>
+    <div
+      v-for="(admitPeriod, i) of sexes"
+      :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 { faFemale, faMale } from '@fortawesome/free-solid-svg-icons'
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: 'FilterButtonAdmitPeriod',
+  components: { FilterButton, FontAwesomeIcon },
+  filters: { yearTerm: yearTermLongFormat },
+  props: {
+    sexes: {
+      type: Array,
+      default() {
+        return [
+          'F',
+          'M'
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['packetListFilters']),
+    femaleIcon: () => faFemale,
+    maleIcon: () => faMale,
+    activeFilter () {
+      const filters = this.packetListFilters
+      const sexFilter = filters.find(f => f.type === 'sex')
+      return sexFilter ? sexFilter.value : null
+    },
+    selectedPeriods () {
+      return this.activeFilter ? this.activeFilter.split(',') : []
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    ...mapMutations(['setPacketListFilter', 'clearPacketListFilter']),
+    ...mapActions(['fetchPacketList']),
+    setFilter(sex) {
+      this.setPacketListFilter({
+        type: 'sex',
+        value: sex
+      })
+      this.fetchPacketList({force: true})
+    },
+    toggle (sex) {
+      const isActive = this.selectedPeriods.includes(sex)
+      if (isActive) {
+        const newList = this.selectedPeriods.filter(p => p !== sex)
+        this.setFilter(newList.join(','))
+        return
+      }
+      const newList = this.selectedPeriods.concat(sex).sort()
+      this.setFilter(newList.join(','))
+    },
+    clearFilter() {
+      this.clearPacketListFilter({type: 'sex'})
+      this.fetchPacketList({force: true})
+      this.show = false
+    }
+  }
+}
+</script>

package/FlagButton.vue

@@ -1,59 +1,59 @@
-<!--
-   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>
-  <button :class="btnClass" @click="flagModal">
-    <font-awesome-icon :icon="btnIcon" />
-    {{flag.name}}
-  </button>
-</span>
-</template>
-<script>
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faExclamationTriangle, faCheck, faFlag } from '@fortawesome/free-solid-svg-icons'
-  import { mapGetters } from 'vuex'
-
-  export default {
-    name: 'FlagButton',
-    components: { FontAwesomeIcon },
-    props: [ 'flagValue', ],
-    computed: {
-      ...mapGetters(['flagByValue']),
-      flag () { return this.flagByValue(this.flagValue) },
-      btnClass () {
-        const set = this.flag.isSet
-        const cleared = this.flag.isCleared
-        return {
-          'btn': true,
-          'btn-outline-secondary': !set,
-          'btn-outline-danger': set && !cleared,
-          'btn-outline-success': set && cleared
-        }
-      },
-      btnIcon () {
-        const set = this.flag.isSet
-        const cleared = this.flag.isCleared
-        if (!set) return faFlag
-        else if (cleared) return faCheck
-        else return faExclamationTriangle
-      }
-    },
-    methods: {
-      flagModal() {
-        this.$modal.show('flag-modal', { flag: this.flag })
-      }
-    }
-  }
-</script>
+<!--
+   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>
+  <button :class="btnClass" @click="flagModal">
+    <font-awesome-icon :icon="btnIcon" />
+    {{flag.name}}
+  </button>
+</span>
+</template>
+<script>
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+  import { faExclamationTriangle, faCheck, faFlag } from '@fortawesome/free-solid-svg-icons'
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'FlagButton',
+    components: { FontAwesomeIcon },
+    props: [ 'flagValue', ],
+    computed: {
+      ...mapGetters(['flagByValue']),
+      flag () { return this.flagByValue(this.flagValue) },
+      btnClass () {
+        const set = this.flag.isSet
+        const cleared = this.flag.isCleared
+        return {
+          'btn': true,
+          'btn-outline-secondary': !set,
+          'btn-outline-danger': set && !cleared,
+          'btn-outline-success': set && cleared
+        }
+      },
+      btnIcon () {
+        const set = this.flag.isSet
+        const cleared = this.flag.isCleared
+        if (!set) return faFlag
+        else if (cleared) return faCheck
+        else return faExclamationTriangle
+      }
+    },
+    methods: {
+      flagModal() {
+        this.$modal.show('flag-modal', { flag: this.flag })
+      }
+    }
+  }
+</script>