src/i18n/en/index.js

@@ -257,6 +257,7 @@ export default {
             deliveryManList: 'Delivery Men',
             basicData: 'Basic Data',
             deliveryManCreate: 'Create Delivery Man',
+            invoiceAllocation: 'Invoice Allocation',
         },
         deliveryMan: {
             list: {

src/i18n/es/index.js

@@ -256,6 +256,7 @@ export default {
             deliveryManList: 'Repartidores',
             basicData: 'Datos básicos',
             deliveryManCreate: 'Crear Repartidor',
+            invoiceAllocation: 'Imputación Facturas',
         },
         deliveryMan: {
             list: {

src/pages/Route/DeliveryManCreate.vue

@@ -1,44 +1,126 @@
 <script setup>
 import axios from 'axios';
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+
+const { t } = useI18n();
 
 const deliveryMan = reactive({
     supplierFk: null,
-    agencyMode: null,
+    agencyModeFk: null,
     minCost: null,
     minM3: null,
 });
 
+const suppliers = ref([]);
+const agencyModes = ref([]);
+
+function setSuppliers(data) {
+    suppliers.value = data;
+}
+
+function setAgencyModes(data) {
+    agencyModes.value = data;
+}
+
 async function onSubmit() {
-    await axios.post('DeliveryMans', {
+    try {
-        supplierFk: deliveryMan.supplierFk,
+        const newDeliveryMan = await axios.post('DeliveryMans', {
-        minCost: deliveryMan.minCost,
+            supplierFk: deliveryMan.supplierFk,
-        minM3: deliveryMan.minM3,
+            minCost: deliveryMan.minCost,
-    });
+            minM3: deliveryMan.minM3,
+        });
+
+        if (deliveryMan.agencyModeFk) {
+            await axios.post(`DeliveryManAgencys/${newDeliveryMan.id}`, {
+                agencyModeFk: deliveryMan.agencyMode,
+            });
+        }
+    } catch (e) {
+        console.error(e);
+    }
 }
 </script>
 
 <template>
-    <q-page class="q-pa-md">
+    <fetch-data url="Suppliers" @on-fetch="setSuppliers" auto-load />
+    <fetch-data url="AgencyModes" @on-fetch="setAgencyModes" auto-load />
+    <div class="container">
         <q-card class="q-pa-md">
             <q-banner v-if="hasChanges" class="text-white bg-warning">
                 <q-icon name="warning" size="md" class="q-mr-md" />
                 <span>{{ t('globals.changesToSave') }}</span>
             </q-banner>
             <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
-                <q-input filled v-model="deliveryMan.minCost" label="Your name *" lazy-rules />
+                <div class="row q-gutter-md q-mb-md">
-                <div>
+                    <div class="col">
-                    <q-btn label="Submit" type="submit" color="primary" />
+                        <q-input
-                    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+                            filled
+                            v-model="deliveryMan.minCost"
+                            :label="t('route.deliveryMan.basicData.minCost')"
+                            :rules="[(val) => val > 0]"
+                            lazy-rules
+                        />
+                    </div>
+                    <div class="col">
+                        <q-input
+                            filled
+                            v-model="deliveryMan.minM3"
+                            :label="t('route.deliveryMan.basicData.minM3')"
+                            :rules="[(val) => val > 0]"
+                            lazy-rules
+                        />
+                    </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-select
+                            v-model="deliveryMan.supplierFk"
+                            :options="suppliers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            :label="t('route.deliveryMan.basicData.supplier')"
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                        </q-select>
+                    </div>
+                    <div class="col">
+                        <q-select
+                            v-model="deliveryMan.agencyModeFk"
+                            :options="agencyModes"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            :label="t('route.deliveryMan.basicData.agency')"
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                        </q-select>
+                    </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-btn label="Submit" type="submit" color="primary" />
+                        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+                    </div>
                 </div>
             </q-form>
         </q-card>
-    </q-page>
+    </div>
 </template>
 
 <style lang="scss" scoped>
-.card {
+.q-card {
-    width: 100%;
+    width: 800px;
-    max-width: 60em;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
 }
 </style>

src/pages/Route/DeliveryManList.vue

@@ -22,9 +22,13 @@ const filter = {
     ],
 };
 
-function navigate(id) {
+function navigateCard(id) {
     router.push({ path: `/route/${id}` });
 }
+
+function navigateCreate() {
+    router.push({ path: `/route/deliveryMan/create` });
+}
 </script>
 
 <template>
@@ -33,7 +37,7 @@ function navigate(id) {
             <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)">
+                        <q-item-section class="q-pa-md" @click="navigateCard(row.id)">
                             <div class="text-h6 link">{{ t('route.deliveryMan.list.deliveryMan') }}</div>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
@@ -63,7 +67,7 @@ function navigate(id) {
                         </q-item-section>
                         <q-separator vertical />
                         <q-card-actions vertical>
-                            <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
+                            <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigateCard(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                             </q-btn>
                         </q-card-actions>
@@ -71,7 +75,8 @@ function navigate(id) {
                 </q-card>
             </template>
         </paginate>
-        <q-page-sticky position="bottom-right" :offset="[18, 18]">
+        <q-page-sticky position="bottom-right" :offset="[18, 18]" @click="navigateCreate()"
+            ><q-tooltip>{{ t('route.pageTitles.deliveryManCreate') }}</q-tooltip>
             <q-fab icon="person_add" direction="up" color="orange"> </q-fab>
         </q-page-sticky>
     </q-page>

src/pages/Route/InvoiceAllocation.vue

@@ -0,0 +1,126 @@
+<script setup>
+import axios from 'axios';
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'components/FetchData.vue';
+
+const { t } = useI18n();
+
+const deliveryMan = reactive({
+    supplierFk: null,
+    agencyModeFk: null,
+    minCost: null,
+    minM3: null,
+});
+
+const suppliers = ref([]);
+const agencyModes = ref([]);
+
+function setSuppliers(data) {
+    suppliers.value = data;
+}
+
+function setAgencyModes(data) {
+    agencyModes.value = data;
+}
+
+async function onSubmit() {
+    try {
+        const newDeliveryMan = await axios.post('DeliveryMans', {
+            supplierFk: deliveryMan.supplierFk,
+            minCost: deliveryMan.minCost,
+            minM3: deliveryMan.minM3,
+        });
+
+        if (deliveryMan.agencyModeFk) {
+            await axios.post(`DeliveryManAgencys/${newDeliveryMan.id}`, {
+                agencyModeFk: deliveryMan.agencyMode,
+            });
+        }
+    } catch (e) {
+        console.error(e);
+    }
+}
+</script>
+
+<template>
+    <fetch-data url="Suppliers" @on-fetch="setSuppliers" auto-load />
+    <fetch-data url="AgencyModes" @on-fetch="setAgencyModes" auto-load />
+    <div class="container">
+        <q-card class="q-pa-md">
+            <q-banner v-if="hasChanges" class="text-white bg-warning">
+                <q-icon name="warning" size="md" class="q-mr-md" />
+                <span>{{ t('globals.changesToSave') }}</span>
+            </q-banner>
+            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-input
+                            filled
+                            v-model="deliveryMan.minCost"
+                            :label="t('route.deliveryMan.basicData.minCost')"
+                            :rules="[(val) => val > 0]"
+                            lazy-rules
+                        />
+                    </div>
+                    <div class="col">
+                        <q-input
+                            filled
+                            v-model="deliveryMan.minM3"
+                            :label="t('route.deliveryMan.basicData.minM3')"
+                            :rules="[(val) => val > 0]"
+                            lazy-rules
+                        />
+                    </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-select
+                            v-model="deliveryMan.supplierFk"
+                            :options="suppliers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            :label="t('route.deliveryMan.basicData.supplier')"
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                        </q-select>
+                    </div>
+                    <div class="col">
+                        <q-select
+                            v-model="deliveryMan.agencyModeFk"
+                            :options="agencyModes"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            :label="t('route.deliveryMan.basicData.agency')"
+                            map-options
+                            use-input
+                            :input-debounce="0"
+                        >
+                        </q-select>
+                    </div>
+                </div>
+                <div class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <q-btn label="Submit" type="submit" color="primary" />
+                        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+                    </div>
+                </div>
+            </q-form>
+        </q-card>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.q-card {
+    width: 800px;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+}
+</style>

src/router/modules/route.js

@@ -34,6 +34,15 @@ export default {
                     },
                     component: () => import('src/pages/Route/DeliveryManCreate.vue'),
                 },
+                {
+                    name: 'InvoiceAllocation',
+                    path: '/invoiceAllocation',
+                    meta: {
+                        title: 'invoiceAllocation',
+                        icon: 'vn:invoice-in',
+                    },
+                    component: () => import('src/pages/Route/InvoiceAllocation.vue'),
+                },
 
             ]
         },