client: reorganize files, router and add inventory skeleton

website/client/components/SocialPage.vue

@@ -1,37 +0,0 @@
-<template lang="pug">
-.row
-  .sixteen.wide.column
-    .ui.secondary.menu
-      router-link.item(to="/social/tavern")
-          | Tavern
-      router-link.item(to="/social/inbox")
-          | Inbox
-
-  .sixteen.wide.column
-    router-view
-</template>
-
-<script>
-export default {
-  data () {
-    // @TODO: Abstract to Store
-    let messages = [
-      {
-        from: 'Paglias',
-        fromUserId: 1234,
-        to: 'TheHollidayInn',
-        message: 'I love the Gang of Four',
-      },
-    ];
-
-    let conversations = {};
-    for (let message of messages) {
-      if (!conversations[message.fromUserId]) conversations[message.fromUserId] = message;
-    }
-
-    return {
-      conversations,
-    };
-  },
-};
-</script>

website/client/components/appMenu.vue

@@ -3,34 +3,34 @@
 #app-menu.ui.top.fixed.menu
   .header.item
     img(src="~assets/header/png/logo@3x.png")
-  router-link.item(to="/", exact) 
+  router-link.item(:to="{name: 'tasks'}", exact) 
     span(v-once) {{ $t('tasks') }}
   // .simple makes it possible to have a dropdown without JS
   .ui.simple.dropdown
-    router-link.item(to="/inventory", :class="{'active': $route.path.startsWith('/inventory')}") 
+    router-link.item(:to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}") 
       span(v-once) {{ $t('inventory') }}
     .menu
-      router-link.item(to="/inventory") 
+      router-link.item(:to="{name: 'inventory'}") 
         span(v-once) {{ $t('inventory') }}
-      router-link.item(to="/inventory/stable") 
+      router-link.item(:to="{name: 'equipment'}") 
-        span(v-once) {{ $t('stable') }}
-      router-link.item(to="/inventory/equipment") 
         span(v-once) {{ $t('equipment') }}
-  router-link.item(to="/market") 
+      router-link.item(:to="{name: 'stable'}") 
+        span(v-once) {{ $t('stable') }}
+  router-link.item(:to="{name: 'market'}") 
     span(v-once) {{ $t('market') }}
   .ui.simple.dropdown
-    router-link.item(to="/social/tavern", :class="{'active': $route.path.startsWith('/social')}") 
+    router-link.item(:to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}") 
       span(v-once) {{ $t('social') }}
     .menu
-      router-link.item(to="/social/tavern") 
+      router-link.item(:to="{name: 'tavern'}") 
         span(v-once) {{ $t('tavern') }}
-      router-link.item(to="/social/inbox") 
+      router-link.item(:to="{name: 'inbox'}") 
         span(v-once) {{ $t('inbox') }}
-      router-link.item(to="/social/challenges") 
+      router-link.item(:to="{name: 'challenges'}") 
         span(v-once) {{ $t('challenges') }}
-      router-link.item(to="/social/party") 
+      router-link.item(:to="{name: 'party'}") 
         span(v-once) {{ $t('party') }}
-      router-link.item(to="/social/guilds") 
+      router-link.item(:to="{name: 'guilds'}") 
         span(v-once) {{ $t('guilds') }}
   .ui.simple.dropdown
     router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}") 
@@ -52,7 +52,7 @@
     a.item.with-img.notifications-dropdown
       img(src="~assets/header/png/notifications@3x.png")
     .ui.simple.dropdown.pointing
-      router-link.item.with-img.user-dropdown(to="/user/avatar")
+      router-link.item.with-img.user-dropdown(:to="{name: 'avatar'}")
         // TODO icons should be white when active
         img(src="~assets/header/png/user@3x.png")
       .menu
@@ -60,12 +60,12 @@
           strong {{user.profile.name}}
           a(v-once) {{ $t('editAvatar') }}
         .divider
-        router-link.item(to="/user/stats") 
+        router-link.item(:to="{name: 'stats'}") 
           span(v-once) {{ $t('stats') }}
-        router-link.item(to="/user/achievements") 
+        router-link.item(:to="{name: 'achievements'}") 
           span(v-once) {{ $t('achievements') }}
         .divider
-        router-link.item(to="/user/settings") 
+        router-link.item(:to="{name: 'settings'}") 
           span(v-once) {{ $t('settings') }}
         .divider
         router-link.item(to="/logout") 

website/client/components/emptyView.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+// Container component used when you only need an empty view to support children routes
+router-view
+</template>

