Implement single choice value load/save

ui/components/SettingsApp.vue

@@ -30,10 +30,10 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import SettingsBundle from "./SettingsBundle.vue";
+import SettingsBundle from './SettingsBundle.vue'
 export default {
   name: 'SettingsApp',
-  components: {SettingsBundle},
+  components: { SettingsBundle },
   data () {
     return {
       loading: true,
@@ -46,10 +46,10 @@ export default {
       'initialized',
       'getSettingsBundlesByExtension'
     ]),
-    extensionRouteParam() {
+    extensionRouteParam () {
       return this.$route.params.extension
     },
-    selectedExtensionName() {
+    selectedExtensionName () {
       // TODO: extensions need to be registered with display names, separate from the settings bundles. until then: hardcoded translation
       if (this.selectedExtension === 'ocis-accounts') {
         return 'Account'
@@ -58,7 +58,7 @@ export default {
       }
       return this.selectedExtension
     },
-    selectedSettingsBundles() {
+    selectedSettingsBundles () {
       if (this.selectedExtension) {
         return this.getSettingsBundlesByExtension(this.selectedExtension)
       }
@@ -67,7 +67,7 @@ export default {
   },
   methods: {
     ...mapActions('Settings', ['initialize']),
-    resetSelectedExtension() {
+    resetSelectedExtension () {
       if (this.extensions.length > 0) {
         if (this.extensionRouteParam && this.extensions.includes(this.extensionRouteParam)) {
           this.selectedExtension = this.extensionRouteParam
@@ -82,10 +82,10 @@ export default {
     this.resetSelectedExtension()
   },
   watch: {
-    initialized() {
+    initialized () {
       this.resetSelectedExtension()
     },
-    extensionRouteParam() {
+    extensionRouteParam () {
       this.resetSelectedExtension()
     }
   }

ui/components/SettingsBundle.vue

@@ -12,6 +12,7 @@
              :bundle="bundle"
              :setting="setting"
              :persisted-value="getSettingsValue(bundle, setting)"
+             @onSave="onSaveSettingsValue"
         />
       </div>
     </oc-grid>
@@ -19,13 +20,13 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import SettingBoolean from "./settings/SettingBoolean.vue";
-import SettingMultiChoice from "./settings/SettingMultiChoice.vue";
-import SettingNumber from "./settings/SettingNumber.vue";
-import SettingSingleChoice from "./settings/SettingSingleChoice.vue";
-import SettingString from "./settings/SettingString.vue";
-import SettingUnknown from "./settings/SettingUnknown.vue";
+import { mapGetters, mapActions } from 'vuex'
+import SettingBoolean from './settings/SettingBoolean.vue'
+import SettingMultiChoice from './settings/SettingMultiChoice.vue'
+import SettingNumber from './settings/SettingNumber.vue'
+import SettingSingleChoice from './settings/SettingSingleChoice.vue'
+import SettingString from './settings/SettingString.vue'
+import SettingUnknown from './settings/SettingUnknown.vue'
 
 export default {
   name: 'SettingsBundle',
@@ -37,19 +38,32 @@ export default {
   },
   computed: mapGetters('Settings', ['getSettingsValueByIdentifier']),
   methods: {
-    getElementId(bundle, setting) {
+    ...mapActions('Settings', ['saveSettingsValue']),
+    getElementId (bundle, setting) {
       return `setting-${bundle.identifier.bundleKey}-${setting.settingKey}`
     },
-    getSettingComponent(setting) {
+    getSettingComponent (setting) {
       return 'Setting' + setting.type[0].toUpperCase() + setting.type.substr(1)
     },
-    getSettingsValue(bundle, setting) {
+    getSettingsValue (bundle, setting) {
       const identifier = {
         extension: bundle.identifier.extension,
         bundleKey: bundle.identifier.bundleKey,
-        settingKey: setting.settingKey,
+        settingKey: setting.settingKey
       }
       return this.getSettingsValueByIdentifier(identifier)
+    },
+    async onSaveSettingsValue ({ bundle, setting, value }) {
+      const payload = {
+        identifier: {
+          accountUuid: 'me',
+          extension: bundle.identifier.extension,
+          bundleKey: bundle.identifier.bundleKey,
+          settingKey: setting.settingKey
+        },
+        ...value
+      }
+      await this.saveSettingsValue(payload)
     }
   },
   components: {

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
     }