Merge pull request 'fix: refs #7353 horizontal scroll' (!735) from 7353-hotfix-fixUI into master
gitea/salix-front/pipeline/head This commit looks good Details

Reviewed-on: #735
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
This commit is contained in:
Jorge Penadés 2024-09-20 13:49:03 +00:00
commit e8beebff32
5 changed files with 58 additions and 64 deletions

View File

@ -415,7 +415,7 @@ function handleOnDataSaved(_, res) {
<QBtn <QBtn
v-if="$props.rightSearch" v-if="$props.rightSearch"
icon="filter_alt" icon="filter_alt"
class="bg-vn-section-color q-ml-md" class="bg-vn-section-color q-ml-sm"
dense dense
@click="stateStore.toggleRightDrawer()" @click="stateStore.toggleRightDrawer()"
/> />
@ -502,8 +502,9 @@ function handleOnDataSaved(_, res) {
:key="index" :key="index"
:title="btn.title" :title="btn.title"
:icon="btn.icon" :icon="btn.icon"
class="q-px-sm" class="q-pa-xs"
flat flat
dense
:class=" :class="
btn.isPrimary ? 'text-primary-light' : 'color-vn-text ' btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
" "
@ -745,10 +746,16 @@ es:
} }
} }
.q-table th { .q-table {
padding: 0; th {
} padding: 0;
}
&__top {
padding: 12px 0px;
top: 0;
}
}
.vnTable { .vnTable {
thead tr th { thead tr th {
position: sticky; position: sticky;
@ -757,9 +764,6 @@ es:
thead tr:first-child th { thead tr:first-child th {
top: 0; top: 0;
} }
.q-table__top {
top: 0;
}
tbody { tbody {
.q-checkbox { .q-checkbox {
display: flex; display: flex;

View File

@ -135,7 +135,7 @@ onMounted(async () => {
}); });
</script> </script>
<template> <template>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense> <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-sm q-px-sm" dense>
<QPopupProxy ref="popupProxyRef"> <QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md"> <QCard class="column q-pa-md">
<QIcon name="info" size="sm" class="info-icon"> <QIcon name="info" size="sm" class="info-icon">

View File

@ -139,7 +139,11 @@ const columns = computed(() => [
</VnTable> </VnTable>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.full-width .vn-row > * { .full-width .vn-row {
flex: 0.4; margin-bottom: 0;
flex-direction: row;
> * {
max-width: 125px;
}
} }
</style> </style>

View File

@ -132,7 +132,6 @@ const openTab = (id) =>
:table="{ :table="{
'row-key': 'id', 'row-key': 'id',
selection: 'multiple', selection: 'multiple',
'hide-bottom': true,
}" }"
default-mode="table" default-mode="table"
:row-click="({ id }) => openTab(id)" :row-click="({ id }) => openTab(id)"

View File

@ -54,7 +54,6 @@ const columns = computed(() => [
label: t('salesTicketsTable.problems'), label: t('salesTicketsTable.problems'),
name: 'totalProblems', name: 'totalProblems',
align: 'left', align: 'left',
columnFilter: false, columnFilter: false,
attrs: { attrs: {
dense: true, dense: true,
@ -65,7 +64,6 @@ const columns = computed(() => [
name: 'id', name: 'id',
field: 'id', field: 'id',
align: 'left', align: 'left',
columnFilter: { columnFilter: {
component: 'number', component: 'number',
name: 'id', name: 'id',
@ -108,9 +106,7 @@ const columns = computed(() => [
{ {
label: t('salesTicketsTable.date'), label: t('salesTicketsTable.date'),
name: 'shippedDate', name: 'shippedDate',
style: { 'max-width': '100px' },
align: 'left', align: 'left',
columnFilter: { columnFilter: {
component: 'date', component: 'date',
name: 'shippedDate', name: 'shippedDate',
@ -164,7 +160,6 @@ const columns = computed(() => [
label: t('salesTicketsTable.state'), label: t('salesTicketsTable.state'),
name: 'state', name: 'state',
align: 'left', align: 'left',
style: { 'max-width': '100px' },
columnFilter: { columnFilter: {
component: 'select', component: 'select',
name: 'stateFk', name: 'stateFk',
@ -193,7 +188,6 @@ const columns = computed(() => [
label: t('salesTicketsTable.zone'), label: t('salesTicketsTable.zone'),
name: 'zoneFk', name: 'zoneFk',
align: 'left', align: 'left',
columnFilter: { columnFilter: {
component: 'select', component: 'select',
name: 'zoneFk', name: 'zoneFk',
@ -210,8 +204,6 @@ const columns = computed(() => [
name: 'totalWithVat', name: 'totalWithVat',
field: 'totalWithVat', field: 'totalWithVat',
align: 'left', align: 'left',
style: { 'max-width': '75px' },
columnFilter: { columnFilter: {
component: 'number', component: 'number',
name: 'totalWithVat', name: 'totalWithVat',
@ -370,7 +362,7 @@ const openTab = (id) =>
</QCheckbox> </QCheckbox>
</template> </template>
<template #column-totalProblems="{ row }"> <template #column-totalProblems="{ row }">
<QTd class="no-padding" style="max-width: 60px"> <span>
<QIcon <QIcon
v-if="row.isTaxDataChecked === 0" v-if="row.isTaxDataChecked === 0"
name="vn:no036" name="vn:no036"
@ -424,46 +416,40 @@ const openTab = (id) =>
> >
<QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip> <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
</QIcon> </QIcon>
</QTd> </span>
</template> </template>
<template #column-id="{ row }"> <template #column-id="{ row }">
<QTd class="no-padding"> <span class="link" @click.stop.prevent>
<span class="link" @click.stop.prevent> {{ row.id }}
{{ row.id }} <TicketDescriptorProxy :id="row.id" />
<TicketDescriptorProxy :id="row.id" /> </span>
</span>
</QTd>
</template> </template>
<template #column-clientFk="{ row }"> <template #column-clientFk="{ row }">
<QTd class="no-padding" @click.stop :title="row.nickname"> <div @click.stop :title="row.nickname">
<span class="link">{{ row.nickname }}</span> <span class="link" v-text="row.nickname" />
<CustomerDescriptorProxy :id="row.clientFk" /> <CustomerDescriptorProxy :id="row.clientFk" />
</QTd> </div>
</template> </template>
<template #column-salesPersonFk="{ row }"> <template #column-salesPersonFk="{ row }">
<QTd class="no-padding" @click.stop :title="row.userName"> <div @click.stop :title="row.userName">
<span class="link" v-text="dashIfEmpty(row.userName)" /> <span class="link" v-text="dashIfEmpty(row.userName)" />
<WorkerDescriptorProxy :id="row.salesPersonFk" /> <WorkerDescriptorProxy :id="row.salesPersonFk" />
</QTd> </div>
</template> </template>
<template #column-shippedDate="{ row }"> <template #column-shippedDate="{ row }">
<QTd class="no-padding"> <QBadge
<QBadge v-bind="getBadgeAttrs(row.shippedDate)"
v-bind="getBadgeAttrs(row.shippedDate)" class="q-pa-sm"
class="q-pa-sm" style="font-size: 14px"
style="font-size: 14px" >
> {{ formatShippedDate(row.shippedDate) }}
{{ formatShippedDate(row.shippedDate) }} </QBadge>
</QBadge>
</QTd>
</template> </template>
<template #column-provinceFk="{ row }"> <template #column-provinceFk="{ row }">
<QTd class="no-padding"> <span :title="row.province" v-text="row.province" />
<span :title="row.province" v-text="row.province" />
</QTd>
</template> </template>
<template #column-state="{ row }"> <template #column-state="{ row }">
<QTd class="no-padding" @click.stop.prevent> <div @click.stop.prevent>
<div v-if="row.refFk"> <div v-if="row.refFk">
<span class="link">{{ row.refFk }}</span> <span class="link">{{ row.refFk }}</span>
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" /> <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
@ -477,32 +463,33 @@ const openTab = (id) =>
> >
{{ row.state }} {{ row.state }}
</QBadge> </QBadge>
</QTd> </div>
</template> </template>
<template #column-isFragile="{ row }"> <template #column-isFragile="{ row }">
<QTd class="no-padding"> <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm"> <QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
<QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip> </QIcon>
</QIcon>
</QTd>
</template> </template>
<template #column-zoneFk="{ row }"> <template #column-zoneFk="{ row }">
<QTd class="no-padding" @click.stop.prevent :title="row.zoneName"> <div @click.stop.prevent :title="row.zoneName">
<span class="link">{{ row.zoneName }}</span> <span class="link">{{ row.zoneName }}</span>
<ZoneDescriptorProxy :id="row.zoneFk" /> <ZoneDescriptorProxy :id="row.zoneFk" />
</QTd> </div>
</template> </template>
<template #column-totalWithVat="{ row }"> <template #column-totalWithVat="{ row }">
<QTd class="no-padding"> <QBadge
<QBadge :color="totalPriceColor(row) || 'transparent'"
:color="totalPriceColor(row) || 'transparent'" :text-color="totalPriceColor(row) ? 'black' : 'white'"
:text-color="totalPriceColor(row) ? 'black' : 'white'" class="q-pa-sm"
class="q-pa-sm" style="font-size: 14px"
style="font-size: 14px" >
> {{ toCurrency(row.totalWithVat) }}
{{ toCurrency(row.totalWithVat) }} </QBadge>
</QBadge>
</QTd>
</template> </template>
</VnTable> </VnTable>
</template> </template>
<style lang="scss" scoped>
td .q-icon {
margin: 0 2px;
}
</style>