[WIP] global invoices

package-lock.json

@@ -1,14 +1,14 @@
 {
     "name": "salix-front",
-    "version": "23.40.01",
+    "version": "23.48.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "salix-front",
-            "version": "0.0.1",
+            "version": "23.48.01",
             "dependencies": {
-                "@quasar/cli": "^2.2.1",
+                "@quasar/cli": "^2.3.0",
                 "@quasar/extras": "^1.16.4",
                 "axios": "^1.4.0",
                 "chromium": "^3.0.3",
@@ -946,9 +946,9 @@
             }
         },
         "node_modules/@quasar/cli": {
-            "version": "2.2.1",
+            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.2.1.tgz",
+            "resolved": "https://registry.npmjs.org/@quasar/cli/-/cli-2.3.0.tgz",
-            "integrity": "sha512-PMwJ76IeeNRRBw+08hUMjhqGC6JKJ/t1zIb+IOiyR5D4rkBR26Ha/Z46OD3KfwUprq4Q8s4ieB1+d3VY8FhPKg==",
+            "integrity": "sha512-DNFDemicj3jXe5+Ib+5w9Bwj1U3yoHQkqn0bU/qysIl/p0MmGA1yqOfUF0V4fw/5or1dfCvStIA/oZxUcC+2pQ==",
             "dependencies": {
                 "@quasar/ssl-certificate": "^1.0.0",
                 "ci-info": "^3.8.0",

src/composables/useState.js

@@ -8,6 +8,7 @@ const user = ref({
     nickname: '',
     lang: '',
     darkMode: null,
+    companyFk: null,
 });
 
 const roles = ref([]);
@@ -23,6 +24,7 @@ export function useState() {
                 nickname: user.value.nickname,
                 lang: user.value.lang,
                 darkMode: user.value.darkMode,
+                companyFk: user.value.companyFk,
             };
         });
     }
@@ -34,6 +36,7 @@ export function useState() {
             nickname: data.nickname,
             lang: data.lang,
             darkMode: data.darkMode,
+            companyFk: data.companyFk,
         };
     }
 
@@ -59,7 +62,6 @@ export function useState() {
         delete state.value[name];
     }
 
-
     return {
         getUser,
         setUser,
@@ -69,6 +71,6 @@ export function useState() {
         get,
         unset,
         drawer,
-        headerMounted
+        headerMounted,
     };
 }

src/composables/useUserConfig.js