website/client/components/inventory/index.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+.row
+  .sixteen.wide.column
+    .ui.secondary.menu
+      router-link.item(:to="{name: 'inventory'}")
+        span(v-once) {{ $t('inventory') }}
+      router-link.item(:to="{name: 'equipment'}")
+        span(v-once) {{ $t('equipment') }}
+      router-link.item(:to="{name: 'stable'}")
+        span(v-once) {{ $t('stable') }}
+
+  .sixteen.wide.column
+    router-view
+</template>
+
+<script>
+export default {
+};
+</script>

website/client/components/inventory/stable.vue

@@ -0,0 +1,8 @@
+<template lang="pug">
+h2 {{ $t('stable') }}
+</template>
+
+<script>
+export default {
+};
+</script>

website/client/components/social/inbox/index.vue

@@ -2,7 +2,7 @@
 .ui.internally.celled.grid
   .row
     .sixteen.wide.colum
-      h2.ui.dividing.header Inbox
+      h2.ui.dividing.header(v-once) {{ $t('inbox') }}
       .ui.middle.aligned.selection.list
         .item(v-for="conversation in conversations")
           img.ui.avatar.image(src='http://semantic-ui.com/images/avatar/small/daniel.jpg')

website/client/components/social/index.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+.row
+  .sixteen.wide.column
+    .ui.secondary.menu
+      router-link.item(:to="{name: 'tavern'}")
+        span(v-once) {{ $t('tavern') }}
+      router-link.item(:to="{name: 'inbox'}")
+        span(v-once) {{ $t('inbox') }}
+
+  .sixteen.wide.column
+    router-view
+</template>
+
+<script>
+export default {
+};
+</script>

website/client/router.js

@@ -1,15 +1,23 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import UserTasks from './components/userTasks';
+
+import EmptyView from './components/emptyView';
+// TODO Dummy elements used as placeholder until real components are implemented
 import ParentPage from './components/parentPage';
 import Page from './components/page';
 
-// Social
+// Tasks
-import SocialPage from './components/SocialPage';
+import UserTasks from './components/userTasks';
-import TavernPage from './components/Social/TavernPage';
-import InboxPage from './components/Inbox/InboxPage';
-import InboxConversationPage from './components/Inbox/InboxConversationPage';
 
+// Inventory
+import InventoryContainer from './components/inventory/index';
+import StablePage from './components/inventory/stable';
+
+// Social
+import SocialContainer from './components/social/index';
+import TavernPage from './components/social/tavern';
+import InboxPage from './components/social/inbox/index';
+import InboxConversationPage from './components/social/inbox/conversationPage';
 
 Vue.use(VueRouter);
 
@@ -18,25 +26,25 @@ export default new VueRouter({
   base: process.env.NODE_ENV === 'production' ? '/new-app' : __dirname, // eslint-disable-line no-process-env
   linkActiveClass: 'active',
   routes: [
-    { path: '/', component: UserTasks },
+    { name: 'tasks', path: '/', component: UserTasks },
     {
       path: '/inventory',
-      component: ParentPage,
+      component: InventoryContainer,
       children: [
-        {path: '', component: Page},
+        { name: 'inventory', path: '', component: Page },
-        {path: 'equipment', component: Page},
+        { name: 'equipment', path: 'equipment', component: Page },
-        {path: 'stable', component: Page},
+        { name: 'stable', path: 'stable', component: StablePage },
       ],
     },
-    { path: '/market', component: Page },
+    { name: 'market', path: '/market', component: Page },
     {
       path: '/social',
-      component: SocialPage,
+      component: SocialContainer,
       children: [
         { name: 'tavern', path: 'tavern', component: TavernPage },
         {
           path: 'inbox',
-          component: ParentPage,
+          component: EmptyView,
           children: [
             {
               name: 'inbox',
@@ -50,19 +58,19 @@ export default new VueRouter({
             },
           ],
         },
-        {path: 'challenges', component: Page},
+        { name: 'challenges', path: 'challenges', component: Page },
-        {path: 'party', component: Page},
+        { name: 'party', path: 'party', component: Page },
-        {path: 'guilds', component: Page},
+        { name: 'guilds', path: 'guilds', component: Page },
       ],
     },
     {
       path: '/user',
       component: ParentPage,
       children: [
-        {path: 'avatar', component: Page},
+        { name: 'avatar', path: 'avatar', component: Page },
-        {path: 'stats', component: Page},
+        { name: 'stats', path: 'stats', component: Page },
-        {path: 'achievements', component: Page},
+        { name: 'achievements', path: 'achievements', component: Page },
-        {path: 'settings', component: Page},
+        { name: 'settings', path: 'settings', component: Page },
       ],
     },
   ],