refactor: All Pages tree Vue component
This commit is contained in:
NGPixel
parent
6814c952bf
commit
bf6eae1428
@ -1,10 +1,9 @@
|
||||
'use strict'
|
||||
|
||||
/* global alertsData, siteLang */
|
||||
/* global siteLang */
|
||||
/* eslint-disable no-new */
|
||||
|
||||
import $ from 'jquery'
|
||||
import _ from 'lodash'
|
||||
import Vue from 'vue'
|
||||
import VueResource from 'vue-resource'
|
||||
import store from './store'
|
||||
@ -12,7 +11,6 @@ import io from 'socket.io-client'
|
||||
import i18next from 'i18next'
|
||||
import i18nextXHR from 'i18next-xhr-backend'
|
||||
import VueI18Next from '@panter/vue-i18next'
|
||||
// import Alerts from './components/alerts.js'
|
||||
import 'jquery-smooth-scroll'
|
||||
import 'jquery-sticky'
|
||||
|
||||
@ -25,6 +23,7 @@ import anchorComponent from './components/anchor.vue'
|
||||
import colorPickerComponent from './components/color-picker.vue'
|
||||
import loadingSpinnerComponent from './components/loading-spinner.vue'
|
||||
import searchComponent from './components/search.vue'
|
||||
import treeComponent from './components/tree.vue'
|
||||
|
||||
import adminUsersCreateComponent from './modals/admin-users-create.vue'
|
||||
|
||||
@ -62,14 +61,6 @@ $(() => {
|
||||
store.dispatch('stopLoading')
|
||||
})
|
||||
|
||||
var alerts = {}
|
||||
/*var alerts = new Alerts()
|
||||
if (alertsData) {
|
||||
_.forEach(alertsData, (alertRow) => {
|
||||
alerts.push(alertRow)
|
||||
})
|
||||
}*/
|
||||
|
||||
// ====================================
|
||||
// Establish WebSocket connection
|
||||
// ====================================
|
||||
@ -91,34 +82,16 @@ $(() => {
|
||||
anchor: anchorComponent,
|
||||
colorPicker: colorPickerComponent,
|
||||
loadingSpinner: loadingSpinnerComponent,
|
||||
search: searchComponent
|
||||
},
|
||||
directives: {
|
||||
// sticky: VueSticky
|
||||
search: searchComponent,
|
||||
tree: treeComponent
|
||||
},
|
||||
store,
|
||||
i18n,
|
||||
el: '#root',
|
||||
mounted() {
|
||||
$('a').smoothScroll({
|
||||
speed: 500,
|
||||
offset: -50
|
||||
})
|
||||
|
||||
$('a').smoothScroll({ speed: 500, offset: -50 })
|
||||
$('#header').sticky({ topSpacing: 0 })
|
||||
$('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
|
||||
|
||||
// ====================================
|
||||
// Pages logic
|
||||
// ====================================
|
||||
|
||||
require('./pages/view.js')(alerts)
|
||||
require('./pages/all.js')(alerts, socket)
|
||||
require('./pages/create.js')(alerts, socket)
|
||||
require('./pages/edit.js')(alerts, socket)
|
||||
require('./pages/source.js')(alerts)
|
||||
require('./pages/history.js')(alerts)
|
||||
require('./pages/admin.js')(alerts)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
84
client/js/components/tree.vue
Normal file
84
client/js/components/tree.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template lang="pug">
|
||||
transition
|
||||
ul.collapsable-nav(v-for='treeItem in tree', :class='{ "has-children": treeItem.hasChildren }', v-cloak)
|
||||
li(v-for='page in treeItem.pages', :class='{ "is-active": page.isActive }')
|
||||
a(v-on:click='mainAction(page)')
|
||||
template(v-if='page._id !== "home"')
|
||||
i(:class='{ "icon-folder2": page.isDirectory, "icon-file-text-o": !page.isDirectory }')
|
||||
span {{ page.title }}
|
||||
template(v-else)
|
||||
i.icon-home
|
||||
span {{ $t('nav.home') }}
|
||||
a.is-pagelink(v-if='page.isDirectory && page.isEntry', v-on:click='goto(page._id)')
|
||||
i.icon-file-text-o
|
||||
i.icon-arrow-right2
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as _ from 'lodash'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
data () {
|
||||
return {
|
||||
tree: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetch (basePath) {
|
||||
let self = this
|
||||
self.$store.dispatch('startLoading')
|
||||
self.$nextTick(() => {
|
||||
socket.emit('treeFetch', { basePath }, (data) => {
|
||||
if (self.tree.length > 0) {
|
||||
let branch = _.last(self.tree)
|
||||
branch.hasChildren = true
|
||||
_.find(branch.pages, { _id: basePath }).isActive = true
|
||||
}
|
||||
self.tree.push({
|
||||
hasChildren: false,
|
||||
pages: data
|
||||
})
|
||||
self.$store.dispatch('stopLoading')
|
||||
})
|
||||
})
|
||||
},
|
||||
goto (entryPath) {
|
||||
window.location.assign(siteRoot + '/' + entryPath)
|
||||
},
|
||||
unfold (entryPath) {
|
||||
let self = this
|
||||
let lastIndex = 0
|
||||
_.forEach(self.tree, branch => {
|
||||
lastIndex++
|
||||
if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
|
||||
return false
|
||||
}
|
||||
})
|
||||
self.tree = _.slice(self.tree, 0, lastIndex)
|
||||
let branch = _.last(self.tree)
|
||||
branch.hasChildren = false
|
||||
branch.pages.forEach(page => {
|
||||
page.isActive = false
|
||||
})
|
||||
},
|
||||
mainAction (page) {
|
||||
let self = this
|
||||
if (page.isActive) {
|
||||
self.unfold(page._id)
|
||||
} else if (page.isDirectory) {
|
||||
self.fetch(page._id)
|
||||
} else {
|
||||
self.goto(page._id)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let basePath = window.location.pathname.slice(0, -4)
|
||||
if (basePath.length > 1) {
|
||||
basePath = basePath.slice(1)
|
||||
}
|
||||
this.fetch(basePath)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,74 +0,0 @@
|
||||
'use strict'
|
||||
|
||||
import $ from 'jquery'
|
||||
import Vue from 'vue'
|
||||
import _ from 'lodash'
|
||||
|
||||
const rootUrl = '/'
|
||||
|
||||
module.exports = (alerts, socket) => {
|
||||
if ($('#page-type-all').length) {
|
||||
let vueAllPages = new Vue({ // eslint-disable-line no-unused-vars
|
||||
el: '#page-type-all',
|
||||
data: {
|
||||
tree: []
|
||||
},
|
||||
methods: {
|
||||
fetch: function (basePath) {
|
||||
let self = this
|
||||
$('#notifload').addClass('active')
|
||||
Vue.nextTick(() => {
|
||||
socket.emit('treeFetch', { basePath }, (data) => {
|
||||
if (self.tree.length > 0) {
|
||||
let branch = _.last(self.tree)
|
||||
branch.hasChildren = true
|
||||
_.find(branch.pages, { _id: basePath }).isActive = true
|
||||
}
|
||||
self.tree.push({
|
||||
hasChildren: false,
|
||||
pages: data
|
||||
})
|
||||
$('#notifload').removeClass('active')
|
||||
})
|
||||
})
|
||||
},
|
||||
goto: function (entryPath) {
|
||||
window.location.assign(rootUrl + entryPath)
|
||||
},
|
||||
unfold: function (entryPath) {
|
||||
let self = this
|
||||
let lastIndex = 0
|
||||
_.forEach(self.tree, branch => {
|
||||
lastIndex++
|
||||
if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
|
||||
return false
|
||||
}
|
||||
})
|
||||
self.tree = _.slice(self.tree, 0, lastIndex)
|
||||
let branch = _.last(self.tree)
|
||||
branch.hasChildren = false
|
||||
branch.pages.forEach(page => {
|
||||
page.isActive = false
|
||||
})
|
||||
},
|
||||
mainAction: function (page) {
|
||||
let self = this
|
||||
if (page.isActive) {
|
||||
self.unfold(page._id)
|
||||
} else if (page.isDirectory) {
|
||||
self.fetch(page._id)
|
||||
} else {
|
||||
self.goto(page._id)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
let basePath = window.location.pathname.slice(0, -4)
|
||||
if (basePath.length > 1) {
|
||||
basePath = basePath.slice(1)
|
||||
}
|
||||
this.fetch(basePath)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,7 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Home"
|
||||
},
|
||||
"profile": {
|
||||
"displayname": "Display Name",
|
||||
"displaynameexample": "John Smith",
|
||||
|
||||
@ -18,7 +18,9 @@ html
|
||||
link(rel='manifest', href='/manifest.json')
|
||||
|
||||
//- Site Lang
|
||||
script var siteLang = '!{appconfig.lang}';
|
||||
script.
|
||||
var siteLang = '!{appconfig.lang}';
|
||||
var siteRoot = '!{appconfig.host}';
|
||||
|
||||
//- JS / CSS
|
||||
script(type='text/javascript', src='/js/libs.min.js')
|
||||
|
||||
@ -1,40 +1,24 @@
|
||||
extends ../layout.pug
|
||||
|
||||
block rootNavRight
|
||||
i.nav-item#notifload
|
||||
|
||||
block content
|
||||
|
||||
#page-type-all
|
||||
.container.is-fluid.has-collapsable-nav
|
||||
.sidebar.is-collapsed
|
||||
aside
|
||||
.sidebar-label
|
||||
span= t('sidebar.nav')
|
||||
ul.sidebar-menu
|
||||
li
|
||||
a(href='/')
|
||||
i.icon-home
|
||||
span= t('nav.home')
|
||||
if !isGuest
|
||||
li
|
||||
a(href='/admin')
|
||||
i.icon-head
|
||||
span= t('nav.account')
|
||||
else
|
||||
li
|
||||
a(href='/login')
|
||||
i.icon-unlock
|
||||
span= t('nav.login')
|
||||
ul.collapsable-nav(v-for='treeItem in tree', :class='{ "has-children": treeItem.hasChildren }', v-cloak)
|
||||
li(v-for='page in treeItem.pages', :class='{ "is-active": page.isActive }')
|
||||
a(v-on:click='mainAction(page)')
|
||||
template(v-if='page._id !== "home"')
|
||||
i(:class='{ "icon-folder2": page.isDirectory, "icon-file-text-o": !page.isDirectory }')
|
||||
span {{ page.title }}
|
||||
template(v-else)
|
||||
.container.is-fluid.has-collapsable-nav
|
||||
.sidebar.is-collapsed
|
||||
aside
|
||||
.sidebar-label
|
||||
span= t('sidebar.nav')
|
||||
ul.sidebar-menu
|
||||
li
|
||||
a(href='/')
|
||||
i.icon-home
|
||||
span= t('nav.home')
|
||||
a.is-pagelink(v-if='page.isDirectory && page.isEntry', v-on:click='goto(page._id)')
|
||||
i.icon-file-text-o
|
||||
i.icon-arrow-right2
|
||||
if !isGuest
|
||||
li
|
||||
a(href='/admin')
|
||||
i.icon-cog
|
||||
span= t('nav.account')
|
||||
else
|
||||
li
|
||||
a(href='/login')
|
||||
i.icon-unlock
|
||||
span= t('nav.login')
|
||||
tree
|
||||
|
||||
Loading…
Reference in New Issue
Block a user