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

View File

@ -101,7 +101,7 @@ const ticketColumns = computed(() => [
format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
},
{
align: 'left',
align: 'right',
label: t('advanceTickets.import'),
name: 'totalWithVat',
hidden: true,
@ -169,15 +169,17 @@ const ticketColumns = computed(() => [
label: t('advanceTickets.notMovableLines'),
headerClass: 'horizontal-separator',
name: 'notMovableLines',
class: 'shrink',
},
{
align: 'left',
label: t('advanceTickets.futureLines'),
headerClass: 'horizontal-separator',
name: 'futureLines',
class: 'shrink',
},
{
align: 'left',
align: 'right',
label: t('advanceTickets.futureImport'),
name: 'futureTotalWithVat',
hidden: true,
@ -332,7 +334,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');
@ -341,8 +348,10 @@ 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');
originElRef.value.classList.add('advance-icon');
destinationElRef.value.setAttribute('colspan', '9');
originElRef.value.setAttribute('colspan', '11');
destinationElRef.value.textContent = `${t(
'advanceTickets.destination',
@ -453,10 +462,8 @@ watch(
selection: 'multiple',
}"
v-model:selected="selectedTickets"
:pagination="{ rowsPerPage: 0 }"
:no-data-label="t('globals.noResults')"
:right-search="false"
:order="['futureTotalWithVat ASC']"
:order="['futureTotalWithVat ASC']"
auto-load
:disable-option="{ card: true }"
>

View File

@ -85,6 +85,7 @@ const ticketColumns = computed(() => [
label: t('advanceTickets.liters'),
name: 'liters',
align: 'left',
class: 'shrink',
headerClass: 'horizontal-separator',
},
{
@ -177,7 +178,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');
@ -185,9 +191,10 @@ watch(
newRow.classList.add('bg-header');
destinationElRef.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');
originElRef.value.setAttribute('colspan', '9');
destinationElRef.value.setAttribute('colspan', '9');
originElRef.value.setAttribute('colspan', '7');
originElRef.value.textContent = `${t('advanceTickets.origin')}`;
destinationElRef.value.textContent = `${t('advanceTickets.destination')}`;
@ -371,4 +378,12 @@ watch(
:deep(.horizontal-bottom-separator) {
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>