From 6a7d540a2ca568bd8b18f118a082ae010967afba Mon Sep 17 00:00:00 2001
From: weryques <weryques@outlook.com>
Date: Mon, 29 Jan 2018 16:29:28 -0200
Subject: [PATCH] Added hook to change the titles of the pages

---
 build.sh                                  |  2 +-
 src/admin/components/collections-list.vue | 11 ++++++-----
 src/admin/js/main.js                      |  5 +++++
 src/admin/js/router.js                    | 12 ++++++------
 src/admin/scss/tainacan-admin.scss        | 16 +++++++++++++++-
 5 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/build.sh b/build.sh
index 3a32dd43a..2323df656 100755
--- a/build.sh
+++ b/build.sh
@@ -26,7 +26,7 @@ fi
 new_md5_package=$(<last-package-build.md5)
 if [ "$current_md5_package" != "$new_md5_package" ]
 then
-    ## Install composer dependencies
+    ## Install js dependencies
     npm install
 fi
 
diff --git a/src/admin/components/collections-list.vue b/src/admin/components/collections-list.vue
index f707e6d80..c43a039db 100644
--- a/src/admin/components/collections-list.vue
+++ b/src/admin/components/collections-list.vue
@@ -4,7 +4,8 @@
                 ref="multipleTable"
                 :data="collections"
                 style="width: 100%"
-                @selection-change="handleSelectionChange">
+                @selection-change="handleSelectionChange"
+                stripe>
             <el-table-column type="selection" width="30">
             </el-table-column>
             <el-table-column width="55">
@@ -12,15 +13,15 @@
                     <img class="table-thumb" :src="`${scope.row.featured_image}`"/>
                 </template>
             </el-table-column>
-            <el-table-column label="Nome" show-overflow-tooltip>
+            <el-table-column label="Nome" sortable prop="{{ scope.row.name }}" show-overflow-tooltip>
                 <template slot-scope="scope"><router-link :to="`/collections/${scope.row.id}`" tag="a">{{ scope.row.name }}</router-link></template>
             </el-table-column>
             <el-table-column property="description" label="Descrição" show-overflow-tooltip>
             </el-table-column>
-            <el-table-column label="Ações" width="100">
+            <el-table-column label="Ações" width="120">
                 <template slot-scope="scope">
-                    <el-button size="small" type="text" @click.native="shareCollection(scope.row.id)"><i class="material-icons">share</i></el-button>
-                    <el-button size="small" type="text" @click.native="showMoreCollection(scope.row.id)"><i class="material-icons">more_vert</i></el-button>
+                    <el-button size="small" type="text" @click.native="shareCollection(scope.row.id)"><i class="material-icons md-18">share</i></el-button>
+                    <el-button size="small" type="text" @click.native="showMoreCollection(scope.row.id)"><i class="material-icons md-18">more_vert</i></el-button>
                 </template>
             </el-table-column>
         </el-table>
diff --git a/src/admin/js/main.js b/src/admin/js/main.js
index 3d880e291..59555aeaa 100644
--- a/src/admin/js/main.js
+++ b/src/admin/js/main.js
@@ -7,6 +7,11 @@ import AdminPage from '../admin.vue'
 import store from '../../js/store/store'
 import router from './router'
 
+router.beforeEach((to, from, next) => {
+    document.title = to.meta.title
+    next()
+});
+
 //------------------------------------------------
 // FROM DEV 
 
diff --git a/src/admin/js/router.js b/src/admin/js/router.js
index e5e7b365c..2f43c569b 100644
--- a/src/admin/js/router.js
+++ b/src/admin/js/router.js
@@ -11,14 +11,14 @@ import ItemsList from '../components/items-list.vue'
 Vue.use(VueRouter);
 
 const routes = [
-    { path: '/', component: CollectionsList },
-    { path: '/collections', component: CollectionsList },
+    { path: '/', component: CollectionsList, meta: {title: 'Admin Page'} },
+    { path: '/collections', component: CollectionsList, meta: {title: 'Collections List'} },
     { path: '/collections/:id', component: CollectionPage, children: [
-            { path: 'items-list', component: ItemsList }
-            
-        ]   
+            { path: 'items-list', component: ItemsList, meta: {title: 'Items List'} }
+        ],
+        meta: { title: 'Collection Page' }
     },
-    { path: '/collections/:id/items/create', component: ItemCreationPage },
+    { path: '/collections/:id/items/create', component: ItemCreationPage, meta: {title: 'Create Item'} },
     { path: '*', redirect: '/'}
 ]
 
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index b945549e1..19de1469a 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -30,4 +30,18 @@ body.tainacan-admin-page #adminmenumain {
     width: 100%;
     z-index: 999999;
     overflow-y: auto;
-}
\ No newline at end of file
+}
+
+/* Rules for sizing the icon. */
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-24 { font-size: 24px; }
+.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-48 { font-size: 48px; }
+
+/* Rules for using icons as black on a light background. */
+.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
+.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+
+/* Rules for using icons as white on a dark background. */
+.material-icons.md-light { color: rgba(255, 255, 255, 1); }
+.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
\ No newline at end of file