feat: profile components
This commit is contained in:
parent
17b2117b39
commit
b1499d1d64
@ -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 = () => {
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
88
client/components/profile.vue
Normal file
88
client/components/profile.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<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>
|
20
client/components/profile/comments.vue
Normal file
20
client/components/profile/comments.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<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>
|
21
client/components/profile/pages.vue
Normal file
21
client/components/profile/pages.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<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>
|
36
client/components/profile/preferences.vue
Normal file
36
client/components/profile/preferences.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<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>
|
53
client/components/profile/profile.vue
Normal file
53
client/components/profile/profile.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<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>
|
@ -15,6 +15,13 @@ router.get(['/a', '/a/*'], (req, res, next) => {
|
||||
res.render('main/admin')
|
||||
})
|
||||
|
||||
/**
|
||||
* Profile
|
||||
*/
|
||||
router.get(['/p', '/p/*'], (req, res, next) => {
|
||||
res.render('main/profile')
|
||||
})
|
||||
|
||||
/**
|
||||
* View document
|
||||
*/
|
||||
|
@ -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
|
||||
|
6
server/views/main/profile.pug
Normal file
6
server/views/main/profile.pug
Normal file
@ -0,0 +1,6 @@
|
||||
extends ../master.pug
|
||||
|
||||
block body
|
||||
body
|
||||
#app
|
||||
profile
|
Loading…
Reference in New Issue
Block a user