Adapt UI app to new data model

ui/components/settings/SettingBoolean.vue

@@ -29,13 +29,16 @@ export default {
   },
   methods: {
     async applyValue () {
-      const value = {
+      const payload = {
         boolValue: this.value
       }
+      if (!isNil(this.persistedValue)) {
+        payload.id = this.persistedValue.id
+      }
       await this.$emit('onSave', {
         bundle: this.bundle,
         setting: this.setting,
-        value
+        value: payload
       })
       // TODO: show a spinner while the request for saving the value is running!
     }

ui/components/settings/SettingMultiChoice.vue

@@ -65,15 +65,15 @@ export default {
       return Array.from(this.selectedOptions).map(option => option.displayValue).join(', ')
     },
     dropElementId () {
-      return `multi-choice-drop-${this.bundle.identifier.bundleKey}-${this.setting.settingKey}`
+      return `multi-choice-drop-${this.setting.id}`
     },
     buttonElementId () {
-      return `multi-choice-toggle-${this.bundle.identifier.bundleKey}-${this.setting.settingKey}`
+      return `multi-choice-toggle-${this.setting.id}`
     }
   },
   methods: {
     getOptionElementId (index) {
-      return `${this.bundle.identifier.bundleKey}-${this.setting.settingKey}-${index}`
+      return `${this.setting.id}-${index}`
     },
     async onSelectedOption () {
       const values = []
@@ -87,14 +87,18 @@ export default {
           }
         })
       }
+      const payload = {
+        listValue: {
+          values
+        }
+      }
+      if (!isNil(this.persistedValue)) {
+        payload.id = this.persistedValue.id
+      }
       await this.$emit('onSave', {
         bundle: this.bundle,
         setting: this.setting,
-        value: {
-          listValue: {
-            values
-          }
-        }
+        payload
       })
       // TODO: show a spinner while the request for saving the value is running!
     }

ui/components/settings/SettingNumber.vue

@@ -69,13 +69,16 @@ export default {
       this.value = this.initialValue
     },
     async applyValue () {
-      const value = {
+      const payload = {
         intValue: this.value
       }
+      if (!isNil(this.persistedValue)) {
+        payload.id = this.persistedValue.id
+      }
       await this.$emit('onSave', {
         bundle: this.bundle,
         setting: this.setting,
-        value
+        payload
       })
       // TODO: show a spinner while the request for saving the value is running!
       this.initialValue = this.value

ui/components/settings/SettingSingleChoice.vue

@@ -63,15 +63,15 @@ export default {
   },
   computed: {
     dropElementId () {
-      return `single-choice-drop-${this.bundle.identifier.bundleKey}-${this.setting.settingKey}`
+      return `single-choice-drop-${this.setting.id}`
     },
     buttonElementId () {
-      return `single-choice-toggle-${this.bundle.identifier.bundleKey}-${this.setting.settingKey}`
+      return `single-choice-toggle-${this.setting.id}`
     }
   },
   methods: {
     getOptionElementId (index) {
-      return `${this.bundle.identifier.bundleKey}-${this.setting.settingKey}-${index}`
+      return `${this.setting.id}-${index}`
     },
     async onSelectedOption () {
       const values = []
@@ -83,14 +83,18 @@ export default {
           values.push({ stringValue: this.selectedOption.value.stringValue })
         }
       }
+      const payload = {
+        listValue: {
+          values
+        }
+      }
+      if (!isNil(this.persistedValue)) {
+        payload.id = this.persistedValue.id
+      }
       await this.$emit('onSave', {
         bundle: this.bundle,
         setting: this.setting,
-        value: {
-          listValue: {
-            values
-          }
-        }
+        payload
       })
       // TODO: show a spinner while the request for saving the value is running!
     }

ui/components/settings/SettingString.vue

@@ -51,13 +51,16 @@ export default {
   },
   methods: {
     async applyValue () {
-      const value = {
+      const payload = {
         stringValue: this.value
       }
+      if (!isNil(this.persistedValue)) {
+        payload.id = this.persistedValue.id
+      }
       await this.$emit('onSave', {
         bundle: this.bundle,
         setting: this.setting,
-        value
+        payload
       })
       // TODO: show a spinner while the request for saving the value is running!
       this.initialValue = this.value