Add allow import feature in VnDmsList

src/components/common/VnDmsImportForm.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+import FetchData from 'components/FetchData.vue';
+
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+const { notify } = useNotify();
+const route = useRoute();
+
+const dmsOptions = ref([]);
+const dmsId = ref(null);
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+const importDms = async () => {
+    try {
+        if (!dmsId.value) throw new Error(t(`The document indentifier can't be empty`));
+
+        const data = {
+            ticketFk: route.params.id,
+            dmsFk: dmsId.value,
+        };
+
+        await axios.post('ticketDms', data);
+        notify(t('globals.dataSaved'), 'positive');
+        dmsId.value = null;
+        emit('onDataSaved');
+    } catch (e) {
+        throw new Error(e.message);
+    }
+};
+</script>
+
+<template>
+    <FetchData
+        url="Dms"
+        :filter="{ fields: ['id'], order: 'id ASC' }"
+        auto-load
+        @on-fetch="(data) => (dmsOptions = data)"
+    />
+    <FormModelPopup
+        url-create="genera"
+        model="DmsImport"
+        :title="t('Select document id')"
+        :form-initial-data="{}"
+        :save-fn="importDms"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('Document')"
+                    :options="dmsOptions"
+                    hide-selected
+                    option-label="id"
+                    option-value="id"
+                    v-model="dmsId"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Select document id: Introduzca id de gestion documental
+    Document: Documento
+    The document indentifier can't be empty: El número de documento no puede estar vacío
+</i18n>

src/components/common/VnDmsList.vue

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
+import VnDmsImportForm from 'src/components/common/VnDmsImportForm.vue';
 import axios from 'axios';
 
 import VnPaginate from 'components/ui/VnPaginate.vue';
@@ -18,6 +19,7 @@ const { t } = useI18n();
 const rows = ref();
 const dmsRef = ref();
 const formDialog = ref({});
+const showImportDialog = ref(false);
 
 const $props = defineProps({
     model: {
@@ -45,6 +47,10 @@ const $props = defineProps({
         type: String,
         required: true,
     },
+    allowImport: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const dmsFilter = {
@@ -373,9 +379,15 @@ function shouldRenderButton(button, isExternal = false) {
             :description="$props.description"
         />
     </QDialog>
+    <QDialog v-model="showImportDialog">
+        <VnDmsImportForm @on-data-saved="dmsRef.fetch()" />
+    </QDialog>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn fab color="primary" icon="add" @click="showFormDialog()" />
     </QPageSticky>
+    <QPageSticky v-if="allowImport" position="bottom-right" :offset="[25, 90]">
+        <QBtn fab color="primary" icon="file_copy" @click="showImportDialog = true" />
+    </QPageSticky>
 </template>
 <style scoped>
 .q-gutter-y-ms {

src/pages/Ticket/Card/TicketDms.vue

@@ -9,5 +9,6 @@ import VnDmsList from 'src/components/common/VnDmsList.vue';
         download-model="dms"
         default-dms-code="ticket"
         filter="ticket"
+        allow-import
     />
 </template>