wikijs-fork/client/components/common/page-selector.vue

311 lines
8.3 KiB
Vue
Raw Normal View History

2018-09-30 22:19:28 +00:00
<template lang="pug">
v-dialog(
v-model='isShown'
max-width='850px'
overlay-color='blue darken-4'
overlay-opacity='.7'
)
2018-11-12 05:51:34 +00:00
v-card.page-selector
2019-10-12 04:55:43 +00:00
.dialog-header.is-blue
2019-08-03 04:48:55 +00:00
v-icon.mr-3(color='white') mdi-page-next-outline
.body-1(v-if='mode === `create`') Select New Page Location
.body-1(v-else-if='mode === `move`') Move / Rename Page Location
2018-09-30 22:19:28 +00:00
v-spacer
v-progress-circular(
indeterminate
color='white'
:size='20'
:width='2'
v-show='searchLoading'
)
2019-10-14 03:10:49 +00:00
.d-flex
v-flex.grey(xs5, :class='darkMode ? `darken-4` : `lighten-3`')
2019-10-07 04:06:47 +00:00
v-toolbar(color='grey darken-3', dark, dense, flat)
2019-10-12 04:55:43 +00:00
.body-2 Virtual Folders
v-spacer
v-btn(icon, tile, href='https://docs.requarks.io/guide/pages#folders', target='_blank')
2019-10-12 04:55:43 +00:00
v-icon mdi-help-box
2019-10-14 03:10:49 +00:00
div(style='height:400px;')
vue-scroll(:ops='scrollStyle')
v-treeview(
:key='`pageTree` + treeViewCacheId'
2019-10-14 03:10:49 +00:00
: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
hoverable
)
template(slot='prepend', slot-scope='{ item, open, leaf }')
v-icon mdi-{{ open ? 'folder-open' : 'folder' }}
v-flex(xs7)
2019-10-12 04:55:43 +00:00
v-toolbar(color='blue darken-2', dark, dense, flat)
2019-10-07 04:06:47 +00:00
.body-2 Pages
2019-10-14 17:07:49 +00:00
//- v-spacer
//- v-btn(icon, tile, disabled): v-icon mdi-content-save-move-outline
//- v-btn(icon, tile, disabled): v-icon mdi-trash-can-outline
2019-10-14 03:10:49 +00:00
div(v-if='currentPages.length > 0', style='height:400px;')
vue-scroll(:ops='scrollStyle')
v-list.py-0(dense)
v-list-item-group(
v-model='currentPage'
color='primary'
)
template(v-for='(page, idx) of currentPages')
v-list-item(:key='`page` + page.id', :value='page.path')
2019-10-14 03:10:49 +00:00
v-list-item-icon: v-icon mdi-file-document-box
v-list-item-title {{page.title}}
v-divider(v-if='idx < pages.length - 1')
2019-10-12 04:55:43 +00:00
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
2019-10-12 04:55:43 +00:00
flat
background-color='grey darken-3-d2'
hide-details
single-line
:items='namespaces'
2019-10-07 04:06:47 +00:00
style='flex: 0 0 100px; border-radius: 4px 0 0 4px;'
v-model='currentLocale'
)
2018-09-30 22:19:28 +00:00
v-text-field(
2019-10-12 04:55:43 +00:00
ref='pathIpt'
2018-09-30 22:19:28 +00:00
solo
hide-details
prefix='/'
v-model='currentPath'
2018-10-01 02:18:40 +00:00
flat
clearable
2019-10-07 04:06:47 +00:00
style='border-radius: 0 4px 4px 0;'
2018-09-30 22:19:28 +00:00
)
v-card-chin
v-spacer
2019-08-03 04:48:55 +00:00
v-btn(text, @click='close') Cancel
2019-10-12 04:55:43 +00:00
v-btn.px-4(color='primary', @click='open', :disabled='!isValidPath')
2019-08-03 04:48:55 +00:00
v-icon(left) mdi-check
2018-09-30 22:19:28 +00:00
span Select
</template>
<script>
2019-10-12 04:55:43 +00:00
import _ from 'lodash'
2018-12-02 04:03:14 +00:00
import { get } from 'vuex-pathify'
2019-10-12 04:55:43 +00:00
import pageTreeQuery from 'gql/common/common-pages-query-tree.gql'
2018-12-02 04:03:14 +00:00
2019-10-13 23:59:50 +00:00
const localeSegmentRegex = /^[A-Z]{2}(-[A-Z]{2})?$/i
2019-06-22 03:39:04 +00:00
/* global siteLangs, siteConfig */
2018-09-30 22:19:28 +00:00
export default {
props: {
value: {
type: Boolean,
default: false
2018-11-12 05:51:34 +00:00
},
path: {
type: String,
default: 'new-page'
},
locale: {
type: String,
default: 'en'
},
2018-11-12 05:51:34 +00:00
mode: {
type: String,
default: 'create'
},
openHandler: {
type: Function,
default: () => {}
2018-09-30 22:19:28 +00:00
}
},
data() {
return {
treeViewCacheId: 0,
2018-11-12 05:51:34 +00:00
searchLoading: false,
currentLocale: siteConfig.lang,
currentFolderPath: '',
currentPath: 'new-page',
2019-10-12 04:55:43 +00:00
currentPage: null,
currentNode: [0],
openNodes: [0],
2019-10-14 03:10:49 +00:00
tree: [
{
id: 0,
title: '/ (root',
children: []
}
],
2019-10-12 04:55:43 +00:00
pages: [],
2019-10-12 18:41:45 +00:00
all: [],
2019-10-14 03:10:49 +00:00
namespaces: siteLangs.length ? siteLangs.map(ns => ns.code) : [siteConfig.lang],
scrollStyle: {
vuescroll: {},
scrollPanel: {
initialScrollX: 0.01, // fix scrollbar not disappearing on load
scrollingX: false,
speed: 50
},
rail: {
gutterOfEnds: '2px'
},
bar: {
onlyShowBarOnScroll: false,
background: '#999',
hoverStyle: {
background: '#64B5F6'
}
}
}
2018-09-30 22:19:28 +00:00
}
},
computed: {
2018-12-02 04:03:14 +00:00
darkMode: get('site/dark'),
2018-09-30 22:19:28 +00:00
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
2018-11-12 05:51:34 +00:00
},
2019-10-12 04:55:43 +00:00
currentPages () {
return _.sortBy(_.filter(this.pages, ['parent', _.head(this.currentNode) || 0]), ['title', 'path'])
2019-10-12 04:55:43 +00:00
},
isValidPath () {
2019-10-13 23:59:50 +00:00
if (!this.currentPath) {
return false
}
const firstSection = _.head(this.currentPath.split('/'))
if (firstSection.length <= 1) {
return false
} else if (localeSegmentRegex.test(firstSection)) {
return false
} else if (
_.some(['login', 'logout', 'register', 'verify', 'favicons', 'fonts', 'img', 'js', 'svg'], p => {
return p === firstSection
})) {
return false
} else {
return true
}
2018-09-30 22:19:28 +00:00
}
},
watch: {
2019-10-12 04:55:43 +00:00
isShown (newValue, oldValue) {
if (newValue && !oldValue) {
this.currentPath = this.path
this.currentLocale = this.locale
2019-10-12 04:55:43 +00:00
_.delay(() => {
this.$refs.pathIpt.focus()
})
}
},
currentNode (newValue, oldValue) {
if (newValue.length < 1) { // force a selection
this.$nextTick(() => {
this.currentNode = oldValue
})
2019-10-12 18:41:45 +00:00
} else {
const current = _.find(this.all, ['id', newValue[0]])
2019-10-12 18:41:45 +00:00
if (this.openNodes.indexOf(newValue[0]) < 0) { // auto open and load children
if (current) {
if (this.openNodes.indexOf(current.parent) < 0) {
this.$nextTick(() => {
this.openNodes.push(current.parent)
})
}
}
this.$nextTick(() => {
this.openNodes.push(newValue[0])
})
}
this.currentPath = _.compact([_.get(current, 'path', ''), _.last(this.currentPath.split('/'))]).join('/')
2019-10-12 04:55:43 +00:00
}
},
currentPage (newValue, oldValue) {
if (!_.isEmpty(newValue)) {
this.currentPath = newValue
}
},
currentLocale (newValue, oldValue) {
this.$nextTick(() => {
this.tree = [
{
id: 0,
title: '/ (root',
children: []
}
]
this.currentNode = [0]
this.openNodes = [0]
this.pages = []
this.all = []
this.treeViewCacheId += 1
})
}
},
2018-09-30 22:19:28 +00:00
methods: {
close() {
this.isShown = false
2018-11-12 05:51:34 +00:00
},
open() {
const exit = this.openHandler({
locale: this.currentLocale,
path: this.currentPath
})
if (exit !== false) {
this.close()
2018-11-12 05:51:34 +00:00
}
},
2019-10-12 04:55:43 +00:00
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, i => i.pageId > 0)
2019-10-12 04:55:43 +00:00
if (itemFolders.length > 0) {
item.children = itemFolders
} else {
item.children = undefined
}
this.pages.push(...itemPages)
2019-10-12 18:41:45 +00:00
this.all.push(...items)
2019-10-12 04:55:43 +00:00
this.searchLoading = false
2018-09-30 22:19:28 +00:00
}
}
}
</script>
2018-11-12 05:51:34 +00:00
<style lang='scss'>
.page-selector {
.v-treeview-node__label {
font-size: 13px;
}
.v-treeview-node__content {
cursor: pointer;
}
2018-11-12 05:51:34 +00:00
}
</style>