feature: po pay downpayment

test/vuex/acc-one-approval-po-asset/components/dialog-attachment.vue

@@ -0,0 +1,104 @@
+<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>