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

fixes #4833-new_module_invoiceOut #30

Merged
joan merged 3 commits from 4833-new_module_invoiceOut into dev 2022-12-13 11:59:26 +00:00
Conversation 1 Commits 3 Files Changed 11 +596 -1
11 changed files with 596 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/i18n/en/index.js
View File

@ -294,6 +294,50 @@ export default {
returnOfMaterial: 'Return of material authorization (RMA)',
},
},
invoiceOut: {
pageTitles: {
invoiceOuts: 'InvoiceOuts',
list: 'List',
createInvoiceOut: 'Create invoice out',
summary: 'Summary',
basicData: 'Basic Data'
},
list: {
ref: 'Reference',
issued: 'Issued',
amount: 'Amount',
client: 'Client',
created: 'Created',
company: 'Company',
dued: 'Due date'
},
card: {
issued: 'Issued',
amount: 'Amount',
client: 'Client',
company: 'Company',
customerCard: 'Customer card',
ticketList: 'Ticket List'
},
summary: {
issued: 'Issued',
created: 'Created',
dued: 'Due',
booked: 'Booked',
company: 'Company',
taxBreakdown: 'Tax breakdown',
type: 'Type',
taxableBase: 'Taxable base',
rate: 'Rate',
fee: 'Fee',
tickets: 'Tickets',
ticketId: 'Ticket id',
nickname: 'Alias',
shipped: 'Shipped',
totalWithVat: 'Amount',
}
},
components: {
topbar: {},
userPanel: {

44
src/i18n/es/index.js
View File

@ -293,6 +293,50 @@ export default {
returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
},
},
invoiceOut: {
pageTitles: {
invoiceOuts: 'Fact. emitidas',
list: 'Listado',
createInvoiceOut: 'Crear fact. emitida',
summary: 'Resumen',
basicData: 'Datos básicos'
},
list: {
ref: 'Referencia',
issued: 'Fecha emisión',
amount: 'Importe',
client: 'Cliente',
created: 'Fecha creación',
company: 'Empresa',
dued: 'Fecha vencimineto'
},
card: {
issued: 'Fecha emisión',
amount: 'Importe',
client: 'Cliente',
company: 'Empresa',
customerCard: 'Ficha del cliente',
ticketList: 'Listado de tickets'
},
summary: {
issued: 'Fecha',
created: 'Fecha creación',
dued: 'Vencimiento',
booked: 'Contabilizada',
company: 'Empresa',
taxBreakdown: 'Desglose impositivo',
type: 'Tipo',
taxableBase: 'Base imp.',
rate: 'Tarifa',
fee: 'Cuota',
tickets: 'Tickets',
ticketId: 'Id ticket',
nickname: 'Alias',
shipped: 'F. envío',
totalWithVat: 'Importe',
}
},
components: {
topbar: {},
userPanel: {

18
src/pages/InvoiceOut/Card/InvoiceOutCard.vue Normal file
View File

@ -0,0 +1,18 @@
<script setup>
import { useState } from 'src/composables/useState';
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
const state = useState();
</script>
<template>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
<q-scroll-area class="fit">
<InvoiceOutDescriptor />
</q-scroll-area>
</q-drawer>
<q-page-container>
<q-page class="q-pa-md">
<router-view></router-view>
</q-page>
</q-page-container>
</template>

103
src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue Normal file
View File

@ -0,0 +1,103 @@
<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency, toDate } from 'src/filters';
import axios from 'axios';
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
});
onMounted(async () => {
await fetch();
});
const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => {
return $props.id || route.params.id;
});
const invoiceOut = ref();
async function fetch() {
const filter = {
include: [
{
relation: 'company',
scope: {
fields: ['id', 'code'],
},
},
{
relation: 'client',
scope: {
fields: ['id', 'name', 'email'],
},
},
],
};
const options = { params: { filter } };
const { data } = await axios.get(`InvoiceOuts/${entityId.value}`, options);
if (data) invoiceOut.value = data;
}
const filter = computed(() => {
return invoiceOut.value ? JSON.stringify({ refFk: invoiceOut.value.ref }) : null;
vicent marked this conversation as resolved
joan commented 2022-11-30 10:40:49 +00:00
Review
Copy Link

Quitar esta linea

Quitar esta linea
});
</script>
<template>
<card-descriptor v-if="invoiceOut" module="InvoiceOut" :data="invoiceOut" :description="invoiceOut.ref">
<template #body>
<q-list>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.card.issued') }}</q-item-label>
<q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.card.amount') }}</q-item-label>
<q-item-label>{{ toCurrency(invoiceOut.amount) }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section v-if="invoiceOut.company">
<q-item-label caption>{{ t('invoiceOut.card.client') }}</q-item-label>
<q-item-label class="link">
{{ invoiceOut.client.name }}
<q-popup-proxy>
<customer-descriptor-popover :id="invoiceOut.client.id" />
</q-popup-proxy>
</q-item-label>
</q-item-section>
<q-item-section v-if="invoiceOut.company">
<q-item-label caption>{{ t('invoiceOut.card.company') }}</q-item-label>
<q-item-label>{{ invoiceOut.company.code }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-card-actions>
<q-btn
size="md"
icon="vn:client"
color="primary"
:to="{ name: 'CustomerCard', params: { id: invoiceOut.client.id } }"
>
<q-tooltip>{{ t('invoiceOut.card.customerCard') }}</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:ticket" color="primary" :to="{ name: 'TicketList', params: { q: filter } }">
<q-tooltip>{{ t('invoiceOut.card.ticketList') }}</q-tooltip>
</q-btn>
</q-card-actions>
</template>
</card-descriptor>
</template>

15
src/pages/InvoiceOut/Card/InvoiceOutDescriptorPopover.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup>
import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
</script>
<template>
<q-card>
<invoiceOut-descriptor v-if="$props.id" :id="$props.id" />
</q-card>
</template>

201
src/pages/InvoiceOut/Card/InvoiceOutSummary.vue Normal file
View File

@ -0,0 +1,201 @@
<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { toCurrency, toDate } from 'src/filters';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
onMounted(() => fetch());
const route = useRoute();
const { t } = useI18n();
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const entityId = computed(() => $props.id || route.params.id);
const invoiceOut = ref(null);
const tax = ref(null);
const tikets = ref(null);
function fetch() {
const id = entityId.value;
axios.get(`InvoiceOuts/${id}/summary`).then(({ data }) => {
invoiceOut.value = data.invoiceOut;
tax.value = data.invoiceOut.taxesBreakdown;
console.log('tax', tax);
});
axios.get(`InvoiceOuts/${id}/getTickets`).then(({ data }) => {
tikets.value = data;
});
}
const taxColumns = ref([
{
name: 'item',
label: 'invoiceOut.summary.type',
field: (row) => row.name,
sortable: true,
},
{
name: 'landed',
label: 'invoiceOut.summary.taxableBase',
field: (row) => row.taxableBase,
format: (value) => toCurrency(value),
sortable: true,
},
{
name: 'quantity',
label: 'invoiceOut.summary.rate',
field: (row) => row.rate,
sortable: true,
},
{
name: 'invoiceOuted',
label: 'invoiceOut.summary.fee',
field: (row) => row.vat,
sortable: true,
},
]);
const ticketsColumns = ref([
{
name: 'item',
label: 'invoiceOut.summary.ticketId',
field: (row) => row.id,
sortable: true,
},
{
name: 'quantity',
label: 'invoiceOut.summary.nickname',
field: (row) => row.nickname,
sortable: true,
},
{
name: 'landed',
label: 'invoiceOut.summary.shipped',
field: (row) => row.shipped,
format: (value) => toDate(value),
sortable: true,
},
{
name: 'landed',
label: 'invoiceOut.summary.totalWithVat',
field: (row) => row.totalWithVat,
format: (value) => toCurrency(value),
sortable: true,
},
]);
</script>
<template>
<div class="summary container">
<q-card>
<skeleton-summary v-if="!invoiceOut" />
<template v-if="invoiceOut">
<div class="header bg-primary q-pa-sm q-mb-md">
{{ invoiceOut.ref }} - {{ invoiceOut.client.socialName }}
</div>
<q-list>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.summary.issued') }}</q-item-label>
<q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.summary.dued') }}</q-item-label>
<q-item-label>{{ toDate(invoiceOut.dued) }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.summary.created') }}</q-item-label>
<q-item-label>{{ toDate(invoiceOut.created) }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.summary.booked') }}</q-item-label>
<q-item-label>{{ toDate(invoiceOut.booked) }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.summary.company') }}</q-item-label>
<q-item-label>{{ invoiceOut.company.code }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-card-section class="q-pa-md">
<h6>{{ t('invoiceOut.summary.taxBreakdown') }}</h6>
<q-table :columns="taxColumns" :rows="tax" flat>
<template #header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
{{ t(col.label) }}
</q-th>
</q-tr>
</template>
</q-table>
</q-card-section>
<q-card-section class="q-pa-md">
<h6>{{ t('invoiceOut.summary.tickets') }}</h6>
<q-table :columns="ticketsColumns" :rows="tikets" flat>
<template #header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
{{ t(col.label) }}
</q-th>
</q-tr>
</template>
</q-table>
</q-card-section>
</template>
</q-card>
</div>
</template>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
}
.q-card {
width: 100%;
min-width: 950px;
max-width: 950px;
}
.summary {
.header {
text-align: center;
font-size: 18px;
}
#slider-container {
max-width: 80%;
margin: 0 auto;
.q-slider {
.q-slider__marker-labels:nth-child(1) {
transform: none;
}
.q-slider__marker-labels:nth-child(2) {
transform: none;
left: auto !important;
right: 0%;
}
}
}
}
.q-dialog .summary {
max-width: 1200px;
}
</style>

21
src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue Normal file
View File

@ -0,0 +1,21 @@
<script setup>
import { useDialogPluginComponent } from 'quasar';
import InvoiceOutSummary from './InvoiceOutSummary.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide } = useDialogPluginComponent();
</script>
<template>
<q-dialog ref="dialogRef" @hide="onDialogHide">
<invoiceOut-summary v-if="$props.id" :id="$props.id" />
</q-dialog>
</template>

83
src/pages/InvoiceOut/InvoiceOutList.vue Normal file
View File

@ -0,0 +1,83 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import Paginate from 'src/components/Paginate.vue';
import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
import { toDate, toCurrency } from 'src/filters/index';
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
function navigate(id) {
router.push({ path: `/invoiceOut/${id}` });
}
function viewSummary(id) {
quasar.dialog({
joan commented 2022-11-30 10:46:38 +00:00
Review
Copy Link

Revisar porqué el summary se abre tan estrecho. Comparar con la vista previa de clientes

Revisar porqué el summary se abre tan estrecho. Comparar con la vista previa de clientes
vicent commented 2022-11-30 14:17:42 +00:00
Review
Copy Link

Lo abre tan estrecho pq no tiene tantos campos como por ejemplo el summary de Clientes. He probado a añadirle campos y así si q lo muestra ancho.

Lo dejo estrecho?
O le pongo un with determinado?

Lo abre tan estrecho pq no tiene tantos campos como por ejemplo el summary de Clientes. He probado a añadirle campos y así si q lo muestra ancho. Lo dejo estrecho? O le pongo un with determinado?
joan commented 2022-11-30 18:21:00 +00:00
Review
Copy Link

Se le puede probar a añadir además del max-width el min-width. Y si no, con el width, si.

Se le puede probar a añadir además del max-width el min-width. Y si no, con el width, si.
component: InvoiceOutSummaryDialog,
componentProps: {
id,
},
});
}
</script>
<template>
<q-page class="q-pa-md">
<paginate url="/InvoiceOuts/filter" sort-by="issued DESC, id DESC" auto-load>
<template #body="{ rows }">
<q-card class="card" v-for="row of rows" :key="row.id">
<q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
<q-item-section class="q-pa-md" @click="navigate(row.id)">
<div class="text-h6">{{ row.ref }}</div>
<q-item-label caption>#{{ row.id }}</q-item-label>
<q-list>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.list.issued') }}</q-item-label>
<q-item-label>{{ toDate(row.issued) }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.list.amount') }}</q-item-label>
<q-item-label>{{ toCurrency(row.amount) }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.list.client') }}</q-item-label>
<q-item-label>{{ row.clientSocialName }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.list.created') }}</q-item-label>
<q-item-label>{{ toDate(row.created) }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.list.company') }}</q-item-label>
<q-item-label>{{ row.companyCode }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{ t('invoiceOut.list.dued') }}</q-item-label>
<q-item-label>{{ toDate(row.dued) }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-item-section>
<q-separator vertical />
<q-card-actions vertical class="justify-between">
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
<q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
</q-btn>
<q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
<q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
</q-btn>
</q-card-actions>
</q-item>
</q-card>
</template>
</paginate>
</q-page>
</template>

17
src/pages/InvoiceOut/InvoiceOutMain.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup>
import { useState } from 'src/composables/useState';
import LeftMenu from 'src/components/LeftMenu.vue';
const state = useState();
</script>
<template>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
<q-scroll-area class="fit text-grey-8">
<LeftMenu />
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>

47
src/router/modules/invoiceOut.js Normal file
View File

@ -0,0 +1,47 @@
import { RouterView } from 'vue-router';
export default {
path: '/invoiceOut',
name: 'InvoiceOut',
vicent marked this conversation as resolved Outdated
joan commented 2022-11-30 10:47:17 +00:00
Outdated
Review
Copy Link

Nombre incorrecto

Nombre incorrecto
meta: {
title: 'invoiceOuts',
icon: 'vn:invoice-out'
},
component: RouterView,
redirect: { name: 'InvoiceOutMain' },
children: [
{
path: '',
name: 'InvoiceOutMain',
component: () => import('src/pages/InvoiceOut/InvoiceOutMain.vue'),
redirect: { name: 'InvoiceOutList' },
children: [
{
path: 'list',
name: 'InvoiceOutList',
meta: {
title: 'list',
icon: 'view_list',
},
component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
}
]
},
{
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'),
}
]
},
]
};

4
src/router/routes.js
View File

@ -1,6 +1,7 @@
import customer from './modules/customer';
import ticket from './modules/ticket';
import claim from './modules/claim';
import invoiceOut from './modules/invoiceOut';
const routes = [
{
@ -25,6 +26,7 @@ const routes = [
customer,
ticket,
claim,
invoiceOut,
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
@ -34,4 +36,4 @@ const routes = [
}
];
export default routes;
export default routes;