refactor: add id

This commit is contained in:
Thanaphon Frappet 2025-02-17 10:59:41 +07:00
parent 0d22b766af
commit 0d360fdbde
4 changed files with 27 additions and 12 deletions

View file

@ -199,7 +199,7 @@ onMounted(async () => {
outlined outlined
dense dense
class="col" class="col"
id="input-flow-template-name" for="input-flow-template-name"
v-model="flowData.name" v-model="flowData.name"
hide-bottom-space hide-bottom-space
:label="$t(`general.name`, { msg: $t('flow.step') })" :label="$t(`general.name`, { msg: $t('flow.step') })"
@ -255,8 +255,8 @@ onMounted(async () => {
<div class="row items-center q-py-sm full-width"> <div class="row items-center q-py-sm full-width">
<q-btn <q-btn
v-if="!readonly" v-if="!readonly"
id="btn-work-up-product" :id="`btn-work-up-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
for="btn-work-up-product" :for="`btn-work-up-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
icon="mdi-arrow-up" icon="mdi-arrow-up"
dense dense
flat flat
@ -270,8 +270,8 @@ onMounted(async () => {
/> />
<q-btn <q-btn
v-if="!readonly" v-if="!readonly"
id="btn-work-down-product" :id="`btn-work-down-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
for="btn-work-down-product" :for="`btn-work-down-product-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
icon="mdi-arrow-down" icon="mdi-arrow-down"
dense dense
flat flat
@ -376,7 +376,7 @@ onMounted(async () => {
</div> --> </div> -->
<q-btn <q-btn
v-if="!readonly" v-if="!readonly"
id="btn-delete-work" :id="`btn-delete-work-${step.name || index}-${onDrawer ? 'drawer' : 'dialog'}`"
icon="mdi-trash-can-outline" icon="mdi-trash-can-outline"
dense dense
flat flat
@ -399,6 +399,7 @@ onMounted(async () => {
> >
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<q-input <q-input
:for="`textarea-detail-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
:bg-color="readonly ? 'transparent' : ''" :bg-color="readonly ? 'transparent' : ''"
:readonly :readonly
class="col-md-6 col-12" class="col-md-6 col-12"
@ -411,7 +412,6 @@ onMounted(async () => {
(v) => (step.detail = v?.toString() || '') (v) => (step.detail = v?.toString() || '')
" "
/> />
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div <div
class="surface-1 rounded bordered full-height" class="surface-1 rounded bordered full-height"
@ -434,7 +434,7 @@ onMounted(async () => {
</div> </div>
<q-btn <q-btn
v-if="!readonly" v-if="!readonly"
id="btn-add-work-product" :id="`btn-add-work-product-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
class="text-capitalize rounded absolute-top-right" class="text-capitalize rounded absolute-top-right"
flat flat
dense dense
@ -465,6 +465,7 @@ onMounted(async () => {
<q-select <q-select
v-if="step.responsiblePersonId" v-if="step.responsiblePersonId"
behavior="menu" behavior="menu"
:for="`select-responsible-person-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
:bg-color="readonly ? 'transparent' : ''" :bg-color="readonly ? 'transparent' : ''"
:readonly :readonly
outlined outlined
@ -550,7 +551,7 @@ onMounted(async () => {
<q-list> <q-list>
<q-item> <q-item>
<q-input <q-input
for="input-search" :for="`input-search-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
outlined outlined
dense dense
:label="$t('general.search')" :label="$t('general.search')"
@ -582,7 +583,10 @@ onMounted(async () => {
class="column" class="column"
@click.stop="selectResponsiblePerson(index, person)" @click.stop="selectResponsiblePerson(index, person)"
> >
<div class="row items-center no-wrap"> <div
class="row items-center no-wrap"
:id="`select-responsible-person-${index}-${person.firstName || person.firstNameEN}-${onDrawer ? 'drawer' : 'dialog'}`"
>
<q-checkbox <q-checkbox
size="xs" size="xs"
:model-value=" :model-value="
@ -652,6 +656,7 @@ onMounted(async () => {
> >
<div class="row items-center"> <div class="row items-center">
<q-checkbox <q-checkbox
:id="`select-area-${index}`"
v-model="step.messengerByArea" v-model="step.messengerByArea"
size="xs" size="xs"
></q-checkbox> ></q-checkbox>
@ -667,6 +672,7 @@ onMounted(async () => {
<!-- RESPONSIBLE-AGENCIES, RESPONSIBLE-INSTITUTION --> <!-- RESPONSIBLE-AGENCIES, RESPONSIBLE-INSTITUTION -->
<q-select <q-select
behavior="menu" behavior="menu"
:for="`select-responsible-institution-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
:bg-color="readonly ? 'transparent' : ''" :bg-color="readonly ? 'transparent' : ''"
:readonly :readonly
outlined outlined
@ -737,6 +743,7 @@ onMounted(async () => {
v-if="step.responsibleInstitution" v-if="step.responsibleInstitution"
> >
<q-checkbox <q-checkbox
:id="`select-responsible-institution-${index}-${opt.label}-${onDrawer ? 'drawer' : 'dialog'}`"
:model-value=" :model-value="
step.responsibleInstitution.some( step.responsibleInstitution.some(
(v: string) => v === opt.value, (v: string) => v === opt.value,

View file

@ -18,7 +18,12 @@ function handleClick() {
</script> </script>
<template> <template>
<label class="switch" @click.stop="handleClick"> <label class="switch" @click.stop="handleClick">
<input type="checkbox" :disabled="twoWay || disable" v-model="model" /> <input
id="btn-toggle"
type="checkbox"
:disabled="twoWay || disable"
v-model="model"
/>
<div class="slider round" :class="{ disable: disable }"></div> <div class="slider round" :class="{ disable: disable }"></div>
</label> </label>
</template> </template>

View file

@ -365,6 +365,8 @@ watch(
{{ $t('flow.stepNo', { msg: (props.stepIndex || stepIndex) + 1 }) }} {{ $t('flow.stepNo', { msg: (props.stepIndex || stepIndex) + 1 }) }}
<span class="app-text-muted">: {{ step.name }}</span> <span class="app-text-muted">: {{ step.name }}</span>
<q-btn-dropdown <q-btn-dropdown
for="select-step"
id="select-step"
unelevated unelevated
no-icon-animation no-icon-animation
size="sm" size="sm"

View file

@ -636,6 +636,7 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
<q-td style="width: 20%" class="text-right"> <q-td style="width: 20%" class="text-right">
<q-btn <q-btn
icon="mdi-eye-outline" icon="mdi-eye-outline"
:id="`btn-eye-${props.row.name}`"
size="sm" size="sm"
dense dense
round round
@ -648,7 +649,7 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
" "
/> />
<KebabAction <KebabAction
:id-name="props.row.id" :id-name="props.row.name"
:status="props.row.status" :status="props.row.status"
@view=" @view="
() => { () => {