Initial commit

app/components/media/ChipImage.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="card image-card m-0" style="
+    outline: rgba(0, 0, 0, 0.2) solid 1px; 
+    box-shadow: none; 
+    height: 100%; 
+    overflow: hidden;
+    border-radius: 6px;
+  ">
+    <div class="is-clickable" :title="file.file__name">
+      <div v-if="file.file__name.endsWith('.pdf')" class="p-2 is-flex is-justify-content-center is-align-items-center" style="min-height: 120px">
+        <SvgIcon v-bind="{ name: 'pdf.svg', type: 'primary', size: 32 }" />
+      </div>
+      <div
+        v-else
+        class="card-image"
+        @click="open()"
+      >
+        <figure class="image is-4by3 has-background-black">
+          <nuxt-img
+            :src="image"
+            loading="lazy"
+            alt="Hình ảnh"
+            style="object-fit: contain;"
+          />
+        </figure>
+      </div>
+    </div>
+    <div class="card-content p-2">
+      <p class="is-size-7" style="overflow: hidden; white-space: pre; text-overflow: ellipsis">{{ file.file__name }}</p>
+      <div id="ignore" class="buttons are-small is-gap-0.5 is-justify-content-end">
+        <button class="button is-white" @click="this.$copyToClipboard(`${$getpath()}static/files/${file.file__file}`)">
+          <span class="icon">
+            <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
+          </span>
+        </button>
+        <button class="button is-white" @click="download()">
+          <span class="icon">
+            <SvgIcon v-bind="{ name: 'download.svg', type: 'primary', size: 18 }" />
+          </span>
+        </button>
+        <button v-if="$getEditRights()" class="button is-white" @click="askConfirm()">
+          <span class="icon">
+            <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
+          </span>
+        </button>
+      </div>
+    </div>
+    <Modal 
+      v-if="showmodal" 
+      v-bind="showmodal" 
+      @confirm="remove()" 
+      @remove="remove" 
+      @close="showmodal=undefined" 
+    />
+  </div>
+</template>
+<script>
+export default {
+  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'
+      }
+    },
+    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() {
+      this.showmodal = {
+        component: 'dialog/Confirm',
+        title: 'Xác nhận',
+        width: '500px',
+        height: '100px',
+        vbind: {
+          content: 'Bạn có đồng ý xóa hình ảnh này không?', 
+          duration: 10
+        }
+      }
+    },
+    remove() {
+      this.showmodal = undefined;
+      this.$emit('modalevent', {name: 'remove'});
+      this.$emit('remove');
+    },
+  }
+}
+</script>