WIP

src/i18n/en/index.js

@@ -531,6 +531,7 @@ export default {
             company: 'Company',
             dued: 'Due date',
             shortDued: 'Due date',
+            amount: 'Amount',
         },
         card: {
             issued: 'Issued',

src/i18n/es/index.js

@@ -531,6 +531,7 @@ export default {
             company: 'Empresa',
             dued: 'Fecha vencimineto',
             shortDued: 'F. vencimiento',
+            amount: 'Importe',
         },
         card: {
             issued: 'Fecha emisión',

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -2,11 +2,15 @@
 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 CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+
 import { getUrl } from 'src/composables/getUrl';
+import { toCurrency, toDate } from 'src/filters';
+import axios from 'axios';
 
 onMounted(async () => {
     fetch();
@@ -66,30 +70,34 @@ const taxColumns = ref([
 
 const ticketsColumns = ref([
     {
-        name: 'item',
+        name: 'id',
-        label: 'invoiceOut.summary.ticketId',
+        label: t('invoiceOut.summary.ticketId'),
         field: (row) => row.id,
         sortable: true,
+        align: 'left',
     },
     {
-        name: 'quantity',
+        name: 'alias',
-        label: 'invoiceOut.summary.nickname',
+        label: t('invoiceOut.summary.nickname'),
         field: (row) => row.nickname,
         sortable: true,
+        align: 'left',
     },
     {
         name: 'landed',
-        label: 'invoiceOut.summary.shipped',
+        label: t('invoiceOut.summary.shipped'),
         field: (row) => row.shipped,
         format: (value) => toDate(value),
         sortable: true,
+        align: 'left',
     },
     {
         name: 'landed',
-        label: 'invoiceOut.summary.totalWithVat',
+        label: t('invoiceOut.summary.totalWithVat'),
         field: (row) => row.totalWithVat,
         format: (value) => toCurrency(value),
         sortable: true,
+        align: 'left',
     },
 ]);
 </script>
@@ -139,17 +147,22 @@ const ticketsColumns = ref([
                     </template>
                 </QTable>
             </QCard>
-            <QCard class="vn-three">
+            <QCard class="vn-max">
                 <div class="header">
                     {{ t('invoiceOut.summary.tickets') }}
                 </div>
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
-                    <template #header="props">
+                    <template #body-cell-id="{ row }">
-                        <QTr :props="props">
+                        <QTd>
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                            <QBtn flat dense color="blue"> {{ row.id }}</QBtn>
-                                {{ t(col.label) }}
+                            <TicketDescriptorProxy :id="row.id" />
-                            </QTh>
+                        </QTd>
-                        </QTr>
+                    </template>
+                    <template #body-cell-alias="{ row }">
+                        <QTd>
+                            <QBtn flat dense color="blue"> {{ row.nickname }}</QBtn>
+                            <CustomerDescriptorProxy :id="row.clientFk" />
+                        </QTd>
                     </template>
                 </QTable>
             </QCard>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,17 +1,20 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { exportFile, useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
-import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
+
+import InvoiceOutFilter from './InvoiceOutFilter.vue';
+import { toDate, toCurrency } from 'src/filters/index';
+import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const selectedCards = ref(new Map());
@@ -139,39 +142,7 @@ const downloadCsv = () => {
                             :disable="selectedCards.size === 0"
                             :label="t('globals.download')"
                         />
-                        <!-- <QBtnDropdown
-                            class="q-mr-xl"
-                            color="primary"
-                            :disable="!manageCheckboxes && arrayElements.length < 1"
-                            :label="t('globals.download')"
-                            v-else
-                        >
-                            <QList>
-                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{
-                                                t('globals.allRows', {
-                                                    numberRows: rows.length,
-                                                })
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
 
-                                <QItem clickable v-close-popup @click="downloadCsv(rows)">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{
-                                                t('globals.selectRows', {
-                                                    numberRows: rows.length,
-                                                })
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </QList>
-                        </QBtnDropdown> -->
                         <QCheckbox
                             left-label
                             :label="t('globals.markAll')"
@@ -196,18 +167,24 @@ const downloadCsv = () => {
                         >
                             <template #list-items>
                                 <VnLv
-                                    :label="t('invoiceOut.list.shortIssued')"
+                                    :label="t('invoiceOut.list.amount')"
-                                    :title-label="t('invoiceOut.list.issued')"
                                     :value="toDate(row.issued)"
                                 />
                                 <VnLv
                                     :label="t('invoiceOut.list.amount')"
                                     :value="toCurrency(row.amount)"
                                 />
-                                <VnLv
+
-                                    :label="t('invoiceOut.list.client')"
+                                <VnLv :label="t('invoiceOut.list.client')">
-                                    :value="row.clientSocialName"
+                                    <template #value>
+                                        <span class="link" @click.stop>
+                                            {{ row?.clientSocialName }}
+                                            <CustomerDescriptorProxy
+                                                :id="row?.clientFk"
                                             />
+                                        </span>
+                                    </template>
+                                </VnLv>
                                 <VnLv
                                     :label="t('invoiceOut.list.shortCreated')"
                                     :title-label="t('invoiceOut.list.created')"
@@ -224,13 +201,6 @@ const downloadCsv = () => {
                                 />
                             </template>
                             <template #actions>
-                                <QBtn
-                                    :label="t('components.smartCard.openCard')"
-                                    @click.stop="navigate(row.id)"
-                                    class="bg-vn-dark"
-                                    outline
-                                    type="reset"
-                                />
                                 <QBtn
                                     :label="t('components.smartCard.openSummary')"
                                     @click.stop="viewSummary(row.id)"

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -1,17 +1,17 @@
 <script setup>
 import { ref, computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QCheckbox, QBtn } from 'quasar';
 
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 
 import { toCurrency } from 'src/filters';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 const stateStore = useStateStore();
@@ -47,76 +47,6 @@ onBeforeMount(async () => {
 
 const rows = computed(() => arrayData.value.store.data);
 
-const selectedCustomerId = ref(0);
-const selectedWorkerId = ref(0);
-
-const tableColumnComponents = {
-    company: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    country: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    clientId: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => selectCustomerId(prop.value),
-    },
-    client: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    amount: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    base: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    ticketId: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    active: {
-        component: QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-        event: () => {},
-    },
-    hasToInvoice: {
-        component: QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-        event: () => {},
-    },
-    verifiedData: {
-        component: QCheckbox,
-        props: (prop) => ({
-            disable: true,
-            'model-value': Boolean(prop.value),
-        }),
-        event: () => {},
-    },
-    comercial: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => selectWorkerId(prop.row.comercialId),
-    },
-};
-
 const columns = computed(() => [
     {
         label: t('invoiceOut.negativeBases.company'),
@@ -205,14 +135,6 @@ const downloadCSV = async () => {
         params
     );
 };
-
-const selectCustomerId = (id) => {
-    selectedCustomerId.value = id;
-};
-
-const selectWorkerId = (id) => {
-    selectedWorkerId.value = id;
-};
 </script>
 
 <template>
@@ -236,31 +158,22 @@ const selectWorkerId = (id) => {
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
         >
-            <template #body-cell="props">
+            <template #body-cell-clientId="{ row }">
-                <QTd :props="props">
+                <QTd>
-                    <component
+                    <QBtn flat dense color="blue"> {{ row.clientId }}</QBtn>
-                        :is="tableColumnComponents[props.col.name].component"
+                    <CustomerDescriptorProxy :id="row.clientId" />
-                        class="col-content"
+                </QTd>
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        <template
-                            v-if="
-                                props.col.name !== 'active' &&
-                                props.col.name !== 'hasToInvoice' &&
-                                props.col.name !== 'verifiedData'
-                            "
-                            >{{ props.value }}
             </template>
-                        <CustomerDescriptorProxy
+            <template #body-cell-ticketId="{ row }">
-                            v-if="props.col.name === 'clientId'"
+                <QTd>
-                            :id="selectedCustomerId"
+                    <QBtn flat dense color="blue"> {{ row.ticketFk }}</QBtn>
-                        />
+                    <TicketDescriptorProxy :id="row.ticketFk" />
-                        <VnUserLink
+                </QTd>
-                            v-if="props.col.name === 'comercial'"
+            </template>
-                            :worker-id="selectedWorkerId"
+            <template #body-cell-comercial="{ row }">
-                        />
+                <QTd>
-                    </component>
+                    <QBtn flat dense color="blue">{{ row.comercialName }}</QBtn>
+                    <WorkerDescriptorProxy :id="row.comercialId" />
                 </QTd>
             </template>
         </QTable>