171 lines
4.1 KiB
Vue
171 lines
4.1 KiB
Vue
<template lang="pug">
|
|
v-dialog(v-model='isShown', max-width='850px')
|
|
v-card.page-selector
|
|
.dialog-header.is-dark
|
|
v-icon.mr-3(color='white') mdi-page-next-outline
|
|
span Select Page Location
|
|
v-spacer
|
|
v-progress-circular(
|
|
indeterminate
|
|
color='white'
|
|
:size='20'
|
|
:width='2'
|
|
v-show='searchLoading'
|
|
)
|
|
//- .d-flex(style='min-height:400px;')
|
|
//- v-flex(xs4).grey(: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
|
|
//- v-treeview(
|
|
//- v-model='tree'
|
|
//- :items='treeFolders'
|
|
//- :load-children='fetchFolders'
|
|
//- activatable
|
|
//- open-on-click
|
|
//- hoverable
|
|
//- )
|
|
//- template(slot='prepend', slot-scope='{ item, open, leaf }')
|
|
//- v-icon {{ open ? 'folder_open' : 'folder' }}
|
|
//- v-flex(xs8)
|
|
//- v-toolbar(color='grey darken-2', dark, dense, flat)
|
|
//- .body-2 Pages
|
|
//- v-spacer
|
|
//- v-btn(icon): v-icon forward
|
|
//- v-btn(icon): v-icon delete
|
|
//- v-list(dense)
|
|
//- v-list-item
|
|
//- v-list-item-avatar: v-icon insert_drive_file
|
|
//- v-list-item-title File A
|
|
//- v-divider
|
|
//- v-list-item
|
|
//- v-list-item-avatar: v-icon insert_drive_file
|
|
//- v-list-item-title File B
|
|
//- v-divider
|
|
//- v-list-item
|
|
//- v-list-item-avatar: v-icon insert_drive_file
|
|
//- v-list-item-title File C
|
|
//- v-divider
|
|
//- v-list-item
|
|
//- v-list-item-avatar: v-icon insert_drive_file
|
|
//- v-list-item-title File D
|
|
v-card-actions.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
|
|
v-select(
|
|
solo
|
|
dark
|
|
background-color='grey darken-3-d2'
|
|
hide-details
|
|
single-line
|
|
:items='namespaces'
|
|
style='flex: 0 0 100px;'
|
|
v-model='currentLocale'
|
|
)
|
|
v-text-field(
|
|
solo
|
|
hide-details
|
|
prefix='/'
|
|
v-model='currentPath'
|
|
flat
|
|
clearable
|
|
)
|
|
v-card-chin
|
|
v-spacer
|
|
v-btn(text, @click='close') Cancel
|
|
v-btn.px-4(color='primary', @click='open')
|
|
v-icon(left) mdi-check
|
|
span Select
|
|
</template>
|
|
|
|
<script>
|
|
import { get } from 'vuex-pathify'
|
|
|
|
/* global siteLangs, siteConfig */
|
|
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
path: {
|
|
type: String,
|
|
default: 'new-page'
|
|
},
|
|
locale: {
|
|
type: String,
|
|
default: 'en'
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'create'
|
|
},
|
|
openHandler: {
|
|
type: Function,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
searchLoading: false,
|
|
currentLocale: 'en',
|
|
currentPath: 'new-page',
|
|
tree: [],
|
|
treeChildren: [],
|
|
namespaces: siteLangs.length ? siteLangs.map(ns => ns.code) : [siteConfig.lang]
|
|
}
|
|
},
|
|
computed: {
|
|
darkMode: get('site/dark'),
|
|
isShown: {
|
|
get() { return this.value },
|
|
set(val) { this.$emit('input', val) }
|
|
},
|
|
treeFolders() {
|
|
return [
|
|
{
|
|
id: '/',
|
|
name: '/ (root)',
|
|
children: []
|
|
}
|
|
]
|
|
}
|
|
},
|
|
watch: {
|
|
isShown(newValue, oldValue) {
|
|
if (newValue && !oldValue) {
|
|
this.currentPath = this.path
|
|
this.currentLocale = this.locale
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.isShown = false
|
|
},
|
|
open() {
|
|
const exit = this.openHandler({
|
|
locale: this.currentLocale,
|
|
path: this.currentPath
|
|
})
|
|
if (exit !== false) {
|
|
this.close()
|
|
}
|
|
},
|
|
async fetchFolders(item) {
|
|
console.info(item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
|
|
.page-selector {
|
|
.v-treeview-node__label {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
</style>
|