From 2c6ae62c7ee6c11eb55b64219f28ce7fd2334bcd Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 3 Mar 2018 00:03:19 +0000
Subject: [PATCH] Radio and dropdown fixes

---
 .../src/structs/settings/multiplechoiceoption.js  |  2 +-
 client/src/structs/settings/types/basesetting.js  |  4 ++--
 client/src/structs/settings/types/dropdown.js     |  4 ++--
 client/src/structs/settings/types/radio.js        |  4 ++--
 client/src/ui/components/bd/setting/Dropdown.vue  |  4 ++--
 client/src/ui/components/bd/setting/Radio.vue     |  5 -----
 client/src/ui/components/common/Dropdown.vue      | 15 +++++----------
 client/src/ui/components/common/RadioGroup.vue    |  9 ++-------
 8 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/client/src/structs/settings/multiplechoiceoption.js b/client/src/structs/settings/multiplechoiceoption.js
index a5c0b4a1..70f8abbe 100644
--- a/client/src/structs/settings/multiplechoiceoption.js
+++ b/client/src/structs/settings/multiplechoiceoption.js
@@ -17,7 +17,7 @@ export default class MultipleChoiceOption {
     }
 
     get id() {
-        return this.args.id;
+        return this.args.id || this.value;
     }
 
     get text() {
diff --git a/client/src/structs/settings/types/basesetting.js b/client/src/structs/settings/types/basesetting.js
index e638400b..a7535253 100644
--- a/client/src/structs/settings/types/basesetting.js
+++ b/client/src/structs/settings/types/basesetting.js
@@ -68,7 +68,7 @@ export default class Setting {
     }
 
     merge(newSetting, emit_multi = true) {
-        return this.setValue(newSetting.value, emit_multi);
+        return this.setValue(newSetting.args ? newSetting.args.value : newSetting.value, emit_multi);
     }
 
     setValue(value, emit_multi = true, emit = true) {
@@ -105,7 +105,7 @@ export default class Setting {
     strip() {
         return {
             id: this.id,
-            value: this.value
+            value: this.args.value
         };
     }
 
diff --git a/client/src/structs/settings/types/dropdown.js b/client/src/structs/settings/types/dropdown.js
index 01d2581f..cf889b89 100644
--- a/client/src/structs/settings/types/dropdown.js
+++ b/client/src/structs/settings/types/dropdown.js
@@ -26,7 +26,7 @@ export default class DropdownSetting extends Setting {
     }
 
     set value(value) {
-        const selected = this.options.find(option => option.id === value);
+        const selected = this.options.find(option => option.value === value);
         if (selected) this.setValue(selected.id);
         else this.setValue(value);
     }
@@ -40,7 +40,7 @@ export default class DropdownSetting extends Setting {
     }
 
     set selected_option(selected_option) {
-        this.args.value = this.options.find(option => option.id === selected_option.id).id;
+        this.args.value = selected_option.id;
     }
 
     toSCSS() {
diff --git a/client/src/structs/settings/types/radio.js b/client/src/structs/settings/types/radio.js
index b7cd5e1a..9943ae5b 100644
--- a/client/src/structs/settings/types/radio.js
+++ b/client/src/structs/settings/types/radio.js
@@ -26,7 +26,7 @@ export default class RadioSetting extends Setting {
     }
 
     set value(value) {
-        const selected = this.options.find(option => option.id === value);
+        const selected = this.options.find(option => option.value === value);
         if (selected) this.setValue(selected.id);
         else this.setValue(value);
     }
@@ -40,7 +40,7 @@ export default class RadioSetting extends Setting {
     }
 
     set selected_option(selected_option) {
-        this.value = this.options.find(option => option.id === selected_option.id).id;
+        this.args.value = selected_option.id;
     }
 
     toSCSS() {
diff --git a/client/src/ui/components/bd/setting/Dropdown.vue b/client/src/ui/components/bd/setting/Dropdown.vue
index 03b38946..034bee3a 100644
--- a/client/src/ui/components/bd/setting/Dropdown.vue
+++ b/client/src/ui/components/bd/setting/Dropdown.vue
@@ -12,10 +12,10 @@
     <div class="bd-form-dropdown">
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
-            <Dropdown v-if="!setting.fullwidth" :options="setting.options" :selected="setting.args.value" :disabled="setting.disabled" :change="change" />
+            <Dropdown v-if="!setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
-        <Dropdown v-if="setting.fullwidth" :options="setting.options" :selected="setting.args.value" :disabled="setting.disabled" :change="change" />
+        <Dropdown v-if="setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
     </div>
 </template>
 <script>
diff --git a/client/src/ui/components/bd/setting/Radio.vue b/client/src/ui/components/bd/setting/Radio.vue
index 29b29ee2..7523e854 100644
--- a/client/src/ui/components/bd/setting/Radio.vue
+++ b/client/src/ui/components/bd/setting/Radio.vue
@@ -26,11 +26,6 @@
         props: ['setting', 'change'],
         components: {
             RadioGroup
-        },
-        methods: {
-            selectOption(option) {
-                this.change(option.id);
-            }
         }
     }
 </script>
diff --git a/client/src/ui/components/common/Dropdown.vue b/client/src/ui/components/common/Dropdown.vue
index 0a1b72a1..b7ddcc62 100644
--- a/client/src/ui/components/common/Dropdown.vue
+++ b/client/src/ui/components/common/Dropdown.vue
@@ -11,13 +11,13 @@
 <template>
     <div class="bd-dropdown" :class="{'bd-active': active, 'bd-disabled': disabled}">
         <div class="bd-dropdown-current" @click="() => active = !active && !disabled">
-            <span class="bd-dropdown-text">{{ getOptionText(selected) }}</span>
+            <span class="bd-dropdown-text">{{ getSelectedText() }}</span>
             <span class="bd-dropdown-arrow-wrap">
                 <span class="bd-dropdown-arrow"></span>
             </span>
         </div>
         <div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
-            <div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': selected === option.id}" @click="selectOption(option)">{{ option.text }}</div>
+            <div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': selected === option.value}" @click="change(option.value)">{{ option.text }}</div>
         </div>
     </div>
 </template>
@@ -30,14 +30,9 @@
             };
         },
         methods: {
-            getOptionText(value) {
-                let matching = this.options.filter(opt => opt.id === value);
-                if (matching.length == 0) return "";
-                else return matching[0].text;
-            },
-            selectOption(option) {
-                this.active = false;
-                this.change(option.id);
+            getSelectedText() {
+                const selected_option = this.options.find(option => option.value === this.selected);
+                return selected_option ? selected_option.text : this.selected;
             }
         },
         mounted() {
diff --git a/client/src/ui/components/common/RadioGroup.vue b/client/src/ui/components/common/RadioGroup.vue
index ed09bc4c..efe31a23 100644
--- a/client/src/ui/components/common/RadioGroup.vue
+++ b/client/src/ui/components/common/RadioGroup.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-radio-group" :class="{'bd-disabled': disabled}">
-        <label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': selected === option.id}" @click="selectOption(option)">
+        <label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': selected === option.value}" @click="change(option.value)">
             <div class="bd-radio-control-wrap">
                 <svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g></svg>
             </div>
@@ -20,11 +20,6 @@
 </template>
 <script>
     export default {
-        props: ['options', 'selected', 'disabled', 'change'],
-        methods: {
-            selectOption(option) {
-                this.change(option.id);
-            }
-        }
+        props: ['options', 'selected', 'disabled', 'change']
     }
 </script>