Add router

package-lock.json

@@ -13,6 +13,7 @@
 				"@nextcloud/vue": "^5.4.0",
 				"path-posix": "^1.0.0",
 				"vue": "^2.7.8",
+				"vue-router": "^3.5.4",
 				"vue-virtual-scroller": "^1.0.10",
 				"webdav": "^4.10.0"
 			},
@@ -10844,6 +10845,11 @@
 				"vue": "^2.3.0"
 			}
 		},
+		"node_modules/vue-router": {
+			"version": "3.5.4",
+			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.4.tgz",
+			"integrity": "sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ=="
+		},
 		"node_modules/vue-style-loader": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -19738,6 +19744,11 @@
 			"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
 			"requires": {}
 		},
+		"vue-router": {
+			"version": "3.5.4",
+			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.4.tgz",
+			"integrity": "sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ=="
+		},
 		"vue-style-loader": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -36,6 +36,7 @@
 		"@nextcloud/vue": "^5.4.0",
 		"path-posix": "^1.0.0",
 		"vue": "^2.7.8",
+		"vue-router": "^3.5.4",
 		"vue-virtual-scroller": "^1.0.10",
 		"webdav": "^4.10.0"
 	},

src/App.vue

@@ -1,15 +1,19 @@
 <template>
-	<Content :class="{'icon-loading': loading}" app-name="betterphotos">
+	<Content app-name="betterphotos">
 		<AppNavigation>
 			<template id="app-betterphotos-navigation" #list>
-				<AppNavigationItem icon="icon-yourphotos" title="Timeline">
+				<AppNavigationItem :to="{name: 'timeline'}"
+					class="app-navigation__photos"
+					:title="t('timeline', 'Timeline')"
+					icon="icon-yourphotos"
+					exact>
 				</AppNavigationItem>
 			</template>
 		</AppNavigation>
 
-		<AppContent>
+		<AppContent :class="{ 'icon-loading': loading }">
 			<div class="outer">
-				<Timeline />
+				<router-view v-show="!loading" :loading.sync="loading" />
 			</div>
 		</AppContent>
 	</Content>
@@ -28,6 +32,7 @@ import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import Timeline from './components/Timeline.vue'
+import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'App',

src/components/Timeline.vue

@@ -1,7 +1,5 @@
 <template>
-    <div class="container" ref="container"
-        :class="{ 'icon-loading': loading }">
-
+    <div class="container" ref="container">
         <RecycleScroller
             ref="scroller"
             class="scroller"

src/main.js

@@ -25,6 +25,7 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import App from './App'
+import router from './router'
 
 // Adding translations to the whole app
 Vue.mixin({
@@ -38,5 +39,6 @@ Vue.use(VueVirtualScroller)
 
 export default new Vue({
 	el: '#content',
+	router,
 	render: h => h(App),
 })

src/router.js

@@ -0,0 +1,58 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @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 { generateUrl } from '@nextcloud/router'
+ import Router from 'vue-router'
+ import Vue from 'vue'
+
+ const Timeline = () => import('./components/Timeline')
+
+ Vue.use(Router)
+
+ /**
+  * Parse the path of a route : join the elements of the array and return a single string with slashes
+  * + always lead current path with a slash
+  *
+  * @param {string | Array} path path arguments to parse
+  * @return {string}
+  */
+ const parsePathParams = (path) => {
+     return `/${Array.isArray(path) ? path.join('/') : path || ''}`
+ }
+
+ export default 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('/apps/betterphotos', ''),
+     linkActiveClass: 'active',
+     routes: [
+         {
+             path: '/',
+             component: Timeline,
+             name: 'timeline',
+             props: route => ({
+                 rootTitle: t('timeline', 'Timeline'),
+             }),
+         },
+     ],
+ })