|
|
@ -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 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|