changes

components/media/ImageGallery.vue

@@ -0,0 +1,54 @@
+<template>
+  <div v-if="files">
+    <div class="has-text-right" v-if="!hideopt">
+      <FileUpload @files="getFiles"></FileUpload>
+    </div>
+  <div class="field is-grouped is-grouped-multiline" v-if="files.length>0">
+    <div class="control mb-2" v-for="(v,i) in files">
+      <ChipImage style="width: 128px;" @remove="remove(v,i)"
+      v-bind="{row: row, show: show, pagename: pagename, api: api, file: v, image: `${$getpath()}download/?name=${v.file__file}&type=file`}"></ChipImage>
+    </div>
+  </div>
+  <div class="mt-3 has-text-grey f5-16" v-if="files.length===0">
+    {{ store.lang==='en'? 'No images' : "Chưa có hình ảnh"}}
+  </div>
+  <Modal @close="showmodal=undefined" 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', 'pagename', 'api', 'hideopt', 'vapi', 'show'],
+  data() {
+    return {
+      showmodal: undefined,
+      files: undefined
+    }
+  },
+  async created() {
+    this.files = await this.$getdata(this.api, {ref: this.row.id, file__type: 2})
+  },
+  methods: {
+    async remove(v, i) {
+      this.$remove(this.files, i)
+      await this.$deleteapi(this.api, v.id)
+    },
+    async getFiles(files) {
+      let arr = files.map(v=>{return {ref: this.row.id, file: v.id}})
+      let found = this.$findapi(this.api)
+      let rs = await this.$insertapi(this.api, arr, found.params.values)
+      if(rs==='error') return
+      this.files = this.files.concat(rs)
+      if(this.pagename) {
+        let vapi = this.vapi? this.vapi : this.api.replace('file', '')
+        let ele = await this.$getdata(vapi, {id: this.row.id}, undefined, true)
+        this.$updatepage(this.pagename, ele)
+      }
+    }
+  }
+}
+</script>