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,8 +55,10 @@ async function handleSave(e) {
|
||||||
auto-load
|
auto-load
|
||||||
url="ObservationTypes"
|
url="ObservationTypes"
|
||||||
/>
|
/>
|
||||||
<div class="flex justify-center">
|
<div class="full-width flex justify-center">
|
||||||
|
<QPage class="card-width q-pa-lg">
|
||||||
<CrudModel
|
<CrudModel
|
||||||
|
class="fit"
|
||||||
ref="ticketNotesCrudRef"
|
ref="ticketNotesCrudRef"
|
||||||
data-key="TicketNotes"
|
data-key="TicketNotes"
|
||||||
url="TicketObservations"
|
url="TicketObservations"
|
||||||
|
@ -65,14 +67,13 @@ async function handleSave(e) {
|
||||||
:data-required="crudModelRequiredData"
|
:data-required="crudModelRequiredData"
|
||||||
:default-remove="false"
|
:default-remove="false"
|
||||||
auto-load
|
auto-load
|
||||||
style="max-width: 800px"
|
|
||||||
>
|
>
|
||||||
<template #body="{ rows }">
|
<template #body="{ rows }">
|
||||||
<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 q-gutter-x-md"
|
class="q-mb-md row items-center q-gutter-x-md"
|
||||||
>
|
>
|
||||||
<VnSelect
|
<VnSelect
|
||||||
:label="t('ticketNotes.observationType')"
|
:label="t('ticketNotes.observationType')"
|
||||||
|
@ -123,5 +124,6 @@ async function handleSave(e) {
|
||||||
</QCard>
|
</QCard>
|
||||||
</template>
|
</template>
|
||||||
</CrudModel>
|
</CrudModel>
|
||||||
|
</QPage>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -49,10 +49,14 @@ 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">
|
||||||
|
<QPage class="card-width q-pa-lg">
|
||||||
<CrudModel
|
<CrudModel
|
||||||
ref="ticketPackagingsCrudRef"
|
ref="ticketPackagingsCrudRef"
|
||||||
data-key="TicketPackagings"
|
data-key="TicketPackagings"
|
||||||
|
@ -62,7 +66,6 @@ watch(
|
||||||
:data-required="crudModelRequiredData"
|
:data-required="crudModelRequiredData"
|
||||||
:default-remove="false"
|
:default-remove="false"
|
||||||
auto-load
|
auto-load
|
||||||
style="max-width: 800px"
|
|
||||||
>
|
>
|
||||||
<template #body="{ rows, validate }">
|
<template #body="{ rows, validate }">
|
||||||
<QCard class="q-px-lg q-py-md">
|
<QCard class="q-px-lg q-py-md">
|
||||||
|
@ -102,7 +105,10 @@ watch(
|
||||||
@update:model-value="handleInputQuantityClear(row)"
|
@update:model-value="handleInputQuantityClear(row)"
|
||||||
:rules="validate('TicketPackaging.quantity')"
|
:rules="validate('TicketPackaging.quantity')"
|
||||||
/>
|
/>
|
||||||
<VnInputDate :label="t('package.added')" v-model="row.created" />
|
<VnInputDate
|
||||||
|
:label="t('package.added')"
|
||||||
|
v-model="row.created"
|
||||||
|
/>
|
||||||
<QIcon
|
<QIcon
|
||||||
name="delete"
|
name="delete"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
@ -132,5 +138,6 @@ watch(
|
||||||
</QCard>
|
</QCard>
|
||||||
</template>
|
</template>
|
||||||
</CrudModel>
|
</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