105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<v-dialog v-model="dialog_attachment" persistent max-width="60vw">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2" primary-title>
|
|
VIEW ATTACHMENT
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-layout row wrap>
|
|
<v-flex
|
|
v-for="(nota) in list_attachment"
|
|
xs4 class="pa-2" :key="nota.attach_id"
|
|
>
|
|
<div style="position: relative; padding-bottom: 35px;">
|
|
<v-img
|
|
:src="makeImageURL(nota)" aspect-ratio="1" contain
|
|
class="grey lighten-2" @click="fullview(nota)"
|
|
></v-img>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn @click="tutupViewAttachment()" color="error" class="white--text">Tutup</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog v-model="dialog_fullview" persistent max-width="60vw">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2" primary-title>
|
|
{{ view_title }}
|
|
</v-card-title>
|
|
<v-card-text style="max-height: 80vh; overflow-y: auto;">
|
|
<div class="pa-2">
|
|
<v-img :src="view_url" contain class="grey lighten-2"></v-img>
|
|
</div>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn class="mr-2" color="red" flat outline @click="dialog_fullview = false">
|
|
Tutup
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.close-button {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
dialog_fullview: false,
|
|
view_title: "",
|
|
view_url: ""
|
|
}
|
|
},
|
|
computed: {
|
|
dialog_attachment: {
|
|
get() {
|
|
return this.$store.state.orderAsset.dialog_attachment;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("orderAsset/update_dialog_attachment", val);
|
|
}
|
|
},
|
|
list_attachment() {
|
|
return this.$store.state.orderAsset.list_attachment;
|
|
}
|
|
},
|
|
methods: {
|
|
makeImageURL(nota) {
|
|
const year = new Date(nota.created).getFullYear();
|
|
const baseURL = BASE_URL + `/one-media/order-asset/${year}/`;
|
|
return baseURL + nota.img_url;
|
|
},
|
|
fullview(nota) {
|
|
this.view_title = nota.img_url;
|
|
this.view_url = this.makeImageURL(nota)
|
|
this.dialog_fullview = true;
|
|
},
|
|
tutupViewAttachment() {
|
|
this.view_title = ""
|
|
this.view_url = ""
|
|
this.dialog_attachment = false
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
}
|
|
}
|
|
</script>
|