From 86c5f0ae56ba6635a9f9016625d4477ce9f65c0f Mon Sep 17 00:00:00 2001
From: Saeid <saeidkhakbazan@gmail.com>
Date: Tue, 29 Sep 2020 18:03:16 +0330
Subject: [PATCH] fix: add input crop_data

---
 .../Global/components/Inputs/CropperImage.vue | 101 ++++++++++++++++++
 .../Global/components/Inputs/ImageSelect.vue  |   8 +-
 .../Global/components/Inputs/UploadImage.vue  |   3 +-
 3 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/Global/components/Inputs/CropperImage.vue

diff --git a/resources/js/Global/components/Inputs/CropperImage.vue b/resources/js/Global/components/Inputs/CropperImage.vue
new file mode 100644
index 0000000..2f054e6
--- /dev/null
+++ b/resources/js/Global/components/Inputs/CropperImage.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="upload-example width-full">
+        <cropper classname="upload-example-cropper" :stencil-props="stencilProps" @change="onChangeCropper" :src="image" />
+        <div class="button-wrapper">
+            <v-btn
+                @click.native="$refs['image_'+uniqueId].click()"
+                large
+                :color="color"
+                dark
+            >
+                <input
+                    type="file"
+                    :ref="'image_'+uniqueId"
+                    :name="'image_' + uniqueId"
+                    v-show="false"
+                    @change="uploadImage($event)"
+                    accept="image/*"
+                />
+                <v-icon dark>{{icon}}</v-icon>{{name}}
+            </v-btn>
+        </div>
+    </div>
+</template>
+<script>
+    import { Cropper } from "vue-advanced-cropper";
+    export default {
+        props: {
+            name: {
+                default: 'آپلود عکس'
+            },
+            icon: {
+                default: 'WMi-upload'
+            },
+            color: {
+                default: 'black'
+            },
+            stencilProps: {
+                default: () => ({aspectRatio: 1, checkImageOrigin: false})
+            },
+            crop_data: {
+                default: () => ([])
+            },
+            value: {
+                default: ''
+            },
+            url: {
+                default: ''
+            }
+        },
+        components: {
+            Cropper
+        },
+        data: () => ({
+            uniqueId: Math.floor(Math.random() * 10000),
+        }),
+        computed: {
+              image: {
+                  get() {
+                      return this.url;
+                  },
+                  set(value) {
+                      this.$emit('update:url', value);
+                  }
+              },
+              file: {
+                  get() {
+                      return this.value;
+                  },
+                  set(value) {
+                      this.$emit('input', value);
+                  }
+              }
+        },
+        methods: {
+            uploadImage(event) {
+                // Reference to the DOM input element
+                let input = event.target;
+                // Ensure that you have a file before attempting to read it
+                if (input.files && input.files[0])
+                {
+                    //set v-model
+                    this.file = input.files[0];
+
+                    // create a new FileReader to read this image and convert to base64 format
+                    let reader = new FileReader();
+                    // Define a callback function to run, when FileReader finishes its job
+                    reader.onload = e => {
+                        // Note: arrow function used here, so that "this.imageData" refers to the imageData of Vue component
+                        // Read image as base64 and set to imageData
+                        this.image = e.target.result;
+                    };
+                    // Start the reader job - read file as a data url (base64 format)
+                    reader.readAsDataURL(input.files[0]);
+                }
+            },
+            onChangeCropper({coordinates}) {
+                this.$emit('update:crop_data', coordinates);
+            },
+        }
+    }
+</script>
diff --git a/resources/js/Global/components/Inputs/ImageSelect.vue b/resources/js/Global/components/Inputs/ImageSelect.vue
index 445133e..e72de05 100644
--- a/resources/js/Global/components/Inputs/ImageSelect.vue
+++ b/resources/js/Global/components/Inputs/ImageSelect.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row>
         <v-col v-for="(item, i) in items" :key="i" class="image-select" @click="changeSelected(item)" :class="`${size} pa-1`">
-            <div :class="{'active': isActive(item), 'item': true}">
+            <div :class="{'active': isActive(item), 'item': true, 'selected': isSelectedItem(item)}">
                 <img class="thumbnail width-full" :src="item[itemSrc]"/>
                 <div class="name">
                     <div class="content">
@@ -26,7 +26,8 @@
             itemText: {default: 'name'},
             itemTextEn: {default: 'name_en'},
             itemSrc: {default: 'src'},
-            value: {default: ''}
+            value: {default: ''},
+            selected: {default: () => ([])}
         },
         data: () => ({
             thumbnail: "images/Business/Items/iPhoneX.jpg",
@@ -42,6 +43,9 @@
             }
         },
         methods: {
+            isSelectedItem(item) {
+                return this.selected.includes(item[this.itemValue]);
+            },
             isActive(item) {
                 return item[this.itemValue] === this.value;
             },
diff --git a/resources/js/Global/components/Inputs/UploadImage.vue b/resources/js/Global/components/Inputs/UploadImage.vue
index 139053b..cf0e4ec 100644
--- a/resources/js/Global/components/Inputs/UploadImage.vue
+++ b/resources/js/Global/components/Inputs/UploadImage.vue
@@ -4,7 +4,7 @@
         <div class="button-wrapper">
             <v-btn
                 large
-                :color="$_color('product_option')"
+                :color="color"
                 @click.native="$refs['image_'+uniqueId].click()"
                 light
             >
@@ -29,6 +29,7 @@
         props: {
             batch_id: {default: null, type: String},
             media: {default: '', type: String},
+            color: {default: 'gold', type: String},
         },
         data: () => ({
             uniqueId: Math.floor(Math.random() * 10000),