Browse Source

feat: page tree browser

pull/1098/head
NGPixel 5 years ago
parent
commit
3de0e1499a
3 changed files with 103 additions and 41 deletions
  1. 132
      client/components/common/page-selector.vue
  2. 11
      client/graph/common/common-pages-query-tree.gql
  3. 1
      server/graph/resolvers/page.js

132
client/components/common/page-selector.vue

@ -1,7 +1,7 @@
<template lang="pug">
v-dialog(v-model='isShown', max-width='850px')
v-card.page-selector
.dialog-header.is-dark
.dialog-header.is-blue
v-icon.mr-3(color='white') mdi-page-next-outline
.body-1 Select Page Location
v-spacer
@ -15,45 +15,53 @@
.d-flex(style='min-height:400px;')
v-flex.grey(xs4, :class='darkMode ? `darken-4` : `lighten-3`')
v-toolbar(color='grey darken-3', dark, dense, flat)
.body-2 Folders
//- v-spacer
//- v-btn(icon): v-icon create_new_folder
.body-2 Virtual Folders
v-spacer
v-btn(icon, tile)
v-icon mdi-help-box
v-treeview(
v-model='tree'
:items='treeFolders'
:active.sync='currentNode'
:open.sync='openNodes'
:items='tree'
:load-children='fetchFolders'
dense
expand-icon='mdi-menu-down-outline'
item-id='path'
item-text='title'
activatable
open-on-click
hoverable
)
template(slot='prepend', slot-scope='{ item, open, leaf }')
v-icon mdi-{{ open ? 'folder-open' : 'folder' }}
v-flex(xs8)
v-toolbar(color='grey darken-2', dark, dense, flat)
v-toolbar(color='blue darken-2', dark, dense, flat)
.body-2 Pages
v-spacer
v-btn(icon): v-icon mdi-forward
v-btn(icon): v-icon mdi-delete
v-list(dense)
v-list-item
v-list-item-icon: v-icon mdi-file-document-box
v-list-item-title File A
v-divider
v-list-item
v-list-item-icon: v-icon mdi-file-document-box
v-list-item-title File B
v-divider
v-list-item
v-list-item-icon: v-icon mdi-file-document-box
v-list-item-title File C
v-divider
v-list-item
v-list-item-icon: v-icon mdi-file-document-box
v-list-item-title File D
v-card-actions.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
v-btn(icon, tile): v-icon mdi-content-save-move-outline
v-btn(icon, tile): v-icon mdi-trash-can-outline
v-list.py-0(dense, v-if='currentPages.length > 0')
v-list-item-group(
v-model='currentPage'
color='primary'
)
template(v-for='(page, idx) of currentPages')
v-list-item(:key='page.id', :value='page.path')
v-list-item-icon: v-icon mdi-file-document-box
v-list-item-title {{page.title}}
v-divider(v-if='idx < pages.length - 1')
v-alert.animated.fadeIn(
v-else
text
color='orange'
prominent
icon='mdi-alert'
)
.body-2 This folder is empty.
v-card-actions.grey.pa-2(:class='darkMode ? `darken-2` : `lighten-1`')
v-select(
solo
dark
flat
background-color='grey darken-3-d2'
hide-details
single-line
@ -62,6 +70,7 @@
v-model='currentLocale'
)
v-text-field(
ref='pathIpt'
solo
hide-details
prefix='/'
@ -73,13 +82,15 @@
v-card-chin
v-spacer
v-btn(text, @click='close') Cancel
v-btn.px-4(color='primary', @click='open')
v-btn.px-4(color='primary', @click='open', :disabled='!isValidPath')
v-icon(left) mdi-check
span Select
</template>
<script>
import _ from 'lodash'
import { get } from 'vuex-pathify'
import pageTreeQuery from 'gql/common/common-pages-query-tree.gql'
/* global siteLangs, siteConfig */
@ -111,8 +122,15 @@ export default {
searchLoading: false,
currentLocale: siteConfig.lang,
currentPath: 'new-page',
tree: [],
treeChildren: [],
currentPage: null,
currentNode: [0],
openNodes: [0],
tree: [{
id: 0,
title: '/ (root',
children: []
}],
pages: [],
namespaces: siteLangs.length ? siteLangs.map(ns => ns.code) : [siteConfig.lang]
}
},
@ -122,21 +140,33 @@ export default {
get() { return this.value },
set(val) { this.$emit('input', val) }
},
treeFolders() {
return [
{
id: '/',
name: '/ (root)',
children: []
}
]
currentPages () {
return _.filter(this.pages, ['parent', _.head(this.currentNode) || 0])
},
isValidPath () {
return this.currentPath && this.currentPath.length > 2
}
},
watch: {
isShown(newValue, oldValue) {
isShown (newValue, oldValue) {
if (newValue && !oldValue) {
this.currentPath = this.path
this.currentLocale = this.locale
_.delay(() => {
this.$refs.pathIpt.focus()
})
}
},
currentNode (newValue, oldValue) {
if (newValue.length < 1) { // force a selection
this.$nextTick(() => {
this.currentNode = oldValue
})
}
},
currentPage (newValue, oldValue) {
if (!_.isEmpty(newValue)) {
this.currentPath = newValue
}
}
},
@ -153,8 +183,28 @@ export default {
this.close()
}
},
async fetchFolders(item) {
console.info(item)
async fetchFolders (item) {
this.searchLoading = true
const resp = await this.$apollo.query({
query: pageTreeQuery,
fetchPolicy: 'network-only',
variables: {
parent: item.id,
mode: 'ALL',
locale: this.currentLocale
}
})
const items = _.get(resp, 'data.pages.tree', [])
const itemFolders = _.filter(items, ['isFolder', true]).map(f => ({...f, children: []}))
const itemPages = _.filter(items, ['isFolder', false])
if (itemFolders.length > 0) {
item.children = itemFolders
} else {
item.children = undefined
}
this.pages.push(...itemPages)
this.searchLoading = false
}
}
}

11
client/graph/common/common-pages-query-tree.gql

@ -0,0 +1,11 @@
query ($parent: Int!, $mode: PageTreeMode!, $locale: String!) {
pages {
tree(parent: $parent, mode: $mode, locale: $locale) {
id
path
title
isFolder
parent
}
}
}

1
server/graph/resolvers/page.js

@ -141,6 +141,7 @@ module.exports = {
})
}).map(r => ({
...r,
parent: r.parent || 0,
locale: r.localeCode
}))
}

Loading…
Cancel
Save