Initial commit

app/components/media/ImageShow.vue

@@ -0,0 +1,58 @@
+<template>
+<div class="columns mx-0" v-if="picture">
+  <div class="column is-narrow" style="border-right: 2px solid #D3D3D3;" v-if="viewport>1">
+    <div class="pr-2" style="max-height: 700px; overflow-y: auto;">
+    <div v-for="(v,i) in picture" class="pb-4">
+    <figure class="image is-clickable" style="width:80px" @click="current=i">
+      <img :src="v.image">
+      </figure>
+    </div>
+    </div>
+    </div>
+    <div class="column">
+      <b-carousel :autoplay="false" :indicator="viewport===1? true : false" icon-size="is-medium" v-model="current">
+        <b-carousel-item v-for="(item, i) in picture" :key="i">
+          <ChipImage @remove="check(item, i)" v-bind="{extend: false, image: item.image, file: item.file, show: ['download', 'delete']}"></ChipImage>
+        </b-carousel-item>
+    </b-carousel>
+    </div>
+</div>
+</template>
+<script>
+export default {
+  props: ['row', 'image', 'pagename', 'api'],
+  data() {
+    return {
+      current: 0,
+      picture: undefined,
+      timer: undefined
+    }
+  },
+  async created() {
+    let arr = []
+    let files = await this.$getdata('file', {file__in: this.image})
+    this.image.map(v=>{
+      let found = this.$find(files, {file: v})
+      arr.push({image: `${this.$getpath()}download/?name=${v}`, file: found})
+    })
+    this.picture = arr
+  },
+  computed: {
+    viewport: {
+      get: function() {return this.$store.state.viewport},
+      set: function(val) {this.$store.commit("updateViewPort", {viewport: val})}
+    }
+  },
+  methods: {
+    check(v, i) {
+      if(!this.timer) this.timer = setTimeout(()=>this.remove(v,i), 200)
+    },
+    async remove(v, i) {
+      this.$delete(this.picture, i)
+      await this.$deleteapi(this.api, v.file.id)
+      this.timer = undefined
+      if(this.picture.length===0) this.$emit('close')
+    }
+  }
+}
+</script>