diff options
-rw-r--r-- | src/App.vue | 2 | ||||
-rw-r--r-- | src/components/Sidebar.vue | 8 | ||||
-rw-r--r-- | src/components/Starred.vue | 25 | ||||
-rw-r--r-- | src/main.js | 19 | ||||
-rw-r--r-- | src/routes/index.js | 44 |
5 files changed, 76 insertions, 22 deletions
diff --git a/src/App.vue b/src/App.vue index 076fed19c..0f5c1a0dc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@ <NcContent app-name="news"> <Sidebar /> <NcAppContent> - <router-view /> + <RouterView /> </NcAppContent> </NcContent> </template> diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index c51ea16ac..7e88d97ff 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -27,7 +27,7 @@ </ActionButton> </template> </NcAppNavigationItem> - <NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred"> + <NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }"> <template #counter> <NcCounterBubble>35</NcCounterBubble> </template> @@ -118,7 +118,7 @@ <NcAppNavigationItem :title="t('news', 'Explore')" icon="icon-link" - :to="{ name: 'explore' }"> + :to="{ name: ROUTES.EXPLORE }"> <template #counter> <NcCounterBubble>35</NcCounterBubble> </template> @@ -140,7 +140,7 @@ import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigati import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -// import { ROUTES } from '../routes.js' +import { ROUTES } from '../routes' import { ACTIONS, AppState } from '../store' import AddFeed from './AddFeed.vue' @@ -174,7 +174,7 @@ export default Vue.extend({ data: () => { return { showAddFeed: false, - // ROUTES + ROUTES, } }, computed: { diff --git a/src/components/Starred.vue b/src/components/Starred.vue new file mode 100644 index 000000000..d1117d137 --- /dev/null +++ b/src/components/Starred.vue @@ -0,0 +1,25 @@ +<template> + <div id="starred"> + Starred Items Here + </div> +</template> + +<script> +// import axios from "@nextcloud/axios"; +// import { generateUrl } from "@nextcloud/router"; +export default { + components: { + }, + props: { + + }, + created() { + // this.fetchStarred(); + }, + methods: { + async fetchStarred() { + // TODO + }, + }, +} +</script> diff --git a/src/main.js b/src/main.js index 6dac8fd5a..2f11a8216 100644 --- a/src/main.js +++ b/src/main.js @@ -1,11 +1,10 @@ import Vue from 'vue' -import App from './App.vue' import VueRouter from 'vue-router' -import Explore from './components/Explore.vue' -import { generateUrl } from '@nextcloud/router' import Vuex, { Store } from 'vuex' +import App from './App.vue' +import router from './routes' import mainStore from './store' import { Tooltip } from '@nextcloud/vue' @@ -20,20 +19,6 @@ Vue.use(VueRouter) Vue.directive('tooltip', Tooltip) -const routes = [ - { - name: 'explore', - path: '#explore', - component: Explore, - }, -] - -const router = new VueRouter({ - mode: 'history', - base: generateUrl('apps/news'), - routes, -}) - const store = new Store(mainStore) export default new Vue({ diff --git a/src/routes/index.js b/src/routes/index.js new file mode 100644 index 000000000..6ced33c49 --- /dev/null +++ b/src/routes/index.js @@ -0,0 +1,44 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' + +import ExplorePanel from '../components/Explore' +import StarredPanel from '../components/Starred' + +export const ROUTES = { + EXPLORE: 'explore', + STARRED: 'starred', +} + +const getInitialRoute = function() { + // TODO: Fetch Recent route from Browser Session? + return ROUTES.EXPLORE +} + +const routes = [ + // using + // { path: '/collections/all', component: CollectionGeneral, alias: '/' }, + // instead of + { path: '/', redirect: getInitialRoute() }, + // would also be an option, but it currently does not work + // reliably with router-link due to + // https://github.com/vuejs/vue-router/issues/419 + { + name: ROUTES.EXPLORE, + path: '/explore', + component: ExplorePanel, + props: true, + }, + { + name: ROUTES.STARRED, + path: '/starred', + component: StarredPanel, + props: true, + }, +] + +Vue.use(VueRouter) + +export default new VueRouter({ + linkActiveClass: 'active', + routes, // short for `routes: routes` +}) |