verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 78 Releases Wiki Activity

style: adjust column alignment and add class for improved layout

This commit is contained in:
Javier Segarra 2025-04-25 13:52:05 +02:00
parent e30232741f
commit 36102aff00
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/Ticket/TicketAdvance.vue
View File

@ -101,7 +101,7 @@ const ticketColumns = computed(() => [
format: (row, dashIfEmpty) => dashIfEmpty(row.lines), format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
}, },
{ {
align: 'left', align: 'right',
label: t('advanceTickets.import'), label: t('advanceTickets.import'),
name: 'totalWithVat', name: 'totalWithVat',
hidden: true, hidden: true,
@ -169,15 +169,17 @@ const ticketColumns = computed(() => [
label: t('advanceTickets.notMovableLines'), label: t('advanceTickets.notMovableLines'),
headerClass: 'horizontal-separator', headerClass: 'horizontal-separator',
name: 'notMovableLines', name: 'notMovableLines',
class: 'shrink',
}, },
{ {
align: 'left', align: 'left',
label: t('advanceTickets.futureLines'), label: t('advanceTickets.futureLines'),
headerClass: 'horizontal-separator', headerClass: 'horizontal-separator',
name: 'futureLines', name: 'futureLines',
class: 'shrink',
}, },
{ {
align: 'left', align: 'right',
label: t('advanceTickets.futureImport'), label: t('advanceTickets.futureImport'),
name: 'futureTotalWithVat', name: 'futureTotalWithVat',
hidden: true, hidden: true,
@ -332,7 +334,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');
@ -341,8 +348,10 @@ 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'); originElRef.value.classList.add('advance-icon');
originElRef.value.setAttribute('colspan', '9');
destinationElRef.value.setAttribute('colspan', '9');
originElRef.value.setAttribute('colspan', '11');
destinationElRef.value.textContent = `${t( destinationElRef.value.textContent = `${t(
'advanceTickets.destination', 'advanceTickets.destination',
@ -453,8 +462,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

21
src/pages/Ticket/TicketFuture.vue
View File

@ -85,6 +85,7 @@ const ticketColumns = computed(() => [
label: t('advanceTickets.liters'), label: t('advanceTickets.liters'),
name: 'liters', name: 'liters',
align: 'left', align: 'left',
class: 'shrink',
headerClass: 'horizontal-separator', headerClass: 'horizontal-separator',
}, },
{ {
@ -177,7 +178,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');
@ -185,9 +191,10 @@ watch(
newRow.classList.add('bg-header'); newRow.classList.add('bg-header');
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');
originElRef.value.classList.add('advance-icon');
destinationElRef.value.setAttribute('colspan', '7'); destinationElRef.value.setAttribute('colspan', '9');
originElRef.value.setAttribute('colspan', '9'); originElRef.value.setAttribute('colspan', '7');
originElRef.value.textContent = `${t('advanceTickets.origin')}`; originElRef.value.textContent = `${t('advanceTickets.origin')}`;
destinationElRef.value.textContent = `${t('advanceTickets.destination')}`; destinationElRef.value.textContent = `${t('advanceTickets.destination')}`;
@ -371,4 +378,12 @@ watch(
:deep(.horizontal-bottom-separator) { :deep(.horizontal-bottom-separator) {
border-bottom: 4px solid white !important; border-bottom: 4px solid white !important;
} }
:deep(th.advance-icon::after) {
content: '>>';
font-size: larger;
position: absolute;
text-align: center;
float: 0;
left: 0;
}
</style> </style>