chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Add unique id and for attributes to status elements
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Details

Browse source 
Introduces dynamic id and for attributes to readonly status, dropdown, menu items, and failed remark button for improved accessibility and testability in TaskStatusComponent.vue.
This commit is contained in:
Aif 2025-11-11 15:02:36 +07:00
parent 75d5c7dfe8
commit 79d6482caa
1 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/pages/09_task-order/TaskStatusComponent.vue
View file

@ -60,16 +60,25 @@ function inactiveCheck() {
</script> </script>
<template> <template>
<div <div
:id="`readonly-status-${status}`"
:for="`readonly-status-${status}`"
v-if="readonly" v-if="readonly"
class="row rounded bordered surface-2 items-center justify-center q-pa-xs no-wrap" class="row rounded bordered surface-2 items-center justify-center q-pa-xs no-wrap"
:style="`color: hsl(var(--${currStatus?.color}-bg))`" :style="`color: hsl(var(--${currStatus?.color}-bg))`"
> >
<q-icon :name="currStatus?.icon" class="q-pr-xs" size="xs" /> <q-icon
{{ $t(`taskOrder.status.${status}`) }} :id="`readonly-status-icon-${status}`"
:name="currStatus?.icon"
class="q-pr-xs"
size="xs"
/>
<span :id="`readonly-status-label-${status}`">{{ $t(`taskOrder.status.${status}`) }}</span>
</div> </div>
<div v-else class="row items-center justify-center no-wrap"> <div v-else class="row items-center justify-center no-wrap">
<q-btn-dropdown <q-btn-dropdown
:id="`btn-dropdown-status-${status}`"
:for="`btn-dropdown-status-${status}`"
dense dense
unelevated unelevated
:label=" :label="
@ -110,6 +119,8 @@ function inactiveCheck() {
> >
<q-list v-if="!noAction" dense> <q-list v-if="!noAction" dense>
<q-item <q-item
:for="`menu-item-status-${v.value}`"
:id="`menu-item-status-${v.value}`"
v-for="(v, index) in type === 'order' v-for="(v, index) in type === 'order'
? { ? {
Success: taskStatusOrderToggle.filter( Success: taskStatusOrderToggle.filter(
@ -147,6 +158,8 @@ function inactiveCheck() {
</q-btn-dropdown> </q-btn-dropdown>
<q-btn <q-btn
:id="`btn-failed-remark-${status}`"
:for="`btn-failed-remark-${status}`"
v-if="currStatus?.value === TaskStatus.Failed" v-if="currStatus?.value === TaskStatus.Failed"
flat flat
dense dense
@ -186,9 +199,9 @@ function inactiveCheck() {
} }
:deep( :deep(
.hide-icon .hide-icon
i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
) { ) {
display: none; display: none;
} }
</style> </style>