fix: enhance layout and styling for TicketNotes, TicketPackage components
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Javier Segarra 2025-04-23 15:09:26 +02:00
parent 7ec9c44130
commit c8a9661d50
3 changed files with 164 additions and 152 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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