feat: profile components

client/app.js

@@ -78,6 +78,7 @@ Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './component
 Vue.component('editor', () => import(/* webpackChunkName: "editor" */ './components/editor.vue'))
 Vue.component('login', () => import(/* webpackMode: "eager" */ './components/login.vue'))
 Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/nav-header.vue'))
+Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))
 
 let bootstrap = () => {

client/components/editor.vue

@@ -14,7 +14,7 @@
       v-dialog(v-model='dialogProgress', persistent, max-width='350')
         v-card(color='blue darken-3', dark)
           v-card-text.text-xs-center.py-4
-            v-progress-circular(indeterminate, color='white', width='1')
+            v-progress-circular(indeterminate, color='white', :width='1')
             .subheading Processing
             .caption.blue--text.text--lighten-3 Please wait...
 </template>

client/components/nav-header.vue

@@ -3,7 +3,7 @@
     v-menu(open-on-hover, offset-y, bottom, left, nudge-top='-18', min-width='250')
       v-toolbar-side-icon(slot='activator')
         v-icon view_module
-      v-list(dense)
+      v-list(dense).py-0
         v-list-tile(avatar, href='/')
           v-list-tile-avatar: v-icon(color='blue') home
           v-list-tile-content Home

client/components/profile.vue

+<template lang='pug'>
+  v-app.profile
+    nav-header
+    v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
+      v-list(dense)
+        v-list-tile.pt-2(to='/profile')
+          v-list-tile-action: v-icon account_circle
+          v-list-tile-title Profile
+        v-list-tile(to='/preferences')
+          v-list-tile-action: v-icon settings
+          v-list-tile-title Preferences
+        v-divider.my-2
+        v-subheader My Content
+        v-list-tile(to='/pages')
+          v-list-tile-action: v-icon pages
+          v-list-tile-title Pages
+        v-list-tile(to='/comments')
+          v-list-tile-action: v-icon question_answer
+          v-list-tile-title Comments
+
+    v-content
+      transition(name='profile-router')
+        router-view
+
+    v-footer.py-2.justify-center(app, absolute, color='grey lighten-3', inset, height='auto')
+      .caption.grey--text.text--darken-1 Powered by Wiki.js
+
+    v-snackbar(
+      :color='notification.style'
+      bottom,
+      right,
+      multi-line,
+      v-model='notificationState'
+    )
+      .text-xs-left
+        v-icon.mr-3(dark) {{ notification.icon }}
+        span {{ notification.message }}
+</template>
+
+<script>
+import VueRouter from 'vue-router'
+import { mapState } from 'vuex'
+
+const router = new VueRouter({
+  mode: 'history',
+  base: '/p',
+  routes: [
+    { path: '/', redirect: '/profile' },
+    { path: '/profile', component: () => import(/* webpackChunkName: "profile" */ './profile/profile.vue') },
+    { path: '/preferences', component: () => import(/* webpackChunkName: "profile" */ './profile/preferences.vue') },
+    { path: '/pages', component: () => import(/* webpackChunkName: "profile" */ './profile/pages.vue') },
+    { path: '/comments', component: () => import(/* webpackChunkName: "profile" */ './profile/comments.vue') }
+  ]
+})
+
+export default {
+  data() {
+    return {
+      profileDrawerShown: true
+    }
+  },
+  computed: {
+    ...mapState(['notification']),
+    notificationState: {
+      get() { return this.notification.isActive },
+      set(newState) { this.$store.commit('updateNotificationState', newState) }
+    }
+  },
+  router
+}
+</script>
+
+<style lang='scss'>
+
+.profile-router {
+  &-enter-active, &-leave-active {
+    transition: opacity .25s ease;
+    opacity: 1;
+  }
+  &-enter-active {
+    transition-delay: .25s;
+  }
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
+}
+
+</style>

client/components/profile/comments.vue

+<template lang='pug'>
+  v-container(fluid, fill-height, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .headline.primary--text Comments
+        .subheading.grey--text List of comments I posted
+</template>
+
+<script>
+
+export default {
+  data() {
+    return { }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/components/profile/pages.vue

+<template lang='pug'>
+  v-container(fluid, fill-height, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .headline.primary--text Pages
+        .subheading.grey--text List of pages I created or contributed
+
+</template>
+
+<script>
+
+export default {
+  data() {
+    return { }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/components/profile/preferences.vue

+<template lang='pug'>
+  v-container(fluid, fill-height, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .headline.primary--text Preferences
+        .subheading.grey--text Site settings
+        v-form.pt-3
+          v-layout(row wrap)
+            v-flex(lg6 xs12)
+              v-form
+                v-card
+                  v-toolbar(color='primary', dark, dense, flat)
+                    v-toolbar-title
+                      .subheading Display
+                  v-subheader Locale
+            v-flex(lg6 xs12)
+              v-card
+                v-toolbar(color='primary', dark, dense, flat)
+                  v-toolbar-title
+                    .subheading ---
+                v-card-text ---
+
+</template>
+
+<script>
+
+export default {
+  data() {
+    return { }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/components/profile/profile.vue

+<template lang='pug'>
+  v-container(fluid, fill-height, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .headline.primary--text Profile
+        .subheading.grey--text Personal profile
+        v-form.pt-3
+          v-layout(row wrap)
+            v-flex(lg6 xs12)
+              v-form
+                v-card
+                  v-toolbar(color='primary', dark, dense, flat)
+                    v-toolbar-title
+                      .subheading User Details
+                  v-card-text
+                    v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
+                    v-divider
+                    v-text-field(label='Email', :counter='255', prepend-icon='email')
+                  v-divider.my-0
+                  v-card-actions.grey.lighten-4
+                    v-spacer
+                    v-btn(color='primary')
+                      v-icon(left) chevron_right
+                      span Save
+            v-flex(lg6 xs12)
+              v-card
+                v-toolbar(color='primary', dark, dense, flat)
+                  v-toolbar-title
+                    .subheading Picture
+                v-card-text ---
+              v-card.mt-3
+                v-toolbar(color='teal', dark, dense, flat)
+                  v-toolbar-title
+                    .subheading Activity
+                v-card-text.grey--text.text--darken-2
+                  .body-1 Joined #[strong January 1st, 2010]
+                  .body-1 Last login on #[strong January 2nd, 2010]
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      name: 'John Doe'
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

server/controllers/common.js

@@ -16,6 +16,13 @@ router.get(['/a', '/a/*'], (req, res, next) => {
 })
 
 /**
+ * Profile
+ */
+router.get(['/p', '/p/*'], (req, res, next) => {
+  res.render('main/profile')
+})
+
+/**
  * View document
  */
 router.get('/*', (req, res, next) => {

server/db/migrations/2.0.0.js

@@ -99,14 +99,14 @@ exports.up = knex => {
     // PAGE TAGS ---------------------------
     .createTable('pageTags', table => {
       table.increments('id').primary()
-      table.integer('pageId').unsigned().references('id').inTable('pages')
-      table.integer('tagId').unsigned().references('id').inTable('tags')
+      table.integer('pageId').unsigned().references('id').inTable('pages').onDelete('CASCADE')
+      table.integer('tagId').unsigned().references('id').inTable('tags').onDelete('CASCADE')
     })
     // USER GROUPS -------------------------
     .createTable('userGroups', table => {
       table.increments('id').primary()
-      table.integer('userId').unsigned().references('id').inTable('users')
-      table.integer('groupId').unsigned().references('id').inTable('groups')
+      table.integer('userId').unsigned().references('id').inTable('users').onDelete('CASCADE')
+      table.integer('groupId').unsigned().references('id').inTable('groups').onDelete('CASCADE')
     })
     // =====================================
     // REFERENCES

server/views/main/profile.pug

+extends ../master.pug
+
+block body
+  body
+    #app
+      profile