feat(settings): Refactor routing code to use named router views

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/settings/src/main-apps-users-management.js → apps/settings/src/main-apps-users-management.ts

@@ -25,31 +25,37 @@
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
 import { sync } from 'vuex-router-sync'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-import App from './App.vue'
-import router from './router.js'
+import SettingsApp from './views/SettingsApp.vue'
+import router from './router/index.ts'
 import store from './store/index.js'
+import { getRequestToken } from '@nextcloud/auth'
+import { PiniaVuePlugin, createPinia } from 'pinia'
 
 Vue.use(VTooltip, { defaultHtml: false })
 
 sync(store, router)
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line camelcase
-__webpack_nonce__ = btoa(OC.requestToken)
+__webpack_nonce__ = btoa(getRequestToken() ?? '')
 
 // bind to window
 Vue.prototype.t = t
 Vue.prototype.n = n
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
-// eslint-disable-next-line camelcase
-Vue.prototype.oc_userconfig = oc_userconfig
+Vue.prototype.OC = window.OC
+Vue.prototype.OCA = window.OCA
+// @ts-expect-error This is a private property we use
+Vue.prototype.oc_userconfig = window.oc_userconfig
+Vue.use(PiniaVuePlugin)
+
+const pinia = createPinia()
 
-const app = new Vue({
+export default new Vue({
 	router,
 	store,
-	render: h => h(App),
-}).$mount('#content')
-
-export { app, router, store }
+	pinia,
+	render: h => h(SettingsApp),
+	el: '#content',
+})

apps/settings/src/router/index.ts

@@ -0,0 +1,42 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Julius Härtl <jus@bitgrid.net>
+ * @author Roeland Jago Douma <roeland@famdouma.nl>
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+import Router from 'vue-router'
+import { generateUrl } from '@nextcloud/router'
+import routes from './routes.ts'
+
+Vue.use(Router)
+
+const router = new Router({
+	mode: 'history',
+	// if index.php is in the url AND we got this far, then it's working:
+	// let's keep using index.php in the url
+	base: generateUrl(''),
+	linkActiveClass: 'active',
+	routes,
+})
+
+export default router

apps/settings/src/router/routes.ts

@@ -0,0 +1,52 @@
+import type { RouteConfig } from 'vue-router'
+
+import { defineAsyncComponent } from 'vue'
+
+// Dynamic loading
+const AppStore = defineAsyncComponent(() => import(/* webpackChunkName: 'settings-apps-view' */'../views/AppStore.vue'))
+const AppStoreNavigation = defineAsyncComponent(() => import(/* webpackChunkName: 'settings-apps-view' */'../views/AppStoreNavigation.vue'))
+const AppstoreSidebar = defineAsyncComponent(() => import(/* webpackChunkName: 'settings-apps-view' */'../views/AppstoreSidebar.vue'))
+
+const UserManagement = defineAsyncComponent(() => import(/* webpackChunkName: 'settings-users' */'../views/UserManagement.vue'))
+const UserManagementNavigation = defineAsyncComponent(() => import(/* webpackChunkName: 'settings-users' */'../views/UserManagementNavigation.vue'))
+
+const routes: RouteConfig[] = [
+	{
+		name: 'users',
+		path: '/:index(index.php/)?settings/users',
+		components: {
+			default: UserManagement,
+			navigation: UserManagementNavigation,
+		},
+		props: true,
+		children: [
+			{
+				path: ':selectedGroup',
+				name: 'group',
+			},
+		],
+	},
+	{
+		path: '/:index(index.php/)?settings/apps',
+		name: 'apps',
+		components: {
+			default: AppStore,
+			navigation: AppStoreNavigation,
+			sidebar: AppstoreSidebar,
+		},
+		children: [
+			{
+				path: ':category',
+				name: 'apps-category',
+				children: [
+					{
+						path: ':id',
+						name: 'apps-details',
+					},
+				],
+			},
+		],
+	},
+]
+
+export default routes

apps/settings/src/App.vue → apps/settings/src/views/SettingsApp.vue

@@ -2,8 +2,9 @@
   - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
   -
   - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -21,11 +22,13 @@
   -->
 
 <template>
-	<router-view />
+	<NcContent app-name="settings">
+		<router-view name="navigation" />
+		<router-view />
+		<router-view name="sidebar" />
+	</NcContent>
 </template>
 
-<script>
-export default {
-	name: 'App',
-}
+<script setup lang="ts">
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 </script>

apps/settings/src/webpack.shim.d.ts

@@ -0,0 +1 @@
+declare let __webpack_nonce__: string

webpack.modules.js

@@ -92,7 +92,7 @@ module.exports = {
 		'vue-settings-admin-delegation': path.join(__dirname, 'apps/settings/src', 'main-admin-delegation.js'),
 		'vue-settings-admin-security': path.join(__dirname, 'apps/settings/src', 'main-admin-security.js'),
 		'vue-settings-admin-sharing': path.join(__dirname, 'apps/settings/src', 'admin-settings-sharing.ts'),
-		'vue-settings-apps-users-management': path.join(__dirname, 'apps/settings/src', 'main-apps-users-management.js'),
+		'vue-settings-apps-users-management': path.join(__dirname, 'apps/settings/src', 'main-apps-users-management.ts'),
 		'vue-settings-nextcloud-pdf': path.join(__dirname, 'apps/settings/src', 'main-nextcloud-pdf.js'),
 		'vue-settings-personal-info': path.join(__dirname, 'apps/settings/src', 'main-personal-info.js'),
 		'vue-settings-personal-password': path.join(__dirname, 'apps/settings/src', 'main-personal-password.js'),