Add extension selection through route param

ui/app.js

@@ -2,8 +2,13 @@ import 'regenerator-runtime/runtime'
 import SettingsApp from './components/SettingsApp.vue'
 import store from './store'
 
+// just a dummy function to trick gettext tools
+function $gettext(msg) {
+  return msg
+}
+
 const appInfo = {
-  name: 'Settings',
+  name: $gettext('Settings'),
   id: 'settings',
   icon: 'info',
   isFileEditor: false,
@@ -16,7 +21,7 @@ const appInfo = {
 const routes = [
   {
     name: 'settings',
-    path: '/',
+    path: '/:extension?',
     components: {
       app: SettingsApp
     }
@@ -25,7 +30,7 @@ const routes = [
 
 const navItems = [
   {
-    name: 'Settings',
+    name: $gettext('Settings'),
     iconMaterial: appInfo.icon,
     route: {
       name: 'settings',

ui/components/SettingsApp.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <oc-loader v-if="loading" />
+    <div v-if="initialized" class="uk-width-3-4@m uk-container uk-padding">
-    <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 />
       <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
+        <div class="uk-flex uk-flex-between uk-flex-middle">
-          v-for="bundle in visibleSettingsBundles"
+          <h1 v-translate class="oc-page-title">{{ selectedExtensionName }}</h1>
-          :key="'bundle-' + bundle.key"
+        </div>
-          :bundle="bundle"
+        <hr />
-          class="uk-margin-top"
+        <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 () {
+  created () {
-    await this.fetchSettingsBundles()
+    this.initialize()
-    if (this.extensions.length > 0) {
+  },
-      this.selectedExtension = this.extensions[0]
+  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

ui/store/index.js

@@ -2,11 +2,13 @@ import { ListSettingsBundles } from '../client/settings'
 
 const state = {
   config: null,
+  initialized: false,
   settingsBundles: []
 }
 
 const getters = {
   config: state => state.config,
+  initialized: state => state.initialized,
   settingsBundles: state => state.settingsBundles,
   extensions: state => {
     return [...new Set(Array.from(state.settingsBundles).map(bundle => bundle.extension))].sort()
@@ -19,6 +21,9 @@ const getters = {
 }
 
 const mutations = {
+  SET_INITIALIZED (state, value) {
+    state.initialized = value
+  },
   SET_SETTINGS_BUNDLES (state, payload) {
     state.settingsBundles = payload
   },
@@ -32,6 +37,11 @@ const actions = {
     commit('LOAD_CONFIG', config)
   },
 
+  async initialize({ commit, dispatch }) {
+    await dispatch('fetchSettingsBundles')
+    commit('SET_INITIALIZED', true)
+  },
+
   async fetchSettingsBundles ({ commit, dispatch, getters }) {
     const response = await ListSettingsBundles({
       $domain: getters.config.url