Radio and dropdown fixes

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() {

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
         };
     }
 

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() {

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() {

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>

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>

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) {
+            getSelectedText() {
-                let matching = this.options.filter(opt => opt.id === value);
+                const selected_option = this.options.find(option => option.value === this.selected);
-                if (matching.length == 0) return "";
+                return selected_option ? selected_option.text : this.selected;
-                else return matching[0].text;
-            },
-            selectOption(option) {
-                this.active = false;
-                this.change(option.id);
             }
         },
         mounted() {

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'],
+        props: ['options', 'selected', 'disabled', 'change']
-        methods: {
-            selectOption(option) {
-                this.change(option.id);
-            }
-        }
     }
 </script>