changes

components/media/ChipImage.vue

@@ -0,0 +1,81 @@
+<template>
+<div>
+  <div class="image-container">
+    <a @click="open()"><img :src="image" style="max-height: 86vh !important;"></a>
+    <div class="image-label">
+     <span class="is-clickable" @click="copyImage()" v-if="display.findIndex(v=>v==='copy')>=0">
+      <SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 20}"></SvgIcon>
+    </span>
+    <span class="is-clickable ml-5" @click="download()" v-if="display.findIndex(v=>v==='download')>=0">
+      <SvgIcon v-bind="{name: 'download.svg', type: 'primary', size: 20}"></SvgIcon>
+    </span>
+    <span class="is-clickable ml-5" @click="askConfirm()" v-if="display.findIndex(v=>v==='delete')>=0">
+      <SvgIcon v-bind="{name: 'bin1.svg', type: 'danger', size: 18}"></SvgIcon>
+    </span>
+    </div>
+  </div>
+  <Modal @close="showmodal=undefined" @remove="remove" @confirm="remove()" v-bind="showmodal" v-if="showmodal"></Modal>
+</div>
+</template>
+<script>
+import { useStore } from '~/stores/index'
+export default {
+  setup() {
+    const store = useStore()
+    return { store }
+  },
+  props: ['row', 'api', 'pagename', 'file', 'image', 'show', 'extend'],
+  data() {
+    return {
+      showmodal: undefined,
+      display: this.show || []
+    }
+  },
+  methods: {
+    open() {
+      if(!this.file || this.extend===false) return
+      this.showmodal = {title: this.file.file__name, component: 'media/ChipImage', 
+      vbind: {extend: false, show: this.show, file: this.file, 
+      image: `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`}}
+    },
+    info() {
+      if(!this.file) return
+      this.showmodal = {vbind: {file: this.file}, component: 'media/ImageAttr', 
+      title: 'Thông tin trích xuất từ hình ảnh', width: '35%', height: '50vh'}
+    },
+    find() {
+      this.showmodal = {vbind: {row: this.row, api: this.api, pagename: this.pagename}, component: 'ekyc/IDcheck', 
+      title: 'Kiểm tra CMT / CCCD / HC / GPLX / CMT-CA / CMT-QD', width: '90%', height: '70vh'}
+    },
+    download() {
+      let name = this.file? this.file.file__name || this.file.name : 'download'
+      let path = `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`
+      this.$download(path, name)
+    },
+    askConfirm() {
+      let text = this.store.lang==='en'? 'Do you agree to delete this image' :  `Bạn có đồng ý <b>xóa hình ảnh</b> này không?`
+      this.showmodal = {component: `dialog/Confirm`,title: this.store.lang==='en'? 'Confirm' : 'Xác nhận', width: '500px', height: '100px',
+      vbind: {content: text, duration: 10}}
+    },
+    remove() {
+      this.showmodal = undefined
+      this.$emit('modalevent', {name: 'remove'})
+      this.$emit('remove')
+    },
+    async copyImage() {
+      try {
+        const response = await fetch(`${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`);
+        const blob = await response.blob()
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            [blob.type]: blob
+          })
+        ])
+        this.$snackbar('Copied to clipboard')
+      } catch (err) {
+        console.error(err.name, err.message)
+      }
+    }
+  }
+}
+</script>