Add extension selection through route param

ui/components/SettingsApp.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <oc-loader v-if="loading" />
-    <div v-else class="uk-width-3-4@m uk-container uk-padding">
-      <div class="uk-flex uk-flex-between uk-flex-middle">
-        <h1 v-translate class="oc-page-title">Settings</h1>
-      </div>
-      <hr />
+    <div v-if="initialized" class="uk-width-3-4@m uk-container uk-padding">
       <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
         <p class="uk-flex uk-flex-middle">
           <oc-icon name="info" class="uk-margin-xsmall-right" />
@@ -13,14 +8,21 @@
         </p>
       </oc-alert>
       <template v-else>
-        <settings-bundle
-          v-for="bundle in visibleSettingsBundles"
-          :key="'bundle-' + bundle.key"
-          :bundle="bundle"
-          class="uk-margin-top"
-        />
+        <div class="uk-flex uk-flex-between uk-flex-middle">
+          <h1 v-translate class="oc-page-title">{{ selectedExtensionName }}</h1>
+        </div>
+        <hr />
+        <template>
+          <settings-bundle
+            v-for="bundle in selectedSettingsBundles"
+            :key="'bundle-' + bundle.key"
+            :bundle="bundle"
+            class="uk-margin-top"
+          />
+        </template>
       </template>
     </div>
+    <oc-loader v-else />
   </div>
 </template>
 
@@ -39,9 +41,20 @@ export default {
   computed: {
     ...mapGetters('Settings', [
       'extensions',
+      'initialized',
       'getSettingsBundlesByExtension'
     ]),
-    visibleSettingsBundles() {
+    extensionRouteParam() {
+      return this.$route.params.extension
+    },
+    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'
+      }
+      return this.selectedExtension
+    },
+    selectedSettingsBundles() {
       if (this.selectedExtension) {
         return this.getSettingsBundlesByExtension(this.selectedExtension)
       }
@@ -49,14 +62,27 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Settings', ['fetchSettingsBundles'])
+    ...mapActions('Settings', ['initialize']),
+    resetSelectedExtension() {
+      if (this.extensions.length > 0) {
+        if (this.extensionRouteParam && this.extensions.includes(this.extensionRouteParam)) {
+          this.selectedExtension = this.extensionRouteParam
+        } else {
+          this.selectedExtension = this.extensions[0]
+        }
+      }
+    }
   },
-  async created () {
-    await this.fetchSettingsBundles()
-    if (this.extensions.length > 0) {
-      this.selectedExtension = this.extensions[0]
+  created () {
+    this.initialize()
+  },
+  watch: {
+    initialized() {
+      this.resetSelectedExtension()
+    },
+    extensionRouteParam() {
+      this.resetSelectedExtension()
     }
-    this.loading = false;
   }
 }
 </script>

ui/components/settings/SettingNumber.vue

@@ -65,6 +65,7 @@ export default {
     applyValue() {
       // TODO: propagate value to parent
       // TODO: show a spinner while the request for saving the value is running!
+      this.initialValue = this.value
     }
   },
   mounted() {

ui/components/settings/SettingString.vue

@@ -47,6 +47,7 @@ export default {
     applyValue() {
       // TODO: propagate value to parent
       // TODO: show a spinner while the request for saving the value is running!
+      this.initialValue = this.value
     },
     cancel() {
       this.value = this.initialValue