fe-accone/test/vuex/acc-one-po-jasa/components/dialogAddAttachment.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>
            UPLOAD BERITA ACARA
        </v-card-title>
        <v-card-text>
            <v-layout row wrap>
                <v-flex xs12 class="mb-2 pa-2" style="border: 1px solid black;">
                    <input 
                        type="file" id="files" ref="files"  multiple 
                        accept="image/*" v-on:change="addAttach($event)"
                    >
                </v-flex>
                <v-flex
                    v-for="(note) in prview_attachment"
                    xs4 class="pa-2" :key="note.attach_id"
                >
                    <div class="image-container">
                        <v-img
                            :src="makeImageUrl(note)" aspect-nation="1" contain 
                            class="grey lighten-2" @click="fullview(note, -1)"
                        ></v-img>
                    </div>
                </v-flex>
                <v-flex 
                    v-for="(url, index) in attachviews"
                    xs4 class="pa-2" :key="index"
                >
                    <div class="image-container">
                        <v-img
                            :src="url" aspect-ratio="1" contain 
                            class="grey lighten-2" @click="fullview(url, index)"
                        ></v-img>
                        <v-icon
                            color="red" class="close-button"
                            @click="removeAttachment(index)"
                        >close</v-icon>
                    </div>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="BatalAddAttachment()" color="error" class="white--text">Batal</v-btn>
            <v-btn @click="SimpanAttachment()" color="primary" class="white--text">Simpan</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>

<v-dialog v-model="dialog_fullview" persistent max-width="50vw">
    <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
            {{ viewtitle }}
            <v-spacer></v-spacer>
            <v-btn color="red" fab small outline @click="dialog_fullview = false">
                <v-icon color="red">close</v-icon>
            </v-btn>
        </v-card-title>
        <v-card-text style="max-height: 80vh; overflow-y: auto;">
            <div class="pa-2">
                <v-img
                    :src="viewurl" 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>
    .close-button {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
        cursor: pointer;
    }
    .image-container {
        position: relative;
        padding-bottom: 35px;
    }
</style>

<script>
module.exports = {
    data() {
        return {
            attachfiles: [],
            attachviews: [],
            viewtitle: "",
            viewurl: "",
            dialog_fullview: false
        }
    },
    computed: {
        dialog_attachment: {
            get() {
                return this.$store.state.poservice.dialog_attachment
            },
            set(val) {
                this.$store.commit("poservice/update_dialog_attachment", val)
            }
        },
        pojasa_attachment: {
            get() {
                return this.$store.state.poservice.pojasa_attachment
            },
            set(val) {
                this.$store.commit("poservice/update_pojasa_attachment", val)
            }
        },
        loading_process() {
            return this.$store.state.poservice.loading_process
        },
        prview_attachment() {
            return this.$store.state.poservice.prview_attachment
        }
    },
    methods: {
        addAttach(event) {
            const files = event.target.files;
            if (files.length == 0) {
                return;
            }

            for (let index = 0; index < files.length; index++) {
                const file = files[index];
                const url = URL.createObjectURL(file);

                this.attachfiles.push(file);
                this.attachviews.push(url);
            }
            event.target.value = null;
        },
        makeImageUrl(note) {
            const year = new Date(note.created).getFullYear();
            const baseURL = BASE_URL + `/one-media/order-jasa/${year}/`;
            return baseURL + note.img_url;
        },
        fullview(url, index) {
            if (index < 0) {
                this.viewtitle = url.img_url;
                this.viewurl = this.makeImageUrl(url);
            } else {
                this.viewtitle = this.attachfiles[index].name;
                this.viewurl = url;
            }
            
            this.dialog_fullview = true;
        },
        removeAttachment(index) {
            URL.revokeObjectURL(this.attachviews[index])
            this.attachfiles.splice(index, 1)
            this.attachviews.splice(index, 1)
        },
        SimpanAttachment() {
            if (!this.loading_process) {
                let form_data = new FormData();
                let listfiles = this.attachfiles;
                let pojasa = this.pojasa_attachment;

                for (let index = 0; index < listfiles.length; index++) {
                    let file = this.attachfiles[index];
                    form_data.append('files['+ index + ']', file);
                }

                const user = one_user();
                form_data.append('tjasaID', pojasa.T_KontrakJasaID);
                form_data.append('poID', pojasa.PurchaseOrderID);
                form_data.append('ponumber', pojasa.PurchaseOrderNumber);
                form_data.append('token', one_token());

                this.$store.dispatch("poservice/uploadAttachment", form_data);   
            } else {
                let snac = {color: 'warning', msg: 'proses sedang berjalan', state: true};
                this.$store.commit('poservice/update_snackbar', snac);
            }
        },
        BatalAddAttachment() {
            this.attachfiles = [];
            this.attachviews = [];
            this.dialog_attachment = false;
        }
    },
    watch: {
        dialog_fullview(val) {
            if (!val) {
                this.viewurl = "",
                this.viewtitle = ""
            }
        },
        dialog_attachment(val) {
            if (val) {
                this.attachfiles = []
                this.attachviews = []
            }
        }
    },
}
</script>