@byu-oit/vue-decision-processing-components 9.7.8 → 9.7.9
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.
- package/AdmitPeriodConfig.vue +115 -115
- package/SupportDialog.vue +0 -2
- package/package.json +1 -1
- package/Dashboard.vue +0 -201
package/AdmitPeriodConfig.vue
CHANGED
|
@@ -1,115 +1,115 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<FilterButton small :show="showList" @show="showList = true" @hide="showList = false">
|
|
4
|
-
<span slot="label"><slot></slot></span>
|
|
5
|
-
<font-awesome-icon
|
|
6
|
-
slot="icon"
|
|
7
|
-
:icon="calendar"
|
|
8
|
-
alt="Configure Admit Periods" />
|
|
9
|
-
<div
|
|
10
|
-
v-for="admitPeriod of admitPeriodList"
|
|
11
|
-
:key="admitPeriod.period"
|
|
12
|
-
@click="chooseAdmitPeriod(admitPeriod.period)"
|
|
13
|
-
class="dropdown-item">
|
|
14
|
-
{{ admitPeriod.long_description }}
|
|
15
|
-
</div>
|
|
16
|
-
</FilterButton>
|
|
17
|
-
</div>
|
|
18
|
-
</template>
|
|
19
|
-
<script>
|
|
20
|
-
import FilterButton from './FilterButton.vue'
|
|
21
|
-
|
|
22
|
-
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
23
|
-
import { faCalendar } from '@fortawesome/free-solid-svg-icons'
|
|
24
|
-
|
|
25
|
-
import { mapState, mapMutations, mapActions } from 'vuex'
|
|
26
|
-
|
|
27
|
-
function semesterCodeToDescription(semesterCode) {
|
|
28
|
-
switch (semesterCode) {
|
|
29
|
-
case '1':
|
|
30
|
-
return 'Winter'
|
|
31
|
-
case '3':
|
|
32
|
-
return 'Spring'
|
|
33
|
-
case '4':
|
|
34
|
-
return 'Summer'
|
|
35
|
-
case '5':
|
|
36
|
-
return 'Fall'
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export default {
|
|
41
|
-
name: 'AdmitPeriodConfig',
|
|
42
|
-
components: {
|
|
43
|
-
FilterButton,
|
|
44
|
-
FontAwesomeIcon
|
|
45
|
-
},
|
|
46
|
-
props: {
|
|
47
|
-
school: {
|
|
48
|
-
type: String,
|
|
49
|
-
validator (value) {
|
|
50
|
-
return ['byu', 'byui', 'byuh', '
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
config: {
|
|
54
|
-
type: Array,
|
|
55
|
-
validator (value) {
|
|
56
|
-
return value.length > 0
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
computed: {
|
|
61
|
-
...mapState({
|
|
62
|
-
selectedAdmitPeriod: state => state.ui.admitPeriod
|
|
63
|
-
}),
|
|
64
|
-
calendar () {
|
|
65
|
-
return faCalendar
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
data () {
|
|
69
|
-
return {
|
|
70
|
-
admitPeriodList: [],
|
|
71
|
-
showList: false
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
methods: {
|
|
75
|
-
...mapMutations(['selectAdmitPeriod']),
|
|
76
|
-
...mapActions(['preserveUiSettings']),
|
|
77
|
-
async fetchConfig() {
|
|
78
|
-
const admitPeriods = []
|
|
79
|
-
for (const admitPeriod of this.config) {
|
|
80
|
-
// isolate semester code and semester year
|
|
81
|
-
const semesterYear = admitPeriod.admit_period.substring(0, admitPeriod.admit_period.length - 1)
|
|
82
|
-
const semesterCode = admitPeriod.admit_period.substring(admitPeriod.admit_period.length - 1)
|
|
83
|
-
// add another object to admitPeriods with information from configuration
|
|
84
|
-
admitPeriods.push({
|
|
85
|
-
period: semesterYear + semesterCode,
|
|
86
|
-
description: semesterYear + ' ' + semesterCodeToDescription(semesterCode),
|
|
87
|
-
long_description: semesterCodeToDescription(semesterCode) + ' ' + semesterYear,
|
|
88
|
-
school: 'byuh',
|
|
89
|
-
application_open: admitPeriod.open,
|
|
90
|
-
application_close: admitPeriod.close
|
|
91
|
-
})
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
this.admitPeriodList = admitPeriods
|
|
95
|
-
// select the most recent admit period if none selected
|
|
96
|
-
if (!this.selectedAdmitPeriod) {
|
|
97
|
-
this.selectedAdmitPeriod(this.admitPeriodList[this.admitPeriodList.length - 1])
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
chooseAdmitPeriod (admitPeriod) {
|
|
101
|
-
this.selectAdmitPeriod(admitPeriod)
|
|
102
|
-
this.preserveUiSettings()
|
|
103
|
-
this.showList = false
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
mounted () {
|
|
107
|
-
this.fetchConfig()
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
</script>
|
|
111
|
-
<style scoped>
|
|
112
|
-
.clickable {
|
|
113
|
-
cursor: pointer;
|
|
114
|
-
}
|
|
115
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<FilterButton small :show="showList" @show="showList = true" @hide="showList = false">
|
|
4
|
+
<span slot="label"><slot></slot></span>
|
|
5
|
+
<font-awesome-icon
|
|
6
|
+
slot="icon"
|
|
7
|
+
:icon="calendar"
|
|
8
|
+
alt="Configure Admit Periods" />
|
|
9
|
+
<div
|
|
10
|
+
v-for="admitPeriod of admitPeriodList"
|
|
11
|
+
:key="admitPeriod.period"
|
|
12
|
+
@click="chooseAdmitPeriod(admitPeriod.period)"
|
|
13
|
+
class="dropdown-item">
|
|
14
|
+
{{ admitPeriod.long_description }}
|
|
15
|
+
</div>
|
|
16
|
+
</FilterButton>
|
|
17
|
+
</div>
|
|
18
|
+
</template>
|
|
19
|
+
<script>
|
|
20
|
+
import FilterButton from './FilterButton.vue'
|
|
21
|
+
|
|
22
|
+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
23
|
+
import { faCalendar } from '@fortawesome/free-solid-svg-icons'
|
|
24
|
+
|
|
25
|
+
import { mapState, mapMutations, mapActions } from 'vuex'
|
|
26
|
+
|
|
27
|
+
function semesterCodeToDescription(semesterCode) {
|
|
28
|
+
switch (semesterCode) {
|
|
29
|
+
case '1':
|
|
30
|
+
return 'Winter'
|
|
31
|
+
case '3':
|
|
32
|
+
return 'Spring'
|
|
33
|
+
case '4':
|
|
34
|
+
return 'Summer'
|
|
35
|
+
case '5':
|
|
36
|
+
return 'Fall'
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export default {
|
|
41
|
+
name: 'AdmitPeriodConfig',
|
|
42
|
+
components: {
|
|
43
|
+
FilterButton,
|
|
44
|
+
FontAwesomeIcon
|
|
45
|
+
},
|
|
46
|
+
props: {
|
|
47
|
+
school: {
|
|
48
|
+
type: String,
|
|
49
|
+
validator (value) {
|
|
50
|
+
return ['byu', 'byui', 'byuh', 'ldsbc'].includes(value)
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
config: {
|
|
54
|
+
type: Array,
|
|
55
|
+
validator (value) {
|
|
56
|
+
return value.length > 0
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
computed: {
|
|
61
|
+
...mapState({
|
|
62
|
+
selectedAdmitPeriod: state => state.ui.admitPeriod
|
|
63
|
+
}),
|
|
64
|
+
calendar () {
|
|
65
|
+
return faCalendar
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
data () {
|
|
69
|
+
return {
|
|
70
|
+
admitPeriodList: [],
|
|
71
|
+
showList: false
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
methods: {
|
|
75
|
+
...mapMutations(['selectAdmitPeriod']),
|
|
76
|
+
...mapActions(['preserveUiSettings']),
|
|
77
|
+
async fetchConfig() {
|
|
78
|
+
const admitPeriods = []
|
|
79
|
+
for (const admitPeriod of this.config) {
|
|
80
|
+
// isolate semester code and semester year
|
|
81
|
+
const semesterYear = admitPeriod.admit_period.substring(0, admitPeriod.admit_period.length - 1)
|
|
82
|
+
const semesterCode = admitPeriod.admit_period.substring(admitPeriod.admit_period.length - 1)
|
|
83
|
+
// add another object to admitPeriods with information from configuration
|
|
84
|
+
admitPeriods.push({
|
|
85
|
+
period: semesterYear + semesterCode,
|
|
86
|
+
description: semesterYear + ' ' + semesterCodeToDescription(semesterCode),
|
|
87
|
+
long_description: semesterCodeToDescription(semesterCode) + ' ' + semesterYear,
|
|
88
|
+
school: 'byuh',
|
|
89
|
+
application_open: admitPeriod.open,
|
|
90
|
+
application_close: admitPeriod.close
|
|
91
|
+
})
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
this.admitPeriodList = admitPeriods
|
|
95
|
+
// select the most recent admit period if none selected
|
|
96
|
+
if (!this.selectedAdmitPeriod) {
|
|
97
|
+
this.selectedAdmitPeriod(this.admitPeriodList[this.admitPeriodList.length - 1])
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
chooseAdmitPeriod (admitPeriod) {
|
|
101
|
+
this.selectAdmitPeriod(admitPeriod)
|
|
102
|
+
this.preserveUiSettings()
|
|
103
|
+
this.showList = false
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
mounted () {
|
|
107
|
+
this.fetchConfig()
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
</script>
|
|
111
|
+
<style scoped>
|
|
112
|
+
.clickable {
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
}
|
|
115
|
+
</style>
|
package/SupportDialog.vue
CHANGED
package/package.json
CHANGED
package/Dashboard.vue
DELETED
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Copyright 2018 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
|
-
-->
|
|
16
|
-
<template>
|
|
17
|
-
<section class="content-padding">
|
|
18
|
-
<div class="grid">
|
|
19
|
-
<div v-if="errorText" class="alert alert-danger" role="alert">
|
|
20
|
-
{{errorText}}
|
|
21
|
-
</div>
|
|
22
|
-
<div class="stats">
|
|
23
|
-
<table class="table table-bordered table-sm">
|
|
24
|
-
<thead>
|
|
25
|
-
<tr>
|
|
26
|
-
<th colspan="2" align="left">Statistics</th>
|
|
27
|
-
</tr>
|
|
28
|
-
</thead>
|
|
29
|
-
<tbody>
|
|
30
|
-
<tr>
|
|
31
|
-
<td>Auto Admit Today</td>
|
|
32
|
-
<td>{{ stats.admitToday }}</td>
|
|
33
|
-
</tr>
|
|
34
|
-
<tr>
|
|
35
|
-
<td>Auto Admit This Week</td>
|
|
36
|
-
<td>{{ stats.admitWeek }}</td>
|
|
37
|
-
</tr>
|
|
38
|
-
<tr>
|
|
39
|
-
<td>Auto Admit This Month</td>
|
|
40
|
-
<td>{{ stats.admitMonth }}</td>
|
|
41
|
-
</tr>
|
|
42
|
-
<tr>
|
|
43
|
-
<td>Total Applications</td>
|
|
44
|
-
<td>{{ stats.totalApps }}</td>
|
|
45
|
-
</tr>
|
|
46
|
-
</tbody>
|
|
47
|
-
</table>
|
|
48
|
-
</div>
|
|
49
|
-
<div class="tools list-group">
|
|
50
|
-
<a class="list-group-item list-group-item-action" href="https://link.byu.edu/gro" target="_blank">Update Admin Access</a>
|
|
51
|
-
|
|
52
|
-
<div class="list-group-item">
|
|
53
|
-
<label for="lookup" class="sr-only">BYU ID</label>
|
|
54
|
-
<input type="text" id="lookup" placeholder="ID/Name" class="">
|
|
55
|
-
<button @click="lookup" class="btn btn-secondary align-middle" aria-label="Search">
|
|
56
|
-
<font-awesome-icon :icon="searchIcon" />
|
|
57
|
-
</button>
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
</div>
|
|
61
|
-
<div class="reports list-group">
|
|
62
|
-
<router-link class="list-group-item list-group-item-action" to="/list/actionsDue">Ready for Action</router-link>
|
|
63
|
-
<router-link class="list-group-item list-group-item-action" to="/list/AS">All Watched List</router-link>
|
|
64
|
-
<router-link class="list-group-item list-group-item-action" to="/list/myStarred">My Watch List</router-link>
|
|
65
|
-
<router-link class="list-group-item list-group-item-action" to="/list/decisionsOnWatchedApplications">Decisions on Watched Applications</router-link>
|
|
66
|
-
<router-link class="list-group-item list-group-item-action" to="/list/admitted">Admitted By Officer</router-link>
|
|
67
|
-
<router-link class="list-group-item list-group-item-action" to="/list/denied">Denied Applications</router-link>
|
|
68
|
-
<router-link class="list-group-item list-group-item-action" to="/list/pendingEndorsement">Pending Endorsement</router-link>
|
|
69
|
-
<router-link class="list-group-item list-group-item-action" to="/list/TOPendingEndorsement">Time Out Pending Endorsement</router-link>
|
|
70
|
-
</div>
|
|
71
|
-
<AppList v-if="applicationList.length" :applications="applicationList" class="applist" />
|
|
72
|
-
<StatCharts class="stat-charts" />
|
|
73
|
-
</div>
|
|
74
|
-
</section>
|
|
75
|
-
</template>
|
|
76
|
-
<script>
|
|
77
|
-
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
78
|
-
import { faSearch } from '@fortawesome/free-solid-svg-icons'
|
|
79
|
-
|
|
80
|
-
import get from 'lodash.get'
|
|
81
|
-
|
|
82
|
-
import Spinner from './Spinner.vue'
|
|
83
|
-
import AppList from './DashboardApplicationList.vue'
|
|
84
|
-
import StatCharts from './StatCharts'
|
|
85
|
-
|
|
86
|
-
import { mapState, mapMutations, mapActions } from 'vuex'
|
|
87
|
-
|
|
88
|
-
const obj2query = o => {
|
|
89
|
-
const keys = Object.keys(o)
|
|
90
|
-
return keys.reduce((kvs, k) => kvs.concat([`${k}=${o[k]}`]), []).join('&')
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
export default {
|
|
94
|
-
name: 'Dashboard',
|
|
95
|
-
components: {
|
|
96
|
-
Spinner,
|
|
97
|
-
FontAwesomeIcon,
|
|
98
|
-
AppList,
|
|
99
|
-
StatCharts
|
|
100
|
-
},
|
|
101
|
-
data() {
|
|
102
|
-
return {
|
|
103
|
-
applicationList: []
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
computed: {
|
|
107
|
-
...mapState({
|
|
108
|
-
stats: 'stats',
|
|
109
|
-
errorText: state => state.apiError.message
|
|
110
|
-
}),
|
|
111
|
-
searchIcon () { return faSearch }
|
|
112
|
-
},
|
|
113
|
-
watch: {
|
|
114
|
-
// call again the method if the route changes
|
|
115
|
-
'$route': 'fetchStats'
|
|
116
|
-
},
|
|
117
|
-
methods: {
|
|
118
|
-
...mapMutations(['incrementFetchCount', 'decrementFetchCount']),
|
|
119
|
-
...mapActions([ 'fetchStats' ]),
|
|
120
|
-
lookup() {
|
|
121
|
-
const applicant_id = document.getElementById('lookup').value
|
|
122
|
-
if (/^[0-9]{9}$/.test(applicant_id)) return this.lookupApp({applicant_id}) //byu id lookup
|
|
123
|
-
if (/^[0-9]{8}$/.test(applicant_id)) return this.lookupApp({'pw_id': applicant_id}) //pw id lookup
|
|
124
|
-
if (/^[a-zA-Z]/.test(applicant_id)) return this.lookupApp({'applicant_name':applicant_id}) // name lookup
|
|
125
|
-
},
|
|
126
|
-
lookupApp(queryParams) {
|
|
127
|
-
console.log("lookup by id")
|
|
128
|
-
this.incrementFetchCount()
|
|
129
|
-
const url = `https://api.byu.edu:443/domain/applications/byupw/degrees/v1/?${obj2query(queryParams)}`
|
|
130
|
-
const headers = new Headers({
|
|
131
|
-
'Authorization': `Bearer ${byu.auth.accessToken}`
|
|
132
|
-
})
|
|
133
|
-
const options = {headers}
|
|
134
|
-
return fetch(url, options).then(res => {
|
|
135
|
-
if (res.ok) {
|
|
136
|
-
this.decrementFetchCount()
|
|
137
|
-
return res.json()
|
|
138
|
-
}
|
|
139
|
-
if (res.status === 404) {
|
|
140
|
-
this.decrementFetchCount({
|
|
141
|
-
success: false,
|
|
142
|
-
status: res.status,
|
|
143
|
-
call: 'Lookup Application by ID',
|
|
144
|
-
message: 'Application not found!'
|
|
145
|
-
})
|
|
146
|
-
return {values: []}
|
|
147
|
-
}
|
|
148
|
-
this.decrementFetchCount({
|
|
149
|
-
success: false,
|
|
150
|
-
status: res.status,
|
|
151
|
-
call: 'Lookup Application by ID',
|
|
152
|
-
message: `Error ${res.status} while fetching application!`
|
|
153
|
-
})
|
|
154
|
-
throw new Error(`Http error ${res.status} while fetching application!`)
|
|
155
|
-
}).then(json => {
|
|
156
|
-
console.log(json)
|
|
157
|
-
const values = json.values
|
|
158
|
-
if (!values.length) {
|
|
159
|
-
return [ { applicant_id: '', applicant_name: 'No applications found' } ]
|
|
160
|
-
}
|
|
161
|
-
if (values.length === 1) {
|
|
162
|
-
const uuid = get(values[0], 'basic.application_uuid.value', '')
|
|
163
|
-
if (uuid) {
|
|
164
|
-
this.$router.push(`/detail/${uuid}`)
|
|
165
|
-
}
|
|
166
|
-
} else {
|
|
167
|
-
this.applicationList = values
|
|
168
|
-
}
|
|
169
|
-
}).catch(err => {
|
|
170
|
-
console.error(err)
|
|
171
|
-
})
|
|
172
|
-
console.log(byuId, '\n', url)
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
</script>
|
|
177
|
-
<style scoped>
|
|
178
|
-
.grid {
|
|
179
|
-
display: grid;
|
|
180
|
-
grid-template-columns: repeat(2, 30rem);
|
|
181
|
-
grid-auto-rows: auto;
|
|
182
|
-
grid-template-areas:
|
|
183
|
-
"alert alert"
|
|
184
|
-
"stats tools"
|
|
185
|
-
"stats reports"
|
|
186
|
-
"applist applist"
|
|
187
|
-
"statcharts statcharts";
|
|
188
|
-
grid-gap: .5rem;
|
|
189
|
-
margin-bottom: 0.75rem;
|
|
190
|
-
}
|
|
191
|
-
.alert { grid-area: alert; }
|
|
192
|
-
.stats { grid-area: stats; }
|
|
193
|
-
.reports { grid-area: reports; }
|
|
194
|
-
.tools { grid-area: tools; }
|
|
195
|
-
.tools input {
|
|
196
|
-
padding: .275rem .75rem;
|
|
197
|
-
vertical-align: middle;
|
|
198
|
-
}
|
|
199
|
-
.applist { grid-area: applist; }
|
|
200
|
-
.stat-charts { grid-area: statcharts; }
|
|
201
|
-
</style>
|