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

feat: unique IDs to UI components for testing
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Details

Browse source
This commit is contained in:
Aif 2025-11-11 10:02:13 +07:00
parent 2b1e3b12a4
commit 637eeab3c2
4 changed files with 72 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/pages/09_task-order/SelectReadyRequestWork.vue
View file

@ -295,6 +295,7 @@ function assignTempGroup() {
class="bordered-b" class="bordered-b"
> >
<q-expansion-item <q-expansion-item
:id="`expansion-product-${product.code}`"
dense dense
class="overflow-hidden" class="overflow-hidden"
switch-toggle-side switch-toggle-side
@ -348,6 +349,7 @@ function assignTempGroup() {
</FormGroupHead> </FormGroupHead>
<div class="q-pa-md full-width"> <div class="q-pa-md full-width">
<TableEmployee <TableEmployee
:id="`table-employee-${product.code}`"
checkbox-on checkbox-on
check-all check-all
select-ready select-ready
@ -371,9 +373,15 @@ function assignTempGroup() {
</section> </section>
<template #footer> <template #footer>
<CancelButton class="q-ml-auto" outlined @click="close" /> <CancelButton
id="btn-dialog-cancel"
class="q-ml-auto"
outlined
@click="close"
/>
<SaveButton <SaveButton
:label="$t('general.select')" :label="$t('general.select')"
id="btn-dialog-select"
class="q-ml-sm" class="q-ml-sm"
icon="mdi-check" icon="mdi-check"
solid solid

39
src/pages/09_task-order/TableEmployee.vue
View file

@ -225,6 +225,7 @@ function disableCheckAll() {
<template> <template>
<q-table <q-table
flat flat
id="table-employee"
bordered bordered
row-key="id" row-key="id"
v-bind="props" v-bind="props"
@ -273,6 +274,7 @@ function disableCheckAll() {
> >
<q-th v-if="checkboxOn" class="relative-position"> <q-th v-if="checkboxOn" class="relative-position">
<q-checkbox <q-checkbox
id="checkbox-check-all"
v-if="checkAll" v-if="checkAll"
:disable="disableCheckAll()" :disable="disableCheckAll()"
:model-value=" :model-value="
@ -305,6 +307,7 @@ function disableCheckAll() {
class="absolute-right row items-center" class="absolute-right row items-center"
> >
<q-btn <q-btn
id="btn-change-all-status"
flat flat
dense dense
rounded rounded
@ -339,6 +342,7 @@ function disableCheckAll() {
{{ $t(`taskOrder.status.Complete`) }} {{ $t(`taskOrder.status.Complete`) }}
</q-item> </q-item>
<q-item <q-item
id="menu-item-redo"
clickable clickable
v-close-popup v-close-popup
class="items-center" class="items-center"
@ -358,6 +362,7 @@ function disableCheckAll() {
{{ $t(`taskOrder.status.Redo`) }} {{ $t(`taskOrder.status.Redo`) }}
</q-item> </q-item>
<q-item <q-item
id="menu-item-restart"
clickable clickable
v-close-popup v-close-popup
class="items-center" class="items-center"
@ -379,6 +384,7 @@ function disableCheckAll() {
</q-list> </q-list>
<q-list v-if="!validate" dense> <q-list v-if="!validate" dense>
<q-item <q-item
id="menu-item-success"
clickable clickable
v-close-popup v-close-popup
class="items-center" class="items-center"
@ -398,6 +404,7 @@ function disableCheckAll() {
{{ $t(`taskOrder.status.Success`) }} {{ $t(`taskOrder.status.Success`) }}
</q-item> </q-item>
<q-item <q-item
id="menu-item-failed"
clickable clickable
v-close-popup v-close-popup
class="items-center" class="items-center"
@ -480,6 +487,7 @@ function disableCheckAll() {
<q-td> <q-td>
<span <span
class="cursor-pointer link" class="cursor-pointer link"
:id="`link-request-list-${props.row.request.code}`"
@click="goToRequestList(props.row.request.id)" @click="goToRequestList(props.row.request.id)"
> >
{{ props.row.request.code }} {{ props.row.request.code }}
@ -489,6 +497,7 @@ function disableCheckAll() {
<q-td> <q-td>
<span <span
class="cursor-pointer link" class="cursor-pointer link"
:id="`link-quotation-${props.row.request.quotation?.code}`"
@click="goToQuotation(props.row.request.quotation)" @click="goToQuotation(props.row.request.quotation)"
> >
{{ props.row.request.quotation?.code }} {{ props.row.request.quotation?.code }}
@ -496,7 +505,11 @@ function disableCheckAll() {
</q-td> </q-td>
<q-td v-if="stepOn" class="text-left"> <q-td v-if="stepOn" class="text-left">
<div v-if="props.row._template" class="column text-left"> <div
v-if="props.row._template"
class="column text-left"
:id="`template-step-${props.row.request.code}`"
>
<span>{{ props.row._template.templateName }}</span> <span>{{ props.row._template.templateName }}</span>
<span class="app-text-muted text-caption"> <span class="app-text-muted text-caption">
{{ $t('flow.stepNo', { msg: props.row._template.step }) }} {{ $t('flow.stepNo', { msg: props.row._template.step }) }}
@ -522,7 +535,10 @@ function disableCheckAll() {
</template> </template>
</q-img> </q-img>
</q-avatar> </q-avatar>
<div class="column text-left q-ml-sm"> <div
class="column text-left q-ml-sm"
:id="`employee-name-${props.row.request.employee?.code}`"
>
<div> <div>
{{ getEmployeeName(props.row, { locale: $i18n.locale }) }} {{ getEmployeeName(props.row, { locale: $i18n.locale }) }}
</div> </div>
@ -532,6 +548,7 @@ function disableCheckAll() {
</div> </div>
</div> </div>
<Icon <Icon
:id="`icon-gender-${props.row.request.employee?.code}`"
class="q-ml-md" class="q-ml-md"
:class="`app-text-${props.row.request.employee?.gender}`" :class="`app-text-${props.row.request.employee?.gender}`"
:icon="`material-symbols:${props.row.request.employee?.gender}`" :icon="`material-symbols:${props.row.request.employee?.gender}`"
@ -539,13 +556,18 @@ function disableCheckAll() {
/> />
</div> </div>
</q-td> </q-td>
<q-td>{{ calculateAge(props.row.request.employee?.dateOfBirth) }}</q-td> <q-td :id="`employee-age-${props.row.request.employee?.code}`">
<q-td> {{ calculateAge(props.row.request.employee?.dateOfBirth) }}
</q-td>
<q-td :id="`employee-nationality-${props.row.request.employee?.code}`">
{{ {{
useOptionStore().mapOption(props.row.request.employee?.nationality) useOptionStore().mapOption(props.row.request.employee?.nationality)
}} }}
</q-td> </q-td>
<q-td> <q-td
:id="`quotation-due-date-${props.row.request.quotation?.code}`"
v-if="!statusOn"
>
{{ {{
dateFormatJS({ dateFormatJS({
date: props.row.request.quotation?.dueDate, date: props.row.request.quotation?.dueDate,
@ -555,13 +577,16 @@ function disableCheckAll() {
}) })
}} }}
</q-td> </q-td>
<q-td> <q-td
:id="`expiration-date-${props.row.request.quotation?.code}`"
v-if="!statusOn"
>
<ExpirationDate <ExpirationDate
:expiration-date="new Date(props.row.request.quotation?.dueDate)" :expiration-date="new Date(props.row.request.quotation?.dueDate)"
/> />
</q-td> </q-td>
<q-td> <q-td v-if="!statusOn">
<BadgeComponent <BadgeComponent
v-if="props.row.request.quotation?.urgent" v-if="props.row.request.quotation?.urgent"
icon="mdi-fire" icon="mdi-fire"

11
src/pages/09_task-order/expansion/ProductExpansion.vue
View file

@ -123,6 +123,7 @@ function taskOrderStatus(value: TaskStatus) {
<span <span
class="row items-center justify-between full-width" class="row items-center justify-between full-width"
style="min-height: 31.01px" style="min-height: 31.01px"
id="header-product-list"
> >
{{ $t('general.information', { msg: $t('taskOrder.productList') }) }} {{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
<AddButton <AddButton
@ -135,6 +136,7 @@ function taskOrderStatus(value: TaskStatus) {
<main class="q-px-md q-py-sm surface-1"> <main class="q-px-md q-py-sm surface-1">
<q-table <q-table
id="table-product-list"
:columns=" :columns="
creditNote creditNote
? productColumn.filter( ? productColumn.filter(
@ -180,7 +182,7 @@ function taskOrderStatus(value: TaskStatus) {
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>" } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
> >
<q-tr class="text-center"> <q-tr class="text-center">
<q-td> <q-td :id="`product-order-${props.rowIndex}`">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</q-td> </q-td>
<q-td> <q-td>
@ -206,6 +208,7 @@ function taskOrderStatus(value: TaskStatus) {
</q-td> </q-td>
<q-td class="text-left" v-if="!creditNote"> <q-td class="text-left" v-if="!creditNote">
<BadgeComponent <BadgeComponent
:id="`badge-status-${props.row.product.code}`"
hide-icon hide-icon
:hsla-color="taskOrderStatus(props.row.product.taskStatus)" :hsla-color="taskOrderStatus(props.row.product.taskStatus)"
:title="`${$t(`taskOrder.status.${props.row.product.taskStatus}`)} ${!!props.row.product.totalNotStatusComplete ? $t('general.totalPeople', { meg: props.row.product.totalNotStatusComplete }) : ''}`" :title="`${$t(`taskOrder.status.${props.row.product.taskStatus}`)} ${!!props.row.product.totalNotStatusComplete ? $t('general.totalPeople', { meg: props.row.product.totalNotStatusComplete }) : ''}`"
@ -230,6 +233,7 @@ function taskOrderStatus(value: TaskStatus) {
<!-- TODO: display price detail --> <!-- TODO: display price detail -->
<q-td align="center" v-if="!creditNote"> <q-td align="center" v-if="!creditNote">
<q-input <q-input
:id="`input-discount-${props.row.product.code}`"
:readonly :readonly
:bg-color="readonly ? 'transparent' : ''" :bg-color="readonly ? 'transparent' : ''"
dense dense
@ -311,6 +315,7 @@ function taskOrderStatus(value: TaskStatus) {
</q-td> </q-td>
<q-td> <q-td>
<q-btn <q-btn
:id="`btn-toggle-employee-${props.row.product.code}`"
dense dense
flat flat
class="rounded" class="rounded"
@ -351,7 +356,9 @@ function taskOrderStatus(value: TaskStatus) {
}) })
}} }}
</span> </span>
<div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div> <div class="surface-3 q-px-sm rounded" id="total-product-count">
{{ taskList.length }}
</div>
</div> </div>
</main> </main>
</q-expansion-item> </q-expansion-item>

24
src/pages/09_task-order/order_view/MainPage.vue
View file

@ -814,7 +814,7 @@ watch(
> >
<section class="banner" :class="{ dark: $q.dark.isActive }"></section> <section class="banner" :class="{ dark: $q.dark.isActive }"></section>
<div style="flex: 1" class="row items-center"> <div style="flex: 1" class="row items-center">
<RouterLink to="/task-order"> <RouterLink to="/task-order" id="link-task-order">
<q-img src="/icons/favicon-512x512.png" width="3rem" /> <q-img src="/icons/favicon-512x512.png" width="3rem" />
</RouterLink> </RouterLink>
<span class="column text-h6 text-bold q-ml-md"> <span class="column text-h6 text-bold q-ml-md">
@ -863,6 +863,7 @@ watch(
<!-- TODO: replace step and status --> <!-- TODO: replace step and status -->
<StateButton <StateButton
v-for="i in statusTabForm" v-for="i in statusTabForm"
:id="`btn-status-${i.title}`"
:key="i.title" :key="i.title"
:label="$t(`taskOrder.${i.title}`)" :label="$t(`taskOrder.${i.title}`)"
:status-active="i.active?.()" :status-active="i.active?.()"
@ -916,6 +917,7 @@ watch(
" "
> >
<DocumentExpansion <DocumentExpansion
id="expansion-document"
:readonly="!['create', 'edit'].includes(state.mode || '')" :readonly="!['create', 'edit'].includes(state.mode || '')"
v-model:registered-branch-id="currentFormData.registeredBranchId" v-model:registered-branch-id="currentFormData.registeredBranchId"
v-model:institution-id="currentFormData.institutionId" v-model:institution-id="currentFormData.institutionId"
@ -935,6 +937,7 @@ watch(
/> />
</q-form> </q-form>
<ProductExpansion <ProductExpansion
id="expansion-product"
ref="refProductExpansion" ref="refProductExpansion"
v-if=" v-if="
view === TaskOrderStatus.Pending || view === TaskOrderStatus.Pending ||
@ -947,6 +950,7 @@ watch(
/> />
<PaymentExpansion <PaymentExpansion
id="expansion-payment"
v-model:summary-price="summaryPrice" v-model:summary-price="summaryPrice"
:complete="view === TaskOrderStatus.Complete" :complete="view === TaskOrderStatus.Complete"
v-if=" v-if="
@ -956,6 +960,7 @@ watch(
/> />
<AdditionalFileExpansion <AdditionalFileExpansion
id="expansion-additional-file"
:readonly="!['create', 'edit'].includes(state.mode || '')" :readonly="!['create', 'edit'].includes(state.mode || '')"
v-if=" v-if="
view === TaskOrderStatus.Pending || view === TaskOrderStatus.Pending ||
@ -1014,6 +1019,7 @@ watch(
/> />
<!-- TODO: blind remark, urgent --> <!-- TODO: blind remark, urgent -->
<RemarkExpansion <RemarkExpansion
id="expansion-remark"
v-if=" v-if="
view === TaskOrderStatus.Pending || view === TaskOrderStatus.Pending ||
view === TaskOrderStatus.Complete view === TaskOrderStatus.Complete
@ -1038,6 +1044,7 @@ watch(
" "
> >
<InfoMessengerExpansion <InfoMessengerExpansion
:id="`expansion-messenger-${messengerIndex}`"
v-for="(v, messengerIndex) in messengerListGroup" v-for="(v, messengerIndex) in messengerListGroup"
:key="messengerIndex" :key="messengerIndex"
:gender="getMessengerName(v.responsibleUser, { gender: true })" :gender="getMessengerName(v.responsibleUser, { gender: true })"
@ -1073,6 +1080,7 @@ watch(
class="bordered-b" class="bordered-b"
> >
<q-expansion-item <q-expansion-item
:id="`expansion-product-${productIndex}`"
dense dense
class="overflow-hidden" class="overflow-hidden"
switch-toggle-side switch-toggle-side
@ -1246,6 +1254,7 @@ watch(
<nav class="row justify-end"> <nav class="row justify-end">
<MainButton <MainButton
class="q-mr-auto" class="q-mr-auto"
id="btn-view-example"
v-if="currentFormData.id" v-if="currentFormData.id"
outlined outlined
icon="mdi-play-box-outline" icon="mdi-play-box-outline"
@ -1260,10 +1269,16 @@ watch(
{{ $t('general.view', { msg: $t('general.example') }) }} {{ $t('general.view', { msg: $t('general.example') }) }}
</MainButton> </MainButton>
<div class="row" style="gap: var(--size-2)"> <div class="row" style="gap: var(--size-2)">
<UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" /> <UndoButton
id="btn-undo"
outlined
@click="undo()"
v-if="state.mode === 'edit'"
/>
<CancelButton <CancelButton
v-if="state.mode !== 'edit'" v-if="state.mode !== 'edit'"
:label="$t('dialog.action.close')" :label="$t('dialog.action.close')"
id="btn-close"
outlined outlined
@click="closeTab()" @click="closeTab()"
/> />
@ -1275,12 +1290,14 @@ watch(
" "
> >
<SaveButton <SaveButton
id="btn-save"
v-if="state.mode && ['create', 'edit'].includes(state.mode)" v-if="state.mode && ['create', 'edit'].includes(state.mode)"
@click="() => formDocument.submit()" @click="() => formDocument.submit()"
solid solid
/> />
<EditButton <EditButton
v-else v-else
id="btn-edit"
class="no-print" class="no-print"
@click="state.mode = 'edit'" @click="state.mode = 'edit'"
solid solid
@ -1288,6 +1305,7 @@ watch(
</template> </template>
<SaveButton <SaveButton
v-if=" v-if="
canAccess('taskOrder', 'edit') &&
state.mode !== 'create' && state.mode !== 'create' &&
view === TaskOrderStatus.Validate && view === TaskOrderStatus.Validate &&
fullTaskOrder?.taskOrderStatus !== TaskOrderStatus.Pending && fullTaskOrder?.taskOrderStatus !== TaskOrderStatus.Pending &&
@ -1326,6 +1344,7 @@ watch(
" "
:label="$t('taskOrder.confirmEndWork')" :label="$t('taskOrder.confirmEndWork')"
icon="mdi-check" icon="mdi-check"
id="btn-confirm-end-work"
solid solid
></SaveButton> ></SaveButton>
</div> </div>
@ -1335,6 +1354,7 @@ watch(
<!-- SEC: Dialog --> <!-- SEC: Dialog -->
<SelectReadyRequestWork <SelectReadyRequestWork
id="dialog-select-request-work"
:task-list-group="taskListGroup" :task-list-group="taskListGroup"
:fetch-params="{ readyToTask: true }" :fetch-params="{ readyToTask: true }"
v-model:open="pageState.productDialog" v-model:open="pageState.productDialog"