feat(claim): migrate photos section

.eslintrc.js

@@ -57,6 +57,7 @@ module.exports = {
     // add your custom rules here
     rules: {
         'prefer-promise-reject-errors': 'off',
+        'no-unused-vars': 'warn',
 
         // allow debugger during development only
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

src/components/ui/VnConfirm.vue

@@ -4,13 +4,17 @@ import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
 const $props = defineProps({
-    question: {
+    icon: {
         type: String,
         default: '',
     },
+    question: {
+        type: String,
+        default: 'Confirm',
+    },
     message: {
         type: String,
-        default: '',
+        default: 'Are you sure you want to continue?',
     },
 });
 
@@ -20,13 +24,21 @@ const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t } = useI18n();
 
 const question = ref($props.question);
-const message = ref($props.question);
+const message = ref($props.message);
 const isLoading = ref(false);
 </script>
 <template>
     <q-dialog ref="dialogRef" persistent>
         <q-card class="q-pa-sm">
-            <q-card-section class="row items-center q-pb-none">
+            <q-card-section class="row items-center q-pb-none q-gutter-md">
+                <q-avatar
+                    :icon="icon"
+                    color="primary"
+                    text-color="white"
+                    size="xl"
+                    rounded
+                    v-if="icon != ''"
+                />
                 <span class="text-h6 text-grey">{{ message }}</span>
                 <q-space />
                 <q-btn icon="close" flat round dense v-close-popup />
@@ -36,7 +48,12 @@ const isLoading = ref(false);
             </q-card-section>
             <q-card-actions align="right">
                 <q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
-                <q-btn :label="t('globals.confirm')" color="primary" :loading="isLoading" @click="onDialogOK" />
+                <q-btn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :loading="isLoading"
+                    @click="onDialogOK()"
+                />
             </q-card-actions>
         </q-card>
     </q-dialog>

src/pages/Claim/Card/ClaimPhoto.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { ref, computed } from 'vue';
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+
+import { useRouter } from 'vue-router';
+// 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 session = useSession();
+const token = session.getToken();
+const quasar = useQuasar();
+
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+
+const multimedia = ref([]);
+const claimDmsFilter = ref({
+    include: [
+        {
+            relation: 'dms',
+        },
+    ],
+    where: { claimFk: entityId },
+});
+
+const multimediaDialog = ref();
+const multimediaMaximizedDialog = ref();
+const multimediaSlide = ref();
+
+function getImagePath(media) {
+    return `http://localhost:9000/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`;
+}
+
+function openDialog(dmsId) {
+    multimediaSlide.value = dmsId;
+    multimediaDialog.value = true;
+    multimediaMaximizedDialog.value = false;
+}
+
+function viewDeleteDms(dmsId) {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                question: 'Are you sure you want to continue?',
+                message: 'This file will be deleted',
+                icon: 'delete',
+            },
+        })
+        .onOk(() => deleteDms(dmsId));
+}
+
+async function deleteDms(index) {
+    console.log(index);
+    const dmsId = multimedia.value[index].dmsFk;
+    await axios.post(`ClaimDms/${dmsId}/removeFile`);
+    console.log(multimedia.value.splice(index, 1));
+    multimedia.value = multimedia.value.splice(index, 1);
+    console.log(index, multimedia.value);
+}
+
+function setMultimedia(data) {
+    multimedia.value = data.map((media) => {
+        media.isVideo = media.dms.contentType == 'video/mp4';
+        return media;
+    });
+}
+//cover fill contain none scale-down
+</script>
+<template>
+    <fetch-data
+        url="ClaimDms"
+        :filter="claimDmsFilter"
+        @on-fetch="(data) => 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"
+            >
+                <q-btn
+                    icon="delete"
+                    color="primary"
+                    text-color="white"
+                    size="md"
+                    class="all-pointer-events absolute"
+                    style="top: 7%; left: 7%; z-index: 1"
+                    @click.stop="viewDeleteDms(index)"
+                />
+                <q-img
+                    :src="getImagePath(media)"
+                    class="rounded-borders cursor-pointer"
+                    @click="openDialog(media.dmsFk)"
+                    v-if="!media.isVideo"
+                >
+                </q-img>
+                <q-video
+                    :src="getImagePath(media)"
+                    class="rounded-borders cursor-pointer"
+                    muted="muted"
+                    :poster="getImagePath(media)"
+                    v-if="media.isVideo"
+                >
+                </q-video>
+            </div>
+        </q-card>
+    </div>
+
+    <!-- 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-bar>
+                <q-space />
+
+                <q-btn
+                    dense
+                    flat
+                    :icon="multimediaMaximizedDialog ? 'minimize' : 'crop_square'"
+                    color="primary"
+                    @click="
+                        multimediaMaximizedDialog = multimediaMaximizedDialog
+                            ? false
+                            : true
+                    "
+                >
+                    <q-tooltip
+                        v-if="multimediaMaximizedDialog"
+                        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"
+                        :key="media.dmsFk"
+                        :name="media.dmsFk"
+                    >
+                        <q-img
+                            :src="getImagePath(media)"
+                            v-if="!media.isVideo"
+                            class="absolute-full"
+                            fit="scale-down"
+                        />
+                        <q-video
+                            class="absolute-full"
+                            :src="getImagePath(media)"
+                            v-if="media.isVideo"
+                        />
+                    </q-carousel-slide>
+                </q-carousel>
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+    <!-- MULTIMEDIA DIALOG END-->
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+}
+
+.multimedia {
+    height: 250px;
+    padding: 7px;
+    margin-bottom: 14px;
+    .q-img {
+        height: 250px;
+        object-fit: cover;
+        background-color: black;
+    }
+    .q-video {
+        height: 250px;
+        object-fit: cover;
+        background-color: black;
+    }
+}
+</style>

src/router/modules/claim.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'ClaimMain' },
     menus: {
         main: ['ClaimList', 'ClaimRmaList'],
-        card: ['ClaimBasicData', 'ClaimRma'],
+        card: ['ClaimBasicData', 'ClaimRma', 'ClaimPhotos'],
     },
     children: [
         {
@@ -76,6 +76,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
                 },
+                {
+                    name: 'ClaimPhotos',
+                    path: 'photos',
+                    meta: {
+                        title: 'photos',
+                        icon: 'vn:image',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
+                },
             ],
         },
     ],