refs #5509 feat: VnDms description

src/components/common/VnDms.vue

@@ -27,19 +27,20 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    description: {
-        type: Function,
-        default: null,
-    },
 });
 
 const warehouses = ref();
 const companies = ref();
 const dmsTypes = ref();
 const allowedContentTypes = ref();
+const inputFileRef = ref();
 const dms = ref({});
 
-onMounted(() => defaultData());
+onMounted(() => {
+    defaultData();
+    if (!$props.formInitialData)
+        dms.value.description = t($props.model + 'Description', dms.value);
+});
 function onFileChange(files) {
     dms.value.hasFileAttached = !!files;
     dms.value.file = files?.name;
@@ -78,7 +79,6 @@ function defaultData() {
     if ($props.formInitialData) return (dms.value = $props.formInitialData);
     return addDefaultData({
         reference: route.params.id,
-        description: $props.description && $props.description(dms.value),
     });
 }
 
@@ -151,6 +151,7 @@ function addDefaultData(data) {
                     type="textarea"
                 />
                 <QFile
+                    ref="inputFileRef"
                     :label="t('entry.buys.file')"
                     v-model="dms.files"
                     :multiple="false"
@@ -159,12 +160,14 @@ function addDefaultData(data) {
                     class="required"
                     :display-value="dms.file"
                 >
-                    <template #prepend>
+                    <template #append>
-                        <QIcon name="vn:attach" class="cursor-pointer">
+                        <QIcon
+                            name="vn:attach"
+                            class="cursor-pointer"
+                            @click="inputFileRef.pickFiles()"
+                        >
                             <QTooltip>{{ t('Select a file') }}</QTooltip>
                         </QIcon>
-                    </template>
-                    <template #append>
                         <QIcon name="info" class="cursor-pointer">
                             <QTooltip>{{
                                 t('contentTypesInfo', { allowedContentTypes })
@@ -189,7 +192,10 @@ function addDefaultData(data) {
 <i18n>
 en:
     contentTypesInfo: Allowed file types {allowedContentTypes}
+    EntryDmsDescription: Reference {reference}
 es:
     Generate identifier for original file: Generar identificador para archivo original
     contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
+    EntryDmsDescription: Referencia {reference}
+
 </i18n>

src/components/common/VnDmsList.vue

@@ -2,14 +2,13 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
+import axios from 'axios';
 
 import FetchData from 'components/FetchData.vue';
 import VnDms from 'src/components/common/VnDms.vue';
-import { downloadFile } from 'src/composables/downloadFile';
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import axios from 'axios';
+import { downloadFile } from 'src/composables/downloadFile';
-import { QCheckbox, QBtn, QInput } from 'quasar';
-import { useQuasar } from 'quasar';
 
 const route = useRoute();
 const quasar = useQuasar();
@@ -35,10 +34,6 @@ const $props = defineProps({
         type: String,
         required: true,
     },
-    description: {
-        type: Function,
-        required: true,
-    },
 });
 
 const dmsFilter = {
@@ -144,6 +139,35 @@ const columns = computed(() => [
     {
         field: 'options',
         name: 'options',
+        components: [
+            {
+                component: QBtn,
+                props: () => ({
+                    icon: 'cloud_download',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: (prop) => downloadFile(prop.row.id),
+            },
+            {
+                component: QBtn,
+                props: () => ({
+                    icon: 'edit',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: (prop) => showFormDialog(prop.row),
+            },
+            {
+                component: QBtn,
+                props: () => ({
+                    icon: 'delete',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: (prop) => deleteDms(prop.row.id),
+            },
+        ],
     },
 ]);
 
@@ -199,7 +223,7 @@ function parseDms(data) {
         class="full-width q-mt-md"
         hide-bottom
         row-key="clientFk"
-        :grid="$q.screen.lt.md"
+        :grid="$q.screen.lt.sm"
     >
         <template #body-cell="props">
             <QTd :props="props">
@@ -216,25 +240,14 @@ function parseDms(data) {
                 </QTr>
 
                 <div class="flex justify-center" v-if="props.col.name == 'options'">
-                    <QBtn
+                    <div v-for="button of props.col.components" :key="button.id">
-                        icon="cloud_download"
+                        <component
-                        flat
+                            :is="button.component"
-                        color="primary"
+                            v-bind="button.props(props)"
-                        @click="downloadFile(props.row.id)"
+                            @click="button.click(props)"
-                    />
-                    <QBtn
-                        icon="edit"
-                        flat
-                        color="primary"
-                        @click="showFormDialog(props.row)"
-                    />
-                    <QBtn
-                        icon="delete"
-                        flat
-                        color="primary"
-                        @click="deleteDms(props.row.id)"
                         />
                     </div>
+                </div>
             </QTd>
         </template>
         <template #item="props">
@@ -244,23 +257,26 @@ function parseDms(data) {
                     flat
                     @keyup.ctrl.enter.stop="claimDevelopmentForm?.saveChanges()"
                 >
-                    <QCardSection>
-                        <QCheckbox v-model="props.selected" dense />
-                    </QCardSection>
                     <QSeparator />
                     <QList dense>
                         <QItem v-for="col in props.cols" :key="col.name">
-                            <QItemSection>
+                            <div v-if="col.name != 'options'" class="row">
-                                <component
+                                <span class="labelColor">{{ col.label }}:</span>
-                                    v-if="col.component"
+                                <span>{{ col.value }}</span>
-                                    :is="col.component"
+                            </div>
-                                    v-bind="col.props && col.props(props)"
+                            <div v-if="col.name == 'options'" class="row">
+                                <div
+                                    v-for="button of col.components"
+                                    :key="button.id"
+                                    class="row"
                                 >
-                                    <span v-if="col.component == 'span'">{{
+                                    <component
-                                        `${col.label}:${col.value}`
+                                        :is="button.component"
-                                    }}</span>
+                                        v-bind="button.props(col)"
-                                </component>
+                                        @click="button.click(col)"
-                            </QItemSection>
+                                    />
+                                </div>
+                            </div>
                         </QItem>
                     </QList>
                 </QCard>
@@ -285,6 +301,9 @@ function parseDms(data) {
     display: grid;
     row-gap: 20px;
 }
+.labelColor {
+    color: var(--vn-label);
+}
 </style>
 <i18n>
 en:

src/pages/Entry/Card/EntryDms.vue

@@ -7,14 +7,5 @@ import VnDmsList from 'src/components/common/VnDmsList.vue';
         update-model="EntryDms"
         default-dms-code="entry"
         filter="entryFk"
-        :description="
-            (data) => t('description', { reference: data.reference, id: data.id })
-        "
     />
 </template>
-<i18n>
-    en:
-        description: Reference {reference} id {id}
-    es:
-        description: Referencia {reference} id {id}
-</i18n>

test/cypress/integration/entry/entryDms.spec.js

@@ -0,0 +1,13 @@
+describe('WagonTypeCreate', () => {
+    const entryId = 1;
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/entry/${entryId}/dms`);
+
+    });
+
+    it('should create and delete a new wagon type', () => {
+        cy.addCard()
+    });
+});