feat(claim_photo): fix html add uploadFile

src/i18n/en/index.js

@@ -294,6 +294,10 @@ export default {
             picked: 'Picked',
             returnOfMaterial: 'Return of material authorization (RMA)',
         },
+        photo: {
+            fileDescription:
+                'Reclamacion ID {{claimId}} del cliente {{clientName}} id {{clientId}}',
+        },
     },
     invoiceOut: {
         pageTitles: {

src/i18n/es/index.js

@@ -13,7 +13,7 @@ export default {
         darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
         dataSaved: 'Datos guardados',
-        dataDeleted: 'Data deleted',
+        dataDeleted: 'Datos eliminados',
         add: 'Añadir',
         create: 'Crear',
         save: 'Guardar',
@@ -293,6 +293,10 @@ export default {
             picked: 'Recogida',
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
+        photo: {
+            fileDescription:
+                'Claim id {{claimId}} from client {{clientName}} id {{clientId}}',
+        },
     },
     invoiceOut: {
         pageTitles: {

src/pages/Claim/Card/ClaimPhoto.vue

@@ -17,18 +17,21 @@ const session = useSession();
 const token = session.getToken();
 const quasar = useQuasar();
 
-const entityId = computed(function () {
+const claimId = computed(function () {
     return router.currentRoute.value.params.id;
 });
 
-const multimedia = ref([]);
+const claimDms = ref([]);
+const dmsType = ref({});
+const config = ref({});
+const dms = ref({});
 const claimDmsFilter = ref({
     include: [
         {
             relation: 'dms',
         },
     ],
-    where: { claimFk: entityId },
+    where: { claimFk: claimId.value },
 });
 
 const multimediaDialog = ref();
@@ -59,31 +62,72 @@ function viewDeleteDms(dmsId) {
 
 async function deleteDms(index) {
     console.log(index);
-    const dmsId = multimedia.value[index].dmsFk;
+    const dmsId = claimDms.value[index].dmsFk;
     await axios.post(`ClaimDms/${dmsId}/removeFile`);
-    console.log(multimedia.value.splice(index, 1));
+    quasar.notify({
-    multimedia.value = multimedia.value.splice(index, 1);
+        message: t('globals.dataDeleted'),
-    console.log(index, multimedia.value);
+        type: 'positive',
+        icon: 'delete',
+    });
+    claimDms.value.splice(index, 1);
 }
 
-function setMultimedia(data) {
+function setClaimDms(data) {
-    multimedia.value = data.map((media) => {
+    claimDms.value = data.map((media) => {
         media.isVideo = media.dms.contentType == 'video/mp4';
         return media;
     });
 }
-//cover fill contain none scale-down
+
+function uploadFile() {
+    const element = document.createElement('input');
+    element.setAttribute('type', 'file');
+    element.setAttribute('multiple', true);
+    element.click();
+
+    element.addEventListener('change', () => setDefaultParams());
+}
+
+function setDefaultParams() {
+    console.log(config.value);
+    console.log(dmsType.value);
+    dms.value = {
+        hasFile: false,
+        hasFileAttached: false,
+        reference: claimId.value,
+        warehouseId: config.value.warehouseFk,
+        companyId: config.value.companyFk,
+        dmsTypeId: dmsType.value.id,
+        description: t('claim.photo.fileDescription', {
+            claimId: claimId.value,
+            clientId: claimDms.value.clientFk,
+            clientName: claimDms.value.clientName,
+        }).toUpperCase(),
+    };
+    console.log(dms.value);
+}
 </script>
 <template>
     <fetch-data
         url="ClaimDms"
         :filter="claimDmsFilter"
-        @on-fetch="(data) => setMultimedia(data)"
+        @on-fetch="(data) => setClaimDms(data)"
         limit="20"
         auto-load
     />
+    <fetch-data
+        url="DmsTypes/findOne"
+        :filter="{ where: { code: 'claim' } }"
+        @on-fetch="(data) => (dmsType = data)"
+        auto-load
+    />
+    <fetch-data
+        url="UserConfigs/getUserConfig"
+        @on-fetch="(data) => (config = data)"
+        auto-load
+    />
     <div class="multimediaParent bg-transparent">
-        <div v-for="(media, index) of multimedia" :key="index" class="relative-position">
+        <div v-for="(media, index) of claimDms" :key="index" class="relative-position">
             <q-btn
                 icon="delete"
                 color="primary"
@@ -94,6 +138,18 @@ function setMultimedia(data) {
                 @click.stop="viewDeleteDms(index)"
                 round
             />
+            <q-icon
+                name="play_arrow"
+                color="primary"
+                size="xl"
+                class="absolute-center"
+                style="z-index: 1"
+                v-if="media.isVideo"
+                @click.stop="openDialog(media.dmsFk)"
+                flat
+            >
+                <q-tooltip>Video</q-tooltip>
+            </q-icon>
             <q-card class="multimedia relative-position">
                 <q-img
                     :src="getImagePath(media)"
@@ -102,70 +158,61 @@ function setMultimedia(data) {
                     v-if="!media.isVideo"
                 >
                 </q-img>
-                <q-video
+                <video
                     :src="getImagePath(media)"
                     class="rounded-borders cursor-pointer"
                     muted="muted"
-                    style="pointer-events: none"
                     v-if="media.isVideo"
-                >
+                    @click="openDialog(media.dmsFk)"
-                </q-video>
+                ></video>
             </q-card>
         </div>
     </div>
 
+    <q-page-sticky position="bottom-right" :offset="[18, 18]">
+        <q-btn fab icon="add" color="primary" @click="uploadFile()" />
+    </q-page-sticky>
+
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
         v-model="multimediaDialog"
         :maximized="multimediaMaximizedDialog"
         transition-show="slide-up"
         transition-hide="slide-down"
-        class="z-max"
     >
-        <q-card class="bg-dark" style="min-width: 70%">
+        <q-card style="height: 80%; min-width: 80%">
-            <q-bar>
+            <q-card-section class="row items-center q-pb-none q-gutter-md">
-                <q-space />
+                <q-avatar
-
+                    :icon="icon"
-                <q-btn
-                    dense
-                    flat
-                    :icon="multimediaMaximizedDialog ? 'minimize' : 'crop_square'"
                     color="primary"
-                    @click="
+                    text-color="white"
-                        multimediaMaximizedDialog = multimediaMaximizedDialog
+                    size="xl"
-                            ? false
+                    v-if="icon"
-                            : true
+                />
-                    "
+                <span class="text-h6 text-grey">{{ message }}</span>
-                >
+                <q-space />
-                    <q-tooltip
+                <q-btn icon="close" flat round dense v-close-popup />
-                        v-if="multimediaMaximizedDialog"
+            </q-card-section>
-                        class="bg-white text-primary"
-                    >
-                        Change size
-                    </q-tooltip>
-                </q-btn>
-                <q-btn dense flat icon="close" color="primary" v-close-popup>
-                    <q-tooltip class="bg-white text-primary">Close</q-tooltip>
-                </q-btn>
-            </q-bar>
 
             <q-card-section class="q-pt-none">
                 <q-carousel swipeable animated v-model="multimediaSlide" arrows>
                     <q-carousel-slide
-                        v-for="media of multimedia"
+                        v-for="media of claimDms"
                         :key="media.dmsFk"
                         :name="media.dmsFk"
+                        class="fit"
                     >
                         <q-img
+                            height="100%"
+                            fit="scale-down"
                             :src="getImagePath(media)"
                             v-if="!media.isVideo"
-                            class="absolute-full"
-                            fit="scale-down"
                         />
                         <q-video
-                            class="absolute-full"
+                            class="q-ma-none"
                             :src="getImagePath(media)"
                             v-if="media.isVideo"
+                            muted
                         />
                     </q-carousel-slide>
                 </q-carousel>
@@ -176,15 +223,6 @@ function setMultimedia(data) {
 </template>
 
 <style lang="scss" scoped>
-.container2 {
-    display: flex;
-    justify-content: center;
-
-    & div {
-        width: 100%;
-    }
-}
-
 .multimediaParent {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -197,14 +235,17 @@ function setMultimedia(data) {
 .multimedia {
     transition: all 0.5s;
     opacity: 1;
+    height: 250px;
 
     .q-img {
-        height: 250px;
+        height: 100%;
+        width: 100%;
         object-fit: cover;
         background-color: black;
     }
-    .q-video {
+    video {
-        height: 250px;
+        height: 100%;
+        width: 100%;
         object-fit: cover;
         background-color: black;
     }
@@ -213,6 +254,11 @@ function setMultimedia(data) {
 .multimedia:hover {
     opacity: 0.5;
 }
+
+.q-video {
+    height: 100%;
+    width: 100%;
+}
 </style>
 
 <i18n>