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

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 (136) hide show
  1. package/.github/CODEOWNERS +1 -0
  2. package/.github/workflows/deploy.yml +40 -50
  3. package/.repo-meta.yml +55 -55
  4. package/AdmitPeriodConfig.vue +115 -115
  5. package/ApiCallButton.vue +91 -91
  6. package/ApplicantInfo.vue +100 -100
  7. package/AssignmentBulkDialog.vue +153 -153
  8. package/AssignmentDialog.vue +117 -117
  9. package/AssignmentSummary.vue +75 -75
  10. package/BackgroundBadge.vue +83 -83
  11. package/BackgroundDetailCrime.vue +78 -78
  12. package/BackgroundDetailPluralMarriage.vue +43 -43
  13. package/BackgroundDetailSexRegistry.vue +43 -43
  14. package/BackgroundDetailUniversity.vue +37 -37
  15. package/CHANGELOG.md +676 -676
  16. package/Dashboard.vue +201 -201
  17. package/DashboardApplicationList.vue +50 -50
  18. package/DecisionDialog.vue +178 -178
  19. package/Details.vue +124 -124
  20. package/DetailsActivity.vue +59 -59
  21. package/DetailsBackground.vue +143 -143
  22. package/DetailsBackgroundDetail.vue +47 -47
  23. package/DetailsBackgroundSummary.vue +66 -66
  24. package/DetailsCesHold.vue +107 -107
  25. package/DetailsCollege.vue +93 -93
  26. package/DetailsContact.vue +65 -65
  27. package/DetailsDecision.vue +183 -183
  28. package/DetailsDecisionHistory.vue +56 -56
  29. package/DetailsEndorsement.vue +74 -74
  30. package/DetailsEssay.vue +59 -59
  31. package/DetailsFilenote.vue +62 -62
  32. package/DetailsFilenoteList.vue +109 -109
  33. package/DetailsFlagSection.vue +176 -176
  34. package/DetailsHeader.vue +263 -263
  35. package/DetailsHighSchool.vue +99 -99
  36. package/DetailsHsTranscript.vue +100 -100
  37. package/DetailsInstitute.vue +90 -90
  38. package/DetailsMission.vue +88 -88
  39. package/DetailsNewAppHistory.vue +50 -50
  40. package/DetailsNotes.vue +83 -83
  41. package/DetailsPathway.vue +45 -45
  42. package/DetailsScoringSection.vue +128 -128
  43. package/DetailsSection.vue +116 -116
  44. package/DetailsSeminary.vue +184 -184
  45. package/DetailsSrs.vue +52 -52
  46. package/DetailsSubnav.vue +54 -54
  47. package/DetailsTestScores.vue +131 -131
  48. package/ExpandIndicator.vue +75 -75
  49. package/ExternalLink.vue +34 -34
  50. package/FilterBreadcrumb.vue +85 -85
  51. package/FilterButton.vue +86 -86
  52. package/FilterButtonAdmitPeriod.vue +104 -104
  53. package/FilterButtonAppType.vue +103 -103
  54. package/FilterButtonAssignedTo.vue +96 -96
  55. package/FilterButtonClearFilters.vue +65 -65
  56. package/FilterButtonSex.vue +105 -105
  57. package/FlagButton.vue +59 -59
  58. package/FlagDialog.vue +129 -129
  59. package/Footer.vue +432 -432
  60. package/Header.vue +132 -132
  61. package/HighSchoolSummary.vue +60 -60
  62. package/InternationalIndicator.vue +44 -44
  63. package/InternationalStatus.vue +48 -48
  64. package/LICENSE +201 -201
  65. package/LoadingBadge.vue +58 -58
  66. package/ManageAssignments.vue +123 -123
  67. package/NoAuth.vue +14 -14
  68. package/NoteDialog.vue +106 -106
  69. package/ObjectViewer.vue +49 -49
  70. package/Queues.vue +278 -268
  71. package/QuickLinks.vue +25 -25
  72. package/README.md +2 -2
  73. package/RecentApplications.vue +53 -53
  74. package/Report.vue +340 -340
  75. package/ReportDetail.vue +279 -279
  76. package/ReportList.vue +87 -87
  77. package/ReportPhotos.vue +65 -65
  78. package/ReportSvg.vue +78 -78
  79. package/ReportViewer.vue +165 -165
  80. package/RequestAccess.vue +14 -14
  81. package/RequestAccessList.vue +45 -45
  82. package/RoleSelector.vue +29 -29
  83. package/Search.vue +22 -22
  84. package/ShowApplicantIds.vue +100 -100
  85. package/SortableHeader.vue +53 -53
  86. package/Spinner.vue +34 -34
  87. package/StarredIndicator.vue +36 -36
  88. package/StatBox.vue +73 -73
  89. package/StatCharts.vue +196 -196
  90. package/SupportDialog.vue +172 -172
  91. package/UserInfo.vue +52 -52
  92. package/YesNoIndicator.vue +48 -48
  93. package/dateTimeFormat.js +67 -67
  94. package/gpaCalculation.js +162 -162
  95. package/gpaFilter.js +5 -5
  96. package/hsSummary.json +2019 -2019
  97. package/package.json +37 -36
  98. package/parsers/application.js +396 -396
  99. package/parsers/decisionHistory.js +27 -27
  100. package/parsers/filenotes.js +27 -27
  101. package/parsers/notes.js +49 -49
  102. package/parsers/packet.js +88 -88
  103. package/parsers/packetList.js +57 -57
  104. package/parsers/reports.js +13 -13
  105. package/sat2Act.js +46 -46
  106. package/test.js +48 -48
  107. package/themes/ByuiFooter.vue +38 -38
  108. package/themes/ByuiHeader.vue +96 -96
  109. package/themes/LdsbcFooter.vue +38 -38
  110. package/themes/LdsbcHeader.vue +100 -100
  111. package/vuexModules/application/activity.js +32 -32
  112. package/vuexModules/application/applicationList.js +71 -71
  113. package/vuexModules/application/background.js +47 -47
  114. package/vuexModules/application/bio.js +38 -38
  115. package/vuexModules/application/citizenship.js +30 -30
  116. package/vuexModules/application/collegeSummaries.js +32 -32
  117. package/vuexModules/application/essay.js +26 -26
  118. package/vuexModules/application/highSchoolSummaries.js +40 -40
  119. package/vuexModules/application/index.js +157 -157
  120. package/vuexModules/application/institute.js +30 -30
  121. package/vuexModules/application/mission.js +48 -48
  122. package/vuexModules/application/personalRecords.js +24 -24
  123. package/vuexModules/application/questions.js +23 -23
  124. package/vuexModules/application/seminary.js +39 -39
  125. package/vuexModules/application/testScores.js +26 -26
  126. package/vuexModules/notes/index.js +22 -22
  127. package/vuexModules/packet/decision.js +43 -43
  128. package/vuexModules/packet/decisionHistory.js +28 -28
  129. package/vuexModules/packet/flags.js +174 -174
  130. package/vuexModules/packet/index.js +52 -52
  131. package/vuexModules/packet/packetList.js +127 -127
  132. package/vuexModules/packet/processes.js +28 -28
  133. package/vuexModules/reports/index.js +32 -32
  134. package/vuexModules/ui/index.js +56 -56
  135. package/vuexModules/users/index.js +46 -46
  136. package/yyyyMmFilter.js +7 -7
