fix: enhance layout and styling for TicketNotes, TicketPackage components
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
7ec9c44130
commit
c8a9661d50
|
|
@ -55,73 +55,75 @@ async function handleSave(e) {
|
|||
auto-load
|
||||
url="ObservationTypes"
|
||||
/>
|
||||
<div class="flex justify-center">
|
||||
<CrudModel
|
||||
ref="ticketNotesCrudRef"
|
||||
data-key="TicketNotes"
|
||||
url="TicketObservations"
|
||||
model="TicketNotes"
|
||||
:filter="crudModelFilter"
|
||||
:data-required="crudModelRequiredData"
|
||||
:default-remove="false"
|
||||
auto-load
|
||||
style="max-width: 800px"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-px-lg q-py-md">
|
||||
<div
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="q-mb-md row q-gutter-x-md"
|
||||
>
|
||||
<VnSelect
|
||||
:label="t('ticketNotes.observationType')"
|
||||
:options="observationTypes"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="row.observationTypeFk"
|
||||
:disable="!!row.id"
|
||||
data-cy="ticketNotesObservationType"
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('basicData.description')"
|
||||
v-model="row.description"
|
||||
class="col"
|
||||
@keydown.enter.stop="handleSave"
|
||||
autogrow
|
||||
data-cy="ticketNotesDescription"
|
||||
/>
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="handleDelete(row)"
|
||||
data-cy="ticketNotesRemoveNoteBtn"
|
||||
<div class="full-width flex justify-center">
|
||||
<QPage class="card-width q-pa-lg">
|
||||
<CrudModel
|
||||
class="fit"
|
||||
ref="ticketNotesCrudRef"
|
||||
data-key="TicketNotes"
|
||||
url="TicketObservations"
|
||||
model="TicketNotes"
|
||||
:filter="crudModelFilter"
|
||||
:data-required="crudModelRequiredData"
|
||||
:default-remove="false"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard class="q-px-lg q-py-md">
|
||||
<div
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="q-mb-md row items-center q-gutter-x-md"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('ticketNotes.removeNote') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<VnRow v-if="observationTypes.length > rows.length">
|
||||
<QBtn
|
||||
icon="add_circle"
|
||||
v-shortcut="'+'"
|
||||
flat
|
||||
class="fill-icon-on-hover q-ml-md"
|
||||
color="primary"
|
||||
@click="ticketNotesCrudRef.insert()"
|
||||
data-cy="ticketNotesAddNoteBtn"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('ticketNotes.addNote') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
<VnSelect
|
||||
:label="t('ticketNotes.observationType')"
|
||||
:options="observationTypes"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="row.observationTypeFk"
|
||||
:disable="!!row.id"
|
||||
data-cy="ticketNotesObservationType"
|
||||
/>
|
||||
<VnInput
|
||||
:label="t('basicData.description')"
|
||||
v-model="row.description"
|
||||
class="col"
|
||||
@keydown.enter.stop="handleSave"
|
||||
autogrow
|
||||
data-cy="ticketNotesDescription"
|
||||
/>
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="handleDelete(row)"
|
||||
data-cy="ticketNotesRemoveNoteBtn"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('ticketNotes.removeNote') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<VnRow v-if="observationTypes.length > rows.length">
|
||||
<QBtn
|
||||
icon="add_circle"
|
||||
v-shortcut="'+'"
|
||||
flat
|
||||
class="fill-icon-on-hover q-ml-md"
|
||||
color="primary"
|
||||
@click="ticketNotesCrudRef.insert()"
|
||||
data-cy="ticketNotesAddNoteBtn"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('ticketNotes.addNote') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</QPage>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -49,88 +49,95 @@ watch(
|
|||
<FetchData
|
||||
@on-fetch="(data) => (listPackagingsOptions = data)"
|
||||
auto-load
|
||||
:filter="{ fields: ['packagingFk', 'name'], order: 'name ASC' }"
|
||||
url="Packagings/listPackaging"
|
||||
:filter="{
|
||||
fields: ['packagingFk', 'name'],
|
||||
order: ['name ASC'],
|
||||
}"
|
||||
/>
|
||||
<div class="flex justify-center">
|
||||
<CrudModel
|
||||
ref="ticketPackagingsCrudRef"
|
||||
data-key="TicketPackagings"
|
||||
url="TicketPackagings"
|
||||
model="TicketPackagings"
|
||||
:filter="crudModelFilter"
|
||||
:data-required="crudModelRequiredData"
|
||||
:default-remove="false"
|
||||
auto-load
|
||||
style="max-width: 800px"
|
||||
>
|
||||
<template #body="{ rows, validate }">
|
||||
<QCard class="q-px-lg q-py-md">
|
||||
<div
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="q-mb-md row items-center q-gutter-x-md"
|
||||
>
|
||||
<VnSelect
|
||||
:label="t('package.package')"
|
||||
:options="listPackagingsOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="packagingFk"
|
||||
v-model="row.packagingFk"
|
||||
<div class="full-width flex justify-center">
|
||||
<QPage class="card-width q-pa-lg">
|
||||
<CrudModel
|
||||
ref="ticketPackagingsCrudRef"
|
||||
data-key="TicketPackagings"
|
||||
url="TicketPackagings"
|
||||
model="TicketPackagings"
|
||||
:filter="crudModelFilter"
|
||||
:data-required="crudModelRequiredData"
|
||||
:default-remove="false"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows, validate }">
|
||||
<QCard class="q-px-lg q-py-md">
|
||||
<div
|
||||
v-for="(row, index) in rows"
|
||||
:key="index"
|
||||
class="q-mb-md row items-center q-gutter-x-md"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt?.name }}
|
||||
</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
#{{ scope.opt?.itemFk }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInput
|
||||
:label="t('basicData.quantity')"
|
||||
v-model.number="row.quantity"
|
||||
class="col"
|
||||
type="number"
|
||||
min="1"
|
||||
:required="true"
|
||||
@update:model-value="handleInputQuantityClear(row)"
|
||||
:rules="validate('TicketPackaging.quantity')"
|
||||
/>
|
||||
<VnInputDate :label="t('package.added')" v-model="row.created" />
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="ticketPackagingsCrudRef.remove([row])"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('package.removePackage') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<VnRow>
|
||||
<QBtn
|
||||
icon="add_circle"
|
||||
v-shortcut="'+'"
|
||||
flat
|
||||
class="fill-icon-on-hover q-ml-md"
|
||||
color="primary"
|
||||
@click="ticketPackagingsCrudRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('package.addPackage') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
<VnSelect
|
||||
:label="t('package.package')"
|
||||
:options="listPackagingsOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="packagingFk"
|
||||
v-model="row.packagingFk"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt?.name }}
|
||||
</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
#{{ scope.opt?.itemFk }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInput
|
||||
:label="t('basicData.quantity')"
|
||||
v-model.number="row.quantity"
|
||||
class="col"
|
||||
type="number"
|
||||
min="1"
|
||||
:required="true"
|
||||
@update:model-value="handleInputQuantityClear(row)"
|
||||
:rules="validate('TicketPackaging.quantity')"
|
||||
/>
|
||||
<VnInputDate
|
||||
:label="t('package.added')"
|
||||
v-model="row.created"
|
||||
/>
|
||||
<QIcon
|
||||
name="delete"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
@click="ticketPackagingsCrudRef.remove([row])"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('package.removePackage') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<VnRow>
|
||||
<QBtn
|
||||
icon="add_circle"
|
||||
v-shortcut="'+'"
|
||||
flat
|
||||
class="fill-icon-on-hover q-ml-md"
|
||||
color="primary"
|
||||
@click="ticketPackagingsCrudRef.insert()"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('package.addPackage') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</QPage>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -385,7 +385,12 @@ watch(
|
|||
if (!$el) return;
|
||||
const head = $el.querySelector('thead');
|
||||
const firstRow = $el.querySelector('thead > tr');
|
||||
|
||||
const headSelectionCol = $el.querySelector(
|
||||
'thead tr.bg-header th.q-table--col-auto-width',
|
||||
);
|
||||
if (headSelectionCol) {
|
||||
headSelectionCol.classList.add('horizontal-separator');
|
||||
}
|
||||
const newRow = document.createElement('tr');
|
||||
destinationElRef.value = document.createElement('th');
|
||||
originElRef.value = document.createElement('th');
|
||||
|
|
@ -394,8 +399,8 @@ watch(
|
|||
destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
|
||||
originElRef.value.classList.add('text-uppercase', 'color-vn-label');
|
||||
|
||||
destinationElRef.value.setAttribute('colspan', '7');
|
||||
originElRef.value.setAttribute('colspan', '9');
|
||||
destinationElRef.value.setAttribute('colspan', '10');
|
||||
originElRef.value.setAttribute('colspan', '10');
|
||||
|
||||
destinationElRef.value.textContent = `${t(
|
||||
'advanceTickets.destination',
|
||||
|
|
@ -490,8 +495,6 @@ watch(
|
|||
selection: 'multiple',
|
||||
}"
|
||||
v-model:selected="selectedTickets"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:no-data-label="$t('globals.noResults')"
|
||||
:right-search="false"
|
||||
:order="['futureTotalWithVat ASC']"
|
||||
auto-load
|
||||
|
|
|
|||
Loading…
Reference in New Issue