visual refactors

This commit is contained in:
William Buezas 2023-11-29 16:10:44 -03:00
parent 3bb4a75df7
commit 50d5e38130
7 changed files with 91 additions and 105 deletions

View File

@ -89,7 +89,12 @@ const value = computed({
ref="vnSelectRef"
>
<template v-if="isClearable" #append>
<QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
<QIcon
name="close"
@click.stop="value = null"
class="cursor-pointer"
size="18px"
/>
</template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData">
<slot :name="slotName" v-bind="slotData" />

View File

@ -217,7 +217,7 @@ onMounted(async () => {
</template>
<style scoped>
.form-container > * {
.form-container * {
max-width: 100%;
}
</style>

View File

@ -5,7 +5,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import invoiceOutService from 'src/services/invoiceOut.service';
import { toCurrency } from 'src/filters';
import { QBadge, QBtn } from 'quasar';
import { QCheckbox, QBtn } from 'quasar';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { toDate } from 'src/filters';
@ -39,57 +39,66 @@ const filter = ref({
const tableColumnComponents = {
company: {
component: 'span',
props: {},
props: () => {},
event: () => {},
},
country: {
component: 'span',
props: {},
props: () => {},
event: () => {},
},
clientId: {
component: QBtn,
props: { flat: true, color: 'blue' },
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectCustomerId(prop.value),
},
client: {
component: 'span',
props: {},
props: () => {},
event: () => {},
},
amount: {
component: 'span',
props: {},
props: () => {},
event: () => {},
},
base: {
component: 'span',
props: {},
props: () => {},
event: () => {},
},
ticketId: {
component: 'span',
props: {},
props: () => {},
event: () => {},
},
active: {
component: 'span',
props: { type: 'boolean' },
component: QCheckbox,
props: (prop) => ({
disable: true,
'model-value': Boolean(prop.value),
}),
event: () => {},
},
hasToInvoice: {
component: 'span',
props: { type: 'boolean' },
component: QCheckbox,
props: (prop) => ({
disable: true,
'model-value': Boolean(prop.value),
}),
event: () => {},
},
verifiedData: {
component: 'span',
props: { type: 'boolean' },
component: QCheckbox,
props: (prop) => ({
disable: true,
'model-value': Boolean(prop.value),
}),
event: () => {},
},
comercial: {
component: QBtn,
props: { flat: true, color: 'blue' },
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectWorkerId(prop.row.comercialId),
},
};
@ -351,27 +360,17 @@ onMounted(async () => {
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="tableColumnComponents[props.col.name].props"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
>
<span
<template
v-if="
tableColumnComponents[props.col.name].props.type !=
'boolean'
props.col.name !== 'active' &&
props.col.name !== 'hasToInvoice' &&
props.col.name !== 'verifiedData'
"
>{{ props.value }}</template
>
{{ props.value }}
</span>
<span v-else>
<QBadge v-if="props.value" color="grey">
<QIcon name="check" size="xs" />
</QBadge>
<QBadge v-else color="grey" outline>
<QIcon name="" size="xs" />
</QBadge>
</span>
<CustomerDescriptorProxy
v-if="props.col.name === 'clientId'"
:id="selectedCustomerId"

View File

@ -84,20 +84,31 @@ const isAdministrative = computed(() => {
<span> {{ supplier.note || '-' }} </span>
</template>
</VnLv>
<QCheckbox
v-model="supplier.isSerious"
:label="t('verified')"
disable
dense
class="full-width q-mb-xs"
/>
<QCheckbox
v-model="supplier.isActive"
:label="t('isActive')"
disable
dense
class="full-width q-mb-xs"
/>
<VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
<template #value>
<span> {{ supplier.note || '-' }} </span>
</template>
</VnLv>
<VnLv :label="t('verified')" class="q-mb-xs">
<template #value>
<QCheckbox
v-model="supplier.isSerious"
dense
disable
class="full-width q-mb-xs"
/>
</template>
</VnLv>
<VnLv :label="t('isActive')" class="q-mb-xs">
<template #value>
<QCheckbox
v-model="supplier.isActive"
dense
disable
class="full-width q-mb-xs"
/>
</template>
</VnLv>
</QCard>
<QCard class="vn-one">
<a v-if="isAdministrative" class="header link" :href="supplierUrl">
@ -169,21 +180,4 @@ const isAdministrative = computed(() => {
</template>
</CardSummary>
</template>
<style lang="scss" scoped>
.notes {
width: max-content;
}
.cardSummary .summaryBody > .q-card > .taxes {
border: 2px solid gray;
padding: 0;
> .vn-label-value {
text-align: right;
display: flex;
flex-direction: row;
margin-top: 5px;
justify-content: flex-end;
padding-right: 20px;
}
}
</style>
<style lang="scss" scoped></style>

View File

@ -50,12 +50,11 @@ const viewSummary = (id) => {
<CardList2
v-for="row of rows"
:key="row.id"
:showCheckbox="true"
:title="row.socialName"
:id="row.id"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv label="ID" :value="row.id" />
<VnLv label="NIF/CIF" :value="row.nif" />
<VnLv label="Alias" :value="row.nickname" />
<VnLv
@ -77,11 +76,11 @@ const viewSummary = (id) => {
/>
</template>
<template #actions>
<QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
<QTooltip>
{{ t('components.smartCard.openSummary') }}
</QTooltip>
</QBtn>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id)"
color="primary"
/>
</template>
</CardList2>
</template>

View File

@ -226,20 +226,27 @@ const openEntryDescriptor = () => {};
<VnLv label="m³" :value="travel.m3" />
<VnLv :label="t('travel.shared.totalEntries')" :value="travel.m3" />
<QCheckbox
v-model="travel.isDelivered"
:label="t('travel.summary.delivered')"
disable
dense
class="full-width q-my-xs"
/>
<QCheckbox
v-model="travel.isReceived"
:label="t('travel.summary.received')"
disable
dense
class="full-width q-mb-xs"
/>
<VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
<template #value>
<QCheckbox
v-model="travel.isDelivered"
disable
dense
class="full-width q-my-xs"
/>
</template>
</VnLv>
<VnLv :label="t('travel.summary.received')" class="q-mb-xs">
<template #value>
<QCheckbox
v-model="travel.isReceived"
disable
dense
class="full-width q-mb-xs"
/>
</template>
</VnLv>
</QCard>
<QCard class="vn-two" v-if="entriesTableRows.length > 0">
<a class="header" :href="travelUrl + 'entry'">
@ -285,21 +292,4 @@ const openEntryDescriptor = () => {};
</template>
</CardSummary>
</template>
<style lang="scss" scoped>
.notes {
width: max-content;
}
.cardSummary .summaryBody > .q-card > .taxes {
border: 2px solid gray;
padding: 0;
> .vn-label-value {
text-align: right;
display: flex;
flex-direction: row;
margin-top: 5px;
justify-content: flex-end;
padding-right: 20px;
}
}
</style>
<style lang="scss" scoped></style>

View File

@ -67,7 +67,6 @@ onMounted(async () => {
:key="row.id"
:title="row.ref"
:id="row.id"
:showCheckbox="true"
@click="navigateToTravelId(row.id)"
>
<template #list-items>