Merge pull request #25 from owncloud/dynamic-nav-items

Make use of the new dynamic navItems feature in phoenix

changelog/unreleased/dynamic-nav-items.md

@@ -0,0 +1,8 @@
+Change: Dynamically add navItems for extensions with settings bundles
+
+We now make use of a new feature in ocis-web-core, allowing us to add
+navItems not only through configuration, but also after app initialization.
+With this we now have navItems available for all extensions within the
+settings ui, that have at least one settings bundle registered.
+
+https://github.com/owncloud/ocis-settings/pull/25

ui/components/SettingsApp.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import SettingsBundle from './SettingsBundle.vue'
 export default {
   name: 'SettingsApp',
@@ -49,7 +49,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['settingsValuesLoaded']),
+    ...mapGetters(['settingsValuesLoaded', 'getNavItems']),
     ...mapGetters('Settings', [
       'extensions',
       'initialized',
@@ -59,13 +59,7 @@ export default {
       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'
-      } else if (this.selectedExtension === 'ocis-test') {
-        return 'Test'
-      }
-      return this.selectedExtension
+      return this.getExtensionName(this.selectedExtension)
     },
     selectedSettingsBundles () {
       if (this.selectedExtension) {
@@ -76,6 +70,7 @@ export default {
   },
   methods: {
     ...mapActions('Settings', ['initialize']),
+    ...mapMutations(['ADD_NAV_ITEM']),
     resetSelectedExtension () {
       if (this.extensions.length > 0) {
         if (this.extensionRouteParam && this.extensions.includes(this.extensionRouteParam)) {
@@ -84,14 +79,57 @@ export default {
           this.selectedExtension = this.extensions[0]
         }
       }
+    },
+    resetMenuItems () {
+      this.extensions.forEach(extension => {
+        /*
+         * TODO:
+         * a) set up a map with possible extensions and icons?
+         * or b) let extensions register app info like displayName + icon?
+         * https://github.com/owncloud/ocis-settings/issues/27
+         */
+        const navItem = {
+          name: this.getExtensionName(extension),
+          iconMaterial: this.getExtensionIcon(extension),
+          route: {
+            name: 'settings',
+            path: `/settings/${extension}`
+          }
+        }
+        this.ADD_NAV_ITEM({
+          extension: 'settings',
+          navItem
+        })
+      })
+    },
+    getExtensionName (extension) {
+      extension = extension || ''
+      switch (extension) {
+        case 'ocis-accounts': return this.$gettext('Account')
+        case 'ocis-hello': return this.$gettext('Hello')
+        default: {
+          const shortenedName = extension.replace('ocis-', '')
+          return shortenedName.charAt(0).toUpperCase() + shortenedName.slice(1)
+        }
+      }
+    },
+    getExtensionIcon (extension) {
+      extension = extension || ''
+      switch (extension) {
+        case 'ocis-accounts': return 'account_circle'
+        case 'ocis-hello': return 'tag_faces'
+        default: return 'application'
+      }
     }
   },
   async created () {
     await this.initialize()
+    this.resetMenuItems()
     this.resetSelectedExtension()
   },
   watch: {
     initialized () {
+      this.resetMenuItems()
       this.resetSelectedExtension()
     },
     extensionRouteParam () {