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