Skip to content

Commit 52f5d35

Browse files
rlorenzorlorenzo
authored
Merge pull request #137 from ucdavis/VPR-104-accessibility-audit-CTS
VPR-104 fix(a11y): CTS area accessibility improvements (PR 3 of 6)
2 parents e76f466 + 94d9153 commit 52f5d35

34 files changed

Lines changed: 490 additions & 301 deletions

‎VueApp/src/CTS/components/LevelSelect.vue‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,10 @@ getLevels()
7373
flat
7474
size="md"
7575
dense
76-
:class="selectedLevel.levelId == level.levelId ? 'selectedLevel q-py-sm' : 'q-py-sm'"
76+
:class="[
77+
'q-py-sm',
78+
selectedLevel.levelId == level.levelId ? ['selectedLevel', `selectedLevel--${level.order}`] : '',
79+
]"
7780
@click="selectedLevel = level"
7881
>
7982
<q-tooltip
@@ -109,7 +112,9 @@ getLevels()
109112
no-caps
110113
size="md"
111114
dense
112-
:class="selectedLevel.levelId == level.levelId ? 'selectedLevel' : ''"
115+
:class="
116+
selectedLevel.levelId == level.levelId ? ['selectedLevel', `selectedLevel--${level.order}`] : ''
117+
"
113118
@click="selectedLevel = level"
114119
>
115120
<template #default> {{ level.order }}. {{ level.levelName }} </template>
@@ -143,17 +148,38 @@ getLevels()
143148

144149
<style scoped>
145150
div.levelSelection button {
146-
border: 1px solid rgb(30 136 229);
147-
color: rgb(30 136 229);
151+
border: 1px solid var(--q-secondary);
152+
color: var(--q-secondary);
148153
width: 100%;
149154
margin-bottom: 0.2rem;
150155
}
151156
152157
div.levelSelection button.selectedLevel {
153-
background-color: rgb(30 136 229);
158+
background-color: var(--q-secondary);
154159
color: white;
155160
}
156161
162+
div.levelSelection button.selectedLevel.selectedLevel--1 {
163+
background-color: rgba(62, 127, 238, 0.3);
164+
color: #212529;
165+
}
166+
div.levelSelection button.selectedLevel.selectedLevel--2 {
167+
background-color: rgba(62, 127, 238, 0.7);
168+
color: #212529;
169+
}
170+
div.levelSelection button.selectedLevel.selectedLevel--3 {
171+
background-color: rgba(62, 127, 238, 1);
172+
color: #000;
173+
}
174+
div.levelSelection button.selectedLevel.selectedLevel--4 {
175+
background-color: rgba(0, 44, 175, 0.8);
176+
color: #fff;
177+
}
178+
div.levelSelection button.selectedLevel.selectedLevel--5 {
179+
background-color: rgba(11, 3, 139, 1);
180+
color: #fff;
181+
}
182+
157183
.levelHover {
158184
font-size: 0.8rem;
159185
}

‎VueApp/src/CTS/components/ServiceSelect.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,13 @@ void getServices()
9595
side
9696
v-if="scope.opt.thisWeek"
9797
>
98-
<q-badge color="green"> This Week </q-badge>
98+
<q-badge color="positive"> This Week </q-badge>
9999
</q-item-section>
100100
<q-item-section
101101
side
102102
v-if="scope.opt.lastWeek && !scope.opt.thisWeek"
103103
>
104-
<q-badge color="blue"> Last Week </q-badge>
104+
<q-badge color="primary"> Last Week </q-badge>
105105
</q-item-section>
106106
<q-item-section
107107
side

