From 0527421f015468e022ce7ec8c7b10b2af0ec9f8f Mon Sep 17 00:00:00 2001
From: Saeid <saeidkhakbazan@gmail.com>
Date: Thu, 23 Jul 2020 11:42:08 +0430
Subject: [PATCH] feat: add multiple in readio group

---
 .../Global/components/Inputs/RadioGroup.vue   | 44 ++++++++++++++++---
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/resources/js/Global/components/Inputs/RadioGroup.vue b/resources/js/Global/components/Inputs/RadioGroup.vue
index 2d8acb1..82d2454 100644
--- a/resources/js/Global/components/Inputs/RadioGroup.vue
+++ b/resources/js/Global/components/Inputs/RadioGroup.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row :class="`radio-group ${theme}`">
         <v-col v-for="(item, index) in items" :key="index"  :xl="item.size" class="pt-0"  @click="changeSelected($event, item || {})">
-            <div :class="{'active':value ? value == item.id : item.id == currentSelect, [item.theme]: true, ['bubble']: true}">
+            <div :class="{'active': isActive(item), [item.theme]: true, ['bubble']: true}">
                 <div class="body">
                     <div :class="`icon ${(item.customIconClass) ? item.customIconClass : ''}`">
                         <v-icon>WMi-{{ item.icon }}</v-icon>
@@ -20,22 +20,54 @@
 <script>
     export default {
         props: {
-            items: {},
-            initialSelect: {default: 1},
+            items: {default: () => ([])},
             value: {default: null},
+            multiple: {default: false},
             name: {default: 'default_name'},
             theme: String,
         },
         data() {
             return {
-                currentSelect: this.initialSelect,
+                currentSelect: this.value,
             }
         },
         methods: {
             changeSelected($event, item) {
+                if (Array.isArray(this.value) || this.multiple) {
+                    this.changeSelectedMultiple(item);
+                } else {
+                    this.changeSelectedSingle(item);
+                }
+            },
+            changeSelectedMultiple(item) {
+                if (!Array.isArray(this.currentSelect)) {
+                    this.currentSelect = [];
+                }
+                if (this.currentSelect.includes(item.id)) {
+                    const index = this.currentSelect.findIndex(x => x === item.id);
+                    this.currentSelect.splice(index, 1);
+                } else {
+                    this.currentSelect.push(item.id);
+                }
+                let items = [];
+                for (let value of this.items.filter(x =>  this.currentSelect.includes(x.id))) {
+                    items.push({'name': this.name, 'value': value.value});
+                }
+                this.$emit('changeState', items);
+                this.$emit('input', this.currentSelect);
+
+            },
+            changeSelectedSingle(item) {
                 this.currentSelect = item.id;
-                this.$emit('changeState', {'name':this.name,'value':item.value})
-                this.$emit('input', item.id);
+                this.$emit('changeState', {'name':this.name,'value': item.value});
+                this.$emit('input', this.currentSelect);
+            },
+            isActive(item) {
+                if (this.multiple) {
+                    return this.value && Array.isArray(this.value) ? this.value.includes(item.id) : (Array.isArray(this.currentSelect) ? this.currentSelect.includes(item.id) : false );
+                } else {
+                    return this.value ? this.value === item.id : item.id === this.currentSelect
+                }
             }
         }
     }