@@ -5,10 +5,17 @@ export function useUserConfig() {
     const state = useState();
 
     async function fetch() {
+        try {
             const { data } = await axios.get('UserConfigs/getUserConfig');
             const user = state.getUser().value;
             user.darkMode = data.darkMode;
+            user.companyFk = data.companyFk;
             state.setUser(user);
+
+            return data;
+        } catch (error) {
+            console.error('Error fetching user config:', error);
+        }
     }
 
     return {

src/i18n/en/index.js

@@ -348,6 +348,7 @@ export default {
         pageTitles: {
             invoiceOuts: 'Invoices Out',
             list: 'List',
+            globalInvoicing: 'Global invoicing',
             createInvoiceOut: 'Create invoice out',
             summary: 'Summary',
             basicData: 'Basic Data',

src/i18n/es/index.js

@@ -348,6 +348,7 @@ export default {
         pageTitles: {
             invoiceOuts: 'Fact. emitidas',
             list: 'Listado',
+            globalInvoicing: 'Facturación global',
             createInvoiceOut: 'Crear fact. emitida',
             summary: 'Resumen',
             basicData: 'Datos básicos',

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+
+import InvoiceOutGlobalForm from './InvoiceOutGlobalForm.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+
+onMounted(() => (stateStore.rightDrawer = true));
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <InvoiceOutGlobalForm />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md"> Aca iria una tabla </QPage>
+</template>
+
+<style lang="scss" scoped></style>
+
+<!-- <i18n>
+es:
+    Search invoice: Buscar factura emitida
+    You can search by invoice reference: Puedes buscar por referencia de la factura
+</i18n> -->

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import invoiceOutService from 'src/services/InvoiceOut.service.js';
+import { useUserConfig } from 'src/composables/useUserConfig';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const formData = ref({
+    companyFk: null,
+    invoiceDate: null,
+    maxShipped: null,
+    clientId: null,
+    printer: null,
+});
+const parallelismVal = ref();
+const clients = ref('all');
+const initialLoading = ref(true);
+const companiesOptions = ref([]);
+const printersOptions = ref([]);
+const clientsOptions = ref([]);
+const filteredClientsOptions = ref([]);
+
+onMounted(async () => {
+    const date = Date.vnNew();
+    const userInfo = await useUserConfig().fetch();
+    formData.value.maxShipped = new Date(date.getFullYear(), date.getMonth(), 0)
+        .toISOString()
+        .substring(0, 10);
+
+    await Promise.all([
+        fetchClients(),
+        fetchParallelism(),
+        fetchCompanies(userInfo.companyFk),
+        fetchPrinters(),
+        fetchInvoiceOutConfig(userInfo.companyFk),
+    ]);
+
+    initialLoading.value = false;
+});
+
+// Estos methods de fetch idealmente deberían ir en un store
+
+const fetchClients = async () => {
+    const clientsFilter = { fields: ['id', 'name'], order: 'id', limit: 30 };
+    const clientsResponse = await invoiceOutService.getClients(clientsFilter);
+    clientsOptions.value = clientsResponse.map((client) => {
+        return { value: client.id, label: client.name };
+    });
+};
+
+const fetchCompanies = async (companyFk) => {
+    const companiesFilters = { order: ['code'] };
+    const companiesResponse = await invoiceOutService.getCompanies(companiesFilters);
+    companiesOptions.value = companiesResponse.map((company) => {
+        return { value: company.id, label: company.code };
+    });
+
+    formData.value.companyFk = companiesOptions.value.find(
+        (company) => companyFk === company.value
+    );
+};
+
+const fetchPrinters = async () => {
+    const printersFilters = {
+        fields: ['id', 'name'],
+        where: { isLabeler: false },
+        order: 'name ASC',
+        limit: 30,
+    };
+    const printersResponse = await invoiceOutService.getPrinters(printersFilters);
+    printersOptions.value = printersResponse.map((printer) => {
+        return { value: printer.id, label: printer.name };
+    });
+};
+
+const fetchInvoiceOutConfig = async (companyFk) => {
+    const params = { companyFk: companyFk };
+    const { issued } = await invoiceOutService.getInvoiceOutConfig(
+        'InvoiceOuts/getInvoiceDate',
+        params
+    );
+    formData.value.invoiceDate = issued
+        ? new Date(issued).toISOString().substring(0, 10)
+        : null;
+};
+
+const fetchParallelism = async () => {
+    const filter = { fields: ['parallelism'] };
+    const { parallelism } = await invoiceOutService.getInvoiceOutConfig(
+        'InvoiceOutConfigs/findOne',
+        filter
+    );
+    parallelismVal.value = parallelism;
+    console.log('parallelism.value:: ', parallelismVal.value);
+};
+
+const inputSelectfilter = (val, update) => {
+    if (val === '') {
+        update(() => {
+            filteredClientsOptions.value = JSON.parse(
+                JSON.stringify(clientsOptions.value)
+            );
+        });
+        return;
+    }
+
+    update(() => {
+        const searchQuery = val.toLowerCase();
+        filteredClientsOptions.value = clientsOptions.value.filter(
+            (option) => option.label.toLowerCase().indexOf(searchQuery) > -1
+        );
+    });
+};
+
+const makeInvoice = () => {};
+</script>
+
+<template>
+    <QForm v-if="!initialLoading" @submit="makeInvoice()" class="q-pa-md text-white">
+        <div class="q-gutter-md">
+            <QRadio
+                v-model="clients"
+                dense
+                val="all"
+                :label="t('allClients')"
+                :dark="true"
+            />
+            <QRadio
+                v-model="clients"
+                dense
+                val="one"
+                :label="t('oneClient')"
+                :dark="true"
+            />
+            <QSelect
+                v-if="clients === 'one'"
+                :options="filteredClientsOptions"
+                v-model="formData.clientId"
+                filled
+                use-input
+                :label="t('client')"
+                @filter="inputSelectfilter"
+                transition-show="jump-up"
+                transition-hide="jump-up"
+            />
+            <QInput
+                v-model="formData.invoiceDate"
+                type="date"
+                filled
+                mask="date"
+                :label="t('invoiceDate')"
+            />
+            <QInput
+                v-model="formData.maxShipped"
+                type="date"
+                filled
+                mask="date"
+                :label="t('maxShipped')"
+            />
+            <QSelect
+                filled
+                :options="companiesOptions"
+                v-model="formData.companyFk"
+                :label="t('company')"
+                transition-show="jump-up"
+                transition-hide="jump-up"
+            />
+            <QSelect
+                filled
+                :options="printersOptions"
+                v-model="formData.printer"
+                :label="t('printer')"
+                transition-show="jump-up"
+                transition-hide="jump-up"
+            />
+        </div>
+        <QBtn
+            :label="t('invoiceOut')"
+            type="submit"
+            color="primary"
+            class="full-width q-mt-md"
+            unelevated
+            rounded
+            dense
+        />
+    </QForm>
+</template>
+
+<i18n>
+    {
+        "en": {
+            "invoiceDate": "Invoice date",
+            "maxShipped": "Max date",
+            "allClients": "All clients",
+            "oneClient": "One client",
+            "company": "Company",
+            "printer": "Printer",
+            "invoiceOut": "Invoice out",
+            "client": "Client"
+        },
+        "es": {
+            "invoiceDate": "Fecha de factura",
+            "maxShipped": "Fecha límite",
+            "allClients": "Todos los clientes",
+            "oneClient": "Un solo cliente",
+            "company": "Empresa",
+            "printer": "Impresora",
+            "invoiceOut": "Facturar",
+            "client": "Cliente"
+
+        }
+    }
+</i18n>

src/router/modules/invoiceOut.js

@@ -5,12 +5,12 @@ export default {
     name: 'InvoiceOut',
     meta: {
         title: 'invoiceOuts',
-        icon: 'vn:invoice-out'
+        icon: 'vn:invoice-out',
     },
     component: RouterView,
     redirect: { name: 'InvoiceOutMain' },
     menus: {
-        main: ['InvoiceOutList'],
+        main: ['InvoiceOutList', 'InvoiceOutGlobal'],
         card: [],
     },
     children: [
@@ -28,8 +28,17 @@ export default {
                         icon: 'view_list',
                     },
                     component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
-                }
+                },
-            ]
+                {
+                    path: 'global-invoicing',
+                    name: 'InvoiceOutGlobal',
+                    meta: {
+                        title: 'globalInvoicing',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/InvoiceOut/InvoiceOutGlobal.vue'),
+                },
+            ],
         },
         {
             name: 'InvoiceOutCard',
@@ -41,11 +50,12 @@ export default {
                     name: 'InvoiceOutSummary',
                     path: 'summary',
                     meta: {
-                        title: 'summary'
+                        title: 'summary',
                     },
-                    component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
+                    component: () =>
-                }
+                        import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
-            ]
                 },
-    ]
+            ],
+        },
+    ],
 };

src/services/InvoiceOut.service.js

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+const invoiceOutService = {
+    getInvoiceOutConfig: async (path = '', params) => {
+        try {
+            const { data } = await axios.get(path, {
+                params,
+            });
+
+            return data;
+        } catch (err) {
+            console.error('Error fetching invoice date');
+        }
+    },
+
+    getCompanies: async (filter) => {
+        try {
+            const { data } = await axios.get('Companies', {
+                filter,
+            });
+
+            return data;
+        } catch (err) {
+            console.error('Error fetching companies');
+        }
+    },
+
+    getPrinters: async (filter) => {
+        try {
+            const { data } = await axios.get('Printers', {
+                filter,
+            });
+
+            return data;
+        } catch (err) {
+            console.error('Error fetching printers');
+        }
+    },
+
+    getClients: async (filter) => {
+        try {
+            const { data } = await axios.get('Clients', {
+                filter,
+            });
+
+            return data;
+        } catch (err) {
+            console.error('Error fetching clients');
+        }
+    },
+};
+
+export default invoiceOutService;