‎VueApp/src/CTS/pages/AssessmentCompetency.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useRoute } from "vue-router"
55
import type { Competency, MilestoneLevel } from "@/CTS/types"
66
import StudentSelect from "@/components/StudentSelect.vue"
77
import LevelSelect from "@/CTS/components/LevelSelect.vue"
8+
import StatusBanner from "@/components/StatusBanner.vue"
89
910
const route = useRoute()
1011
@@ -63,7 +64,7 @@ const milestoneLevels = ref([
6364
function submitMilestone() {}
6465
</script>
6566
<template>
66-
<h2>Competency Assessment</h2>
67+
<h1>Competency Assessment</h1>
6768
<div class="row justify-between items-center q-mb-lg">
6869
<div class="col-12 col-md-6">
6970
<h2 class="epa text-weight-regular">{{ competency.number }} {{ competency.name }}</h2>
@@ -84,13 +85,13 @@ function submitMilestone() {}
8485
v-bind="studentMilestone"
8586
v-show="selectedStudentId > 0"
8687
>
87-
<div
88-
class="bg-red-5 text-white q-pa-sm rounded q-mb-md"
88+
<StatusBanner
8989
v-if="submitErrors?.message?.length > 0"
90+
type="error"
9091
>
9192
{{ submitErrors.message }}
9293
Please make sure you have selected a service, EPA, student, and a level on the entrustment scale.
93-
</div>
94+
</StatusBanner>
9495
<LevelSelect
9596
level-type="milestone"
9697
@level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"

‎VueApp/src/CTS/pages/AssessmentEpa.vue‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { Epa } from "@/CTS/types"
66
import StudentSelect from "@/components/StudentSelect.vue"
77
import ServiceSelectBox from "@/CTS/components/ServiceSelect.vue"
88
import LevelSelect from "@/CTS/components/LevelSelect.vue"
9+
import StatusBanner from "@/components/StatusBanner.vue"
910
1011
//epas
1112
const epas = ref([]) as Ref<Epa[]>
@@ -123,21 +124,14 @@ watch(selectedStudentId, () => {
123124
</div>
124125
</div>
125126

126-
<q-banner
127-
inline-actions
128-
rounded
127+
<StatusBanner
129128
v-if="success"
130-
class="bg-green text-white q-mb-md"
129+
v-model:visible="success"
130+
type="success"
131+
dismissible
131132
>
132133
EPA Saved
133-
<template #action>
134-
<q-btn
135-
flat
136-
label="Dismiss"
137-
@click="success = false"
138-
></q-btn>
139-
</template>
140-
</q-banner>
134+
</StatusBanner>
141135

142136
<div v-if="serviceId != null && epa?.epaId">
143137
<div class="row justify-between items-center q-mb-lg">
@@ -161,13 +155,13 @@ watch(selectedStudentId, () => {
161155
v-bind="studentEpa"
162156
v-show="selectedStudentId > 0"
163157
>
164-
<div
165-
class="bg-red-5 text-white q-pa-sm rounded q-mb-md"
158+
<StatusBanner
166159
v-if="submitErrors"
160+
type="error"
167161
>
168162
Please make sure you have selected a service, EPA, student, a level on the entrustment scale,
169163
and entered a comment.
170-
</div>
164+
</StatusBanner>
171165
<LevelSelect
172166
level-type="epa"
173167
@level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"

‎VueApp/src/CTS/pages/AssessmentEpaEdit.vue‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useRoute, useRouter } from "vue-router"
55
import { useFetch } from "@/composables/ViperFetch"
66
import { useDateFunctions } from "@/composables/DateFunctions"
77
import LevelSelect from "@/CTS/components/LevelSelect.vue"
8+
import StatusBanner from "@/components/StatusBanner.vue"
89
910
const { formatDateForDateInput } = useDateFunctions()
1011
const route = useRoute()
@@ -73,24 +74,17 @@ getStudentEpa()
7374
class="col"
7475
v-show="studentEpa.encounterId"
7576
>
76-
<q-banner
77-
inline-actions
78-
rounded
77+
<StatusBanner
7978
v-if="success"
80-
class="bg-green text-white q-mb-md"
79+
v-model:visible="success"
80+
type="success"
81+
dismissible
8182
>
8283
EPA Saved
83-
<template #action>
84-
<q-btn
85-
flat
86-
label="Dismiss"
87-
@click="success = false"
88-
></q-btn>
89-
</template>
90-
</q-banner>
84+
</StatusBanner>
9185
<div class="row justify-between items-end q-mb-lg">
9286
<div class="col-12 col-md-6 col-lg-5">
93-
<h2 class="epa">{{ studentEpa.epaName }}</h2>
87+
<h1 class="epa">{{ studentEpa.epaName }}</h1>
9488
</div>
9589
<div class="col-12 col-md-6 col-lg-3 q-mr-md text-weight-medium text-body1">
9690
Service: {{ studentEpa.serviceName }}
@@ -109,20 +103,21 @@ getStudentEpa()
109103
class="smallPhoto rounded-borders"
110104
loading="eager"
111105
:no-spinner="true"
106+
:alt="`${studentEpa.studentName}'s photo`"
112107
></q-img>
113108
</q-avatar>
114109
</div>
115110
</div>
116111
</div>
117112
</div>
118113
<q-form @submit="submitEpa">
119-
<div
120-
class="bg-red-5 text-white q-pa-sm rounded"
114+
<StatusBanner
121115
v-if="submitErrors?.message?.length > 0"
116+
type="error"
122117
>
123118
{{ submitErrors.message }}
124119
Please make sure you have selected a service, EPA, student, and a level on the entrustment scale.
125-
</div>
120+
</StatusBanner>
126121
<LevelSelect
127122
level-type="epa"
128123
@level-change="(selectedLevelId: number) => (levelId = selectedLevelId)"
@@ -171,7 +166,7 @@ getStudentEpa()
171166
</template>
172167

173168
<style scoped>
174-
h2.epa {
169+
h1.epa {
175170
font-weight: 400;
176171
font-size: 2rem;
177172
margin-bottom: 4px;

‎VueApp/src/CTS/pages/AssessmentList.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const searchForm = ref({
3030
dateTo: null,
3131
})
3232
const columns: QTableProps["columns"] = [
33-
{ name: "action", label: "", field: "id", align: "left" },
33+
{ name: "action", label: "Actions", field: "id", align: "left" },
3434
{ name: "studentName", label: "Student", field: "studentName", align: "left", sortable: true },
3535
{ name: "epaName", label: "EPA", field: "epaName", align: "left", sortable: true },
3636
{ name: "serviceName", label: "Service", field: "serviceName", align: "left", sortable: true },
@@ -138,7 +138,7 @@ loadPageData()
138138
</script>
139139

140140
<template>
141-
<h2>View Assessments</h2>
141+
<h1>View Assessments</h1>
142142

143143
<q-form>
144144
<div class="row">
@@ -268,8 +268,9 @@ loadPageData()
268268
>
269269
<template #top-right>
270270
<q-input
271-
borderless
271+
outlined
272272
dense
273+
bg-color="white"
273274
debounce="300"
274275
v-model="filter"
275276
placeholder="Search"

‎VueApp/src/CTS/pages/AuditList.vue‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { Ref } from "vue"
33
import type { QTableProps } from "quasar"
4-
import { ref, inject } from "vue"
4+
import { ref, inject, computed } from "vue"
55
import { useFetch } from "@/composables/ViperFetch"
66
import { useDateFunctions } from "@/composables/DateFunctions"
77
import type { Person } from "@/CTS/types"
@@ -17,7 +17,7 @@ const actions = ref([]) as Ref<string[]>
1717
const areas = ref([]) as Ref<string[]>
1818
const showDetail = ref(false)
1919
20-
const auditColumns: QTableProps["columns"] = [
20+
const baseColumns: QTableProps["columns"] = [
2121
{ name: "area", label: "Area", field: "area", align: "left", sortable: true },
2222
{ name: "action", label: "Action", field: "action", align: "left", sortable: true },
2323
{
@@ -30,8 +30,9 @@ const auditColumns: QTableProps["columns"] = [
3030
},
3131
{ name: "modifiedBy", label: "By", field: "modifiedByName", align: "left", sortable: true },
3232
{ name: "modifiedPerson", label: "Modified Person", field: "modifiedPersonName", align: "left", sortable: true },
33-
{ name: "detail", label: "Detail", field: "detail", align: "left", sortable: false },
3433
]
34+
const detailColumn = { name: "detail", label: "Details", field: "detail", align: "left" as const, sortable: false }
35+
const auditColumns = computed(() => (showDetail.value ? [...baseColumns!, detailColumn] : baseColumns!))
3536
const loading = ref(false)
3637
const pagination = ref({ page: 1, sortBy: "timestamp", descending: true, rowsPerPage: 25, rowsNumber: 100 }) as Ref<any>
3738
const filter = ref({
@@ -66,10 +67,9 @@ async function loadAudit(page: number, perPage: number, sortBy: string, descendi
6667
const p = new URLSearchParams()
6768
if (filter.value.area !== null) p.append("area", filter.value.area)
6869
if (filter.value.action !== null) p.append("action", filter.value.action)
69-
if (filter.value.modifiedBy?.personId !== null)
70-
p.append("modifiedById", filter.value.modifiedBy?.personId.toString())
71-
if (filter.value.modifiedPerson?.personId !== null)
72-
p.append("modifiedPersonId", filter.value.modifiedPerson?.personId.toString())
70+
if (filter.value.modifiedBy?.personId != null) p.append("modifiedById", filter.value.modifiedBy.personId.toString())
71+
if (filter.value.modifiedPerson?.personId != null)
72+
p.append("modifiedPersonId", filter.value.modifiedPerson.personId.toString())
7373
if (filter.value.dateFrom !== null) p.append("dateFrom", filter.value.dateFrom)
7474
if (filter.value.dateTo !== null) p.append("dateTo", filter.value.dateTo)
7575
@@ -121,7 +121,7 @@ loadAreas()
121121
</script>
122122

123123
<template>
124-
<h2>View Audit Log</h2>
124+
<h1>View Audit Log</h1>
125125
<q-form>
126126
<div class="row">
127127
<div class="col-12 col-md-6 col-lg-3">
@@ -203,6 +203,11 @@ loadAreas()
203203
</div>
204204
</div>
205205
</q-form>
206+
<q-toggle
207+
v-model="showDetail"
208+
label="Show Details"
209+
class="q-mb-sm"
210+
/>
206211
<q-table
207212
row-key="ctsAuditId"
208213
:rows="auditRows"
@@ -212,27 +217,17 @@ loadAreas()
212217
:rows-per-page-options="[5, 10, 15, 25, 50, 100]"
213218
@request="loadAuditRows"
214219
>
215-
<template #header-cell-detail="props">
216-
<q-th :props="props">
217-
<q-toggle
218-
v-model="showDetail"
219-
label="Details"
220-
/>
221-
</q-th>
222-
</template>
223220
<template #body-cell-detail="props">
224221
<q-td
225222
:props="props"
226223
style="max-width: 300px"
227224
>
228-
<template v-if="showDetail">
229-
<div
230-
v-for="(value, key) in props.row.detail2"
231-
:key="key"
232-
>
233-
{{ key }}: {{ value }}
234-
</div>
235-
</template>
225+
<div
226+
v-for="(value, key) in props.row.detail2"
227+
:key="key"
228+
>
229+
{{ key }}: {{ value }}
230+
</div>
236231
</q-td>
237232
</template>
238233
</q-table>

0 commit comments

Comments
 (0)