cssd-doc/cssd-back
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-back.git synced 2026-10-13 21:41:07 +03:30
Code Issues Packages Projects Releases Wiki Activity

feat : lightbox

Browse Source
This commit is contained in:
zeinab.ashrafi
2025-04-27 10:38:26 +03:30
parent d84a9a18c0
commit 3ec315bc09
4 changed files with 83 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/show/views/TestResult/ShowTestResult.vue
+49 -18
View File
@@ -114,24 +114,26 @@
</template>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="my-3">
<h3 class="ml-3 CSSD-font">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light"/>
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
<template v-if="file.file_type == 'document'">
<a target="_blank" :href="'/'+file.thumbnail">
<v-icon class="mr-2 caption">fas fa-check</v-icon>
{{ file.file_name }}
</a>
</template>
<template v-else>
<img :src="'/'+file.thumbnail" style="width: 100%"/>
</template>
<v-layout align-left justify-left wrap class="my-3">
<v-layout align-left justify-left wrap class="my-3" v-if="data.files && data.files.length">
<h3 class="CSSD-font">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light"/>
</v-flex>
<v-layout row wrap class="align-center">
<v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
<template v-if="file.file_type == 'document'">
<a target="_blank" :href="'/'+file.thumbnail">
<v-icon class="mr-2 caption">fas fa-check</v-icon>
{{ file.file_name }}</a>
</template>
<template v-else>
<img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
</template>
</v-flex>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="my-3">
<h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
@@ -140,7 +142,7 @@
</v-flex>
<v-layout row wrap class="ml-4 align-center mt-2">
<v-flex xs12 md6 sm6 v-if="barcodeimg">
<img :src="barcodeimg" class="barcode-container"><br/>
<img :src="barcodeimg" class="barcode-container" style="width: 100%;max-width: 300px;"><br/>
<span class="CSSD-font">Item ID : {{ data.id }}</span>
</v-flex>
<v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-C">
@@ -158,13 +160,20 @@
</v-flex>
</v-layout>
</material-card>
<vue-image-lightbox
v-if="showLightbox"
:media="lightboxImages"
:index="lightboxIndex"
@close="showLightbox = false"
/>
</v-container>
</template>
<script>
import {mapGetters, mapMutations} from "vuex";
import axios from "axios";
import {urls} from "@show/config/urls";
import VueImageLightbox from 'vue-image-lightbox'
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
export default {
data: () => ({
@@ -174,7 +183,18 @@ export default {
User: '',
QRCodeimg: '',
barcodeimg: '',
showLightbox: false,
lightboxIndex: 0,
lightboxImages: [],
}),
components: {
VueImageLightbox,
},
computed: {
imagesOnly() {
return this.data.files && this.data.files.length? this.data.files.filter(file => file.file_type !== 'document') : [];
},
},
methods: {
async load(id) {
const result = await axios.get(urls.showTestResult(id));
@@ -228,12 +248,23 @@ export default {
WinPrint.focus();
WinPrint.print();
WinPrint.close();
},
openLightbox(index) {
this.lightboxIndex = index;
this.showLightbox = false;
this.$nextTick(() => {
this.showLightbox = true;
});
}
},
created() {
if (this.$route.params.id) {
this.load(this.$route.params.id);
}
this.lightboxImages = this.imagesOnly && this.imagesOnly.length ? this.imagesOnly.map(file => ({
src: file.thumbnail,
thumb: file.thumbnail,
})) : [];
},
};