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

298 lines
9.9 KiB
Vue
Raw Normal View History

2018-02-18 03:18:37 +00:00
<template lang='pug'>
2018-12-09 05:46:06 +00:00
v-dialog(
2018-07-15 23:16:19 +00:00
v-model='isShown'
2018-12-09 05:46:06 +00:00
persistent
width='1000'
:fullscreen='$vuetify.breakpoint.smAndDown'
2018-07-15 23:16:19 +00:00
)
.dialog-header
2019-08-03 04:48:55 +00:00
v-icon(color='white') mdi-tag-text-outline
2019-08-04 02:51:29 +00:00
.subtitle-1.white--text.ml-3 {{$t('editor:props.pageProperties')}}
2018-02-18 03:18:37 +00:00
v-spacer
v-btn.mx-0(
2019-08-03 04:48:55 +00:00
outlined
2018-07-15 23:16:19 +00:00
dark
@click.native='close'
)
2019-08-03 04:48:55 +00:00
v-icon(left) mdi-check
span {{ $t('common:actions.ok') }}
2019-08-25 18:23:56 +00:00
v-card(tile)
v-tabs(color='white', background-color='blue darken-1', dark, centered)
v-tab {{$t('editor:props.info')}}
v-tab {{$t('editor:props.scheduling')}}
v-tab {{$t('editor:props.social')}}
v-tab-item
v-card-text.pt-5
.overline.pb-5 {{$t('editor:props.pageInfo')}}
v-text-field(
ref='iptTitle'
outlined
:label='$t(`editor:props.title`)'
counter='255'
v-model='title'
2018-07-22 04:29:39 +00:00
)
v-text-field(
outlined
:label='$t(`editor:props.shortDescription`)'
counter='255'
v-model='description'
persistent-hint
:hint='$t(`editor:props.shortDescriptionHint`)'
)
v-divider
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
.overline.pb-5 {{$t('editor:props.path')}}
v-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12, md2)
v-select(
2019-08-04 02:51:29 +00:00
outlined
:label='$t(`editor:props.locale`)'
suffix='/'
:items='namespaces'
v-model='locale'
hide-details
:disabled='mode !== "create"'
2018-07-16 02:40:41 +00:00
)
v-flex(xs12, md10)
2019-08-04 02:51:29 +00:00
v-text-field(
outlined
:label='$t(`editor:props.path`)'
append-icon='mdi-folder-search'
v-model='path'
:hint='$t(`editor:props.pathHint`)'
2019-08-04 02:51:29 +00:00
persistent-hint
@click:append='showPathSelector'
:disabled='mode !== "create"'
)
v-divider
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d5` : `lighten-4`')
.overline.pb-5 {{$t('editor:props.categorization')}}
v-combobox(
chips
deletable-chips
:label='$t(`editor:props.tags`)'
outlined
multiple
v-model='tags'
:hint='$t(`editor:props.tagsHint`)'
persistent-hint
clearable
height='130'
)
v-tab-item
v-card-text
.overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
v-switch(
:label='$t(`editor:props.publishToggle`)'
v-model='isPublished'
color='primary'
:hint='$t(`editor:props.publishToggleHint`)'
persistent-hint
disabled
inset
)
v-divider
v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
v-container.pa-0(fluid, grid-list-lg)
v-row
v-col(cols='6')
v-dialog(
ref='menuPublishStart'
:close-on-content-click='false'
v-model='isPublishStartShown'
:return-value.sync='publishStartDate'
full-width
width='460px'
2019-08-04 02:51:29 +00:00
:disabled='!isPublished || true'
)
template(v-slot:activator='{ on }')
v-text-field(
v-on='on'
:label='$t(`editor:props.publishStart`)'
v-model='publishStartDate'
prepend-icon='mdi-calendar-check'
readonly
outlined
clearable
:hint='$t(`editor:props.publishStartHint`)'
persistent-hint
:disabled='!isPublished || true'
)
v-date-picker(
v-model='publishStartDate'
:min='(new Date()).toISOString().substring(0, 10)'
color='primary'
reactive
scrollable
landscape
)
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishStartShown = false'
) {{$t('common:actions.cancel')}}
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishStart.save(publishStartDate)'
) {{$t('common:actions.ok')}}
v-col(cols='6')
v-dialog(
ref='menuPublishEnd'
:close-on-content-click='false'
v-model='isPublishEndShown'
:return-value.sync='publishEndDate'
width='460px'
:disabled='!isPublished || true'
)
template(v-slot:activator='{ on }')
v-text-field(
v-on='on'
:label='$t(`editor:props.publishEnd`)'
v-model='publishEndDate'
prepend-icon='mdi-calendar-remove'
readonly
outlined
clearable
:hint='$t(`editor:props.publishEndHint`)'
persistent-hint
:disabled='!isPublished || true'
)
v-date-picker(
v-model='publishEndDate'
:min='(new Date()).toISOString().substring(0, 10)'
color='primary'
reactive
scrollable
landscape
)
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishEndShown = false'
) {{$t('common:actions.cancel')}}
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishEnd.save(publishEndDate)'
) {{$t('common:actions.ok')}}
v-tab-item
v-card-text
.overline.pb-5 {{$t('editor:props.socialFeatures')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
v-switch(
:label='$t(`editor:props.allowComments`)'
v-model='isPublished'
color='primary'
:hint='$t(`editor:props.allowCommentsHint`)'
persistent-hint
disabled
inset
)
v-switch(
:label='$t(`editor:props.allowRatings`)'
v-model='isPublished'
color='primary'
:hint='$t(`editor:props.allowRatingsHint`)'
persistent-hint
disabled
inset
)
v-switch(
:label='$t(`editor:props.displayAuthor`)'
v-model='isPublished'
color='primary'
:hint='$t(`editor:props.displayAuthorHint`)'
persistent-hint
disabled
inset
)
v-switch(
:label='$t(`editor:props.displaySharingBar`)'
v-model='isPublished'
color='primary'
:hint='$t(`editor:props.displaySharingBarHint`)'
persistent-hint
disabled
inset
)
2018-07-16 02:40:41 +00:00
page-selector(mode='create', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')
2018-07-16 02:40:41 +00:00
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
2019-06-22 03:39:04 +00:00
/* global siteLangs, siteConfig */
2018-02-18 03:18:37 +00:00
export default {
2018-12-09 05:46:06 +00:00
props: {
value: {
type: Boolean,
default: false
}
},
2018-02-18 03:18:37 +00:00
data() {
return {
2018-07-15 23:16:19 +00:00
isPublishStartShown: false,
2018-07-16 02:40:41 +00:00
isPublishEndShown: false,
pageSelectorShown: false,
2019-06-22 03:39:04 +00:00
namespaces: siteLangs.length ? siteLangs.map(ns => ns.code) : [siteConfig.lang],
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: {
2018-12-09 05:46:06 +00:00
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
},
2018-12-02 04:03:14 +00:00
darkMode: get('site/dark'),
mode: get('editor/mode'),
title: sync('page/title'),
description: sync('page/description'),
locale: sync('page/locale'),
tags: sync('page/tags'),
path: sync('page/path'),
isPublished: sync('page/isPublished'),
publishStartDate: sync('page/publishStartDate'),
publishEndDate: sync('page/publishEndDate')
2018-07-15 23:16:19 +00:00
},
2018-12-09 05:46:06 +00:00
watch: {
value(newValue, oldValue) {
2019-06-01 05:34:16 +00:00
if (newValue) {
2018-12-09 05:46:06 +00:00
_.delay(() => {
this.$refs.iptTitle.focus()
// this.$tours['editorPropertiesTour'].start()
}, 500)
}
}
},
methods: {
close() {
this.isShown = false
2018-07-22 04:29:39 +00:00
},
showPathSelector() {
this.pageSelectorShown = true
},
setPath({ path, locale }) {
this.locale = locale
this.path = path
2018-02-18 03:18:37 +00:00
}
}
}
</script>
<style lang='scss'>
</style>