Merge pull request '6920-invoiceInBasicData_useVnDms' (!892) from 6920-invoiceInBasicData_useVnDms into dev

Reviewed-on: #892
Reviewed-by: Jorge Penadés <jorgep@verdnatura.es>

src/components/FormModel.vue

@@ -272,6 +272,7 @@ defineExpose({
     hasChanges,
     reset,
     fetch,
+    formData,
 });
 </script>
 <template>

src/components/common/VnDms.vue

@@ -31,6 +31,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    description: {
+        type: String,
+        default: null,
+    },
 });
 
 const warehouses = ref();
@@ -43,7 +47,8 @@ const dms = ref({});
 onMounted(() => {
     defaultData();
     if (!$props.formInitialData)
-        dms.value.description = t($props.model + 'Description', dms.value);
+        dms.value.description =
+            $props.description ?? t($props.model + 'Description', dms.value);
 });
 function onFileChange(files) {
     dms.value.hasFileAttached = !!files;
@@ -54,7 +59,6 @@ function mapperDms(data) {
     const formData = new FormData();
     const { files } = data;
     if (files) formData.append(files?.name, files);
-    delete data.files;
 
     const dms = {
         hasFile: !!data.hasFile,
@@ -78,6 +82,7 @@ async function save() {
     const body = mapperDms(dms.value);
     const response = await axios.post(getUrl(), body[0], body[1]);
     emit('onDataSaved', body[1].params, response);
+    delete dms.value.files;
     return response;
 }
 
@@ -165,6 +170,7 @@ function addDefaultData(data) {
                     @update:model-value="onFileChange(dms.files)"
                     class="required"
                     :display-value="dms.file"
+                    data-cy="VnDms_inputFile"
                 >
                     <template #append>
                         <QIcon

src/components/ui/VnConfirm.vue

@@ -103,6 +103,7 @@ function cancel() {
                     @click="confirm()"
                     unelevated
                     autofocus
+                    data-cy="VnConfirm_confirm"
                 />
             </QCardActions>
         </QCard>

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -3,8 +3,6 @@ import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
-import { useArrayData } from 'src/composables/useArrayData';
 import { downloadFile } from 'src/composables/downloadFile';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
@@ -12,15 +10,15 @@ import FetchData from 'src/components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnDms from 'src/components/common/VnDms.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import axios from 'axios';
 
-const quasar = useQuasar();
 const { t } = useI18n();
 
-const dms = ref({});
 const route = useRoute();
+const quasar = useQuasar();
 const editDownloadDisabled = ref(false);
-const arrayData = useArrayData();
-const invoiceIn = computed(() => arrayData.store.data);
 const userConfig = ref(null);
 const invoiceId = computed(() => +route.params.id);
 
@@ -36,98 +34,25 @@ const warehousesRef = ref();
 const allowTypesRef = ref();
 const allowedContentTypes = ref([]);
 const sageWithholdings = ref([]);
-const inputFileRef = ref();
+const documentDialogRef = ref({});
-const editDmsRef = ref();
+const invoiceInRef = ref({});
-const createDmsRef = ref();
 
-async function checkFileExists(dmsId) {
+function deleteFile(dmsFk) {
-    if (!dmsId) return;
+    quasar
-    try {
+        .dialog({
-        await axios.get(`Dms/${dmsId}`, { fields: ['id'] });
+            component: VnConfirm,
-        editDownloadDisabled.value = false;
+            componentProps: {
-    } catch (e) {
+                title: t('globals.confirmDeletion'),
-        editDownloadDisabled.value = true;
+                message: t('globals.confirmDeletionMessage'),
-    }
+            },
-}
+        })
-
+        .onOk(async () => {
-async function setEditDms(dmsId) {
+            await axios.post(`dms/${dmsFk}/removeFile`);
-    const { data } = await axios.get(`Dms/${dmsId}`);
+            invoiceInRef.value.formData.dmsFk = null;
-    dms.value = {
+            invoiceInRef.value.formData.dms = undefined;
-        warehouseId: data.warehouseFk,
+            invoiceInRef.value.hasChanges = true;
-        companyId: data.companyFk,
+            invoiceInRef.value.save();
-        dmsTypeId: data.dmsTypeFk,
-        ...data,
-    };
-
-    if (!allowedContentTypes.value.length) await allowTypesRef.value.fetch();
-
-    editDmsRef.value.show();
-}
-
-async function setCreateDms() {
-    const { data } = await axios.get('DmsTypes/findOne', {
-        where: { code: 'invoiceIn' },
         });
-    dms.value = {
-        reference: invoiceIn.value.supplierRef,
-        warehouseId: userConfig.value.warehouseFk,
-        companyId: userConfig.value.companyFk,
-        dmsTypeId: data.id,
-        description: invoiceIn.value.supplier.name,
-        hasFile: true,
-        hasFileAttached: true,
-        files: null,
-    };
-
-    createDmsRef.value.show();
-}
-
-async function onSubmit() {
-    try {
-        const isEdit = !!dms.value.id;
-        const errors = {
-            companyId: `The company can't be empty`,
-            warehouseId: `The warehouse can't be empty`,
-            dmsTypeId: `The DMS Type can't be empty`,
-            description: `The description can't be empty`,
-        };
-
-        Object.keys(errors).forEach((key) => {
-            if (!dms.value[key]) throw Error(t(errors[key]));
-        });
-
-        if (!isEdit && !dms.value.files) throw Error(t(`The files can't be empty`));
-
-        const formData = new FormData();
-
-        if (dms.value.files) {
-            for (let i = 0; i < dms.value.files.length; i++)
-                formData.append(dms.value.files[i].name, dms.value.files[i]);
-            dms.value.hasFileAttached = true;
-        }
-        const url = isEdit ? `dms/${dms.value.id}/updateFile` : 'Dms/uploadFile';
-        const { data } = await axios.post(url, formData, {
-            params: dms.value,
-        });
-
-        if (data.length) invoiceIn.value.dmsFk = data[0].id;
-
-        if (!isEdit) {
-            createDmsRef.value.hide();
-        } else {
-            editDmsRef.value.hide();
-        }
-
-        quasar.notify({
-            message: t('globals.dataSaved'),
-            type: 'positive',
-        });
-    } catch (error) {
-        quasar.notify({
-            message: t(`${error.message}`),
-            type: 'negative',
-        });
-    }
 }
 </script>
 <template>
@@ -181,10 +106,12 @@ async function onSubmit() {
         @on-fetch="(data) => (sageWithholdings = data)"
     />
     <FormModel
+        ref="invoiceInRef"
         model="InvoiceIn"
         :go-to="`/invoice-in/${invoiceId}/vat`"
-        auto-load
         :url-update="`InvoiceIns/${invoiceId}/updateInvoiceIn`"
+        @on-fetch="(data) => (documentDialogRef.supplierName = data.supplier.nickname)"
+        auto-load
     >
         <template #form="{ data }">
             <VnRow>
@@ -242,16 +169,22 @@ async function onSubmit() {
                         </QItem>
                     </template>
                 </VnSelect>
+
+                <div class="row no-wrap">
                     <VnInput
                         :label="t('Document')"
                         v-model="data.dmsFk"
                         clearable
                         clear-icon="close"
-                    @update:model-value="checkFileExists(data.dmsFk)"
+                        class="full-width"
-                >
+                        :disable="true"
-                    <template #prepend>
+                    />
-                        <QBtn
+                    <div
                         v-if="data.dmsFk"
+                        class="row no-wrap q-pa-xs q-gutter-x-xs"
+                        data-cy="dms-buttons"
+                    >
+                        <QBtn
                             :class="{
                                 'no-pointer-events': editDownloadDisabled,
                             }"
@@ -262,33 +195,52 @@ async function onSubmit() {
                             round
                             @click="downloadFile(data.dmsFk)"
                         />
-                    </template>
-                    <template #append>
                         <QBtn
                             :class="{
                                 'no-pointer-events': editDownloadDisabled,
                             }"
                             :disable="editDownloadDisabled"
-                            v-if="data.dmsFk"
                             icon="edit"
                             round
                             padding="xs"
-                            @click="setEditDms(data.dmsFk)"
+                            @click="
+                                () => {
+                                    documentDialogRef.show = true;
+                                    documentDialogRef.dms = data.dms;
+                                }
+                            "
                         >
                             <QTooltip>{{ t('Edit document') }}</QTooltip>
                         </QBtn>
+                        <QBtn
+                            :class="{
+                                'no-pointer-events': editDownloadDisabled,
+                            }"
+                            :disable="editDownloadDisabled"
+                            icon="delete"
+                            :title="t('Delete file')"
+                            padding="xs"
+                            round
+                            @click="deleteFile(data.dmsFk)"
+                        />
+                    </div>
                     <QBtn
                         v-else
                         icon="add_circle"
                         round
                         shortcut="+"
                         padding="xs"
-                            @click="setCreateDms()"
+                        @click="
+                            () => {
+                                documentDialogRef.show = true;
+                                delete documentDialogRef.dms;
+                            }
+                        "
+                        data-cy="dms-create"
                     >
                         <QTooltip>{{ t('Create document') }}</QTooltip>
                     </QBtn>
-                    </template>
+                </div>
-                </VnInput>
             </VnRow>
             <VnRow>
                 <VnSelect
@@ -319,237 +271,28 @@ async function onSubmit() {
             </VnRow>
         </template>
     </FormModel>
-    <QDialog ref="editDmsRef">
+    <QDialog v-model="documentDialogRef.show">
-        <QForm @submit="onSubmit()" class="all-pointer-events">
+        <VnDms
-            <QCard class="q-pa-sm">
+            model="dms"
-                <QCardSection class="row items-center q-pb-none">
+            default-dms-code="invoiceIn"
-                    <span class="text-primary text-h6">
+            :form-initial-data="documentDialogRef.dms"
-                        <QIcon name="edit" class="q-mr-xs" />
+            :url="
-                        {{ t('Edit document') }}
+                documentDialogRef.dms
-                    </span>
+                    ? `Dms/${documentDialogRef.dms.id}/updateFile`
-                    <QSpace />
+                    : 'Dms/uploadFile'
-                    <QBtn icon="close" flat round dense v-close-popup />
+            "
-                </QCardSection>
+            :description="documentDialogRef.supplierName"
-                <QCardSection class="q-py-none">
+            @on-data-saved="
-                    <QItem>
+                (_, { data }) => {
-                        <VnInput
+                    let dmsData = data;
-                            class="full-width q-pa-xs"
+                    if (Array.isArray(data)) dmsData = data[0];
-                            :label="t('Reference')"
+                    invoiceInRef.formData.dmsFk = dmsData.id;
-                            v-model="dms.reference"
+                    invoiceInRef.formData.dms = dmsData;
-                            clearable
+                    invoiceInRef.hasChanges = true;
-                            clear-icon="close"
+                    invoiceInRef.save();
+                }
+            "
         />
-                        <VnSelect
-                            class="full-width q-pa-xs"
-                            :label="t('Company')"
-                            v-model="dms.companyId"
-                            :options="companies"
-                            option-value="id"
-                            option-label="code"
-                            :required="true"
-                        />
-                    </QItem>
-                    <QItem>
-                        <VnSelect
-                            class="full-width q-pa-xs"
-                            :label="t('Warehouse')"
-                            v-model="dms.warehouseId"
-                            :options="warehouses"
-                            option-value="id"
-                            option-label="name"
-                            :required="true"
-                        />
-                        <VnSelect
-                            class="full-width q-pa-xs"
-                            :label="t('Type')"
-                            v-model="dms.dmsTypeId"
-                            :options="dmsTypes"
-                            option-value="id"
-                            option-label="name"
-                            :required="true"
-                        />
-                    </QItem>
-                    <QItem>
-                        <VnInput
-                            :label="t('Description')"
-                            v-model="dms.description"
-                            :required="true"
-                            type="textarea"
-                            class="full-width q-pa-xs"
-                            size="lg"
-                            autogrow
-                            clearable
-                            clear-icon="close"
-                        />
-                    </QItem>
-                    <QItem>
-                        <QFile
-                            ref="inputFileRef"
-                            class="full-width q-pa-xs"
-                            :label="t('File')"
-                            v-model="dms.files"
-                            multiple
-                            :accept="allowedContentTypes.join(',')"
-                            clearable
-                            clear-icon="close"
-                        >
-                            <template #append>
-                                <QBtn
-                                    icon="attach_file_add"
-                                    flat
-                                    round
-                                    padding="xs"
-                                    @click="inputFileRef.pickFiles()"
-                                >
-                                    <QTooltip>
-                                        {{ t('globals.selectFile') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn icon="info" flat round padding="xs">
-                                    <QTooltip max-width="30rem">
-                                        {{
-                                            `${t(
-                                                'Allowed content types'
-                                            )}: ${allowedContentTypes.join(', ')}`
-                                        }}
-                                    </QTooltip>
-                                </QBtn>
-                            </template>
-                        </QFile>
-                    </QItem>
-                    <QItem>
-                        <QCheckbox
-                            :label="t('Generate identifier for original file')"
-                            v-model="dms.hasFile"
-                        />
-                    </QItem>
-                </QCardSection>
-                <QCardActions class="justify-end">
-                    <QBtn
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                    <QBtn :label="t('globals.save')" color="primary" @click="onSubmit" />
-                </QCardActions>
-            </QCard>
-        </QForm>
-    </QDialog>
-    <QDialog ref="createDmsRef">
-        <QForm @submit="onSubmit()" class="all-pointer-events">
-            <QCard class="q-pa-sm">
-                <QCardSection class="row items-center q-pb-none">
-                    <span class="text-primary text-h6">
-                        <QIcon name="edit" class="q-mr-xs" />
-                        {{ t('Create document') }}
-                    </span>
-                    <QSpace />
-                    <QBtn icon="close" flat round dense v-close-popup />
-                </QCardSection>
-                <QCardSection class="q-pb-none">
-                    <QItem>
-                        <VnInput
-                            class="full-width q-pa-xs"
-                            :label="t('Reference')"
-                            v-model="dms.reference"
-                        />
-                        <VnSelect
-                            class="full-width q-pa-xs"
-                            :label="`${t('Company')}*`"
-                            v-model="dms.companyId"
-                            :options="companies"
-                            option-value="id"
-                            option-label="code"
-                            :required="true"
-                        />
-                    </QItem>
-                    <QItem>
-                        <VnSelect
-                            class="full-width q-pa-xs"
-                            :label="`${t('Warehouse')}*`"
-                            v-model="dms.warehouseId"
-                            :options="warehouses"
-                            option-value="id"
-                            option-label="name"
-                            :required="true"
-                        />
-                        <VnSelect
-                            class="full-width q-pa-xs"
-                            :label="`${t('Type')}*`"
-                            v-model="dms.dmsTypeId"
-                            :options="dmsTypes"
-                            option-value="id"
-                            option-label="name"
-                            :required="true"
-                        />
-                    </QItem>
-                    <QItem>
-                        <VnInput
-                            class="full-width q-pa-xs"
-                            type="textarea"
-                            size="lg"
-                            autogrow
-                            :label="`${t('Description')}*`"
-                            v-model="dms.description"
-                            clearable
-                            clear-icon="close"
-                            :rules="[(val) => val.length || t('Required field')]"
-                        />
-                    </QItem>
-                    <QItem>
-                        <QFile
-                            ref="inputFileRef"
-                            class="full-width q-pa-xs"
-                            :label="t('File')"
-                            v-model="dms.files"
-                            multiple
-                            :accept="allowedContentTypes.join(',')"
-                            clearable
-                            clear-icon="close"
-                        >
-                            <template #append>
-                                <QBtn
-                                    icon="attach_file_add"
-                                    flat
-                                    round
-                                    padding="xs"
-                                    @click="inputFileRef.pickFiles()"
-                                >
-                                    <QTooltip>
-                                        {{ t('globals.selectFile') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn icon="info" flat round padding="xs">
-                                    <QTooltip max-width="30rem">
-                                        {{
-                                            `${t(
-                                                'Allowed content types'
-                                            )}: ${allowedContentTypes.join(', ')}`
-                                        }}
-                                    </QTooltip>
-                                </QBtn>
-                            </template>
-                        </QFile>
-                    </QItem>
-                    <QItem>
-                        <QCheckbox
-                            :label="t('Generate identifier for original file')"
-                            v-model="dms.hasFile"
-                        />
-                    </QItem>
-                </QCardSection>
-                <QCardActions align="right">
-                    <QBtn
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                    <QBtn :label="t('globals.save')" color="primary" @click="onSubmit" />
-                </QCardActions>
-            </QCard>
-        </QForm>
     </QDialog>
 </template>
 <style lang="scss" scoped>

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -20,6 +20,23 @@ const filter = {
         { relation: 'invoiceInDueDay' },
         { relation: 'company' },
         { relation: 'currency' },
+        {
+            relation: 'dms',
+            scope: {
+                fields: [
+                    'dmsTypeFk',
+                    'reference',
+                    'hardCopyNumber',
+                    'workerFk',
+                    'description',
+                    'hasFile',
+                    'file',
+                    'created',
+                    'companyFk',
+                    'warehouseFk',
+                ],
+            },
+        },
     ],
 };
 

test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js

@@ -2,9 +2,8 @@
 describe('InvoiceInBasicData', () => {
     const formInputs = '.q-form > .q-card input';
     const firstFormSelect = '.q-card > .vn-row:nth-child(1) > .q-select';
-    const documentBtns = '.q-form .q-field button';
+    const documentBtns = '[data-cy="dms-buttons"] button';
     const dialogInputs = '.q-dialog input';
-    const dialogActionBtns = '.q-card__actions button';
 
     beforeEach(() => {
         cy.login('developer');
@@ -21,27 +20,35 @@ describe('InvoiceInBasicData', () => {
         cy.get(formInputs).eq(1).invoke('val').should('eq', '4739');
     });
 
-    it('should edit the dms data', () => {
+    it('should edit, remove and create the dms data', () => {
         const firtsInput = 'Ticket:65';
         const secondInput = "I don't know what posting here!";
 
+        //edit
         cy.get(documentBtns).eq(1).click();
         cy.get(dialogInputs).eq(0).type(`{selectall}${firtsInput}`);
         cy.get('textarea').type(`{selectall}${secondInput}`);
-        cy.get(dialogActionBtns).eq(1).click();
+        cy.get('[data-cy="FormModelPopup_save"]').click();
-
         cy.get(documentBtns).eq(1).click();
         cy.get(dialogInputs).eq(0).invoke('val').should('eq', firtsInput);
         cy.get('textarea').invoke('val').should('eq', secondInput);
-    });
+        cy.get('[data-cy="FormModelPopup_save"]').click();
+        cy.checkNotification('Data saved');
 
-    it('should throw an error creating a new dms if a file is not attached', () => {
+        //remove
-        cy.get(formInputs).eq(7).type('{selectall}{backspace}');
+        cy.get(documentBtns).eq(2).click();
-        cy.get(documentBtns).eq(0).click();
+        cy.get('[data-cy="VnConfirm_confirm"]').click();
-        cy.get(dialogActionBtns).eq(1).click();
+        cy.checkNotification('Data saved');
-        cy.get('.q-notification__message').should(
+
-            'have.text',
+        //create
-            "The files can't be empty"
+        cy.get('[data-cy="dms-create"]').eq(0).click();
+        cy.get('[data-cy="VnDms_inputFile"').selectFile(
+            'test/cypress/fixtures/image.jpg',
+            {
+                force: true,
+            }
         );
+        cy.get('[data-cy="FormModelPopup_save"]').click();
+        cy.checkNotification('Data saved');
     });
 });