@byu-oit/vue-decision-processing-components 9.4.0 → 9.5.0

package/.github/workflows/deploy.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v4

package/ByuDateSelector.vue

@@ -0,0 +1,54 @@
+<template>
+	<byu-control-date-selector
+			ref="selector"
+			:value="value"
+			@change="onChange"
+			:date-type="dateType"
+			:prior-terms="priorTerms"
+			:subsequent-terms="subsequentTerms"
+	></byu-control-date-selector>
+</template>
+
+<script>
+export default {
+	name: 'ByuDateSelector',
+	props: {
+		value: String,
+		dateType: {
+			type: String,
+			default: 'CURRENT_YYT'
+		},
+		priorTerms: {
+			type: Number,
+			default: 3
+		},
+		subsequentTerms: {
+			type: Number,
+			default: 4
+		}
+	},
+	watch: {
+		value(newVal) {
+			const element = this.$refs.selector
+			if (element && newVal && element.value !== newVal) {
+				element.value = newVal
+				element.dispatchEvent(new Event('input', { bubbles: true }))
+			}
+		}
+	},
+	mounted() {
+		if (this.value) {
+			const element = this.$refs.selector
+			if (element && element.value !== this.value) {
+				element.value = this.value
+				element.dispatchEvent(new Event('input', { bubbles: true }))
+			}
+		}
+	},
+	methods: {
+		onChange(e) {
+			this.$emit('input', e.target.value)
+		}
+	}
+}
+</script>

package/Report.vue

