From 62a806b813160c401c530ad0d1a1ec1303a2ca95 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 Nov 2023 09:07:44 -0300
Subject: [PATCH] WIP

---
 src/i18n/en/index.js                          |   1 +
 src/i18n/es/index.js                          |   1 +
 src/pages/InvoiceOut/InvoiceOutGlobalForm.vue |   3 +-
 src/pages/Travel/ExtraCommunity.vue           | 445 ++++++++++++++++++
 src/router/modules/travel.js                  |  14 +-
 5 files changed, 460 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Travel/ExtraCommunity.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 743977f42..59847c908 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -627,6 +627,7 @@ export default {
             list: 'List',
             create: 'Create',
             summary: 'Summary',
+            extraCommunity: 'ExtraCommunity',
         },
         list: {
             clone: 'Clone',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 431553d79..e9dbe53ae 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -629,6 +629,7 @@ export default {
             list: 'Listado',
             create: 'Crear',
             summary: 'Resumen',
+            extraCommunity: 'ExtraCommunity',
         },
         list: {
             clone: 'Clonar',
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index be1a65f59..7ea3af713 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -16,12 +16,11 @@ const {
     formInitialData,
 
     invoicing,
-    printer,
     status,
 } = storeToRefs(invoiceOutGlobalStore);
 
 // invoiceOutGlobalStore actions
-const { makeInvoice, setPrinterValue, setStatusValue } = invoiceOutGlobalStore;
+const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
 
 const clientsToInvoice = ref('all');
 
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
new file mode 100644
index 000000000..3d57ece75
--- /dev/null
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -0,0 +1,445 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+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 { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
+import { toDate } from 'src/filters';
+
+// const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+
+const rows = ref([]);
+const { t } = useI18n();
+
+// const dateRange = reactive({
+//     from: Date.vnFirstDayOfMonth(),
+//     to: Date.vnLastDayOfMonth(),
+// });
+
+// const selectedCustomerId = ref(0);
+// const selectedWorkerId = ref(0);
+
+const filter = ref({
+    company: null,
+    country: null,
+    clientId: null,
+    client: null,
+    amount: null,
+    base: null,
+    ticketId: null,
+    active: null,
+    hasToInvoice: null,
+    verifiedData: null,
+    comercial: null,
+});
+
+const tableColumnComponents = {
+    id: {
+        component: QBtn,
+        props: {},
+        event: () => {},
+    },
+    supplierName: {
+        component: QBtn,
+        props: {},
+        event: () => {},
+    },
+    agencyModeName: {
+        component: 'span',
+        props: {},
+        event: () => {},
+        // 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: 'span',
+        props: { type: 'boolean' },
+        event: () => {},
+    },
+    hasToInvoice: {
+        component: 'span',
+        props: { type: 'boolean' },
+        event: () => {},
+    },
+    verifiedData: {
+        component: 'span',
+        props: { type: 'boolean' },
+        event: () => {},
+    },
+    comercial: {
+        component: QBtn,
+        props: { flat: true, color: 'blue' },
+        // event: (prop) => selectWorkerId(prop.row.comercialId),
+        event: (prop) => {},
+    },
+};
+
+const columns = ref([
+    {
+        label: 'id',
+        field: 'id',
+        name: 'id',
+        align: 'left',
+    },
+    {
+        label: 'cargoSupplierFk',
+        field: 'cargoSupplierFk',
+        name: 'cargoSupplierFk',
+        align: 'left',
+    },
+    {
+        label: 'agencyModeFk',
+        field: 'agencyModeFk',
+        name: 'agencyModeFk',
+        align: 'left',
+    },
+    {
+        label: 'invoiceAmount',
+        field: 'invoiceAmount',
+        name: 'invoiceAmount',
+        align: 'left',
+    },
+    {
+        label: 'ref',
+        field: 'ref',
+        name: 'ref',
+        align: 'left',
+        // format: (value) => toCurrency(value),
+    },
+    {
+        label: 'stickers',
+        field: 'stickers',
+        name: 'stickers',
+        align: 'left',
+    },
+    {
+        label: 'ticketId',
+        field: 'ticketFk',
+        name: 'ticketId',
+        align: 'left',
+    },
+    {
+        label: 'active',
+        field: 'isActive',
+        name: 'active',
+        align: 'left',
+    },
+    {
+        label: 'hasToInvoice',
+        field: 'hasToInvoice',
+        name: 'hasToInvoice',
+        align: 'left',
+    },
+    {
+        label: 'verifiedData',
+        field: 'isTaxDataChecked',
+        name: 'verifiedData',
+        align: 'left',
+    },
+    {
+        label: 'comercial',
+        field: 'comercialName',
+        name: 'comercial',
+        align: 'left',
+    },
+]);
+
+// const downloadCSV = async () => {
+//     invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+// };
+
+// const search = async () => {
+//     const and = [];
+//     Object.keys(filter.value).forEach((key) => {
+//         if (filter.value[key]) {
+//             and.push({
+//                 [key]: filter.value[key],
+//             });
+//         }
+//     });
+
+//     const params = {
+//         ...dateRange,
+//         filter: {
+//             limit: 20,
+//             where: { and },
+//         },
+//     };
+//     rows.value = await invoiceOutService.getNegativeBases(params);
+// };
+
+// const refresh = () => {
+//     dateRange.from = Date.vnFirstDayOfMonth();
+//     dateRange.to = Date.vnLastDayOfMonth();
+//     filter.value = {
+//         company: null,
+//         country: null,
+//         clientId: null,
+//         client: null,
+//         amount: null,
+//         base: null,
+//         ticketId: null,
+//         active: null,
+//         hasToInvoice: null,
+//         verifiedData: null,
+//         comercial: null,
+//     };
+//     search();
+// };
+
+// const selectCustomerId = (id) => {
+//     selectedCustomerId.value = id;
+// };
+
+// const selectWorkerId = (id) => {
+//     selectedWorkerId.value = id;
+// };
+
+onMounted(async () => {
+    // refresh();
+});
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            row-key="clientId"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #top-left>
+                <div class="row justify-start items-end">
+                    <QInput
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                        placeholder="dd-mm-aaa"
+                        :label="t('invoiceOut.negativeBases.from')"
+                        class="q-mr-md q"
+                        :model-value="toDate(dateRange.from)"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="dateRange.from">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                    <QInput
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                        placeholder="dd-mm-aaa"
+                        :label="t('invoiceOut.negativeBases.to')"
+                        class="q-mr-md q"
+                        :model-value="toDate(dateRange.to)"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="dateRange.to">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+                    <QBtn
+                        color="primary"
+                        icon-right="archive"
+                        no-caps
+                        @click="downloadCSV()"
+                    />
+                </div>
+            </template>
+            <template #top-right>
+                <div class="row justify-start items-center">
+                    <span class="q-mr-md text-grey-7">
+                        {{ rows.length }} {{ t('results') }}
+                    </span>
+                    <QBtn
+                        color="primary"
+                        icon-right="search"
+                        no-caps
+                        class="q-mr-sm"
+                        @click="search"
+                    />
+                    <QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
+                </div>
+            </template>
+            <template #header="props">
+                <QTr :props="props" class="full-height">
+                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                        <div class="column justify-start items-start full-height">
+                            {{ t(`invoiceOut.negativeBases.${col.label}`) }}
+                            <QInput
+                                :disable="
+                                    [
+                                        'isActive',
+                                        'hasToInvoice',
+                                        'isTaxDataChecked',
+                                    ].includes(col.field)
+                                "
+                                :borderless="
+                                    [
+                                        'isActive',
+                                        'hasToInvoice',
+                                        'isTaxDataChecked',
+                                    ].includes(col.field)
+                                "
+                                dense
+                                standout
+                                v-model="filter[col.field]"
+                                type="text"
+                            />
+                        </div>
+                    </QTh>
+                </QTr>
+            </template>
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        <span
+                            v-if="
+                                tableColumnComponents[props.col.name].props.type !=
+                                'boolean'
+                            "
+                        >
+                            {{ 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"
+                        />
+                        <WorkerDescriptorProxy
+                            v-if="props.col.name === 'comercial'"
+                            :id="selectedWorkerId"
+                        />
+                    </component>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: #292929;
+    padding: 16px;
+
+    .card-section {
+        display: flex;
+        flex-direction: column;
+        padding: 0px;
+    }
+
+    .status-text {
+        font-size: 14px;
+        color: #eeeeee;
+    }
+
+    .text {
+        font-size: 14px;
+        color: #aaaaaa;
+    }
+}
+
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+</style>
+
+<i18n>
+   {
+        "en": {
+            "status": {
+                "packageInvoicing": "Build packaging tickets",
+                "invoicing": "Invoicing client",
+                "stopping": "Stopping process",
+                "done": "Ended process"
+            },
+            "of": "of"
+        },
+        "es": {
+            "status":{
+                "packageInvoicing": "Generación de tickets de empaque",
+                "invoicing": "Facturando a cliente",
+                "stopping": "Deteniendo proceso",
+                "done": "Proceso detenido",
+            },
+            "of": "de"
+        }
+    }
+</i18n>
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index 9ba10380e..ebce7adb9 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'TravelMain' },
     menus: {
-        main: ['TravelList'],
+        main: ['TravelList', 'ExtraCommunity'],
         card: [],
     },
     children: [
@@ -29,11 +29,21 @@ export default {
                     },
                     component: () => import('src/pages/Travel/TravelList.vue'),
                 },
+                {
+                    path: 'extra-community',
+                    name: 'ExtraCommunity',
+                    meta: {
+                        title: 'extraCommunity',
+                        icon: 'vn:shipment-01',
+                    },
+                    component: () => import('src/pages/Travel/ExtraCommunity.vue'),
+                },
                 {
                     path: 'create',
                     name: 'TravelCreate',
                     meta: {
-                        title: 'create',
+                        title: 'extraCommunity',
+                        icon: '',
                     },
                     component: () => import('src/pages/Travel/TravelCreate.vue'),
                 },