@@ -0,0 +1 @@
1
+ * @byu-oit/ces-admissions-and-decision-processing-change-controllers
@@ -1,51 +1,41 @@
1
- name: Deployment
2
-
3
- on:
4
- push:
5
- branches: [ master ]
6
-
7
- env:
8
- node_version: "14"
9
-
10
- jobs:
11
- publish:
12
- concurrency: publish
13
- name: Publish npm package
14
- runs-on: ubuntu-latest
15
- steps:
16
- - name: Check out
17
- uses: actions/checkout@v2
18
-
19
- - name: Set up Node.js
20
- uses: actions/setup-node@v2.1.4
21
- with:
22
- node-version: ${{ env.node_version }}
23
- registry-url: https://npm.pkg.github.com
24
- scope: '@byu-oit'
25
-
26
- - name: Build
27
- run: |
28
- npm install
29
- npm run build
30
- env:
31
- NODE_AUTH_TOKEN: ${{ secrets.GPM_TOKEN }}
32
-
33
- - name: Lint
34
- run: npm run lint
35
-
36
- - name: Publish
37
- run: npm publish
38
- env:
39
- NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
40
-
41
- - name: Set up Node.js
42
- uses: actions/setup-node@v2.1.4
43
- with:
44
- node-version: ${{ env.node_version }}
45
- registry-url: https://registry.npmjs.org
46
- scope: '@byu-oit'
47
-
48
- - name: Publish
49
- run: npm publish --access public
50
- env:
1
+ name: Deployment
2
+
3
+ on:
4
+ push:
5
+ branches: [ main ]
6
+
7
+ env:
8
+ node_version: "14"
9
+
10
+ jobs:
11
+ publish:
12
+ concurrency: publish
13
+ name: Publish npm package
14
+ runs-on: ubuntu-latest
15
+ steps:
16
+ - name: Check out
17
+ uses: actions/checkout@v3
18
+
19
+ - name: Set up Node.js
20
+ uses: actions/setup-node@v4
21
+ with:
22
+ node-version: ${{ env.node_version }}
23
+ registry-url: https://npm.pkg.github.com
24
+ scope: '@byu-oit'
25
+
26
+ - name: Publish
27
+ run: npm publish
28
+ env:
29
+ NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
30
+
31
+ - name: Set up Node.js
32
+ uses: actions/setup-node@v4
33
+ with:
34
+ node-version: ${{ env.node_version }}
35
+ registry-url: https://registry.npmjs.org
36
+ scope: '@byu-oit'
37
+
38
+ - name: Publish
39
+ run: npm publish --access public
40
+ env:
51
41
  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
