refactor

src/components/ui/VnConfirm.vue

@@ -3,28 +3,29 @@ import { ref } from 'vue';
 import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
-const $props = defineProps({
+const { t } = useI18n();
+
+const props = defineProps({
     icon: {
         type: String,
-        default: '',
+        default: null,
     },
     question: {
         type: String,
-        default: 'Confirm',
+        default: null,
     },
     message: {
         type: String,
-        default: 'Are you sure you want to continue?',
+        default: null,
     },
 });
 
 defineEmits(['confirm', ...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
-const { t } = useI18n();
 
-const question = ref($props.question);
-const message = ref($props.message);
+const question = props.question || t('question');
+const message = props.message || t('message');
 const isLoading = ref(false);
 </script>
 <template>
@@ -36,8 +37,7 @@ const isLoading = ref(false);
                     color="primary"
                     text-color="white"
                     size="xl"
-                    rounded
-                    v-if="icon != ''"
+                    v-if="icon"
                 />
                 <span class="text-h6 text-grey">{{ message }}</span>
                 <q-space />
@@ -64,3 +64,15 @@ const isLoading = ref(false);
     min-width: 350px;
 }
 </style>
+
+<i18n>
+    "en": {
+        "question": "Are you sure you want to continue?",
+        "message": "Confirm"
+    }
+
+    "es": {
+        "question": "¿Seguro que quieres continuar?",
+        "message": "Confirmar"
+    }
+</i18n>

src/pages/Claim/Card/ClaimPhoto.vue

@@ -5,14 +5,14 @@ import { useQuasar } from 'quasar';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 import { useRouter } from 'vue-router';
-// import { useI18n } from 'vue-i18n';
+import { useI18n } from 'vue-i18n';
 
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 // import FormModel from 'components/FormModel.vue';
 
 const router = useRouter();
-// const { t } = useI18n();
+const { t } = useI18n();
 const session = useSession();
 const token = session.getToken();
 const quasar = useQuasar();
@@ -50,8 +50,7 @@ function viewDeleteDms(dmsId) {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                question: 'Are you sure you want to continue?',
-                message: 'This file will be deleted',
+                message: t('message'),
                 icon: 'delete',
             },
         })
@@ -83,22 +82,19 @@ function setMultimedia(data) {
         limit="20"
         auto-load
     />
-    <div class="container">
-        <q-card class="row items-start q-mt-sm q-py-md q-pr-md">
-            <div
-                class="col-3 multimedia relative-position"
-                v-for="(media, index) of multimedia"
-                :key="index"
-            >
+    <div class="multimediaParent bg-transparent">
+        <div v-for="(media, index) of multimedia" :key="index" class="relative-position">
             <q-btn
                 icon="delete"
                 color="primary"
                 text-color="white"
                 size="md"
                 class="all-pointer-events absolute"
-                    style="top: 7%; left: 7%; z-index: 1"
+                style="top: 10px; left: 10px; z-index: 1"
                 @click.stop="viewDeleteDms(index)"
+                round
             />
+            <q-card class="multimedia relative-position">
                 <q-img
                     :src="getImagePath(media)"
                     class="rounded-borders cursor-pointer"
@@ -110,13 +106,13 @@ function setMultimedia(data) {
                     :src="getImagePath(media)"
                     class="rounded-borders cursor-pointer"
                     muted="muted"
-                    :poster="getImagePath(media)"
+                    style="pointer-events: none"
                     v-if="media.isVideo"
                 >
                 </q-video>
-            </div>
             </q-card>
         </div>
+    </div>
 
     <!-- MULTIMEDIA DIALOG START-->
     <q-dialog
@@ -180,19 +176,28 @@ function setMultimedia(data) {
 </template>
 
 <style lang="scss" scoped>
-.container {
+.container2 {
     display: flex;
     justify-content: center;
+
+    & div {
+        width: 100%;
+    }
 }
 
-.q-card {
-    width: 100%;
+.multimediaParent {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+
+    grid-auto-rows: auto;
+
+    grid-gap: 1rem;
 }
 
 .multimedia {
-    height: 250px;
-    padding: 7px;
-    margin-bottom: 14px;
+    transition: all 0.5s;
+    opacity: 1;
+
     .q-img {
         height: 250px;
         object-fit: cover;
@@ -204,4 +209,18 @@ function setMultimedia(data) {
         background-color: black;
     }
 }
+
+.multimedia:hover {
+    opacity: 0.5;
+}
 </style>
+
+<i18n>
+    "en": {
+        "message": "This file will be deleted"
+    }
+
+    "es": {
+        "message": "Este archivo va a ser borrado"
+    }
+</i18n>