refactor: refs #8316 used VnSection and VnCardBeta #1146

Merged
alexm merged 8 commits from 8316-invoiceOutCardWithVnCardBeta into dev 2025-01-24 09:35:19 +00:00
5 changed files with 259 additions and 253 deletions
Showing only changes of commit 531371543e - Show all commits

View File

@ -1,19 +1,11 @@
<script setup> <script setup>
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue'; import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
import VnCard from 'components/common/VnCard.vue'; import VnCardBeta from 'components/common/VnCardBeta.vue';
import InvoiceOutFilter from '../InvoiceOutFilter.vue';
</script> </script>
<template> <template>
<VnCard <VnCardBeta
data-key="InvoiceOut" data-key="InvoiceOut"
base-url="InvoiceOuts" base-url="InvoiceOuts"
:descriptor="InvoiceOutDescriptor" :descriptor="InvoiceOutDescriptor"
:filter-panel="InvoiceOutFilter"
search-data-key="InvoiceOutList"
:searchbar-props="{
url: 'InvoiceOuts/filter',
label: 'Search invoice',
info: 'You can search by invoice reference',
}"
/> />
</template> </template>

View File

@ -3,7 +3,6 @@ import { ref, computed, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { usePrintService } from 'src/composables/usePrintService'; import { usePrintService } from 'src/composables/usePrintService';
@ -12,12 +11,12 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
import { toCurrency, toDate } from 'src/filters/index'; import { toCurrency, toDate } from 'src/filters/index';
import { QBtn } from 'quasar'; import { QBtn } from 'quasar';
import axios from 'axios'; import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue'; import InvoiceOutFilter from './InvoiceOutFilter.vue';
import VnRow from 'src/components/ui/VnRow.vue'; import VnRow from 'src/components/ui/VnRow.vue';
import VnRadio from 'src/components/common/VnRadio.vue'; import VnRadio from 'src/components/common/VnRadio.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
import VnSection from 'src/components/common/VnSection.vue';
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
@ -30,6 +29,8 @@ const MODEL = 'InvoiceOuts';
const { openReport } = usePrintService(); const { openReport } = usePrintService();
const addressOptions = ref([]); const addressOptions = ref([]);
const selectedOption = ref('ticket'); const selectedOption = ref('ticket');
const dataKey = 'InvoiceOutList';
async function fetchClientAddress(id) { async function fetchClientAddress(id) {
const { data } = await axios.get( const { data } = await axios.get(
`Clients/${id}/addresses?filter[order]=isActive DESC` `Clients/${id}/addresses?filter[order]=isActive DESC`
@ -37,11 +38,7 @@ async function fetchClientAddress(id) {
addressOptions.value = data; addressOptions.value = data;
} }
const exprBuilder = (_, value) => {
jtubau marked this conversation as resolved Outdated
Outdated
Review

No borrar, se gasta en un VnSelect

No borrar, se gasta en un VnSelect
return {
or: [{ code: value }, { description: { like: `%${value}%` } }],
};
};
const columns = computed(() => [ const columns = computed(() => [
{ {
@ -173,220 +170,224 @@ watchEffect(selectedRows);
</script> </script>
<template> <template>
<VnSearchbar <VnSection
:info="t('youCanSearchByInvoiceReference')" :data-key="dataKey"
:label="t('Search invoice')"
data-key="invoiceOutList"
/>
<RightMenu>
<template #right-panel>
<InvoiceOutFilter data-key="invoiceOutList" />
</template>
</RightMenu>
<VnSubToolbar>
<template #st-actions>
<QBtn
color="primary"
icon-right="cloud_download"
@click="downloadPdf()"
:disable="!hasSelectedCards"
>
<QTooltip>{{ t('downloadPdf') }}</QTooltip>
</QBtn>
</template>
</VnSubToolbar>
<VnTable
ref="tableRef"
data-key="invoiceOutList"
:url="`${MODEL}/filter`"
:create="{
urlCreate: 'InvoiceOuts/createManualInvoice',
title: t('createManualInvoice'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: { active: true },
}"
:right-search="false"
v-model:selected="selectedRows"
order="id DESC"
:columns="columns" :columns="columns"
redirect="invoice-out" prefix="invoiceOut"
:table="{ :array-data-props="{
'row-key': 'id', url: 'InvoiceOuts/filter',
selection: 'multiple', order: ['id DESC'],
exprBuilder,
jtubau marked this conversation as resolved Outdated
Outdated
Review

El exprBuilder en este cas no va aci, es de un VnSelect

El exprBuilder en este cas no va aci, es de un VnSelect
}" }"
> >
<template #column-clientFk="{ row }"> <template #rightMenu>
<span class="link" @click.stop> <InvoiceOutFilter data-key="InvoiceOutList" />
{{ row.clientSocialName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template> </template>
<template #more-create-dialog="{ data }"> <template #body>
<div class="row q-col-gutter-xs"> <VnSubToolbar>
<div class="col-12"> <template #st-actions>
<div class="q-col-gutter-xs"> <QBtn
<VnRow fixed> color="primary"
<VnRadio icon-right="cloud_download"
v-model="selectedOption" @click="downloadPdf()"
val="ticket" :disable="!hasSelectedCards"
:label="t('globals.ticket')" >
class="q-my-none q-mr-md" <QTooltip>{{ t('downloadPdf') }}</QTooltip>
/> </QBtn>
</template>
</VnSubToolbar>
<VnTable
ref="tableRef"
:data-key="dataKey"
:create="{
urlCreate: 'InvoiceOuts/createManualInvoice',
title: t('createManualInvoice'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: { active: true },
}"
:right-search="false"
v-model:selected="selectedRows"
:columns="columns"
redirect="invoice-out"
:table="{
'row-key': 'id',
selection: 'multiple',
}"
>
<template #column-clientFk="{ row }">
<span class="link" @click.stop>
{{ row.clientSocialName }}
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
<template #more-create-dialog="{ data }">
<div class="row q-col-gutter-xs">
<div class="col-12">
<div class="q-col-gutter-xs">
<VnRow fixed>
<VnRadio
v-model="selectedOption"
val="ticket"
:label="t('globals.ticket')"
class="q-my-none q-mr-md"
/>
<VnInput <VnInput
v-show="selectedOption === 'ticket'" v-show="selectedOption === 'ticket'"
v-model="data.ticketFk" v-model="data.ticketFk"
:label="t('globals.ticket')" :label="t('globals.ticket')"
style="flex: 1" style="flex: 1"
/> />
<div <div
class="row q-col-gutter-xs q-ml-none" class="row q-col-gutter-xs q-ml-none"
v-show="selectedOption !== 'ticket'" v-show="selectedOption !== 'ticket'"
> >
<div class="col"> <div class="col">
<VnSelect <VnSelect
v-model="data.clientFk" v-model="data.clientFk"
:label="t('globals.client')"
url="Clients"
:options="customerOptions"
option-label="name"
option-value="id"
@update:model-value="fetchClientAddress"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
#{{ scope.opt?.id }} -
{{ scope.opt?.name }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
<div class="col">
<VnSelect
v-model="data.addressFk"
:label="t('ticket.summary.consignee')"
:options="addressOptions"
option-label="nickname"
option-value="id"
v-if="
data.clientFk &&
selectedOption === 'consignatario'
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel
:class="{
'color-vn-label':
!scope.opt?.isActive,
}"
>
{{
`${
!scope.opt?.isActive
? t('inactive')
: ''
} `
}}
<span>{{
scope.opt?.nickname
}}</span>
<span
v-if="
scope.opt?.province ||
scope.opt?.city ||
scope.opt?.street
"
>
, {{ scope.opt?.street }},
{{ scope.opt?.city }},
{{
scope.opt?.province?.name
}}
-
{{
scope.opt?.agencyMode
?.name
}}
</span>
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</div>
</VnRow>
<VnRow fixed>
<VnRadio
v-model="selectedOption"
val="cliente"
:label="t('globals.client')" :label="t('globals.client')"
url="Clients" class="q-my-none q-mr-md"
:options="customerOptions" />
option-label="name" </VnRow>
option-value="id" <VnRow fixed>
@update:model-value="fetchClientAddress" <VnRadio
> v-model="selectedOption"
<template #option="scope"> val="consignatario"
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
#{{ scope.opt?.id }} -
{{ scope.opt?.name }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
<div class="col">
<VnSelect
v-model="data.addressFk"
:label="t('ticket.summary.consignee')" :label="t('ticket.summary.consignee')"
:options="addressOptions" class="q-my-none q-mr-md"
option-label="nickname" />
option-value="id" </VnRow>
v-if="
data.clientFk &&
selectedOption === 'consignatario'
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel
:class="{
'color-vn-label':
!scope.opt?.isActive,
}"
>
{{
`${
!scope.opt?.isActive
? t('inactive')
: ''
} `
}}
<span>{{
scope.opt?.nickname
}}</span>
<span
v-if="
scope.opt?.province ||
scope.opt?.city ||
scope.opt?.street
"
>
, {{ scope.opt?.street }},
{{ scope.opt?.city }},
{{
scope.opt?.province?.name
}}
-
{{
scope.opt?.agencyMode
?.name
}}
</span>
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</div> </div>
</VnRow> </div>
<VnRow fixed> <div class="full-width">
<VnRadio <VnRow class="row q-col-gutter-xs">
v-model="selectedOption" <VnSelect
val="cliente" url="InvoiceOutSerials"
:label="t('globals.client')" v-model="data.serial"
class="q-my-none q-mr-md" :label="t('invoiceIn.serial')"
/> :options="invoiceOutSerialsOptions"
</VnRow> option-label="description"
<VnRow fixed> option-value="code"
<VnRadio option-filter
v-model="selectedOption" :expr-builder="exprBuilder"
val="consignatario" >
:label="t('ticket.summary.consignee')" <template #option="scope">
class="q-my-none q-mr-md" <QItem v-bind="scope.itemProps">
/> <QItemSection>
</VnRow> <QItemLabel>
{{ scope.opt?.code }} -
{{ scope.opt?.description }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnInputDate
:label="t('invoiceOut.summary.dued')"
v-model="data.maxShipped"
/>
</VnRow>
<VnRow class="row q-col-gutter-xs">
<VnSelect
url="TaxAreas"
v-model="data.taxArea"
:label="t('invoiceOutList.tableVisibleColumns.taxArea')"
:options="taxAreasOptions"
option-label="code"
option-value="code"
/>
<VnInput
v-model="data.reference"
:label="t('globals.reference')"
/>
</VnRow>
</div>
</div> </div>
</div> </template>
<div class="full-width"> </VnTable>
<VnRow class="row q-col-gutter-xs">
<VnSelect
url="InvoiceOutSerials"
v-model="data.serial"
:label="t('invoiceIn.serial')"
:options="invoiceOutSerialsOptions"
option-label="description"
option-value="code"
option-filter
:expr-builder="exprBuilder"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.code }} -
{{ scope.opt?.description }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnInputDate
:label="t('invoiceOut.summary.dued')"
v-model="data.maxShipped"
/>
</VnRow>
<VnRow class="row q-col-gutter-xs">
<VnSelect
url="TaxAreas"
v-model="data.taxArea"
:label="t('invoiceOutList.tableVisibleColumns.taxArea')"
:options="taxAreasOptions"
option-label="code"
option-value="code"
/>
<VnInput
v-model="data.reference"
:label="t('globals.reference')"
/>
</VnRow>
</div>
</div>
</template> </template>
</VnTable> </VnSection>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,3 +1,6 @@
invoiceOut:
search: Search invoice
searchInfo: You can search by invoice reference
invoiceOutModule: invoiceOutModule:
customer: Client customer: Client
amount: Amount amount: Amount

View File

@ -1,5 +1,6 @@
Search invoice: Buscar factura emitida invoiceOut:
You can search by invoice reference: Puedes buscar por referencia de la factura search: Buscar factura emitida
searchInfo: Puedes buscar por referencia de la factura
invoiceOutModule: invoiceOutModule:
customer: Cliente customer: Cliente
amount: Importe amount: Importe

View File

@ -1,34 +1,60 @@
import { RouterView } from 'vue-router'; import { RouterView } from 'vue-router';
const invoiceOutCard = {
name: 'InvoiceOutCard',
path: ':id',
component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
redirect: { name: 'InvoiceOutSummary' },
meta: {
menu: [],
},
children: [
{
path: 'summary',
name: 'InvoiceOutSummary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
}
],
};
export default { export default {
path: '/invoice-out',
name: 'InvoiceOut', name: 'InvoiceOut',
path: '/invoice-out',
meta: { meta: {
title: 'invoiceOuts', title: 'invoiceOuts',
icon: 'vn:invoice-out', icon: 'vn:invoice-out',
moduleName: 'InvoiceOut', moduleName: 'InvoiceOut',
menu: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
}, },
component: RouterView, component: RouterView,
redirect: { name: 'InvoiceOutMain' }, redirect: { name: 'InvoiceOutMain' },
menus: {
main: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
card: [],
},
children: [ children: [
{ {
path: '',
name: 'InvoiceOutMain', name: 'InvoiceOutMain',
path: '',
component: () => import('src/components/common/VnModule.vue'), component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'InvoiceOutList' }, redirect: { name: 'InvoiceOutIndexMain' },
children: [ children: [
{ {
path: 'list', path: '',
name: 'InvoiceOutList', name: 'InvoiceOutIndexMain',
meta: { redirect: { name: 'InvoiceOutList' },
title: 'list',
icon: 'view_list',
},
component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'), component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
children: [
{
name: 'InvoiceOutList',
path: 'list',
meta: {
title: 'list',
icon: 'view_list',
},
},
invoiceOutCard,
],
}, },
{ {
path: 'global-invoicing', path: 'global-invoicing',
@ -51,22 +77,5 @@ export default {
}, },
], ],
}, },
{
name: 'InvoiceOutCard',
path: ':id',
component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
redirect: { name: 'InvoiceOutSummary' },
children: [
{
name: 'InvoiceOutSummary',
path: 'summary',
meta: {
title: 'summary',
},
component: () =>
import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
},
],
},
], ],
}; };