@@ -1,334 +1,368 @@
-<!--
-   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="report" v-if="metadata">
-    <ReportSvg
-        v-if="chart"
-        v-bind="$attrs"
-        v-on="$listeners"
-        :svgContent="svgContent"
-        :loaded="loaded"
-        :error="error"/>
-    <template v-if="!hideDescription">
-      <h1 v-if="metadata.description">{{metadata.description}}</h1>
-      <h4 v-if="metadata.long_description" class="no-uppercase">{{metadata.long_description}}</h4>
-      <byu-control-date-selector
-          v-if="metadata.parameters.includes('admitPeriod')"
-          :value="selectedAdmitPeriod"
-          @change="selectedAdmitPeriod = $event.target.value"
-          date-type="CURRENT_YYT"
-          prior-terms="3"
-          subsequent-terms="4"
-      ></byu-control-date-selector>
-      <date-picker
-          v-if="metadata.parameters.includes('date_start') && metadata.parameters.includes('date_end')"
-          v-model="dateRange"
-          range
-          :not-after="new Date()"
-          lang="en"
-      />
-    </template>
-    <template v-if="detail && photoLink">
-      <div>
-        <input type="checkbox" v-model="showPhotos" id="components-Report-showPhotos">
-        <label for="components-Report-showPhotos">Show Photos</label>
-      </div>
-      <ReportPhotos
-          v-if="showPhotos"
-          :rows="rows"
-          :column-metadata="metadata.columns"
-          :loading="loading"
-          :error="error"/>
-      <ReportDetail
-          v-else
-          :csv="csvContent"
-          :column-metadata="metadata.columns"
-          :rows="rows"
-          :loading="loading"
-          :error="error"
-          :detailPath="detailPath"
-          :newTab="newTab"/>
-    </template>
-    <template v-else>
-      <ReportDetail
-          v-if="detail"
-          :csv="csvContent"
-          :column-metadata="metadata.columns"
-          :rows="rows"
-          :loading="loading"
-          :error="error"
-          :detailPath="detailPath"
-          :newTab="newTab" />
-    </template>
-    <router-link v-else-if="to" :to="to">View Details</router-link>
-  </div>
-</template>
-
-<script>
-import { parse } from 'csv-string'
-import ReportDetail from './ReportDetail.vue'
-import ReportPhotos from './ReportPhotos.vue'
-import ReportSvg from './ReportSvg.vue'
-import Reports from './vuexModules/reports'
-import DatePicker from 'vue2-datepicker'
-
-let tabHiddenState = document.hidden
-
-export default {
-  name: 'Report',
-  components: { DatePicker, ReportDetail, ReportPhotos, ReportSvg },
-  props: {
-    reportName: {
-      type: String,
-      required: true
-    },
-    baseUrl: {
-      type: String,
-      required: true
-    },
-    chart: Boolean,
-    detail: Boolean,
-    to: [String, Object],
-    detailPath: {
-      type: String,
-      default: '/report'
-    },
-    loadData: Boolean,
-    admitPeriod: {
-      type: String
-    },
-    paginationParameter: {
-      type: String
-    },
-    limit: {
-      type: String
-    },
-    hideDescription: Boolean,
-    newTab: Boolean,
-    autoRefresh: Boolean,
-    setById: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      loading: false,
-      loaded: false,
-      error: false,
-      svgContent: null,
-      csvContent: null,
-      rows: null,
-      selectedAdmitPeriod: this.admitPeriod,
-      dateRange: null,
-      showPhotos: false,
-      paginateReport: this.paginationParameter,
-      newCursor: 'null'
-    }
-  },
-  computed: {
-    metadata () {
-      return this.$store.getters.reportMetadata(this.reportName)
-    },
-    photoLink () {
-      const columnMetadata = this.metadata.columns
-      return columnMetadata && columnMetadata.find(m => m.qualifier.includes('link_photo'))
-    }
-  },
-  methods: {
-    async loadReports () {
-      if(!this.metadata) {
-        // wait for metadata before trying to load report
-        return
-      }
-      this.loaded = false
-      this.error = false
-      this.loading = true
-      this.$emit('loading')
-      window.scrollTo(0, 0)
-
-      const q = new URLSearchParams()
-      q.append('name', this.reportName)
-      if (this.selectedAdmitPeriod) {
-        q.append('admit_period', this.selectedAdmitPeriod)
-      } else if(this.metadata.parameters.includes('admitPeriod')) {
-        // Don't attempt to load report if we're missing the admit period
-        return
-      }
-      if (this.paginateReport && this.paginateReport !== 'null') {
-        q.append('pagination_parameter', this.paginateReport)
-        q.append('limit', this.limit)
-        q.append('cursor', this.newCursor)
-      }
-      if (this.dateRange) {
-        const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
-        const startDate = toYYYYMMDD(this.dateRange[0])
-        const endDate = toYYYYMMDD(this.dateRange[1])
-        q.append('date_start', startDate)
-        q.append('date_end', endDate)
-      }
-      if (this.metadata.parameters.includes('setById') && this.setById) {
-        q.append('set_by_id', this.setById)
-      }
-      // appends institution if available to url search params
-      if(this.metadata.parameters.includes('institutions')) {
-        if(this.metadata.parameters.institutions.includes(state.institution))
-          q.append('institution', state.institution)
-      }
-
-      const url = this.baseUrl + '?' + q.toString()
-      const loadRequested = () => {
-        let promises = []
-        if (this.chart) {
-          promises.push(this.loadSvg(url))
-        }
-        if (this.detail || this.loadData) {
-          promises.push(this.loadCsv(url))
-        }
-        return promises
-      }
-      const promises = loadRequested()
-      try {
-        await Promise.all(promises)
-        this.loaded = true
-        this.loading = false
-      } catch (err) {
-        console.error(err)
-        this.error = true
-        this.loading = false
-      }
-    },
-    async loadSvg (url) {
-      const svg = await this.loadReport(url, 'image/svg+xml')
-      this.svgContent = svg
-    },
-    async loadCsv (url) {
-      let csv = ''
-      do {
-        const reportResponse = await this.loadReport(url, 'text/csv')
-        csv = csv + reportResponse
-        const q = this.getQuery()
-        url = this.baseUrl + '?' + q.toString()
-      } while (this.newCursor && this.newCursor !== 'null')
-
-      if (csv && csv.length > 0 && /\n/.test(csv)) {
-        this.csvContent = csv
-        const [headData, ...data] = parse(csv)
-        this.rows = data
-        this.$emit('csvLoaded', csv)
-        this.$emit('reportData', { data })
-      } else {
-        this.headData = []
-        this.rows = []
-        this.$emit('csvLoaded', csv)
-        this.$emit('reportData', { headers: [], data: [] })
-      }
-    },
-    async loadReport (url, acceptHeader) {
-      try {
-        const response = await fetch(url, {
-          headers: { accept: acceptHeader },
-          cache: 'no-store'
-        })
-        if (!response.ok) {
-          this.error = true
-          const err = Error(`Error ${response.status}-'${response.statusText}' while fetching report from ${url}`)
-          console.error(err)
-          return null
-        }
-        this.newCursor = response.headers.get('Cursor')
-        return await response.text()
-      } catch (err) {
-        this.error = true
-        console.error(err)
-      }
-    },
-    reloadOnPageBackIntoFocus () {
-      if (tabHiddenState != document.hidden) {
-        if (!document.hidden) {
-          this.loadReports()
-        }
-      }
-      tabHiddenState = document.hidden
-    },
-    getQuery() {
-      const q = new URLSearchParams()
-      q.append('name', this.reportName)
-      if (this.selectedAdmitPeriod) {
-        q.append('admit_period', this.selectedAdmitPeriod)
-      } else if(this.metadata.parameters.includes('admitPeriod')) {
-        // Don't attempt to load report if we're missing the admit period
-        return
-      }
-      if (this.paginateReport && this.paginateReport !== 'null') {
-        q.append('pagination_parameter', this.paginateReport)
-        q.append('limit', this.limit)
-        q.append('cursor', this.newCursor)
-      }
-      if (this.dateRange) {
-        const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
-        const startDate = toYYYYMMDD(this.dateRange[0])
-        const endDate = toYYYYMMDD(this.dateRange[1])
-        q.append('date_start', startDate)
-        q.append('date_end', endDate)
-      }
-      if (this.metadata.parameters.includes('setById') && this.setById) {
-        q.append('set_by_id', this.setById)
-      }
-      // appends institution if available to url search params
-      if(this.metadata.parameters.includes('institutions')) {
-        if(this.metadata.parameters.institutions.includes(state.institution))
-          q.append('institution', state.institution)
-      }
-      return q
-    }
-  },
-  watch: {
-    metadata: {
-      handler: 'loadReports'
-    },
-    baseUrl: {
-      handler: 'loadReports',
-      immediate: true
-    },
-    reportName: {
-      handler: 'loadReports'
-    },
-    admitPeriod(newValue) {
-      this.selectedAdmitPeriod = newValue
-    },
-    selectedAdmitPeriod: 'loadReports',
-    dateRange: 'loadReports'
-  },
-  mounted () {
-    if (this.autoRefresh) {
-      document.addEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
-    }
-  },
-  beforeDestroy () {
-    if (this.autoRefresh) {
-      document.removeEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
-    }
-  }
-}
-</script>
-<style scoped>
-.no-uppercase {
-  text-transform: none;
-  color: var(--gray, gray);
-  font-size: 1rem;
-}
-</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="report" v-if="metadata">
+    <ReportSvg
+        v-if="chart"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :svgContent="svgContent"
+        :loaded="loaded"
+        :error="error"/>
+    <template v-if="!hideDescription">
+      <h1 v-if="metadata.description">{{metadata.description}}</h1>
+      <h4 v-if="metadata.long_description" class="no-uppercase">{{metadata.long_description}}</h4>
+			<ByuDateSelector
+					v-if="metadata.parameters.includes('admitPeriod')"
+					v-model="selectedAdmitPeriod"
+			/>
+			<date-picker
+          v-if="metadata.parameters.includes('date_start') && metadata.parameters.includes('date_end')"
+          v-model="dateRange"
+          range
+          :not-after="new Date()"
+          lang="en"
+      />
+    </template>
+    <template v-if="detail && photoLink">
+      <div>
+        <input type="checkbox" v-model="showPhotos" id="components-Report-showPhotos">
+        <label for="components-Report-showPhotos">Show Photos</label>
+      </div>
+      <ReportPhotos
+          v-if="showPhotos"
+          :rows="rows"
+          :column-metadata="metadata.columns"
+          :loading="loading"
+          :error="error"/>
+      <ReportDetail
+          v-else
+          :csv="csvContent"
+          :column-metadata="metadata.columns"
+          :rows="rows"
+          :loading="loading"
+          :error="error"
+          :detailPath="detailPath"
+          :newTab="newTab"/>
+    </template>
+    <template v-else>
+      <ReportDetail
+          v-if="detail"
+          :csv="csvContent"
+          :column-metadata="metadata.columns"
+          :rows="rows"
+          :loading="loading"
+          :error="error"
+          :detailPath="detailPath"
+          :newTab="newTab" />
+    </template>
+    <router-link v-else-if="to" :to="to">View Details</router-link>
+  </div>
+</template>
+
+<script>
+import { parse } from 'csv-string'
+import ReportDetail from './ReportDetail.vue'
+import ReportPhotos from './ReportPhotos.vue'
+import ReportSvg from './ReportSvg.vue'
+import Reports from './vuexModules/reports'
+import DatePicker from 'vue2-datepicker'
+import ByuDateSelector from "./ByuDateSelector.vue"
+
+let tabHiddenState = document.hidden
+
+export default {
+  name: 'Report',
+  components: { ByuDateSelector, DatePicker, ReportDetail, ReportPhotos, ReportSvg },
+  props: {
+    reportName: {
+      type: String,
+      required: true
+    },
+    baseUrl: {
+      type: String,
+      required: true
+    },
+    chart: Boolean,
+    detail: Boolean,
+    to: [String, Object],
+    detailPath: {
+      type: String,
+      default: '/report'
+    },
+    loadData: Boolean,
+    admitPeriod: {
+      type: String
+    },
+    paginationParameter: {
+      type: String
+    },
+    limit: {
+      type: String
+    },
+    hideDescription: Boolean,
+    newTab: Boolean,
+    autoRefresh: Boolean,
+    setById: {
+      type: String,
+      default: ''
+    },
+		configs: {
+			type: Array,
+			default: () => []
+		}
+  },
+  data () {
+    return {
+      loading: false,
+      loaded: false,
+      error: false,
+      svgContent: null,
+      csvContent: null,
+      rows: null,
+      selectedAdmitPeriod: this.admitPeriod,
+      dateRange: null,
+      showPhotos: false,
+      paginateReport: this.paginationParameter,
+      newCursor: 'null'
+    }
+  },
+  computed: {
+    metadata () {
+      return this.$store.getters.reportMetadata(this.reportName)
+    },
+    photoLink () {
+      const columnMetadata = this.metadata.columns
+      return columnMetadata && columnMetadata.find(m => m.qualifier.includes('link_photo'))
+    }
+  },
+  methods: {
+    async loadReports () {
+      if(!this.metadata) {
+        // wait for metadata before trying to load report
+        return
+      }
+      this.loaded = false
+      this.error = false
+      this.loading = true
+      this.$emit('loading')
+      window.scrollTo(0, 0)
+
+      const q = new URLSearchParams()
+      q.append('name', this.reportName)
+      if (this.selectedAdmitPeriod) {
+        q.append('admit_period', this.selectedAdmitPeriod)
+      } else if(this.metadata.parameters.includes('admitPeriod')) {
+        // Don't attempt to load report if we're missing the admit period
+        return
+      }
+      if (this.paginateReport && this.paginateReport !== 'null') {
+        q.append('pagination_parameter', this.paginateReport)
+        q.append('limit', this.limit)
+        q.append('cursor', this.newCursor)
+      }
+      if (this.dateRange) {
+        const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
+        const startDate = toYYYYMMDD(this.dateRange[0])
+        const endDate = toYYYYMMDD(this.dateRange[1])
+        q.append('date_start', startDate)
+        q.append('date_end', endDate)
+      }
+      if (this.metadata.parameters.includes('setById') && this.setById) {
+        q.append('set_by_id', this.setById)
+      }
+      // appends institution if available to url search params
+      if(this.metadata.parameters.includes('institutions')) {
+        if(this.metadata.parameters.institutions.includes(state.institution))
+          q.append('institution', state.institution)
+      }
+
+      const url = this.baseUrl + '?' + q.toString()
+      const loadRequested = () => {
+        let promises = []
+        if (this.chart) {
+          promises.push(this.loadSvg(url))
+        }
+        if (this.detail || this.loadData) {
+          promises.push(this.loadCsv(url))
+        }
+        return promises
+      }
+      const promises = loadRequested()
+      try {
+        await Promise.all(promises)
+        this.loaded = true
+        this.loading = false
+      } catch (err) {
+        console.error(err)
+        this.error = true
+        this.loading = false
+      }
+    },
+    async loadSvg (url) {
+      const svg = await this.loadReport(url, 'image/svg+xml')
+      this.svgContent = svg
+    },
+    async loadCsv (url) {
+      let csv = ''
+      do {
+        const reportResponse = await this.loadReport(url, 'text/csv')
+        csv = csv + reportResponse
+        const q = this.getQuery()
+        url = this.baseUrl + '?' + q.toString()
+      } while (this.newCursor && this.newCursor !== 'null')
+
+      if (csv && csv.length > 0 && /\n/.test(csv)) {
+        this.csvContent = csv
+        const [headData, ...data] = parse(csv)
+        this.rows = data
+        this.$emit('csvLoaded', csv)
+        this.$emit('reportData', { data })
+      } else {
+        this.headData = []
+        this.rows = []
+        this.$emit('csvLoaded', csv)
+        this.$emit('reportData', { headers: [], data: [] })
+      }
+    },
+    async loadReport (url, acceptHeader) {
+      try {
+        const response = await fetch(url, {
+          headers: { accept: acceptHeader },
+          cache: 'no-store'
+        })
+        if (!response.ok) {
+          this.error = true
+          const err = Error(`Error ${response.status}-'${response.statusText}' while fetching report from ${url}`)
+          console.error(err)
+          return null
+        }
+        this.newCursor = response.headers.get('Cursor')
+        return await response.text()
+      } catch (err) {
+        this.error = true
+        console.error(err)
+      }
+    },
+    reloadOnPageBackIntoFocus () {
+      if (tabHiddenState != document.hidden) {
+        if (!document.hidden) {
+          this.loadReports()
+        }
+      }
+      tabHiddenState = document.hidden
+    },
+    getQuery() {
+      const q = new URLSearchParams()
+      q.append('name', this.reportName)
+      if (this.selectedAdmitPeriod) {
+        q.append('admit_period', this.selectedAdmitPeriod)
+      } else if(this.metadata.parameters.includes('admitPeriod')) {
+        // Don't attempt to load report if we're missing the admit period
+        return
+      }
+      if (this.paginateReport && this.paginateReport !== 'null') {
+        q.append('pagination_parameter', this.paginateReport)
+        q.append('limit', this.limit)
+        q.append('cursor', this.newCursor)
+      }
+      if (this.dateRange) {
+        const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
+        const startDate = toYYYYMMDD(this.dateRange[0])
+        const endDate = toYYYYMMDD(this.dateRange[1])
+        q.append('date_start', startDate)
+        q.append('date_end', endDate)
+      }
+      if (this.metadata.parameters.includes('setById') && this.setById) {
+        q.append('set_by_id', this.setById)
+      }
+      // appends institution if available to url search params
+      if(this.metadata.parameters.includes('institutions')) {
+        if(this.metadata.parameters.institutions.includes(state.institution))
+          q.append('institution', state.institution)
+      }
+      return q
+    },
+		async fetchConfigs() {
+			try {
+				const base = this.env === 'development'
+					? 'https://api-sandbox.byu.edu'
+					: 'https://api.byu.edu'
+				const institution = state.institution
+				const response = await fetch(`${base}/domain/applications/${institution}/admission/v1/configs`)
+				const json = await response.json()
+				this.configs = [...json.closed, ...json.open]
+			} catch (err) {
+				console.error('Failed to fetch admit period configs:', err)
+			}
+		},
+		setDefaultAdmitPeriod() {
+			const today = new Date()
+			const future = this.configs
+					.filter(p => new Date(p.close) >= today)
+					.sort((a, b) => new Date(a.close) - new Date(b.close))
+
+			if (future.length > 0) {
+				this.selectedAdmitPeriod = future[0].admit_period
+			}
+		},
+  },
+  watch: {
+    metadata: {
+      handler: 'loadReports'
+    },
+    baseUrl: {
+      handler: 'loadReports',
+      immediate: true
+    },
+    reportName: {
+      handler: 'loadReports'
+    },
+    admitPeriod(newValue) {
+      this.selectedAdmitPeriod = newValue
+    },
+    selectedAdmitPeriod: 'loadReports',
+    dateRange: 'loadReports'
+  },
+  mounted () {
+    if (this.autoRefresh) {
+      document.addEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
+    }
+		// Only fetch configs if none were passed in
+		if (this.configs.length === 0) {
+			this.fetchConfigs()
+		}
+		// Only set the default admit period if we have configs, else keep the original default
+		if (this.configs.length > 0) {
+			this.setDefaultAdmitPeriod()
+		} else {
+			console.warn('No admit period configs found. Using original default admit period.')
+		}
+  },
+  beforeDestroy () {
+    if (this.autoRefresh) {
+      document.removeEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
+    }
+  }
+}
+</script>
+<style scoped>
+.no-uppercase {
+  text-transform: none;
+  color: var(--gray, gray);
+  font-size: 1rem;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byu-oit/vue-decision-processing-components",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "Vue components shared between decision processing systems for the CES schools.",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",