|
|
<template lang='pug'> v-dialog( v-model='isShown' persistent width='1000' :fullscreen='$vuetify.breakpoint.smAndDown' ) .dialog-header v-icon(color='white') mdi-tag-text-outline .subtitle-1.white--text.ml-3 {{$t('editor:props.pageProperties')}} v-spacer v-btn.mx-0( outlined dark @click.native='close' ) v-icon(left) mdi-check span {{ $t('common:actions.ok') }} 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(disabled) {{$t('editor:props.scripts')}} 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' ) 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( outlined :label='$t(`editor:props.locale`)' suffix='/' :items='namespaces' v-model='locale' hide-details ) v-flex(xs12, md10) v-text-field( outlined :label='$t(`editor:props.path`)' append-icon='mdi-folder-search' v-model='path' :hint='$t(`editor:props.pathHint`)' persistent-hint @click:append='showPathSelector' ) v-divider v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d5` : `lighten-4`') .overline.pb-5 {{$t('editor:props.categorization')}} v-chip-group.radius-5.mb-5(column, v-if='tags && tags.length > 0') v-chip( v-for='tag of tags' :key='`tag-` + tag' close label color='teal' text-color='teal lighten-5' @click:close='removeTag(tag)' ) {{tag}} v-combobox( :label='$t(`editor:props.tags`)' outlined v-model='tags' :hint='$t(`editor:props.tagsHint`)' :items='newTagSuggestions' :loading='$apollo.queries.newTagSuggestions.loading' persistent-hint deletable-chips hide-no-data hide-selected :search-input.sync='newTagSearch' multiple ) template(v-slot:selection='{ attrs, item, parent, selected }') span 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' width='460px' :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-3 {{$t('editor:props.js')}} v-textarea( outlined rows='5' :hint='$t(`editor:props.jsHint`)' persistent-hint ) v-divider v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`') .overline.pb-3 {{$t('editor:props.css')}} v-textarea( outlined rows='5' :hint='$t(`editor:props.cssHint`)' persistent-hint )
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 )
page-selector(:mode='pageSelectorMode', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')</template>
<script>import _ from 'lodash'import { sync, get } from 'vuex-pathify'import gql from 'graphql-tag'
/* global siteLangs, siteConfig */
export default { props: { value: { type: Boolean, default: false } }, data() { return { isPublishStartShown: false, isPublishEndShown: false, pageSelectorShown: false, namespaces: siteLangs.length ? siteLangs.map(ns => ns.code) : [siteConfig.lang], newTag: '', newTagSuggestions: [], newTagSearch: '' } }, computed: { isShown: { get() { return this.value }, set(val) { this.$emit('input', val) } }, 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'), pageSelectorMode () { return (this.mode === 'create') ? 'create' : 'move' } }, watch: { value(newValue, oldValue) { if (newValue) { _.delay(() => { this.$refs.iptTitle.focus() // this.$tours['editorPropertiesTour'].start()
}, 500) } } }, methods: { addTag () { this.$nextTick(() => { this.tags.push(this.newTag) }) }, removeTag (tag) { this.tags = _.without(this.tags, tag) }, close() { this.isShown = false }, showPathSelector() { this.pageSelectorShown = true }, setPath({ path, locale }) { this.locale = locale this.path = path } }, apollo: { newTagSuggestions: { query: gql`
query ($query: String!) { pages { searchTags (query: $query) } } `,
variables () { return { query: this.newTagSearch } }, fetchPolicy: 'cache-first', update: (data) => _.get(data, 'pages.searchTags', []), skip () { return !this.value || _.isEmpty(this.newTagSearch) }, throttle: 500 } }}</script>
<style lang='scss'>
</style>
|
