wikijs-fork/client/components/editor/editor-modal-properties.vue

245 lines
7.1 KiB
Vue
Raw Normal View History

2018-02-18 03:18:37 +00:00
<template lang='pug'>
2018-07-15 23:16:19 +00:00
v-bottom-sheet(
v-model='isShown'
inset
)
.dialog-header
2018-02-18 03:18:37 +00:00
v-icon(color='white') sort_by_alpha
2018-07-15 23:16:19 +00:00
.subheading.white--text.ml-2 Page Properties
2018-02-18 03:18:37 +00:00
v-spacer
v-btn.mx-0(
2018-07-15 23:16:19 +00:00
outline
dark
@click.native='close'
)
v-icon(left) check
span {{ $t('common:actions.ok') }}
v-menu
v-btn.is-icon(
slot='activator'
outline
dark
)
v-icon more_horiz
v-list
v-list-tile
v-list-tile-avatar: v-icon delete
v-list-tile-title Delete Page
2018-07-15 23:16:19 +00:00
v-card(tile)
2018-02-18 03:18:37 +00:00
v-card-text
2018-07-15 23:16:19 +00:00
v-subheader.pl-0 Page Info
v-text-field(
2018-07-16 02:40:41 +00:00
ref='iptTitle'
2018-07-15 23:16:19 +00:00
outline
background-color='grey lighten-2'
label='Title'
counter='255'
v-model='title'
)
v-text-field(
outline
background-color='grey lighten-2'
label='Short Description'
counter='255'
v-model='description'
)
v-divider
2018-07-22 04:29:39 +00:00
v-card-text.grey.lighten-5
v-subheader.pl-0 Path &amp; Categorization
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12, md2)
v-select(
outline
background-color='grey lighten-2'
label='Locale'
suffix='/'
:items='namespaces'
v-model='locale'
hide-details
:disabled='mode !== "create"'
2018-07-22 04:29:39 +00:00
)
v-flex(xs12, md10)
v-text-field(
outline
background-color='grey lighten-2'
label='Path'
append-icon='folder'
v-model='path'
hint='Do not include any leading or trailing slashes.'
persistent-hint
@click:append='showPathSelector'
:disabled='mode !== "create"'
2018-07-22 04:29:39 +00:00
)
2018-07-16 02:40:41 +00:00
v-combobox(
2018-07-15 23:16:19 +00:00
background-color='grey lighten-2'
chips
deletable-chips
label='Tags'
outline
2018-07-16 02:40:41 +00:00
multiple
2018-07-15 23:16:19 +00:00
v-model='tags'
single-line
2018-07-22 04:29:39 +00:00
hint='Use tags to categorize your pages and make them easier to find.'
persistent-hint
2018-07-15 23:16:19 +00:00
)
v-divider
2018-07-22 04:29:39 +00:00
v-card-text.pb-5.grey.lighten-4
2018-07-15 23:16:19 +00:00
v-subheader.pl-0 Publishing State
2018-07-16 02:40:41 +00:00
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12, md4)
v-switch(
label='Published'
v-model='isPublished'
color='primary'
2018-07-22 04:29:39 +00:00
hint='Unpublished pages can still be seen by users having write permissions.'
persistent-hint
2018-07-15 23:16:19 +00:00
)
2018-07-16 02:40:41 +00:00
v-flex(xs12, md4)
v-dialog(
ref='menuPublishStart'
lazy
:close-on-content-click='false'
v-model='isPublishStartShown'
:return-value.sync='publishStartDate'
full-width
width='460px'
:disabled='!isPublished'
2018-07-15 23:16:19 +00:00
)
2018-07-16 02:40:41 +00:00
v-text-field(
slot='activator'
label='Publish starting on...'
v-model='publishStartDate'
prepend-icon='event'
readonly
outline
background-color='grey lighten-2'
clearable
hint='Leave empty for no start date'
persistent-hint
:disabled='!isPublished'
)
v-date-picker(
v-model='publishStartDate'
:min='(new Date()).toISOString().substring(0, 10)'
2018-07-15 23:16:19 +00:00
color='primary'
2018-07-16 02:40:41 +00:00
reactive
scrollable
landscape
)
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishStartShown = false'
) Cancel
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishStart.save(publishStartDate)'
) OK
v-flex(xs12, md4)
v-dialog(
ref='menuPublishEnd'
lazy
:close-on-content-click='false'
v-model='isPublishEndShown'
:return-value.sync='publishEndDate'
full-width
width='460px'
:disabled='!isPublished'
)
v-text-field(
slot='activator'
label='Publish ending on...'
v-model='publishEndDate'
prepend-icon='event'
readonly
outline
background-color='grey lighten-2'
clearable
hint='Leave empty for no end date'
persistent-hint
:disabled='!isPublished'
)
v-date-picker(
v-model='publishEndDate'
:min='(new Date()).toISOString().substring(0, 10)'
2018-07-15 23:16:19 +00:00
color='primary'
2018-07-16 02:40:41 +00:00
reactive
scrollable
landscape
)
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishEndShown = false'
) Cancel
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishEnd.save(publishEndDate)'
) OK
v-tour(name='editorPropertiesTour', :steps='tourSteps')
2018-02-18 03:18:37 +00:00
</template>
<script>
2018-07-16 02:40:41 +00:00
import _ from 'lodash'
import { sync, get } from 'vuex-pathify'
2018-07-15 23:16:19 +00:00
2018-02-18 03:18:37 +00:00
export default {
data() {
return {
2018-07-15 23:16:19 +00:00
isShown: false,
isPublishStartShown: false,
2018-07-16 02:40:41 +00:00
isPublishEndShown: false,
2018-07-22 04:29:39 +00:00
namespaces: ['en'],
2018-07-16 02:40:41 +00:00
tourSteps: [
{
target: '.dialog-header',
content: `First-time tour help here. <strong>TODO</strong>!`
}
]
}
},
2018-07-15 23:16:19 +00:00
computed: {
mode: get('editor/mode'),
2018-07-15 23:16:19 +00:00
title: sync('editor/title'),
description: sync('editor/description'),
2018-07-22 04:29:39 +00:00
locale: sync('editor/locale'),
2018-07-15 23:16:19 +00:00
tags: sync('editor/tags'),
path: sync('editor/path'),
isPublished: sync('editor/isPublished'),
publishStartDate: sync('editor/publishStartDate'),
publishEndDate: sync('editor/publishEndDate')
},
mounted() {
this.isShown = true
2018-07-16 02:40:41 +00:00
_.delay(() => {
this.$refs.iptTitle.focus()
// this.$tours['editorPropertiesTour'].start()
}, 500)
},
methods: {
close() {
this.isShown = false
this.$parent.$parent.closeModal()
2018-07-22 04:29:39 +00:00
},
showPathSelector() {
this.$store.commit('showNotification', {
message: 'Coming soon!',
style: 'purple',
icon: 'directions_boat'
})
2018-02-18 03:18:37 +00:00
}
}
}
</script>
<style lang='scss'>
</style>