refs #5509 feat: VnDms FormModel

src/components/FetchData.vue

@@ -59,11 +59,4 @@ async function fetch(fetchFilter = {}) {
         //
     }
 }
-
-const render = () => {
-    return h('div', []);
-};
 </script>
-<template>
-    <render />
-</template>

src/components/FormModel.vue

@@ -59,6 +59,10 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    updateType: {
+        type: String,
+        default: 'patch',
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
@@ -136,7 +140,10 @@ async function save() {
             response = await axios.post($props.urlCreate, body);
             notify('globals.dataCreated', 'positive');
         } else {
-            response = await axios.patch($props.urlUpdate || $props.url, body);
+            response = await axios[$props.updateType](
+                $props.urlUpdate || $props.url,
+                body
+            );
         }
         emit('onDataSaved', formData.value, response?.data);
         originalData.value = JSON.parse(JSON.stringify(formData.value));

src/components/common/VnDms.vue

@@ -12,26 +12,58 @@ import VnInput from 'src/components/common/VnInput.vue';
 const route = useRoute();
 const { t } = useI18n();
 
+const props = defineProps({
+    model: {
+        type: String,
+        required: true,
+    },
+});
+
 const warehouses = ref();
 const companies = ref();
 const dmsTypes = ref();
+const allowedContentTypes = ref();
+const dms = ref({});
+
+function onFileChange(files) {
+    dms.value.hasFileAttached = !!files;
+    dms.value.file = files?.name;
+}
+
+function parseDms(data) {
+    const defaultDms = {};
+
+    for (let prop in data) {
+        if (prop.endsWith('Fk')) data[prop.replace('Fk', 'Id')] = data[prop];
+    }
+    console.log(data);
+    dms.value = data;
+}
 </script>
 <template>
     <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
     <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
     <FetchData url="DmsTypes" @on-fetch="(data) => (dmsTypes = data)" auto-load />
+    <FetchData
+        url="DmsContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data.join(','))"
+        auto-load
+    />
     <FormModel
         :url="`Dms/${route.params.id}`"
-        :url-update="`Claims/updateClaim/${route.params.id}`"
+        update-type="post"
+        :url-update="`${props.model}/${route.params.id}/uploadFile`"
+        @on-fetch="parseDms"
         model="dms"
+        :auto-load="!!route.params.id"
     >
-        <template #form="{ data }">
+        <template #form>
             <div class="q-gutter-y-ms">
                 <VnRow>
-                    <VnInput :label="t('Reference')" v-model="data.reference" />
+                    <VnInput :label="t('Reference')" v-model="dms.reference" />
                     <VnSelectFilter
                         :label="t('globals.company')"
-                        v-model="data.companyFk"
+                        v-model="dms.companyFk"
                         :options="companies"
                         option-value="id"
                         option-label="code"
@@ -41,7 +73,7 @@ const dmsTypes = ref();
                 <VnRow>
                     <VnSelectFilter
                         :label="t('globals.warehouse')"
-                        v-model="data.warehouseFk"
+                        v-model="dms.warehouseFk"
                         :options="warehouses"
                         option-value="id"
                         option-label="name"
@@ -49,20 +81,44 @@ const dmsTypes = ref();
                     />
                     <VnSelectFilter
                         :label="t('globals.type')"
-                        v-model="data.dmsTypeFk"
+                        v-model="dms.dmsTypeFk"
                         :options="dmsTypes"
                         option-value="id"
                         option-label="name"
                         input-debounce="0"
                     />
                 </VnRow>
-                <VnRow>
+                <QInput
-                    <QInput
+                    :label="t('globals.description')"
-                        :label="t('globals.description')"
+                    v-model="dms.description"
-                        v-model="data.description"
+                    type="textarea"
-                        type="textarea"
+                />
-                    />
+                <QFile
-                </VnRow>
+                    :label="t('entry.buys.file')"
+                    v-model="dms.files"
+                    :multiple="false"
+                    accept=".json"
+                    @update:model-value="onFileChange(dms.files)"
+                    class="required"
+                    :display-value="dms.file"
+                >
+                    <template #prepend>
+                        <QIcon name="vn:attach" class="cursor-pointer">
+                            <QTooltip>{{ t('Select a file') }}</QTooltip>
+                        </QIcon>
+                    </template>
+                    <template #append>
+                        <QIcon name="info" class="cursor-pointer">
+                            <QTooltip>{{
+                                t('contentTypesInfo', { allowedContentTypes })
+                            }}</QTooltip>
+                        </QIcon>
+                    </template>
+                </QFile>
+                <QCheckbox
+                    v-model="dms.hasFile"
+                    :label="t('Generate identifier for original file')"
+                />
             </div>
         </template>
     </FormModel>
@@ -73,3 +129,10 @@ const dmsTypes = ref();
     row-gap: 20px;
 }
 </style>
+<i18n>
+en:
+    contentTypesInfo: Allowed file types {allowedContentTypes}
+es:
+    contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
+    Generate identifier for original file: Generar identificador para archivo original
+</i18n>

src/pages/Entry/Card/EntryDms.vue

@@ -2,5 +2,6 @@
 import VnDms from 'src/components/common/VnDms.vue';
 </script>
 <template>
-    <VnDms model="Entry" />
+    <VnDms model="Clients" />
+    <!-- CHANGE ME-->
 </template>