From 421cd1ad7326c789ae2f23658d06bbec6f9f5ff6 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 23 Feb 2018 10:20:04 -0300
Subject: [PATCH] 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.

---
 src/admin/components/categories-list.vue      | 21 +++++++
 src/admin/components/fields-list.vue          | 21 +++++++
 src/admin/components/filters-list.vue         | 21 +++++++
 src/admin/components/items-list.vue           | 14 +++--
 src/admin/components/primary-menu.vue         | 17 +++---
 src/admin/components/secondary-menu.vue       | 21 +++++--
 src/admin/js/router.js                        | 57 +++++++++++--------
 .../{ => edition}/collection-edition-page.vue |  0
 .../pages/{ => edition}/item-edition-page.vue |  0
 .../pages/{ => lists}/categories-page.vue     |  0
 .../pages/{ => lists}/collections-page.vue    |  2 +-
 src/admin/pages/{ => lists}/events-page.vue   |  0
 src/admin/pages/{ => lists}/fields-page.vue   |  0
 src/admin/pages/{ => lists}/filters-page.vue  |  0
 src/admin/pages/{ => lists}/items-page.vue    |  0
 .../pages/{ => singles}/collection-page.vue   | 22 ++-----
 src/admin/pages/{ => singles}/item-page.vue   |  0
 17 files changed, 136 insertions(+), 60 deletions(-)
 create mode 100644 src/admin/components/categories-list.vue
 create mode 100644 src/admin/components/fields-list.vue
 create mode 100644 src/admin/components/filters-list.vue
 rename src/admin/pages/{ => edition}/collection-edition-page.vue (100%)
 rename src/admin/pages/{ => edition}/item-edition-page.vue (100%)
 rename src/admin/pages/{ => lists}/categories-page.vue (100%)
 rename src/admin/pages/{ => lists}/collections-page.vue (87%)
 rename src/admin/pages/{ => lists}/events-page.vue (100%)
 rename src/admin/pages/{ => lists}/fields-page.vue (100%)
 rename src/admin/pages/{ => lists}/filters-page.vue (100%)
 rename src/admin/pages/{ => lists}/items-page.vue (100%)
 rename src/admin/pages/{ => singles}/collection-page.vue (69%)
 rename src/admin/pages/{ => singles}/item-page.vue (100%)

