Integrate loaded settings values into ui

Not yet done for single choice and multi choice, but getting there...

ui/components/SettingsBundle.vue

@@ -11,6 +11,7 @@
              :id="getElementId(bundle, setting)"
              :bundle="bundle"
              :setting="setting"
+             :persisted-value="getSettingsValue(bundle, setting)"
         />
       </div>
     </oc-grid>
@@ -18,6 +19,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import SettingBoolean from "./settings/SettingBoolean.vue";
 import SettingMultiChoice from "./settings/SettingMultiChoice.vue";
 import SettingNumber from "./settings/SettingNumber.vue";
@@ -33,12 +35,21 @@ export default {
       required: true
     }
   },
+  computed: mapGetters('Settings', ['getSettingsValueByIdentifier']),
   methods: {
     getElementId(bundle, setting) {
       return `setting-${bundle.identifier.bundleKey}-${setting.settingKey}`
     },
     getSettingComponent(setting) {
       return 'Setting' + setting.type[0].toUpperCase() + setting.type.substr(1)
+    },
+    getSettingsValue(bundle, setting) {
+      const identifier = {
+        extension: bundle.identifier.extension,
+        bundleKey: bundle.identifier.bundleKey,
+        settingKey: setting.settingKey,
+      }
+      return this.getSettingsValueByIdentifier(identifier)
     }
   },
   components: {

ui/components/settings/SettingBoolean.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import isNil from "lodash/isNil"
 export default {
   name: 'SettingBoolean',
   props: {
@@ -15,6 +16,10 @@ export default {
     setting: {
       type: Object,
       required: true
+    },
+    persistedValue: {
+      type: Object,
+      required: false
     }
   },
   data() {
@@ -35,10 +40,13 @@ export default {
     }
   },
   mounted() {
-    // TODO: load the settings value of the authenticated user and apply it to the value
-    if (this.value === null) {
+    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/SettingMultiChoice.vue

@@ -48,6 +48,10 @@ export default {
     setting: {
       type: Object,
       required: true
+    },
+    persistedValue: {
+      type: Object,
+      required: false
     }
   },
   data() {

ui/components/settings/SettingNumber.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import isNil from "lodash/isNil"
 export default {
   name: 'SettingNumber',
   props: {
@@ -32,6 +33,10 @@ export default {
     setting: {
       type: Object,
       required: true
+    },
+    persistedValue: {
+      type: Object,
+      required: false
     }
   },
   data() {
@@ -46,13 +51,13 @@ export default {
     },
     inputAttributes() {
       const attributes = {}
-      if (this.setting.intValue.min !== null && this.setting.intValue.min !== undefined) {
+      if (!isNil(this.setting.intValue.min)) {
         attributes.min = this.setting.intValue.min
       }
-      if (this.setting.intValue.max !== null && this.setting.intValue.max !== undefined) {
+      if (!isNil(this.setting.intValue.max)) {
         attributes.max = this.setting.intValue.max
       }
-      if (this.setting.intValue.step !== null && this.setting.intValue.step !== undefined) {
+      if (!isNil(this.setting.intValue.step)) {
         attributes.step = this.setting.intValue.step
       }
       return attributes
@@ -69,7 +74,13 @@ export default {
     }
   },
   mounted() {
-    // TODO: load the settings value of the authenticated user and apply it to the value
+    if (!isNil(this.persistedValue)) {
+      this.value = this.persistedValue.intValue
+    }
+    if (isNil(this.value) && !isNil(this.setting.intValue.default)) {
+      this.value = this.setting.intValue.default
+    }
+    this.initialValue = this.value
   }
 }
 </script>

ui/components/settings/SettingSingleChoice.vue

@@ -49,6 +49,10 @@ export default {
     setting: {
       type: Object,
       required: true
+    },
+    persistedValue: {
+      type: Object,
+      required: false
     }
   },
   data() {

ui/components/settings/SettingString.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import isNil from "lodash/isNil"
 export default {
   name: 'SettingString',
   props: {
@@ -30,6 +31,10 @@ export default {
     setting: {
       type: Object,
       required: true
+    },
+    persistedValue: {
+      type: Object,
+      required: false
     }
   },
   data() {
@@ -54,7 +59,13 @@ export default {
     }
   },
   mounted() {
-    // TODO: load the settings value of the authenticated user and apply it to the value
+    if (!isNil(this.persistedValue)) {
+      this.value = this.persistedValue.stringValue
+    }
+    if (isNil(this.value) && !isNil(this.setting.stringValue.default)) {
+      this.value = this.setting.stringValue.default
+    }
+    this.initialValue = this.value
   }
 }
 </script>

ui/components/settings/SettingUnknown.vue

@@ -15,6 +15,10 @@ export default {
     setting: {
       type: Object,
       required: true
+    },
+    persistedValue: {
+      type: Object,
+      required: false
     }
   }
 }