From 228e6681e3fd4a16d08d96edb9eea21d64be5600 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 11:42:02 -0500
Subject: [PATCH] Localization of ImageCropper component

---
 src/components/image_cropper/image_cropper.js  | 14 ++++++++++----
 src/components/image_cropper/image_cropper.vue |  4 ++--
 src/i18n/en.json                               |  4 ++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index e4bf5ea2..86bd2d67 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -26,12 +26,10 @@ const ImageCropper = {
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
     },
     title: {
-      type: String,
-      default: 'Crop picture'
+      type: String
     },
     saveButtonLabel: {
-      type: String,
-      default: 'Save'
+      type: String
     }
   },
   data () {
@@ -44,6 +42,14 @@ const ImageCropper = {
   components: {
     Modal
   },
+  computed: {
+    modalTitle () {
+      return this.title || this.$t('image_cropper.crop_picture')
+    },
+    modalSaveButtonLabel () {
+      return this.saveButtonLabel || this.$t('image_cropper.save')
+    }
+  },
   methods: {
     destroy () {
       this.cropper.destroy()
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 1c52842c..b2367128 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="image-cropper">
-    <modal :show="dataUrl" :title="title" @close="destroy">
+    <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>
       <div class="modal-footer">
-        <button class="btn image-cropper-btn" type="button" @click="submit" v-text="saveButtonLabel"></button>
+        <button class="btn image-cropper-btn" type="button" @click="submit" v-text="modalSaveButtonLabel"></button>
       </div>
     </modal>
     <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d44091e6..3e9ac157 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -21,6 +21,10 @@
     "more": "More",
     "generic_error": "An error occured"
   },
+  "image_cropper": {
+    "crop_picture": "Crop picture",
+    "save": "Save"
+  },
   "login": {
     "login": "Log in",
     "description": "Log in with OAuth",