Implement single choice value load/save

ui/components/settings/SettingBoolean.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <oc-checkbox v-model="value" :label="setting.boolValue.label" />
+    <oc-checkbox v-model="value" :label="setting.boolValue.label" @change="applyValue" />
   </div>
 </template>
 
 <script>
-import isNil from "lodash/isNil"
+import isNil from 'lodash/isNil'
 export default {
   name: 'SettingBoolean',
   props: {
@@ -22,31 +22,31 @@ export default {
       required: false
     }
   },
-  data() {
+  data () {
     return {
-      initialValue: null,
       value: null
     }
   },
-  computed: {
-    isChanged() {
-      return this.initialValue !== this.value
-    }
-  },
   methods: {
-    applyValue() {
-      // TODO: propagate value to parent
+    async applyValue () {
+      const value = {
+        boolValue: this.value
+      }
+      await this.$emit('onSave', {
+        bundle: this.bundle,
+        setting: this.setting,
+        value
+      })
       // TODO: show a spinner while the request for saving the value is running!
     }
   },
-  mounted() {
+  mounted () {
     if (!isNil(this.persistedValue)) {
       this.value = this.persistedValue.boolValue
     }
     if (isNil(this.value) && !isNil(this.setting.boolValue.default)) {
       this.value = this.setting.boolValue.default
     }
-    this.initialValue = this.value
   }
 }
 </script>

ui/components/settings/SettingNumber.vue

@@ -8,6 +8,7 @@
         :placeholder="setting.intValue.placeholder"
         :label="setting.description"
         @keydown.enter="applyValue"
+        @keydown.esc="cancel"
       />
     </div>
     <div v-if="isChanged">
@@ -22,7 +23,7 @@
 </template>
 
 <script>
-import isNil from "lodash/isNil"
+import isNil from 'lodash/isNil'
 export default {
   name: 'SettingNumber',
   props: {
@@ -39,17 +40,17 @@ export default {
       required: false
     }
   },
-  data() {
+  data () {
     return {
       initialValue: null,
       value: null
     }
   },
   computed: {
-    isChanged() {
+    isChanged () {
       return this.initialValue !== this.value
     },
-    inputAttributes() {
+    inputAttributes () {
       const attributes = {}
       if (!isNil(this.setting.intValue.min)) {
         attributes.min = this.setting.intValue.min
@@ -64,16 +65,23 @@ export default {
     }
   },
   methods: {
-    cancel() {
+    cancel () {
       this.value = this.initialValue
     },
-    applyValue() {
-      // TODO: propagate value to parent
+    async applyValue () {
+      const value = {
+        intValue: this.value
+      }
+      await this.$emit('onSave', {
+        bundle: this.bundle,
+        setting: this.setting,
+        value
+      })
       // TODO: show a spinner while the request for saving the value is running!
       this.initialValue = this.value
     }
   },
-  mounted() {
+  mounted () {
     if (!isNil(this.persistedValue)) {
       this.value = this.persistedValue.intValue
     }

ui/components/settings/SettingSingleChoice.vue

@@ -28,7 +28,7 @@
               class="oc-radiobutton"
               v-model="selectedOption"
               :value="option"
-              @input="onSelectedOption"
+              @change="onSelectedOption"
             />
             {{ option.displayValue }}
           </label>
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+import isNil from 'lodash/isNil'
 export default {
   name: 'SettingSingleChoice',
   props: {
@@ -55,33 +56,62 @@ export default {
       required: false
     }
   },
-  data() {
+  data () {
     return {
       selectedOption: null
     }
   },
   computed: {
-    dropElementId() {
+    dropElementId () {
       return `single-choice-drop-${this.bundle.identifier.bundleKey}-${this.setting.settingKey}`
     },
-    buttonElementId() {
+    buttonElementId () {
       return `single-choice-toggle-${this.bundle.identifier.bundleKey}-${this.setting.settingKey}`
-    },
+    }
   },
   methods: {
-    getOptionElementId(index) {
+    getOptionElementId (index) {
       return `${this.bundle.identifier.bundleKey}-${this.setting.settingKey}-${index}`
     },
-    onSelectedOption() {
-      // TODO: propagate selection to parent
+    async onSelectedOption () {
+      const value = {}
+      if (this.selectedOption) {
+        if (!isNil(this.selectedOption.intValue)) {
+          value.intListValue = {
+            value: [this.selectedOption ? this.selectedOption.intValue : null]
+          }
+        } else {
+          value.stringListValue = {
+            value: [this.selectedOption ? this.selectedOption.stringValue : null]
+          }
+        }
+      }
+      await this.$emit('onSave', {
+        bundle: this.bundle,
+        setting: this.setting,
+        value
+      })
       // TODO: show a spinner while the request for saving the value is running!
     }
   },
-  mounted() {
-    this.selectedOption = null
-    // TODO: load the settings value of the authenticated user and set it in `selectedOption`
+  mounted () {
+    if (!isNil(this.persistedValue)) {
+      if (!isNil(this.persistedValue.intListValue)) {
+        const selected = this.persistedValue.intListValue.value[0]
+        const filtered = this.setting.singleChoiceValue.options.filter(option => option.intValue === selected)
+        if (filtered.length > 0) {
+          this.selectedOption = filtered[0]
+        }
+      } else {
+        const selected = this.persistedValue.stringListValue.value[0]
+        const filtered = this.setting.singleChoiceValue.options.filter(option => option.stringValue === selected)
+        if (filtered.length > 0) {
+          this.selectedOption = filtered[0]
+        }
+      }
+    }
     // if not set, yet, apply default from settings bundle definition
-    if (this.selectedOption === null) {
+    if (isNil(this.selectedOption)) {
       const defaults = this.setting.singleChoiceValue.options.filter(option => option.default)
       if (defaults.length === 1) {
         this.selectedOption = defaults[0]

ui/components/settings/SettingString.vue

@@ -6,6 +6,7 @@
         :placeholder="setting.stringValue.placeholder"
         :label="setting.description"
         @keydown.enter="applyValue"
+        @keydown.esc="cancel"
       />
     </div>
     <div v-if="isChanged">
@@ -20,7 +21,7 @@
 </template>
 
 <script>
-import isNil from "lodash/isNil"
+import isNil from 'lodash/isNil'
 export default {
   name: 'SettingString',
   props: {
@@ -37,28 +38,35 @@ export default {
       required: false
     }
   },
-  data() {
+  data () {
     return {
       initialValue: null,
       value: null
     }
   },
   computed: {
-    isChanged() {
+    isChanged () {
       return this.initialValue !== this.value
     }
   },
   methods: {
-    applyValue() {
-      // TODO: propagate value to parent
+    async applyValue () {
+      const value = {
+        stringValue: this.value
+      }
+      await this.$emit('onSave', {
+        bundle: this.bundle,
+        setting: this.setting,
+        value
+      })
       // TODO: show a spinner while the request for saving the value is running!
       this.initialValue = this.value
     },
-    cancel() {
+    cancel () {
       this.value = this.initialValue
     }
   },
-  mounted() {
+  mounted () {
     if (!isNil(this.persistedValue)) {
       this.value = this.persistedValue.stringValue
     }