diff --git a/src/admin/components/categories-list.vue b/src/admin/components/categories-list.vue
new file mode 100644
index 000000000..4b6400719
--- /dev/null
+++ b/src/admin/components/categories-list.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <h1>Categories List</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CategoriesList',
+    data(){
+        return {
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+
diff --git a/src/admin/components/fields-list.vue b/src/admin/components/fields-list.vue
new file mode 100644
index 000000000..9d6c6c3bf
--- /dev/null
+++ b/src/admin/components/fields-list.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <h1>Fields List</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FieldsList',
+    data(){
+        return {
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+
diff --git a/src/admin/components/filters-list.vue b/src/admin/components/filters-list.vue
new file mode 100644
index 000000000..471fc72dc
--- /dev/null
+++ b/src/admin/components/filters-list.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <h1>Filters List</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FiltersList',
+    data(){
+        return {
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+
diff --git a/src/admin/components/items-list.vue b/src/admin/components/items-list.vue
index dbe783713..55375fd54 100644
--- a/src/admin/components/items-list.vue
+++ b/src/admin/components/items-list.vue
@@ -101,12 +101,10 @@ export default {
             isLoading: false,
             totalItems: 0,
             page: 1,
-            itemsPerPage: 2
+            itemsPerPage: 2,
+            collectionId: Number
         }
     },
-    props: {
-        collectionId: Number
-    },
     methods: {
         ...mapActions('collection', [
             'fetchItems',
@@ -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) => {
diff --git a/src/admin/components/primary-menu.vue b/src/admin/components/primary-menu.vue
index 32c6ef1f6..981441d65 100644
--- a/src/admin/components/primary-menu.vue
+++ b/src/admin/components/primary-menu.vue
@@ -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>
diff --git a/src/admin/components/secondary-menu.vue b/src/admin/components/secondary-menu.vue
index 66e528479..1ed2ca0e1 100644
--- a/src/admin/components/secondary-menu.vue
+++ b/src/admin/components/secondary-menu.vue
@@ -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>
 
diff --git a/src/admin/js/router.js b/src/admin/js/router.js
index 6b8ac9f25..3650b8c3e 100644
--- a/src/admin/js/router.js
+++ b/src/admin/js/router.js
@@ -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/:collection_id/items/:id', name: 'ItemPage', component: ItemPage, meta: {title: 'Item Page'} },
 
-    { 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: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: 'Items Page'} },
 
-    { path: '/items', component: ItemsPage, meta: {title: 'Items Page'} },
+    { path: '/filters', name: 'FiltersPage', component: FiltersPage, meta: {title: 'Filters Page'} },
 
-    { path: '/filters', component: FiltersPage, meta: {title: 'Filters Page'} },
+    { path: '/fields', name: 'FieldsPage', component: FieldsPage, meta: {title: 'Fields Page'} },
 
-    { path: '/fields', component: FieldsPage, meta: {title: 'Fields Page'} },
+    { path: '/categories', name: 'CategoriesPage', component: CategoriesPage, meta: {title: 'Categories Page'} },
 
-    { path: '/categories', 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: '/'}
 ]
diff --git a/src/admin/pages/collection-edition-page.vue b/src/admin/pages/edition/collection-edition-page.vue
similarity index 100%
rename from src/admin/pages/collection-edition-page.vue
rename to src/admin/pages/edition/collection-edition-page.vue
diff --git a/src/admin/pages/item-edition-page.vue b/src/admin/pages/edition/item-edition-page.vue
similarity index 100%
rename from src/admin/pages/item-edition-page.vue
rename to src/admin/pages/edition/item-edition-page.vue
diff --git a/src/admin/pages/categories-page.vue b/src/admin/pages/lists/categories-page.vue
similarity index 100%
rename from src/admin/pages/categories-page.vue
rename to src/admin/pages/lists/categories-page.vue
diff --git a/src/admin/pages/collections-page.vue b/src/admin/pages/lists/collections-page.vue
similarity index 87%
rename from src/admin/pages/collections-page.vue
rename to src/admin/pages/lists/collections-page.vue
index 031ef0f9f..2003cfb2c 100644
--- a/src/admin/pages/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import CollectionsList from '../components/collections-list.vue';
+import CollectionsList from '../../components/collections-list.vue';
 
 export default {
     name: 'CollectionsPage',
diff --git a/src/admin/pages/events-page.vue b/src/admin/pages/lists/events-page.vue
similarity index 100%
rename from src/admin/pages/events-page.vue
rename to src/admin/pages/lists/events-page.vue
diff --git a/src/admin/pages/fields-page.vue b/src/admin/pages/lists/fields-page.vue
similarity index 100%
rename from src/admin/pages/fields-page.vue
rename to src/admin/pages/lists/fields-page.vue
diff --git a/src/admin/pages/filters-page.vue b/src/admin/pages/lists/filters-page.vue
similarity index 100%
rename from src/admin/pages/filters-page.vue
rename to src/admin/pages/lists/filters-page.vue
diff --git a/src/admin/pages/items-page.vue b/src/admin/pages/lists/items-page.vue
similarity index 100%
rename from src/admin/pages/items-page.vue
rename to src/admin/pages/lists/items-page.vue
diff --git a/src/admin/pages/collection-page.vue b/src/admin/pages/singles/collection-page.vue
similarity index 69%
rename from src/admin/pages/collection-page.vue
rename to src/admin/pages/singles/collection-page.vue
index 018fd74c0..eac1ac858 100644
--- a/src/admin/pages/collection-page.vue
+++ b/src/admin/pages/singles/collection-page.vue
@@ -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(){
diff --git a/src/admin/pages/item-page.vue b/src/admin/pages/singles/item-page.vue
similarity index 100%
rename from src/admin/pages/item-page.vue
rename to src/admin/pages/singles/item-page.vue