From 38a6b93a5d16f68e206a346ec1669822853b5941 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 16 Feb 2023 14:10:17 +0100
Subject: [PATCH] feat(claim_photo): add upload button

---
 src/i18n/en/index.js                |   3 +-
 src/i18n/es/index.js                |   4 +-
 src/pages/Claim/Card/ClaimPhoto.vue | 151 +++++++++++++++++-----------
 src/pages/Claim/Card/ClaimRma.vue   |  36 +++++--
 src/router/modules/claim.js         |   2 +-
 5 files changed, 125 insertions(+), 71 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index b0323421d..056338b46 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -241,6 +241,7 @@ export default {
             summary: 'Summary',
             basicData: 'Basic Data',
             rma: 'RMA',
+            photos: 'Photos',
         },
         list: {
             customer: 'Customer',
@@ -296,7 +297,7 @@ export default {
         },
         photo: {
             fileDescription:
-                'Reclamacion ID {{claimId}} del cliente {{clientName}} id {{clientId}}',
+                'Reclamacion ID {claimId} del cliente {clientName} id {clientId}',
         },
     },
     invoiceOut: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 09ffb9d15..1a19a329c 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -240,6 +240,7 @@ export default {
             summary: 'Resumen',
             basicData: 'Datos básicos',
             rma: 'RMA',
+            photos: 'Fotos',
         },
         list: {
             customer: 'Cliente',
@@ -294,8 +295,7 @@ export default {
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
         photo: {
-            fileDescription:
-                'Claim id {{claimId}} from client {{clientName}} id {{clientId}}',
+            fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}',
         },
     },
     invoiceOut: {
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index 9a7431fae..3aa6fc3b4 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import TeleportSlot from 'src/components/ui/TeleportSlot.vue';
 
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -22,6 +23,7 @@ const claimId = computed(function () {
 });
 
 const claimDms = ref([]);
+const claimDmsRef = ref();
 const dmsType = ref({});
 const config = ref({});
 const dms = ref({});
@@ -75,22 +77,28 @@ async function deleteDms(index) {
 function setClaimDms(data) {
     claimDms.value = data.map((media) => {
         media.isVideo = media.dms.contentType == 'video/mp4';
+        media.url = getImagePath(media);
         return media;
     });
 }
 
-function uploadFile() {
+async function uploadFile() {
+    claimDmsRef.value.fetch();
     const element = document.createElement('input');
     element.setAttribute('type', 'file');
     element.setAttribute('multiple', true);
     element.click();
 
-    element.addEventListener('change', () => setDefaultParams());
+    element.addEventListener('change', () => {
+        setDefaultParams();
+        create(element.files).then(() => claimDmsRef.value.fetch());
+    });
 }
 
 function setDefaultParams() {
     console.log(config.value);
     console.log(dmsType.value);
+    console.log(claimDms.value);
     dms.value = {
         hasFile: false,
         hasFileAttached: false,
@@ -100,12 +108,32 @@ function setDefaultParams() {
         dmsTypeId: dmsType.value.id,
         description: t('claim.photo.fileDescription', {
             claimId: claimId.value,
-            clientId: claimDms.value.clientFk,
             clientName: claimDms.value.clientName,
+            clientId: claimDms.value.clientFk,
         }).toUpperCase(),
     };
     console.log(dms.value);
 }
+
+async function create(files) {
+    const formData = new FormData();
+    for (let i = 0; i < files.length; i++) formData.append(files[i].name, files[i]);
+
+    const query = `claims/${claimId.value}/uploadFile`;
+
+    await axios({
+        method: 'POST',
+        url: query,
+        data: formData,
+        params: dms.value,
+    });
+
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+        icon: 'check',
+    });
+}
 </script>
 <template>
     <fetch-data
@@ -114,6 +142,7 @@ function setDefaultParams() {
         @on-fetch="(data) => setClaimDms(data)"
         limit="20"
         auto-load
+        ref="claimDmsRef"
     />
     <fetch-data
         url="DmsTypes/findOne"
@@ -133,8 +162,7 @@ function setDefaultParams() {
                 color="primary"
                 text-color="white"
                 size="md"
-                class="all-pointer-events absolute"
-                style="top: 10px; left: 10px; z-index: 1"
+                class="all-pointer-events absolute delete-button zindex"
                 @click.stop="viewDeleteDms(index)"
                 round
             />
@@ -142,8 +170,7 @@ function setDefaultParams() {
                 name="play_arrow"
                 color="primary"
                 size="xl"
-                class="absolute-center"
-                style="z-index: 1"
+                class="absolute-center zindex"
                 v-if="media.isVideo"
                 @click.stop="openDialog(media.dmsFk)"
                 flat
@@ -152,77 +179,76 @@ function setDefaultParams() {
             </q-icon>
             <q-card class="multimedia relative-position">
                 <q-img
-                    :src="getImagePath(media)"
-                    class="rounded-borders cursor-pointer"
+                    :src="media.url"
+                    class="rounded-borders cursor-pointer fit"
                     @click="openDialog(media.dmsFk)"
                     v-if="!media.isVideo"
                 >
                 </q-img>
                 <video
-                    :src="getImagePath(media)"
-                    class="rounded-borders cursor-pointer"
+                    :src="media.url"
+                    class="rounded-borders cursor-pointer fit"
                     muted="muted"
                     v-if="media.isVideo"
                     @click="openDialog(media.dmsFk)"
-                ></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>
+    <teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
+        <div class="row q-gutter-x-sm">
+            <q-btn @click="uploadFile()" icon="add" color="primary" dense rounded>
+                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
+            </q-btn>
+            <q-separator vertical />
+        </div>
+    </teleport-slot>
+
+    <teleport-slot to=".q-footer">
+        <q-tabs align="justify" inline-label narrow-indicator>
+            <q-tab @click="uploadFile()" icon="add_circle" :label="t('globals.add')" />
+        </q-tabs>
+    </teleport-slot>
 
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
         v-model="multimediaDialog"
-        :maximized="multimediaMaximizedDialog"
         transition-show="slide-up"
         transition-hide="slide-down"
     >
-        <q-card style="height: 80%; min-width: 80%">
-            <q-card-section class="row items-center q-pb-none q-gutter-md">
-                <q-avatar
-                    :icon="icon"
-                    color="primary"
-                    text-color="white"
-                    size="xl"
-                    v-if="icon"
+        <q-toolbar class="absolute zindex close-button">
+            <q-space />
+            <q-btn icon="close" color="primary" round dense v-close-popup />
+        </q-toolbar>
+        <q-carousel swipeable animated v-model="multimediaSlide" arrows class="fit">
+            <q-carousel-slide
+                v-for="media of claimDms"
+                :key="media.dmsFk"
+                :name="media.dmsFk"
+            >
+                <q-img
+                    :src="media.url"
+                    class="fit"
+                    fit="scale-down"
+                    v-if="!media.isVideo"
                 />
-                <span class="text-h6 text-grey">{{ message }}</span>
-                <q-space />
-                <q-btn icon="close" flat round dense v-close-popup />
-            </q-card-section>
-
-            <q-card-section class="q-pt-none">
-                <q-carousel swipeable animated v-model="multimediaSlide" arrows>
-                    <q-carousel-slide
-                        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"
-                        />
-                        <q-video
-                            class="q-ma-none"
-                            :src="getImagePath(media)"
-                            v-if="media.isVideo"
-                            muted
-                        />
-                    </q-carousel-slide>
-                </q-carousel>
-            </q-card-section>
-        </q-card>
+                <q-video
+                    class="q-ma-none fit"
+                    :src="media.url"
+                    v-if="media.isVideo"
+                    muted
+                />
+            </q-carousel-slide>
+        </q-carousel>
     </q-dialog>
     <!-- MULTIMEDIA DIALOG END-->
 </template>
 
 <style lang="scss" scoped>
+.q-dialog__inner--minimized > div {
+    max-width: 80%;
+}
 .multimediaParent {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -238,14 +264,10 @@ function setDefaultParams() {
     height: 250px;
 
     .q-img {
-        height: 100%;
-        width: 100%;
         object-fit: cover;
         background-color: black;
     }
     video {
-        height: 100%;
-        width: 100%;
         object-fit: cover;
         background-color: black;
     }
@@ -255,9 +277,18 @@ function setDefaultParams() {
     opacity: 0.5;
 }
 
-.q-video {
-    height: 100%;
-    width: 100%;
+.delete-button {
+    top: 10px;
+    left: 10px;
+}
+
+.close-button {
+    top: 1%;
+    right: 10%;
+}
+
+.zindex {
+    z-index: 1;
 }
 </style>
 
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 8461eb6bd..6f734b917 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router';
 import axios from 'axios';
 import Paginate from 'src/components/PaginateData.vue';
 import FetchData from 'components/FetchData.vue';
-import TeleportSlot from 'components/ui/TeleportSlot';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import { toDate } from 'src/filters';
 
 const quasar = useQuasar();
@@ -90,22 +90,38 @@ function hide() {
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
-                                        <q-item-label>{{ row.worker.user.name }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('claim.rma.user')
+                                        }}</q-item-label>
+                                        <q-item-label>{{
+                                            row.worker.user.name
+                                        }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('claim.rma.created')
+                                        }}</q-item-label>
                                         <q-item-label>
-                                            {{ toDate(row.created, { timeStyle: 'medium' }) }}
+                                            {{
+                                                toDate(row.created, {
+                                                    timeStyle: 'medium',
+                                                })
+                                            }}
                                         </q-item-label>
                                     </q-item-section>
                                 </q-item>
                             </q-list>
                         </q-item-section>
                         <q-card-actions vertical class="justify-between">
-                            <q-btn flat round color="orange" icon="vn:bin" @click="confirmRemove(row.id)">
+                            <q-btn
+                                flat
+                                round
+                                color="orange"
+                                icon="vn:bin"
+                                @click="confirmRemove(row.id)"
+                            >
                                 <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
                             </q-btn>
                         </q-card-actions>
@@ -124,7 +140,13 @@ function hide() {
             </q-card-section>
 
             <q-card-actions align="right">
-                <q-btn flat :label="t('globals.no')" color="primary" v-close-popup autofocus />
+                <q-btn
+                    flat
+                    :label="t('globals.no')"
+                    color="primary"
+                    v-close-popup
+                    autofocus
+                />
                 <q-btn flat :label="t('globals.yes')" color="primary" @click="remove()" />
             </q-card-actions>
         </q-card>
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 30be6fd96..597d3e61b 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -81,7 +81,7 @@ export default {
                     path: 'photos',
                     meta: {
                         title: 'photos',
-                        icon: 'vn:image',
+                        icon: 'image',
                     },
                     component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
                 },