Add router

pull/37/head
Varun Patil 2022-08-16 01:12:14 +00:00
parent c57ac96d70
commit 6f029fd49a
6 changed files with 82 additions and 7 deletions

11
package-lock.json generated
View File

@ -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",

View File

@ -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"
},

View File

@ -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',

View File

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

View File

@ -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),
})

58
src/router.js 100644
View File

@ -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'),
}),
},
],
})