package/.repo-meta.yml CHANGED
@@ -1,55 +1,55 @@
1
- # For full spec reference see https://github.com/byu-oit/repo-meta/blob/master/repo-meta-template.yml
2
- # This file was automatically generated. It is used for various integrations like creating and updating Software CIs in the CMDB.
3
- # You are required to maintain Software CI records in the CMDB for all of the deployable software artifacts you maintain.
4
- # You can fill in the information here and have the integration do that for you or you can do that yourself manually.
5
- $schemaver: 2.1
6
- repo_url: https://github.com/byu-oit/vue-decision-processing-components # optional
7
- software:
8
- - name: vue-decision-processing-components # optional
9
- deploy_to_cmdb: true # optional
10
- type: ''
11
- aliases: # optional
12
- short_description: Vue.js components to be shared between the decision processing
13
- applications for the various CES Schools. # optional
14
- assignment_group: gro:OIT-App Dev Student Info Mgmt
15
- notes: # optional
16
- maintained_by: # optional
17
- - arasmus8
18
- data_sensitivity: internal
19
- developed_by_byu: true # optional
20
- ddd: # optional
21
- business_domain:
22
- ubiquitous_language_url:
23
- context_map_url:
24
- links: # optional
25
- system_documentation_url: https://github.com/byu-oit/vue-decision-processing-components
26
- swagger_urls:
27
- microservice: true # optional
28
- technologies_used: # optional
29
- - Vue
30
- - JavaScript
31
- - NodeJS
32
- standard_change_template:
33
- stages:
34
- development:
35
- urls: # optional
36
- product_page:
37
- physical_url:
38
- virtual_url:
39
- hosting_location: ''
40
- aws_account: # optional
41
- relationships: # optional
42
- depends_on: # optional
43
- db_read_write:
44
- db_read_only:
45
- software:
46
- supports: # optional
47
- software:
48
- service:
49
- reverse_proxy: # optional
50
- runs_on: # optional
51
- server_cluster:
52
- virtual_server:
53
- rack_server:
54
- blade_server:
55
- data-sensitivity: ''
1
+ # For full spec reference see https://github.com/byu-oit/repo-meta/blob/master/repo-meta-template.yml
2
+ # This file was automatically generated. It is used for various integrations like creating and updating Software CIs in the CMDB.
3
+ # You are required to maintain Software CI records in the CMDB for all of the deployable software artifacts you maintain.
4
+ # You can fill in the information here and have the integration do that for you or you can do that yourself manually.
5
+ $schemaver: 2.1
6
+ repo_url: https://github.com/byu-oit/vue-decision-processing-components # optional
7
+ software:
8
+ - name: vue-decision-processing-components # optional
9
+ deploy_to_cmdb: true # optional
10
+ type: ''
11
+ aliases: # optional
12
+ short_description: Vue.js components to be shared between the decision processing
13
+ applications for the various CES Schools. # optional
14
+ assignment_group: gro:OIT-App Dev Student Info Mgmt
15
+ notes: # optional
16
+ maintained_by: # optional
17
+ - arasmus8
18
+ data_sensitivity: internal
19
+ developed_by_byu: true # optional
20
+ ddd: # optional
21
+ business_domain:
22
+ ubiquitous_language_url:
23
+ context_map_url:
24
+ links: # optional
25
+ system_documentation_url: https://github.com/byu-oit/vue-decision-processing-components
26
+ swagger_urls:
27
+ microservice: true # optional
28
+ technologies_used: # optional
29
+ - Vue
30
+ - JavaScript
31
+ - NodeJS
32
+ standard_change_template:
33
+ stages:
34
+ development:
35
+ urls: # optional
36
+ product_page:
37
+ physical_url:
38
+ virtual_url:
39
+ hosting_location: ''
40
+ aws_account: # optional
41
+ relationships: # optional
42
+ depends_on: # optional
43
+ db_read_write:
44
+ db_read_only:
45
+ software:
46
+ supports: # optional
47
+ software:
48
+ service:
49
+ reverse_proxy: # optional
50
+ runs_on: # optional
51
+ server_cluster:
52
+ virtual_server:
53
+ rack_server:
54
+ blade_server:
55
+ data-sensitivity: ''
@@ -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', 'byupw', '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>
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', 'byupw', '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/ApiCallButton.vue CHANGED
@@ -1,91 +1,91 @@
1
- <template>
2
- <button @click="clickHandler" :class="btnClass" :disabled="waiting || finished || hasError">
3
- <FontAwesomeIcon v-if="icon != null" :icon="icon" :spin="waiting" />
4
- <slot></slot>
5
- </button>
6
- </template>
7
- <script>
8
- import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
9
- import { faSpinner, faExclamationTriangle, faCheck, faUserClock, faTrash } from '@fortawesome/free-solid-svg-icons'
10
-
11
- import { mapState, mapGetters } from 'vuex'
12
-
13
- export default {
14
- name: 'ApiCallButton',
15
- components: { FontAwesomeIcon },
16
- props: {
17
- outline: Boolean,
18
- small: Boolean,
19
- defaultCategory: {
20
- type: String,
21
- default: 'primary'
22
- },
23
- initialIcon: {
24
- type: String,
25
- validator(value) {
26
- return ['snooze', 'trash'].includes(value)
27
- }
28
- }
29
- },
30
- data () {
31
- return {
32
- waiting: false,
33
- finished: false
34
- }
35
- },
36
- computed: {
37
- ...mapState({
38
- hasError: state => !!state.apiError.status
39
- }),
40
- ...mapGetters(['loading']),
41
- semanticCategory () {
42
- if (this.hasError) return 'danger'
43
- else if (this.finished) return 'success'
44
- return this.defaultCategory
45
- },
46
- btnClass () {
47
- const semanticCategory = this.semanticCategory
48
- const category = `btn${this.outline ? '-outline' : ''}-${semanticCategory}`
49
- return {
50
- 'btn': true,
51
- [category]: true,
52
- 'btn-sm': this.small
53
- }
54
- },
55
- icon () {
56
- if (this.hasError) return faExclamationTriangle
57
- else if (this.waiting) return faSpinner
58
- else if (this.finished) return faCheck
59
- else if (this.initialIcon) {
60
- switch (this.initialIcon) {
61
- case 'snooze':
62
- return faUserClock
63
- case 'trash':
64
- return faTrash
65
- default:
66
- return null
67
- }
68
- }
69
- return null
70
- }
71
- },
72
- watch: {
73
- loading () {
74
- if (this.waiting && !this.loading) {
75
- this.waiting = false
76
- this.finished = true
77
- window.setTimeout(() => {
78
- this.finished = false
79
- this.$emit('complete')
80
- }, 2500)
81
- }
82
- }
83
- },
84
- methods: {
85
- clickHandler () {
86
- this.waiting = true
87
- this.$emit('click')
88
- }
89
- }
90
- }
91
- </script>
1
+ <template>
2
+ <button @click="clickHandler" :class="btnClass" :disabled="waiting || finished || hasError">
3
+ <FontAwesomeIcon v-if="icon != null" :icon="icon" :spin="waiting" />
4
+ <slot></slot>
5
+ </button>
6
+ </template>
7
+ <script>
8
+ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
9
+ import { faSpinner, faExclamationTriangle, faCheck, faUserClock, faTrash } from '@fortawesome/free-solid-svg-icons'
10
+
11
+ import { mapState, mapGetters } from 'vuex'
12
+
13
+ export default {
14
+ name: 'ApiCallButton',
15
+ components: { FontAwesomeIcon },
16
+ props: {
17
+ outline: Boolean,
18
+ small: Boolean,
19
+ defaultCategory: {
20
+ type: String,
21
+ default: 'primary'
22
+ },
23
+ initialIcon: {
24
+ type: String,
25
+ validator(value) {
26
+ return ['snooze', 'trash'].includes(value)
27
+ }
28
+ }
29
+ },
30
+ data () {
31
+ return {
32
+ waiting: false,
33
+ finished: false
34
+ }
35
+ },
36
+ computed: {
37
+ ...mapState({
38
+ hasError: state => !!state.apiError.status
39
+ }),
40
+ ...mapGetters(['loading']),
41
+ semanticCategory () {
42
+ if (this.hasError) return 'danger'
43
+ else if (this.finished) return 'success'
44
+ return this.defaultCategory
45
+ },
46
+ btnClass () {
47
+ const semanticCategory = this.semanticCategory
48
+ const category = `btn${this.outline ? '-outline' : ''}-${semanticCategory}`
49
+ return {
50
+ 'btn': true,
51
+ [category]: true,
52
+ 'btn-sm': this.small
53
+ }
54
+ },
55
+ icon () {
56
+ if (this.hasError) return faExclamationTriangle
57
+ else if (this.waiting) return faSpinner
58
+ else if (this.finished) return faCheck
59
+ else if (this.initialIcon) {
60
+ switch (this.initialIcon) {
61
+ case 'snooze':
62
+ return faUserClock
63
+ case 'trash':
64
+ return faTrash
65
+ default:
66
+ return null
67
+ }
68
+ }
69
+ return null
70
+ }
71
+ },
72
+ watch: {
73
+ loading () {
74
+ if (this.waiting && !this.loading) {
75
+ this.waiting = false
76
+ this.finished = true
77
+ window.setTimeout(() => {
78
+ this.finished = false
79
+ this.$emit('complete')
80
+ }, 2500)
81
+ }
82
+ }
83
+ },
84
+ methods: {
85
+ clickHandler () {
86
+ this.waiting = true
87
+ this.$emit('click')
88
+ }
89
+ }
90
+ }
91
+ </script>