Improvements in Router by adding child routes, allowing nested router-views. Changes folder structure under page for better organization. Creates empty list components for fields, categories and filters.
This commit is contained in:
mateuswetah
parent
d7b81590f2
commit
421cd1ad73
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Categories List</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CategoriesList',
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Fields List</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FieldsList',
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Filters List</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FiltersList',
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -101,11 +101,9 @@ export default {
|
|||
isLoading: false,
|
||||
totalItems: 0,
|
||||
page: 1,
|
||||
itemsPerPage: 2
|
||||
}
|
||||
},
|
||||
props: {
|
||||
itemsPerPage: 2,
|
||||
collectionId: Number
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('collection', [
|
||||
|
|
@ -212,6 +210,14 @@ export default {
|
|||
return this.getItems();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.collectionId = this.$route.fullPath.split("/").pop();
|
||||
if (isNaN(this.collectionId)) {
|
||||
let routeArray = this.$route.fullPath.split("/");
|
||||
routeArray.pop();
|
||||
this.collectionId = routeArray.pop();
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.loadItems();
|
||||
this.fetchFields(this.collectionId).then((res) => {
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
<nav id="primary-menu" :class="isCompressed ? 'is-compressed' : ''" role="navigation" aria-label="main navigation" class="column is-sidebar-menu">
|
||||
<aside class="menu">
|
||||
<ul class="menu-list">
|
||||
<li><router-link tag="a" to="/collections" :class="activeRoute == '/collections' ? 'is-active':''">
|
||||
<li><router-link tag="a" to="/collections" :class="activeRoute == 'CollectionsPage' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="folder-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('collections')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/items" :class="activeRoute == '/items' ? 'is-active':''">
|
||||
<li><router-link tag="a" to="/items" :class="activeRoute == 'ItemsPage' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="note-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('items')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/fields" :class="activeRoute == '/fields' ? 'is-active':''">
|
||||
<li><router-link tag="a" to="/fields" :class="activeRoute == 'FieldsPage' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="format-list-checks"></b-icon> <span class="menu-text">{{ $i18n.get('fields')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/filters" :class="activeRoute == '/filters' ? 'is-active':''">
|
||||
<li><router-link tag="a" to="/filters" :class="activeRoute == 'FiltersPage' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="filter"></b-icon> <span class="menu-text">{{ $i18n.get('filters')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/categories" :class="activeRoute == '/categories' ? 'is-active':''">
|
||||
<li><router-link tag="a" to="/categories" :class="activeRoute == 'CategoriesPage' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="shape"></b-icon> <span class="menu-text">{{ $i18n.get('categories')}}</span>
|
||||
</router-link></li>
|
||||
<li><router-link tag="a" to="/events" :class="activeRoute == '/events' ? 'is-active':''">
|
||||
<li><router-link tag="a" to="/events" :class="activeRoute == 'EventsPage' ? 'is-active':''">
|
||||
<b-icon size="is-small" icon="calendar"></b-icon> <span class="menu-text">{{ $i18n.get('events')}}</span>
|
||||
</router-link></li>
|
||||
<li><a class="navbar-item" :href="wordpressAdmin">
|
||||
|
|
@ -40,13 +40,12 @@ export default {
|
|||
watch: {
|
||||
'$route' (to, from) {
|
||||
this.isCompressed = (to.params.id != undefined);
|
||||
this.activeRoute = to.path;
|
||||
console.log(to);
|
||||
this.activeRoute = to.name;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.isCompressed = (this.$route.params.id != undefined);
|
||||
this.activeRoute = this.$route.path;
|
||||
this.activeRoute = this.$route.to;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<nav id="secondary-menu" role="navigation" aria-label="secondary navigation" class="column is-2 is-sidebar-menu">
|
||||
<aside class="menu">
|
||||
<ul class="menu-list">
|
||||
<li><router-link tag="a" to="">{{ $i18n.get('items')}}</router-link></li>
|
||||
<li><router-link tag="a" to="">{{ $i18n.get('edit')}}</router-link></li>
|
||||
<li><router-link tag="a" to="">{{ $i18n.get('fields')}}</router-link></li>
|
||||
<li><router-link tag="a" to="">{{ $i18n.get('filters')}}</router-link></li>
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/items`}" :class="activeRoute == 'ItemsList' ? 'is-active':''">{{ $i18n.get('items')}}</router-link></li>
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/edit`}" :class="activeRoute == 'CollectionEditionPage' ? 'is-active':''">{{ $i18n.get('edit')}}</router-link></li>
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/fields`}" :class="activeRoute == 'FieldsList' ? 'is-active':''">{{ $i18n.get('fields')}}</router-link></li>
|
||||
<li><router-link tag="a" :to="{ path: `/collections/${id}/filters`}" :class="activeRoute == 'FiltersList' ? 'is-active':''">{{ $i18n.get('filters')}}</router-link></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</nav>
|
||||
|
|
@ -16,8 +16,21 @@ export default {
|
|||
name: 'SecondaryMenu',
|
||||
data(){
|
||||
return {
|
||||
activeRoute: 'ItemsList'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
id: Number
|
||||
},
|
||||
watch: {
|
||||
'$route' (to, from) {
|
||||
this.activeRoute = to.name;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.activeRoute = this.$route.name;
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,45 +2,54 @@ import Vue from 'vue';
|
|||
import VueRouter from 'vue-router'
|
||||
|
||||
import AdminPage from '../admin.vue'
|
||||
import CollectionsPage from '../pages/collections-page.vue'
|
||||
import CollectionPage from '../pages/collection-page.vue'
|
||||
import CollectionEditionPage from '../pages/collection-edition-page.vue'
|
||||
import ItemsPage from '../pages/items-page.vue'
|
||||
import ItemPage from '../pages/item-page.vue'
|
||||
import ItemEditionPage from '../pages/item-edition-page.vue'
|
||||
import FieldsPage from '../pages/fields-page.vue'
|
||||
import FiltersPage from '../pages/filters-page.vue'
|
||||
import CategoriesPage from '../pages/categories-page.vue'
|
||||
import EventsPage from '../pages/events-page.vue'
|
||||
import CollectionsPage from '../pages/lists/collections-page.vue'
|
||||
import CollectionPage from '../pages/singles/collection-page.vue'
|
||||
import CollectionEditionPage from '../pages/edition/collection-edition-page.vue'
|
||||
import ItemsPage from '../pages/lists/items-page.vue'
|
||||
import ItemPage from '../pages/singles/item-page.vue'
|
||||
import ItemEditionPage from '../pages/edition/item-edition-page.vue'
|
||||
import FieldsPage from '../pages/lists/fields-page.vue'
|
||||
import FiltersPage from '../pages/lists/filters-page.vue'
|
||||
import CategoriesPage from '../pages/lists/categories-page.vue'
|
||||
import EventsPage from '../pages/lists/events-page.vue'
|
||||
|
||||
import CollectionsList from '../components/collections-list.vue'
|
||||
import ItemsList from '../components/items-list.vue'
|
||||
import FiltersList from '../components/filters-list.vue'
|
||||
import CategoriesList from '../components/categories-list.vue'
|
||||
import FieldsList from '../components/fields-list.vue'
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: CollectionsPage, meta: {title: 'Admin Page'} },
|
||||
|
||||
{ path: '/collections', component: CollectionsPage, meta: {title: 'Collections Page'} },
|
||||
{ path: '/collections/new', component: CollectionEditionPage, meta: {title: 'Create Collection'} },
|
||||
{ path: '/collections', name: 'CollectionsPage', component: CollectionsPage, meta: {title: 'Collections Page'} },
|
||||
{ path: '/collections/new', name: 'CollectionEditionPage', component: CollectionEditionPage, meta: {title: 'Create Collection'} },
|
||||
|
||||
{ path: '/collections/:id', component: CollectionPage, meta: {title: 'Collections Page'} },
|
||||
{ path: '/collections/:id/edit', component: CollectionEditionPage, meta: {title: 'Edit Collection'} },
|
||||
{ path: '/collections/:id', name: 'CollectionPage', component: CollectionPage, meta: {title: 'Collections Page'},
|
||||
children: [
|
||||
{ path: '', component: ItemsList, name: 'ItemsList', meta: {title: 'Items List'} },
|
||||
{ path: 'items', component: ItemsList, name: 'ItemsList', meta: {title: 'Items List'} },
|
||||
{ path: 'edit', component: CollectionEditionPage, name: 'CollectionEditionPage', meta: {title: 'Edit Collection'} },
|
||||
{ path: 'fields', component: FieldsList, name: 'FieldsList', meta: {title: 'Fields List'} },
|
||||
{ path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: 'Filters List'} }
|
||||
]
|
||||
},
|
||||
{ path: 'items/new', name: 'ItemEditionPage', component: ItemEditionPage, meta: {title: 'Create Item'} },
|
||||
{ path: '/collections/:collection_id/items/:id/edit', name: 'ItemEditionPage', component: ItemEditionPage, meta: {title: 'Edit Item'} },
|
||||
|
||||
{ path: '/collections/:id/items/new', component: ItemEditionPage, meta: {title: 'Create Item'} },
|
||||
{ path: '/collections/:collection_id/items/:id/edit', component: ItemEditionPage, meta: {title: 'Edit Item'} },
|
||||
{ path: '/collection/:collection_id/items', component: ItemsPage, meta: {title: 'Items Page'} },
|
||||
{ path: '/collections/:collection_id/items/:id', component: ItemPage, meta: {title: 'Item Page'} },
|
||||
{ path: '/collections/:collection_id/items/:id', name: 'ItemPage', component: ItemPage, meta: {title: 'Item Page'} },
|
||||
|
||||
{ path: '/items', component: ItemsPage, meta: {title: 'Items Page'} },
|
||||
{ path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: 'Items Page'} },
|
||||
|
||||
{ path: '/filters', component: FiltersPage, meta: {title: 'Filters Page'} },
|
||||
{ path: '/filters', name: 'FiltersPage', component: FiltersPage, meta: {title: 'Filters Page'} },
|
||||
|
||||
{ path: '/fields', component: FieldsPage, meta: {title: 'Fields Page'} },
|
||||
{ path: '/fields', name: 'FieldsPage', component: FieldsPage, meta: {title: 'Fields Page'} },
|
||||
|
||||
{ path: '/categories', component: CategoriesPage, meta: {title: 'Categories Page'} },
|
||||
{ path: '/categories', name: 'CategoriesPage', component: CategoriesPage, meta: {title: 'Categories Page'} },
|
||||
|
||||
{ path: '/events', component: EventsPage, meta: {title: 'Events Page'} },
|
||||
{ path: '/events', name: 'EventsPage', component: EventsPage, meta: {title: 'Events Page'} },
|
||||
|
||||
{ path: '*', redirect: '/'}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CollectionsList from '../components/collections-list.vue';
|
||||
import CollectionsList from '../../components/collections-list.vue';
|
||||
|
||||
export default {
|
||||
name: 'CollectionsPage',
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="columns is-fullheight">
|
||||
<secondary-menu></secondary-menu>
|
||||
<secondary-menu :id="collectionId"></secondary-menu>
|
||||
<section class="container column is-main-content" v-if="collection != null">
|
||||
<div class="card">
|
||||
<div class="card-image" v-if="collection.featured_image">
|
||||
|
|
@ -20,35 +20,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<router-link
|
||||
tag="a"
|
||||
class="card-footer-item"
|
||||
:to="{ path: `/collections/${collection.id}/edit` }">
|
||||
Editar Coleção
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="a"
|
||||
class="card-footer-item"
|
||||
:to="{ path: `/collections/${collection.id}/items/new`, params: { collection_id: collection.id }}">
|
||||
Criar Item
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="a"
|
||||
class="card-footer-item"
|
||||
:to="{ path: `/collection/${collection.id}/items/`, params: { collection_id: collection.id }}">
|
||||
Ver todos os itens
|
||||
</router-link>
|
||||
</footer>
|
||||
</div>
|
||||
<items-list :collectionId="collectionId"></items-list>
|
||||
<router-view></router-view>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import ItemsList from '../components/items-list.vue';
|
||||
import SecondaryMenu from '../components/secondary-menu.vue';
|
||||
import SecondaryMenu from '../../components/secondary-menu.vue';
|
||||
|
||||
export default {
|
||||
name: 'CollectionPage',
|
||||
|
|
@ -69,8 +56,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
'items-list': ItemsList,
|
||||
'secondary-menu': SecondaryMenu
|
||||
SecondaryMenu
|
||||
},
|
||||
computed: {
|
||||
collection(){
|
||||
Loading…
Reference in New Issue