fe-accone/test/vuex/acc-one-po-asset/components/dialog-add-attachment.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 ATTACHMENT
                </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-show="!viewonlymode"
                            >
                        </v-flex>
                        <v-flex
                            v-for="(docs) in prview_attachment"
                            xs4 class="pa-2" :key="docs.attach_id"
                        >
                            <div style="position: relative; padding-bottom: 35px;">
                                <v-img
                                    :src="makeImageUrl(docs)" aspect-ratio="1" contain
                                    class="grey lighten-2" @click="fullview(docs, -1)"
                                ></v-img>
                            </div>
                        </v-flex>
                        <v-flex
                            v-for="(url, index) in tempdocs_view"
                            xs4 class="pa-2" :key="index"
                        >
                            <div style="position: relative; padding-bottom: 35px;">
                                <v-img
                                    :src="url" aspect-ratio="1" contain
                                    class="grey lighten-2" @click="fullview(url, index)"
                                ></v-img>
                                <v-icon
                                    style="position: absolute; top: 5px; right: 5px; z-index: 1; cursor: pointer;"
                                    @click="removedocs(index)" color="red"
                                >close</v-icon>
                            </div>
                        </v-flex>
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="cancel_file()" color="error" class="white--text">Batal</v-btn>
                    <v-btn v-show="!viewonlymode" @click="save_file()" 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>
                    {{ docstitle }}
                    <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="docsurl" contain class="grey lighten-2"
                        ></v-img>
                    </div>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn mr-2 color="red" flat outline @click="dialog_fullview = false">
                        Tutup
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            tempdocs_view: [],
            tempdocs_file: [],
            docstitle: "",
            docsurl: "",
            dialog_fullview: false
        }
    },
    computed: {
        dialog_attachment: {
            get() {
                return this.$store.state.common.dialog_attachment
            },
            set(val) {
                this.$store.commit("common/update_dialog_attachment", val)
            }
        },
        selected_orderaset: {
            get() {
                return this.$store.state.common.selected_orderaset
            },
            set(val) {
                this.$store.commit("common/update_selected_orderaset", val)
            }
        },
        prview_attachment() {
            return this.$store.state.common.assets_attachment
        },
        loading_process() {
            return this.$store.state.common.loading_process
        },
        viewonlymode() {
            return this.$store.state.common.viewonlymode;
        }
    },
    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.tempdocs_file.push(file);
                this.tempdocs_view.push(url);
            }
        },
        makeImageUrl(docs) {
            const year = new Date(docs.created).getFullYear();
            const baseURL = BASE_URL + `/one-media/order-asset/${year}/`;
            return baseURL + docs.img_url;
        },
        fullview(docs, index) {
            if (index < 0) {
                this.docstitle = docs.img_url;
                this.docsurl = this.makeImageUrl(docs);
            } else {
                this.docstitle = this.tempdocs_view[index];
                this.docsurl = docs;
            }

            this.dialog_fullview = true;
        },
        removedocs(index) {
            URL.revokeObjectURL(this.tempdocs_view[index]);
            this.tempdocs_view.splice(index, 1);
            this.tempdocs_file.splice(index, 1);
        },
        cancel_file() {
            this.tempdocs_file = [];
            this.tempdocs_view = [];
            this.$store.commit("common/update_viewonlymode", false);
            this.dialog_attachment = false;
        },
        save_file() {
            if (!this.loading_process) {
                let form_data = new FormData();
                let listfiles = this.tempdocs_file;
                let orderaset = this.selected_orderaset;

                for (let index = 0; index < listfiles.length; index++) {
                    const file = listfiles[index];
                    form_data.append(`files[${index}]`, file);
                }

                form_data.append('contractID', orderaset.contractID);
                form_data.append('poID', orderaset.PurchaseOrderID);
                form_data.append('ponumber', orderaset.PurchaseOrderNumber);
                form_data.append('contractDate', orderaset.contractDate);
                form_data.append('token', one_token());

                this.$store.dispatch('common/uploadAttachment', form_data);
            } else {
                const snac = { color: 'warning', msg: 'proses sedang berjalan', state: true };
                this.$store.commit('common/update_snackbar', snac);
            }
        }
    },
    watch: {
        dialog_fullview(val) {
            if (!val) {
                this.docstitle = "";
                this.docsurl = "";
            }
        },
        dialog_attachment(val) {
            if (val) {
                this.tempdocs_file = [];
                this.tempdocs_view = [];
            }
        }
    },
}
</script>