@byu-oit/vue-decision-processing-components 9.5.4 → 9.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/ByuDateSelector.vue +24 -0
  2. package/Report.vue +298 -288
  3. package/package.json +1 -1
package/ByuDateSelector.vue CHANGED
@@ -1,3 +1,18 @@
1
+ <!--
2
+ Copyright 2024 Brigham Young University
3
+
4
+ Licensed under the Apache License, Version 2.0 (the "License")
5
+ you may not use this file except in compliance with the License.
6
+ You may obtain a copy of the License at
7
+
8
+ http://www.apache.org/licenses/LICENSE-2.0
9
+
10
+ Unless required by applicable law or agreed to in writing, software
11
+ distributed under the License is distributed on an "AS IS" BASIS,
12
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ See the License for the specific language governing permissions and
14
+ limitations under the License.
15
+ -->
1
16
  <template>
2
17
  <byu-control-date-selector
3
18
  ref="selector"
@@ -33,6 +48,13 @@ export default {
33
48
  }
34
49
  },
35
50
  watch: {
51
+ internalValue(newVal) {
52
+ const el = this.$refs.selector
53
+ if (el && el.value !== newVal) {
54
+ el.value = newVal
55
+ el.dispatchEvent(new Event('input', { bubbles: true }))
56
+ }
57
+ },
36
58
  value(newVal) {
37
59
  if (this.internalValue !== newVal) {
38
60
  this.internalValue = newVal
@@ -45,7 +67,9 @@ export default {
45
67
  }
46
68
  },
47
69
  mounted() {
70
+ console.log('Initial value:', this.internalValue)
48
71
  const el = this.$refs.selector
72
+ el.addEventListener('input', e => console.log('Dropdown input fired:', e.target.value))
49
73
  if (el && this.internalValue) {
50
74
  el.value = this.internalValue
51
75
  el.dispatchEvent(new Event('input', { bubbles: true }))
package/Report.vue CHANGED
@@ -14,63 +14,64 @@
14
14
  limitations under the License.
15
15
  -->
16
16
  <template>
17
- <div class="report" v-if="metadata">
18
- <ReportSvg
19
- v-if="chart"
20
- v-bind="$attrs"
21
- v-on="$listeners"
22
- :svgContent="svgContent"
23
- :loaded="loaded"
24
- :error="error"/>
25
- <template v-if="!hideDescription">
26
- <h1 v-if="metadata.description">{{metadata.description}}</h1>
27
- <h4 v-if="metadata.long_description" class="no-uppercase">{{metadata.long_description}}</h4>
17
+ <div class="report" v-if="metadata">
18
+ <ReportSvg
19
+ v-if="chart"
20
+ v-bind="$attrs"
21
+ v-on="$listeners"
22
+ :svgContent="svgContent"
23
+ :loaded="loaded"
24
+ :error="error"/>
25
+ <template v-if="!hideDescription">
26
+ <h1 v-if="metadata.description">{{metadata.description}}</h1>
27
+ <h4 v-if="metadata.long_description" class="no-uppercase">{{metadata.long_description}}</h4>
28
28
  <ByuDateSelector
29
29
  v-if="metadata.parameters.includes('admitPeriod')"
30
30
  v-model="selectedAdmitPeriod"
31
+ @input="val => $emit('update:admitPeriod', val)"
31
32
  />
32
33
  <date-picker
33
- v-if="metadata.parameters.includes('date_start') && metadata.parameters.includes('date_end')"
34
- v-model="dateRange"
35
- range
36
- :not-after="new Date()"
37
- lang="en"
38
- />
39
- </template>
40
- <template v-if="detail && photoLink">
41
- <div>
42
- <input type="checkbox" v-model="showPhotos" id="components-Report-showPhotos">
43
- <label for="components-Report-showPhotos">Show Photos</label>
44
- </div>
45
- <ReportPhotos
46
- v-if="showPhotos"
47
- :rows="rows"
48
- :column-metadata="metadata.columns"
49
- :loading="loading"
50
- :error="error"/>
51
- <ReportDetail
52
- v-else
53
- :csv="csvContent"
54
- :column-metadata="metadata.columns"
55
- :rows="rows"
56
- :loading="loading"
57
- :error="error"
58
- :detailPath="detailPath"
59
- :newTab="newTab"/>
60
- </template>
61
- <template v-else>
62
- <ReportDetail
63
- v-if="detail"
64
- :csv="csvContent"
65
- :column-metadata="metadata.columns"
66
- :rows="rows"
67
- :loading="loading"
68
- :error="error"
69
- :detailPath="detailPath"
70
- :newTab="newTab" />
71
- </template>
72
- <router-link v-else-if="to" :to="to">View Details</router-link>
73
- </div>
34
+ v-if="metadata.parameters.includes('date_start') && metadata.parameters.includes('date_end')"
35
+ v-model="dateRange"
36
+ range
37
+ :not-after="new Date()"
38
+ lang="en"
39
+ />
40
+ </template>
41
+ <template v-if="detail && photoLink">
42
+ <div>
43
+ <input type="checkbox" v-model="showPhotos" id="components-Report-showPhotos">
44
+ <label for="components-Report-showPhotos">Show Photos</label>
45
+ </div>
46
+ <ReportPhotos
47
+ v-if="showPhotos"
48
+ :rows="rows"
49
+ :column-metadata="metadata.columns"
50
+ :loading="loading"
51
+ :error="error"/>
52
+ <ReportDetail
53
+ v-else
54
+ :csv="csvContent"
55
+ :column-metadata="metadata.columns"
56
+ :rows="rows"
57
+ :loading="loading"
58
+ :error="error"
59
+ :detailPath="detailPath"
60
+ :newTab="newTab"/>
61
+ </template>
62
+ <template v-else>
63
+ <ReportDetail
64
+ v-if="detail"
65
+ :csv="csvContent"
66
+ :column-metadata="metadata.columns"
67
+ :rows="rows"
68
+ :loading="loading"
69
+ :error="error"
70
+ :detailPath="detailPath"
71
+ :newTab="newTab" />
72
+ </template>
73
+ <router-link v-else-if="to" :to="to">View Details</router-link>
74
+ </div>
74
75
  </template>
75
76
 
76
77
  <script>
@@ -86,221 +87,221 @@ import { mapState } from 'vuex'
86
87
  let tabHiddenState = document.hidden
87
88
 
88
89
  export default {
89
- name: 'Report',
90
- components: { ByuDateSelector, DatePicker, ReportDetail, ReportPhotos, ReportSvg },
91
- props: {
92
- reportName: {
93
- type: String,
94
- required: true
95
- },
96
- baseUrl: {
97
- type: String,
98
- required: true
99
- },
100
- chart: Boolean,
101
- detail: Boolean,
102
- to: [String, Object],
103
- detailPath: {
104
- type: String,
105
- default: '/report'
106
- },
107
- loadData: Boolean,
108
- admitPeriod: {
109
- type: String
110
- },
111
- paginationParameter: {
112
- type: String
113
- },
114
- limit: {
115
- type: String
116
- },
117
- hideDescription: Boolean,
118
- newTab: Boolean,
119
- autoRefresh: Boolean,
120
- setById: {
121
- type: String,
122
- default: ''
123
- },
90
+ name: 'Report',
91
+ components: { ByuDateSelector, DatePicker, ReportDetail, ReportPhotos, ReportSvg },
92
+ props: {
93
+ reportName: {
94
+ type: String,
95
+ required: true
96
+ },
97
+ baseUrl: {
98
+ type: String,
99
+ required: true
100
+ },
101
+ chart: Boolean,
102
+ detail: Boolean,
103
+ to: [String, Object],
104
+ detailPath: {
105
+ type: String,
106
+ default: '/report'
107
+ },
108
+ loadData: Boolean,
109
+ admitPeriod: {
110
+ type: String
111
+ },
112
+ paginationParameter: {
113
+ type: String
114
+ },
115
+ limit: {
116
+ type: String
117
+ },
118
+ hideDescription: Boolean,
119
+ newTab: Boolean,
120
+ autoRefresh: Boolean,
121
+ setById: {
122
+ type: String,
123
+ default: ''
124
+ },
124
125
  configs: {
125
126
  type: Array,
126
127
  default: () => []
127
128
  }
128
- },
129
- data () {
130
- return {
131
- loading: false,
132
- loaded: false,
133
- error: false,
134
- svgContent: null,
135
- csvContent: null,
136
- rows: null,
137
- selectedAdmitPeriod: this.admitPeriod,
138
- dateRange: null,
139
- showPhotos: false,
140
- paginateReport: this.paginationParameter,
141
- newCursor: 'null'
142
- }
143
- },
144
- computed: {
129
+ },
130
+ data () {
131
+ return {
132
+ loading: false,
133
+ loaded: false,
134
+ error: false,
135
+ svgContent: null,
136
+ csvContent: null,
137
+ rows: null,
138
+ selectedAdmitPeriod: null,
139
+ dateRange: null,
140
+ showPhotos: false,
141
+ paginateReport: this.paginationParameter,
142
+ newCursor: 'null'
143
+ }
144
+ },
145
+ computed: {
145
146
  ...mapState({
146
147
  institution: state => state.ui.institution,
147
148
  env: state => state.environment
148
149
  }),
149
- metadata () {
150
- return this.$store.getters.reportMetadata(this.reportName)
151
- },
152
- photoLink () {
153
- const columnMetadata = this.metadata.columns
154
- return columnMetadata && columnMetadata.find(m => m.qualifier.includes('link_photo'))
155
- }
156
- },
157
- methods: {
158
- async loadReports () {
159
- if(!this.metadata) {
160
- // wait for metadata before trying to load report
161
- return
162
- }
163
- this.loaded = false
164
- this.error = false
165
- this.loading = true
166
- this.$emit('loading')
167
- window.scrollTo(0, 0)
150
+ metadata () {
151
+ return this.$store.getters.reportMetadata(this.reportName)
152
+ },
153
+ photoLink () {
154
+ const columnMetadata = this.metadata.columns
155
+ return columnMetadata && columnMetadata.find(m => m.qualifier.includes('link_photo'))
156
+ }
157
+ },
158
+ methods: {
159
+ async loadReports () {
160
+ if(!this.metadata) {
161
+ // wait for metadata before trying to load report
162
+ return
163
+ }
164
+ this.loaded = false
165
+ this.error = false
166
+ this.loading = true
167
+ this.$emit('loading')
168
+ window.scrollTo(0, 0)
168
169
 
169
- const q = new URLSearchParams()
170
- q.append('name', this.reportName)
171
- if (this.selectedAdmitPeriod) {
172
- q.append('admit_period', this.selectedAdmitPeriod)
173
- } else if(this.metadata.parameters.includes('admitPeriod')) {
174
- // Don't attempt to load report if we're missing the admit period
175
- return
176
- }
177
- if (this.paginateReport && this.paginateReport !== 'null') {
178
- q.append('pagination_parameter', this.paginateReport)
179
- q.append('limit', this.limit)
180
- q.append('cursor', this.newCursor)
181
- }
182
- if (this.dateRange) {
183
- const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
184
- const startDate = toYYYYMMDD(this.dateRange[0])
185
- const endDate = toYYYYMMDD(this.dateRange[1])
186
- q.append('date_start', startDate)
187
- q.append('date_end', endDate)
188
- }
189
- if (this.metadata.parameters.includes('setById') && this.setById) {
190
- q.append('set_by_id', this.setById)
191
- }
192
- // appends institution if available to url search params
193
- if(this.metadata.parameters.includes('institutions')) {
194
- if(this.metadata.parameters.institutions.includes(this.institution))
195
- q.append('institution', this.institution)
196
- }
170
+ const q = new URLSearchParams()
171
+ q.append('name', this.reportName)
172
+ if (this.selectedAdmitPeriod) {
173
+ q.append('admit_period', this.selectedAdmitPeriod)
174
+ } else if(this.metadata.parameters.includes('admitPeriod')) {
175
+ // Don't attempt to load report if we're missing the admit period
176
+ return
177
+ }
178
+ if (this.paginateReport && this.paginateReport !== 'null') {
179
+ q.append('pagination_parameter', this.paginateReport)
180
+ q.append('limit', this.limit)
181
+ q.append('cursor', this.newCursor)
182
+ }
183
+ if (this.dateRange) {
184
+ const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
185
+ const startDate = toYYYYMMDD(this.dateRange[0])
186
+ const endDate = toYYYYMMDD(this.dateRange[1])
187
+ q.append('date_start', startDate)
188
+ q.append('date_end', endDate)
189
+ }
190
+ if (this.metadata.parameters.includes('setById') && this.setById) {
191
+ q.append('set_by_id', this.setById)
192
+ }
193
+ // appends institution if available to url search params
194
+ if(this.metadata.parameters.includes('institutions')) {
195
+ if(this.metadata.parameters.institutions.includes(this.institution))
196
+ q.append('institution', this.institution)
197
+ }
197
198
 
198
- const url = this.baseUrl + '?' + q.toString()
199
- const loadRequested = () => {
200
- let promises = []
201
- if (this.chart) {
202
- promises.push(this.loadSvg(url))
203
- }
204
- if (this.detail || this.loadData) {
205
- promises.push(this.loadCsv(url))
206
- }
207
- return promises
208
- }
209
- const promises = loadRequested()
210
- try {
211
- await Promise.all(promises)
212
- this.loaded = true
213
- this.loading = false
214
- } catch (err) {
215
- console.error(err)
216
- this.error = true
217
- this.loading = false
218
- }
219
- },
220
- async loadSvg (url) {
221
- const svg = await this.loadReport(url, 'image/svg+xml')
222
- this.svgContent = svg
223
- },
224
- async loadCsv (url) {
225
- let csv = ''
226
- do {
227
- const reportResponse = await this.loadReport(url, 'text/csv')
228
- csv = csv + reportResponse
229
- const q = this.getQuery()
230
- url = this.baseUrl + '?' + q.toString()
231
- } while (this.newCursor && this.newCursor !== 'null')
199
+ const url = this.baseUrl + '?' + q.toString()
200
+ const loadRequested = () => {
201
+ let promises = []
202
+ if (this.chart) {
203
+ promises.push(this.loadSvg(url))
204
+ }
205
+ if (this.detail || this.loadData) {
206
+ promises.push(this.loadCsv(url))
207
+ }
208
+ return promises
209
+ }
210
+ const promises = loadRequested()
211
+ try {
212
+ await Promise.all(promises)
213
+ this.loaded = true
214
+ this.loading = false
215
+ } catch (err) {
216
+ console.error(err)
217
+ this.error = true
218
+ this.loading = false
219
+ }
220
+ },
221
+ async loadSvg (url) {
222
+ const svg = await this.loadReport(url, 'image/svg+xml')
223
+ this.svgContent = svg
224
+ },
225
+ async loadCsv (url) {
226
+ let csv = ''
227
+ do {
228
+ const reportResponse = await this.loadReport(url, 'text/csv')
229
+ csv = csv + reportResponse
230
+ const q = this.getQuery()
231
+ url = this.baseUrl + '?' + q.toString()
232
+ } while (this.newCursor && this.newCursor !== 'null')
232
233
 
233
- if (csv && csv.length > 0 && /\n/.test(csv)) {
234
- this.csvContent = csv
235
- const [headData, ...data] = parse(csv)
236
- this.rows = data
237
- this.$emit('csvLoaded', csv)
238
- this.$emit('reportData', { data })
239
- } else {
240
- this.headData = []
241
- this.rows = []
242
- this.$emit('csvLoaded', csv)
243
- this.$emit('reportData', { headers: [], data: [] })
244
- }
245
- },
246
- async loadReport (url, acceptHeader) {
247
- try {
248
- const response = await fetch(url, {
249
- headers: { accept: acceptHeader },
250
- cache: 'no-store'
251
- })
252
- if (!response.ok) {
253
- this.error = true
254
- const err = Error(`Error ${response.status}-'${response.statusText}' while fetching report from ${url}`)
255
- console.error(err)
256
- return null
257
- }
258
- this.newCursor = response.headers.get('Cursor')
259
- return await response.text()
260
- } catch (err) {
261
- this.error = true
262
- console.error(err)
263
- }
264
- },
265
- reloadOnPageBackIntoFocus () {
266
- if (tabHiddenState != document.hidden) {
267
- if (!document.hidden) {
268
- this.loadReports()
269
- }
270
- }
271
- tabHiddenState = document.hidden
272
- },
273
- getQuery() {
274
- const q = new URLSearchParams()
275
- q.append('name', this.reportName)
276
- if (this.selectedAdmitPeriod) {
277
- q.append('admit_period', this.selectedAdmitPeriod)
278
- } else if(this.metadata.parameters.includes('admitPeriod')) {
279
- // Don't attempt to load report if we're missing the admit period
280
- return
281
- }
282
- if (this.paginateReport && this.paginateReport !== 'null') {
283
- q.append('pagination_parameter', this.paginateReport)
284
- q.append('limit', this.limit)
285
- q.append('cursor', this.newCursor)
286
- }
287
- if (this.dateRange) {
288
- const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
289
- const startDate = toYYYYMMDD(this.dateRange[0])
290
- const endDate = toYYYYMMDD(this.dateRange[1])
291
- q.append('date_start', startDate)
292
- q.append('date_end', endDate)
293
- }
294
- if (this.metadata.parameters.includes('setById') && this.setById) {
295
- q.append('set_by_id', this.setById)
296
- }
297
- // appends institution if available to url search params
298
- if(this.metadata.parameters.includes('institutions')) {
299
- if(this.metadata.parameters.institutions.includes(this.institution))
300
- q.append('institution', this.institution)
301
- }
302
- return q
303
- },
234
+ if (csv && csv.length > 0 && /\n/.test(csv)) {
235
+ this.csvContent = csv
236
+ const [headData, ...data] = parse(csv)
237
+ this.rows = data
238
+ this.$emit('csvLoaded', csv)
239
+ this.$emit('reportData', { data })
240
+ } else {
241
+ this.headData = []
242
+ this.rows = []
243
+ this.$emit('csvLoaded', csv)
244
+ this.$emit('reportData', { headers: [], data: [] })
245
+ }
246
+ },
247
+ async loadReport (url, acceptHeader) {
248
+ try {
249
+ const response = await fetch(url, {
250
+ headers: { accept: acceptHeader },
251
+ cache: 'no-store'
252
+ })
253
+ if (!response.ok) {
254
+ this.error = true
255
+ const err = Error(`Error ${response.status}-'${response.statusText}' while fetching report from ${url}`)
256
+ console.error(err)
257
+ return null
258
+ }
259
+ this.newCursor = response.headers.get('Cursor')
260
+ return await response.text()
261
+ } catch (err) {
262
+ this.error = true
263
+ console.error(err)
264
+ }
265
+ },
266
+ reloadOnPageBackIntoFocus () {
267
+ if (tabHiddenState != document.hidden) {
268
+ if (!document.hidden) {
269
+ this.loadReports()
270
+ }
271
+ }
272
+ tabHiddenState = document.hidden
273
+ },
274
+ getQuery() {
275
+ const q = new URLSearchParams()
276
+ q.append('name', this.reportName)
277
+ if (this.selectedAdmitPeriod) {
278
+ q.append('admit_period', this.selectedAdmitPeriod)
279
+ } else if(this.metadata.parameters.includes('admitPeriod')) {
280
+ // Don't attempt to load report if we're missing the admit period
281
+ return
282
+ }
283
+ if (this.paginateReport && this.paginateReport !== 'null') {
284
+ q.append('pagination_parameter', this.paginateReport)
285
+ q.append('limit', this.limit)
286
+ q.append('cursor', this.newCursor)
287
+ }
288
+ if (this.dateRange) {
289
+ const toYYYYMMDD = dt => dt.toISOString().substr(0, 10)
290
+ const startDate = toYYYYMMDD(this.dateRange[0])
291
+ const endDate = toYYYYMMDD(this.dateRange[1])
292
+ q.append('date_start', startDate)
293
+ q.append('date_end', endDate)
294
+ }
295
+ if (this.metadata.parameters.includes('setById') && this.setById) {
296
+ q.append('set_by_id', this.setById)
297
+ }
298
+ // appends institution if available to url search params
299
+ if(this.metadata.parameters.includes('institutions')) {
300
+ if(this.metadata.parameters.institutions.includes(this.institution))
301
+ q.append('institution', this.institution)
302
+ }
303
+ return q
304
+ },
304
305
  setDefaultAdmitPeriod() {
305
306
  try {
306
307
  const today = new Date()
@@ -309,47 +310,56 @@ export default {
309
310
  .sort((a, b) => new Date(a.close) - new Date(b.close))
310
311
 
311
312
  if (future.length > 0) {
312
- this.selectedAdmitPeriod = future[0].admit_period
313
+ const defaultPeriod = future[0].admit_period
314
+ this.selectedAdmitPeriod = defaultPeriod
315
+ this.$emit('update:admitPeriod', defaultPeriod)
313
316
  }
314
317
  } catch (err) {
315
318
  console.warn('Failed to set default admit period. Using original default admit period. Error: ', err)
316
319
  }
317
320
  },
318
- },
319
- watch: {
320
- metadata: {
321
- handler: 'loadReports'
322
- },
323
- baseUrl: {
324
- handler: 'loadReports',
325
- immediate: true
326
- },
327
- reportName: {
328
- handler: 'loadReports'
329
- },
330
- admitPeriod(newValue) {
331
- this.selectedAdmitPeriod = newValue
332
- },
333
- selectedAdmitPeriod: 'loadReports',
334
- dateRange: 'loadReports'
335
- },
336
- mounted () {
337
- if (this.autoRefresh) {
338
- document.addEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
339
- }
321
+ },
322
+ watch: {
323
+ metadata: {
324
+ handler: 'loadReports'
325
+ },
326
+ baseUrl: {
327
+ handler: 'loadReports',
328
+ immediate: true
329
+ },
330
+ reportName: {
331
+ handler: 'loadReports'
332
+ },
333
+ admitPeriod(newValue) {
334
+ this.selectedAdmitPeriod = newValue
335
+ },
336
+ selectedAdmitPeriod: 'loadReports',
337
+ 'configs.length'(len) {
338
+ if (len > 0) {
339
+ console.log('Configs length watcher triggered')
340
+ this.setDefaultAdmitPeriod()
341
+ }
342
+ },
343
+ dateRange: 'loadReports'
344
+ },
345
+ mounted () {
346
+ if (this.autoRefresh) {
347
+ document.addEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
348
+ }
349
+ this.selectedAdmitPeriod = this.admitPeriod || ''
340
350
  this.setDefaultAdmitPeriod()
341
- },
342
- beforeDestroy () {
343
- if (this.autoRefresh) {
344
- document.removeEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
345
- }
346
- }
351
+ },
352
+ beforeDestroy () {
353
+ if (this.autoRefresh) {
354
+ document.removeEventListener('visibilitychange', this.reloadOnPageBackIntoFocus)
355
+ }
356
+ }
347
357
  }
348
358
  </script>
349
359
  <style scoped>
350
360
  .no-uppercase {
351
- text-transform: none;
352
- color: var(--gray, gray);
353
- font-size: 1rem;
361
+ text-transform: none;
362
+ color: var(--gray, gray);
363
+ font-size: 1rem;
354
364
  }
355
365
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@byu-oit/vue-decision-processing-components",
3
- "version": "9.5.4",
3
+ "version": "9.5.5",
4
4
  "description": "Vue components shared between decision processing systems for the CES schools.",
5
5
  "dependencies": {
6
6
  "@fortawesome/fontawesome-free": "^5.15.4",