Make embedded image cropper

src/components/image_cropper/image_cropper.js

@@ -1,5 +1,4 @@
 import Cropper from 'cropperjs'
-import Modal from '../modal/modal.vue'
 import 'cropperjs/dist/cropper.css'
 
 const ImageCropper = {
@@ -8,6 +7,10 @@ const ImageCropper = {
       type: [String, window.Element],
       required: true
     },
+    submitHandler: {
+      type: Function,
+      required: true
+    },
     cropperOptions: {
       type: Object,
       default () {
@@ -25,10 +28,10 @@ const ImageCropper = {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
     },
-    title: {
+    saveButtonLabel: {
       type: String
     },
-    saveButtonLabel: {
+    cancelButtonLabel: {
       type: String
     }
   },
@@ -36,18 +39,17 @@ const ImageCropper = {
     return {
       cropper: undefined,
       dataUrl: undefined,
-      filename: undefined
+      filename: undefined,
+      submitting: false,
+      submitError: null
     }
   },
-  components: {
-    Modal
-  },
   computed: {
-    modalTitle () {
-      return this.title || this.$t('image_cropper.crop_picture')
-    },
-    modalSaveButtonLabel () {
+    saveText () {
       return this.saveButtonLabel || this.$t('image_cropper.save')
+    },
+    cancelText () {
+      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
     }
   },
   methods: {
@@ -57,10 +59,15 @@ const ImageCropper = {
       }
       this.$refs.input.value = ''
       this.dataUrl = undefined
+      this.$emit('close')
     },
     submit () {
-      this.$emit('submit', this.cropper, this.filename)
-      this.destroy()
+      this.submitting = true
+      this.avatarUploadError = null
+      this.submitHandler(this.cropper, this.filename)
+        .then(() => this.destroy())
+        .catch(err => this.submitError = err)
+        .finally(() => this.submitting = false)
     },
     pickImage () {
       this.$refs.input.click()
@@ -77,11 +84,15 @@ const ImageCropper = {
         let reader = new window.FileReader()
         reader.onload = (e) => {
           this.dataUrl = e.target.result
+          this.$emit('open')
         }
         reader.readAsDataURL(fileInput.files[0])
         this.filename = fileInput.files[0].name || 'unknown'
         this.$emit('changed', fileInput.files[0], reader)
       }
+    },
+    clearError () {
+      this.submitError = null
     }
   },
   mounted () {

src/components/image_cropper/image_cropper.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="image-cropper">
-    <modal :show="dataUrl" :title="modalTitle" @close="destroy">
-      <div class="modal-body">
-        <div class="image-cropper-image-container">
-          <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
-        </div>
+    <div v-if="dataUrl">
+      <div class="image-cropper-image-container">
+        <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
       </div>
-      <div class="modal-footer">
-        <button class="btn image-cropper-btn" type="button" @click="submit" v-text="modalSaveButtonLabel"></button>
+      <div class="image-cropper-buttons-wrapper">
+        <button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
+        <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
+        <i class="icon-spin4 animate-spin" v-if="submitting"></i>
       </div>
-    </modal>
+      <div class="alert error" v-if="submitError">
+        Error: {{ submitError }}
+        <i class="button-icon icon-cancel" @click="clearError"></i>
+      </div>
+    </div>
     <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
   </div>
 </template>
@@ -31,9 +35,8 @@
     }
   }
 
-  &-btn {
-    display: block;
-    width: 100%;
+  &-buttons-wrapper {
+    margin-top: 15px;
   }
 }
 </style>