Add: Sortable collection books, play from collections, collection book table row updates #151

client/components/modals/UploadImageModal.vue

@@ -0,0 +1,107 @@
+<template>
+  <modals-modal v-model="show" name="upload-image" :width="500" :height="'unset'">
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div class="flex items-center">
+        <div class="w-40 pr-2 pt-4" style="min-width: 160px">
+          <ui-file-input ref="fileInput" @change="fileUploadSelected">Upload Cover</ui-file-input>
+        </div>
+        <form @submit.prevent="submitForm" class="flex flex-grow">
+          <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
+          <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
+        </form>
+      </div>
+      <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
+        <p class="text-lg">Preview Cover</p>
+        <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
+        <div class="flex justify-center py-4">
+          <covers-preview-cover :src="previewUpload" :width="240" />
+        </div>
+        <div class="absolute bottom-0 right-0 flex py-4 px-5">
+          <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
+          <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    entity: String,
+    entityId: String
+  },
+  data() {
+    return {
+      imageUrl: null,
+      previewUpload: null,
+      processingUpload: false
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) this.init()
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    init() {},
+    fileUploadSelected() {
+      this.previewUpload = URL.createObjectURL(file)
+      this.selectedFile = file
+    },
+    resetCoverPreview() {
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.reset()
+      }
+      this.previewUpload = null
+      this.selectedFile = null
+    },
+    submitCoverUpload() {
+      this.processingUpload = true
+      var form = new FormData()
+      form.set('cover', this.selectedFile)
+
+      this.$axios
+        .$post(`/api/${this.entity}/${this.entityId}/cover`, form)
+        .then((data) => {
+          if (data.error) {
+            this.$toast.error(data.error)
+          } else {
+            this.$toast.success('Cover Uploaded')
+            this.resetCoverPreview()
+          }
+          this.processingUpload = false
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+          this.$toast.error(errorMsg)
+          this.processingUpload = false
+        })
+    },
+    async submitForm() {
+      this.processingUpload = true
+
+      var success = await this.$axios.$post(`/api/${this.entity}/${this.entityId}/cover`, { url: this.imageUrl }).catch((error) => {
+        console.error('Failed to download cover from url', error)
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+        this.$toast.error(errorMsg)
+        return false
+      })
+
+      this.processingUpload = false
+    }
+  }
+}
+</script>