VPR-104 fix(a11y): CTS followup — contrast, banners, broken forms

- Replace hardcoded blue (#1E88E5) with var(--q-secondary) in
  LevelSelect for WCAG AA contrast compliance (~7.4:1)
- Replace non-existent q-label with div in ManageDomains
- Fix Promise.resolve → Promise.all in ManageCompetencies load()
  and add null guard for failed hierarchy API
- Migrate q-banner to StatusBanner in AssessmentEpa/AssessmentEpaEdit
- Fix ManageRoles 400 error: initialize role with roleId: 0 to
  satisfy required int on RoleDto
- Fix ManageMilestones 400 error: add missing competencyCount to
  bundle payload

Author: rlorenzo

VueApp/src/CTS/components/LevelSelect.vue

@@ -143,14 +143,14 @@ getLevels()
 
 <style scoped>
 div.levelSelection button {
-    border: 1px solid rgb(30 136 229);
-    color: rgb(30 136 229);
+    border: 1px solid var(--q-secondary);
+    color: var(--q-secondary);
     width: 100%;
     margin-bottom: 0.2rem;
 }
 
 div.levelSelection button.selectedLevel {
-    background-color: rgb(30 136 229);
+    background-color: var(--q-secondary);
     color: white;
 }
 

VueApp/src/CTS/pages/AssessmentEpa.vue

@@ -6,6 +6,7 @@ import type { Epa } from "@/CTS/types"
 import StudentSelect from "@/components/StudentSelect.vue"
 import ServiceSelectBox from "@/CTS/components/ServiceSelect.vue"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 //epas
 const epas = ref([]) as Ref<Epa[]>
@@ -123,21 +124,13 @@ watch(selectedStudentId, () => {
                 </div>
             </div>
 
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                type="success"
+                dismissible
             >
                 EPA Saved
-                <template #action>
-                    <q-btn
-                        flat
-                        label="Dismiss"
-                        @click="success = false"
-                    ></q-btn>
-                </template>
-            </q-banner>
+            </StatusBanner>
 
             <div v-if="serviceId != null && epa?.epaId">
                 <div class="row justify-between items-center q-mb-lg">

VueApp/src/CTS/pages/AssessmentEpaEdit.vue

@@ -5,6 +5,7 @@ import { useRoute, useRouter } from "vue-router"
 import { useFetch } from "@/composables/ViperFetch"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import LevelSelect from "@/CTS/components/LevelSelect.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 
 const { formatDateForDateInput } = useDateFunctions()
 const route = useRoute()
@@ -73,21 +74,13 @@ getStudentEpa()
             class="col"
             v-show="studentEpa.encounterId"
         >
-            <q-banner
-                inline-actions
-                rounded
+            <StatusBanner
                 v-if="success"
-                class="bg-green text-white q-mb-md"
+                type="success"
+                dismissible
             >
                 EPA Saved
-                <template #action>
-                    <q-btn
-                        flat
-                        label="Dismiss"
-                        @click="success = false"
-                    ></q-btn>
-                </template>
-            </q-banner>
+            </StatusBanner>
             <div class="row justify-between items-end q-mb-lg">
                 <div class="col-12 col-md-6 col-lg-5">
                     <h2 class="epa">{{ studentEpa.epaName }}</h2>

VueApp/src/CTS/pages/ManageCompetencies.vue

@@ -31,12 +31,15 @@ const showDescriptions = ref(false)
 const tree = ref(null) as Ref<any>
 
 async function load() {
-    Promise.resolve([
+    const [, , hierarchyResult] = await Promise.all([
         get(apiUrl + "cts/domains").then((r) => (domains.value = r.result)),
         get(apiUrl + "cts/competencies").then((r) => (competencies.value = r.result)),
+        get(apiUrl + "cts/competencies/hierarchy"),
     ])
-    await get(apiUrl + "cts/competencies/hierarchy").then((r) => (competencyHierachy.value = r.result))
-    treeNodes.value = competencyHierachy.value.map(createTreeNode)
+    if (hierarchyResult?.result) {
+        competencyHierachy.value = hierarchyResult.result
+        treeNodes.value = competencyHierachy.value.map(createTreeNode)
+    }
     loaded.value = true
 }
 

VueApp/src/CTS/pages/ManageDomains.vue

@@ -66,7 +66,7 @@ getDomains()
         method="post"
         @submit="save"
     >
-        <q-label class="row items-center">
+        <div class="row items-center">
             <span class="col col-md-2 col-lg-1">Domain:</span>
             <q-input
                 outlined
@@ -78,8 +78,8 @@ getDomains()
                 maxlength="250"
                 class="col col-md-5 col-lg-3"
             />
-        </q-label>
-        <q-label class="row items-center">
+        </div>
+        <div class="row items-center">
             <span class="col col-md-2 col-lg-1">Order:</span>
             <q-input
                 outlined
@@ -90,8 +90,8 @@ getDomains()
                 step="1"
                 class="col col-1"
             />
-        </q-label>
-        <q-label class="row items-start">
+        </div>
+        <div class="row items-start">
             <span class="col col-md-2 col-lg-1 q-pt-sm">Description:</span>
             <q-input
                 outlined
@@ -101,7 +101,7 @@ getDomains()
                 v-model="domain.description"
                 class="col col-md-5 col-lg-3"
             ></q-input>
-        </q-label>
+        </div>
         <div class="row q-mt-sm">
             <q-btn
                 type="submit"

VueApp/src/CTS/pages/ManageMilestones.vue

@@ -74,6 +74,7 @@ async function createMilestone() {
                 clinical: false,
                 milestone: true,
                 name: "Milestone " + comp.number + " " + comp.name,
+                competencyCount: 0,
                 roles: [],
             }
             let r = await post(apiUrl + "cts/bundles/", bundle)

VueApp/src/CTS/pages/ManageRoles.vue

@@ -8,7 +8,7 @@ const $q = useQuasar()
 const { get, post, put, del } = useFetch()
 
 const apiUrl = inject("apiURL")
-const role = ref({}) as Ref<any>
+const role = ref({ roleId: 0, name: "" }) as Ref<any>
 const roles = ref([]) as Ref<any[]>
 
 async function load() {
@@ -40,7 +40,7 @@ function removeRole() {
 }
 
 function clearRole() {
-    role.value = {}
+    role.value = { roleId: 0, name: "" }
 }
 
 load()