finish memos cover

2020-04-18 15:58:48 +02:00
parent e9b4fb573f
commit a12af09102
27 changed files with 661 additions and 32 deletions
--- a/resources/js/components/UploadableImage.vue
+++ b/resources/js/components/UploadableImage.vue
@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <img
+            v-if="image"
+            :class="classes"
+            :src="imageObject.data.attributes.path"
+            ref="image"
+            :alt="alt">
+    </div>
+</template>
+
+<script>
+    import Dropzone from 'dropzone'
+    import { mapGetters } from 'vuex'
+
+    export default {
+        name: "UploadableImage",
+        props: {
+            imageWidth: {
+                type: Number,
+                required: true,
+            },
+            imageHeight: {
+                type: Number,
+                required: true,
+            },
+            location: {
+                type: String,
+                required: true
+            },
+            image: {
+                type: Object,
+                default: null,
+            },
+            author: {
+                type: Object,
+                required: true
+            },
+            id: {
+                type: Number,
+                required: true
+            },
+            model: {
+                type: String,
+                required: true
+            },
+            classes: String,
+            alt: String
+        },
+        data: () => {
+            return {
+                dropzone: null,
+                dropImage: null,
+            }
+        },
+        mounted() {
+            if(this.authUser.data.user_id === this.author.data.user_id) {
+                this.dropzone = new Dropzone(this.$refs.image, this.settings)
+            }
+        },
+        computed: {
+            ...mapGetters({
+                authUser: 'authUser'
+            }),
+            settings() {
+                let url = '/api/images/' + this.model + '/' + this.id
+                return {
+                    paramName: 'image',
+                    url: url,
+                    acceptedFiles: 'image/*',
+                    params: {
+                        'width': this.imageWidth,
+                        'height': this.imageHeight,
+                        'location': this.location,
+                    },
+                    headers: {
+                        'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
+                    },
+                    success: (e, res) => {
+                        this.dropImage = res
+                    }
+                }
+            },
+            imageObject() {
+                return this.dropImage || this.image
+            }
+        }
+    }
+</script>