Skip to content

Commit b54428e

Browse files
rlorenzorlorenzo
committed
VPR-104 fix(a11y): CTS brand colors, page titles, and UX improvements
- Add ViewData["Title"] to all CTS Razor views - Replace Quasar palette colors with brand colors (positive/negative) - Use secondary color for Cancel buttons - Add accessible labels to empty table columns and tree buttons - Fix Promise.resolve → Promise.all in ManageMilestones - Change CompetencyHierarchyDto.Children to List for Add() support - Refactor AuditList detail toggle out of table header - Add Cancel button and clearLevel to ManageLevels - Fix stored term lookup in ManageCourseCompetencies
1 parent 8ee5ae5 commit b54428e

21 files changed

Lines changed: 85 additions & 50 deletions

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

Lines changed: 1 addition & 1 deletion
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 },

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

Lines changed: 18 additions & 23 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
@@ -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>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ onMounted(() => {
226226
<q-td :props="props">
227227
<div
228228
v-if="props.value.length === 0"
229-
class="text-grey-6"
229+
class="text-grey-8"
230230
>
231231
None
232232
</div>
@@ -289,7 +289,7 @@ onMounted(() => {
289289
<div class="text-subtitle2 q-mb-xs">Associated Bundles:</div>
290290
<div
291291
v-if="props.row.bundles.length === 0"
292-
class="text-grey-6"
292+
class="text-grey-8"
293293
>
294294
None
295295
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const columns = ref([
4141
{ name: "order", label: "Order", field: "order", align: "left", sortable: true },
4242
{ name: "competencyname", label: "Competency", field: "competencyName", align: "left", sortable: true },
4343
{ name: "role", label: "Role", field: "roleName", align: "left", sortable: true },
44-
{ name: "action", label: "", field: "", align: "left" },
44+
{ name: "action", label: "Actions", field: "", align: "left" },
4545
]) as Ref<QTableProps["columns"]>
4646
const paging = ref({ page: 1, sortBy: "enteredOn", descending: true, rowsPerPage: 0 }) as Ref<any>
4747

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const bundleRoles = ref([]) as Ref<number[]>
2727
const bundles = ref([]) as Ref<Bundle[]>
2828
const paging = ref({ page: 1, sortBy: "enteredOn", descending: true, rowsPerPage: 0 }) as Ref<any>
2929
const columns: QTableProps["columns"] = [
30-
{ name: "action", label: "", field: "id", align: "left" },
30+
{ name: "action", label: "Actions", field: "id", align: "left" },
3131
{ name: "name", label: "Name", field: "name", align: "left", sortable: true },
3232
{ name: "compcount", label: "Competency Count", field: "competencyCount", align: "left", sortable: true },
3333
{ name: "roles", label: "Roles", field: "roles", align: "left", sortable: true },
@@ -149,7 +149,7 @@ load()
149149
v-if="bundle?.bundleId"
150150
type="button"
151151
@click="clearBundle()"
152-
color="primary"
152+
color="secondary"
153153
dense
154154
class="col-5 col-sm-2 col-md-1 q-px-sm q-mr-md"
155155
label="Cancel"

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -302,31 +302,33 @@ load()
302302
<template #default-header="prop">
303303
<div class="row full-width items-center">
304304
<div
305-
:class="'col-auto q-mr-sm ' + (prop.node.children.length == 0 ? 'q-ml-sm' : '')"
305+
:class="'col-auto q-mr-xs ' + (prop.node.children.length == 0 ? 'q-ml-sm' : '')"
306306
@click.stop
307307
>
308308
<q-btn
309309
dense
310310
flat
311-
size="sm"
311+
size="1.4rem"
312312
icon="add"
313-
color="positive"
313+
color="secondary"
314314
@click="addChild(prop.node.comp)"
315315
title="Add child of this competency"
316+
aria-label="Add child of this competency"
316317
></q-btn>
317318
</div>
318319
<div
319-
class="col-auto q-mr-sm"
320+
class="col-auto q-mr-xs"
320321
@click.stop
321322
>
322323
<q-btn
323324
dense
324325
flat
325-
size="sm"
326+
size="1.2rem"
326327
icon="edit"
327-
color="grey"
328+
color="secondary"
328329
@click="editComp(prop.node.comp)"
329-
title="Edit"
330+
title="Edit competency"
331+
aria-label="Edit competency"
330332
></q-btn>
331333
</div>
332334
<div class="col-9 col-sm-10">

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,12 @@ function getSessions() {
4949
function getTerms() {
5050
get(apiUrl + "curriculum/terms")
5151
.then((r) => (terms.value = r.result))
52-
.then(() => (selectedTerm.value = storedTerm.value || terms.value[0]))
52+
.then(() => {
53+
const stored = storedTerm.value
54+
selectedTerm.value =
55+
(stored?.termCode ? terms.value.find((t: Term) => t.termCode === stored.termCode) : null) ||
56+
terms.value[0]
57+
})
5358
}
5459
5560
function getRoles() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ getEpas()
244244
<span class="col">
245245
<q-icon
246246
:name="epaItem.active ? 'check' : 'close'"
247-
:color="epaItem.active ? 'green' : 'red'"
247+
:color="epaItem.active ? 'positive' : 'negative'"
248248
size="md"
249249
/>
250250
</span>

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,11 @@ function editLevel(l: Level) {
108108
showForm.value = true
109109
}
110110
111+
function clearLevel() {
112+
level.value = structuredClone(emptyLevel) as Level
113+
showForm.value = false
114+
}
115+
111116
loadLevels()
112117
</script>
113118

@@ -192,6 +197,17 @@ loadLevels()
192197
class="q-mt-sm col col-4 col-md-1"
193198
></q-btn>
194199
<q-btn
200+
v-if="level?.levelId"
201+
dense
202+
no-caps
203+
type="button"
204+
label="Cancel"
205+
color="secondary"
206+
class="q-mt-sm q-ml-lg col col-4 col-md-1"
207+
@click="clearLevel"
208+
></q-btn>
209+
<q-btn
210+
v-if="level?.levelId"
195211
dense
196212
no-caps
197213
type="button"
@@ -223,7 +239,6 @@ loadLevels()
223239
<q-btn
224240
dense
225241
no-caps
226-
size="md"
227242
color="primary"
228243
icon="edit"
229244
:aria-label="`Edit level: ${l.levelName}`"
@@ -236,7 +251,7 @@ loadLevels()
236251
>
237252
<q-icon
238253
:name="l.active ? 'check' : 'close'"
239-
:color="l.active ? 'green' : 'red'"
254+
:color="l.active ? 'positive' : 'negative'"
240255
></q-icon>
241256
</q-item-section>
242257
<q-item-section

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const milestoneLevels = ref([]) as Ref<MilestoneLevel[]>
1515
const loaded = ref(false)
1616
1717
async function load() {
18-
await Promise.resolve([
18+
await Promise.all([
1919
get(apiUrl + "cts/levels?milestone=true").then((r) => (levels.value = r.result)),
2020
get(apiUrl + "cts/milestones").then((r) => (milestones.value = r.result)),
2121
get(apiUrl + "cts/competencies").then((r) => (competencies.value = r.result)),

0 commit comments

Comments
 (0)