Create invoice in autonomous page

src/pages/Route/Card/RouteForm.vue

@@ -89,7 +89,7 @@ const onSave = (data, response) => {
     <FetchData
         url="AgencyModes/isActive"
         :filter="{ fields: ['id', 'name'] }"
-        sort-by="name ASC"
+        sort-by="name"
         limit="30"
         @on-fetch="(data) => (agencyList = data)"
         auto-load

src/pages/Route/RouteAutonomous.vue

@@ -11,13 +11,15 @@ import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorPr
 import SupplierDescriptorProxy from 'pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import { useQuasar } from 'quasar';
-import useNotify from "composables/useNotify";
-import RouteAutonomousFilter from "pages/Route/Card/RouteAutonomousFilter.vue";
+import useNotify from 'composables/useNotify';
+import RouteAutonomousFilter from 'pages/Route/Card/RouteAutonomousFilter.vue';
+import { useRouter } from 'vue-router';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const quasar = useQuasar();
 const { notify } = useNotify();
+const router = useRouter();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -122,12 +124,12 @@ const openCreateInvoiceIn = () => {
         return notify(t('Two autonomous cannot be counted at the same time'), 'negative');
     }
 
-    const params = JSON.stringify({
+    const params = encodeURI(JSON.stringify({
         supplierName: selectedRows.value?.[0].supplierName,
         rows: rowsToCreateInvoiceIn,
-    });
+    }));
 
-    console.log(params);
+    router.push({ name: 'RouteAutonomousCreateInvoiceIn', query: { q: params } });
 };
 
 function previewRoute(id) {

src/pages/Route/RouteAutonomousCreateInvoiceIn.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import FetchData from 'components/FetchData.vue';
+import { computed, onBeforeMount, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'components/common/VnInput.vue';
+import axios from 'axios';
+import { useState } from 'composables/useState';
+
+const state = useState();
+const user = state.getUser();
+
+const { t } = useI18n();
+const route = useRoute();
+
+const formData = ref({});
+const queryParams = JSON.parse(decodeURI(route.query.q || ''));
+
+const companyList = ref([]);
+const warehouseList = ref([]);
+const dmsList = ref([]);
+const file = ref(null);
+const validContentType = ref('');
+
+onBeforeMount(async () => {
+    const [allowedContentTypes, dmsType] = await Promise.all([
+        axios.get('DmsContainers/allowedContentTypes').then((res) => res.data),
+        axios
+            .get('DmsTypes/findOne', {
+                filter: {
+                    where: { code: 'invoiceIn' },
+                },
+            })
+            .then((res) => res.data),
+    ]);
+    validContentType.value = (allowedContentTypes || []).join(', ');
+    formData.value = {
+        warehouseId: user.value.warehouseFk,
+        companyId: user.value.companyFk,
+        dmsTypeId: dmsType.id,
+        description: queryParams.supplierName,
+        hasFileAttached: false,
+        hasFile: false,
+    };
+});
+
+const requestConfig = computed(() => {
+    console.log(file.value);
+    console.log(file.value?.name);
+    let requestBody = {};
+    if (file.value?.length >= 1) {
+        requestBody = new FormData();
+        requestBody.append('file', file.value[0], file.value[0].name);
+    }
+    return {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+        params: {
+            ...formData.value,
+        },
+        data: requestBody,
+    };
+});
+
+const onSave = (...params) => {
+    console.log('onSave', ...params);
+};
+</script>
+
+<template>
+    <VnSubToolbar />
+    <FetchData
+        url="Companies"
+        sort-by="code"
+        limit="30"
+        @on-fetch="(data) => (companyList = data)"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        sort-by="name"
+        limit="30"
+        @on-fetch="(data) => (warehouseList = data)"
+        auto-load
+    />
+    <FetchData
+        url="DmsTypes"
+        sort-by="name"
+        limit="30"
+        @on-fetch="(data) => (dmsList = data)"
+        auto-load
+    />
+    <FormModel
+        url-create="dms/uploadFile"
+        model="dms"
+        :observe-form-changes="false"
+        :auto-load="false"
+        :form-initial-data="formData"
+        :request-config="requestConfig"
+        @on-data-saved="onSave"
+    >
+        <template #form>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="formData.reference"
+                        :label="t('Reference')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Company')"
+                        v-model="formData.companyId"
+                        :options="companyList"
+                        option-value="id"
+                        option-label="code"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        v-model="formData.warehouseId"
+                        :options="warehouseList"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Type')"
+                        v-model="formData.dmsTypeId"
+                        :options="dmsList"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="formData.description"
+                        :label="t('Description')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QFile
+                        v-model="file"
+                        :label="t('File')"
+                        clearable
+                        required
+                        :accept="validContentType"
+                        multiple
+                        :rules="[(value) => value || t('Enter a value')]"
+                        @update:model-value="
+                            (value) => {
+                                console.log(value);
+                                formData.hasFileAttached = Boolean(value);
+                            }
+                        "
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        v-model="formData.hasFile"
+                        :label="t('Generate identifier for original file')"
+                        multiple
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+<i18n>
+es:
+    Reference: Referencia
+    Company: Empresa
+    Warehouse: Almacén
+    Type: Tipo
+    Description: Descripción
+    File: Fichero
+    Generate identifier for original file: Generar identificador para archivo original
+</i18n>

src/router/modules/route.js

@@ -46,6 +46,14 @@ export default {
                     },
                     component: () => import('src/pages/Route/RouteAutonomous.vue'),
                 },
+                {
+                    path: 'agency-term/createInvoiceIn',
+                    name: 'RouteAutonomousCreateInvoiceIn',
+                    meta: {
+                        title: 'autonomous',
+                    },
+                    component: () => import('src/pages/Route/RouteAutonomousCreateInvoiceIn.vue'),
+                },
                 {
                     path: 'cmr',
                     name: 'CmrList',