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

package/Report.vue

@@ -1,340 +1,340 @@
-<!--
-   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) {
-      const options = {
-        headers: {
-          'authorization': `Bearer ${window.byu.auth.accessToken}`,
-          'accept': acceptHeader
-        },
-        cache: 'no-store'
-      }
-      try {
-        const response = await fetch(url, options)
-        if (!response.ok) {
-          this.error = true
-          const err = Error(`Error ${response.status}-'${response.statusText}' while fetching report from ${url}`)
-          console.error(err)
-          console.error(err.stack)
-          return null
-        }
-        this.newCursor = response.headers.get('Cursor')
-        return await response.text()
-      } catch (err) {
-        this.error = true
-        console.error(err)
-        console.error(err.stack)
-      }
-    },
-    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>
+      <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) {
+      const options = {
+        headers: {
+          'authorization': `Bearer ${window.byu.auth.accessToken}`,
+          'accept': acceptHeader
+        },
+        cache: 'no-store'
+      }
+      try {
+        const response = await fetch(url, options)
+        if (!response.ok) {
+          this.error = true
+          const err = Error(`Error ${response.status}-'${response.statusText}' while fetching report from ${url}`)
+          console.error(err)
+          console.error(err.stack)
+          return null
+        }
+        this.newCursor = response.headers.get('Cursor')
+        return await response.text()
+      } catch (err) {
+        this.error = true
+        console.error(err)
+        console.error(err.stack)
+      }
+    },
+    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>