Implement loading/saving multi and single select

ui/components/settings/SettingMultiChoice.vue

@@ -27,7 +27,7 @@
               class="oc-checkbox"
               :value="option"
               v-model="selectedOptions"
-              @input="onSelectedOption"
+              @change="onSelectedOption"
             />
             {{ option.displayValue }}
           </label>
@@ -38,6 +38,7 @@
 </template>
 
 <script>
+import isNil from 'lodash/isNil'
 export default {
   name: 'SettingMultiChoice',
   props: {
@@ -54,33 +55,77 @@ export default {
       required: false
     }
   },
-  data() {
+  data () {
     return {
       selectedOptions: null
     }
   },
   computed: {
-    selectedOptionsDisplayValues() {
+    selectedOptionsDisplayValues () {
       return Array.from(this.selectedOptions).map(option => option.displayValue).join(', ')
     },
-    dropElementId() {
+    dropElementId () {
       return `multi-choice-drop-${this.bundle.identifier.bundleKey}-${this.setting.settingKey}`
     },
-    buttonElementId() {
+    buttonElementId () {
       return `multi-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 values = []
+      if (!isNil(this.selectedOptions)) {
+        this.selectedOptions.forEach(option => {
+          if (option.value.intValue) {
+            values.push({ intValue: option.value.intValue })
+          }
+          if (option.value.stringValue) {
+            values.push({ stringValue: option.value.stringValue })
+          }
+        })
+      }
+      await this.$emit('onSave', {
+        bundle: this.bundle,
+        setting: this.setting,
+        value: {
+          listValue: {
+            values
+          }
+        }
+      })
       // TODO: show a spinner while the request for saving the value is running!
     }
   },
-  mounted() {
-    this.selectedOptions = null
+  mounted () {
+    if (!isNil(this.persistedValue) && !isNil(this.persistedValue.listValue)) {
+      const selectedValues = []
+      if (this.persistedValue.listValue.values) {
+        this.persistedValue.listValue.values.forEach(value => {
+          if (value.intValue) {
+            selectedValues.push(value.intValue)
+          }
+          if (value.stringValue) {
+            selectedValues.push(value.stringValue)
+          }
+        })
+      }
+      if (selectedValues.length === 0) {
+        this.selectedOptions = []
+      } else {
+        this.selectedOptions = this.setting.multiChoiceValue.options.filter(option => {
+          if (option.value.intValue) {
+            return selectedValues.includes(option.value.intValue)
+          }
+          if (option.value.stringValue) {
+            return selectedValues.includes(option.value.stringValue)
+          }
+          return false
+        })
+      }
+    }
     // TODO: load the settings value of the authenticated user and set it in `selectedOptions`
     // if not set, yet, apply defaults from settings bundle definition
     if (this.selectedOptions === null) {

ui/components/settings/SettingSingleChoice.vue

@@ -74,40 +74,39 @@ export default {
       return `${this.bundle.identifier.bundleKey}-${this.setting.settingKey}-${index}`
     },
     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]
-          }
+      const values = []
+      if (!isNil(this.selectedOption)) {
+        if (this.selectedOption.value.intValue) {
+          values.push({ intValue: this.selectedOption.value.intValue })
+        }
+        if (this.selectedOption.value.stringValue) {
+          values.push({ stringValue: this.selectedOption.value.stringValue })
         }
       }
       await this.$emit('onSave', {
         bundle: this.bundle,
         setting: this.setting,
-        value
+        value: {
+          listValue: {
+            values
+          }
+        }
       })
       // TODO: show a spinner while the request for saving the value is running!
     }
   },
   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 (!isNil(this.persistedValue) && !isNil(this.persistedValue.listValue)) {
+      const selected = this.persistedValue.listValue.values[0]
+      const filtered = this.setting.singleChoiceValue.options.filter(option => {
+        if (selected.intValue) {
+          return option.value.intValue === selected.intValue
+        } else {
+          return option.value.stringValue === selected.stringValue
         }
+      })
+      if (filtered.length > 0) {
+        this.selectedOption = filtered[0]
       }
     }
     // if not set, yet, apply default from settings bundle definition