feat: editor page properties
This commit is contained in:
@@ -49,6 +49,7 @@
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { sync } from 'vuex-pathify'
|
||||
|
||||
import themeSaveMutation from 'gql/admin/theme/theme-mutation-save.gql'
|
||||
|
||||
@@ -60,21 +61,17 @@ export default {
|
||||
{ text: 'Default', author: 'requarks.io', value: 'default' }
|
||||
],
|
||||
selectedTheme: 'default',
|
||||
darkMode: false,
|
||||
darkModeInitial: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
darkMode(newValue, oldValue) {
|
||||
this.$store.commit('admin/setThemeDarkMode', newValue)
|
||||
}
|
||||
computed: {
|
||||
darkMode: sync('admin/theme@dark')
|
||||
},
|
||||
mounted() {
|
||||
this.darkMode = this.$store.state.admin.theme.dark
|
||||
this.darkModeInitial = this.darkMode
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$store.commit('admin/setThemeDarkMode', this.darkModeInitial)
|
||||
this.darkMode = this.darkModeInitial
|
||||
},
|
||||
methods: {
|
||||
async save () {
|
||||
|
@@ -7,25 +7,37 @@
|
||||
span.white--text Save
|
||||
v-btn(icon): v-icon(color='red') close
|
||||
v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha
|
||||
v-btn(icon, @click.native.stop='openModal(`access`)'): v-icon(color='white') vpn_lock
|
||||
v-content
|
||||
editor-code
|
||||
component(:is='currentModal')
|
||||
v-dialog(v-model='dialogProgress', persistent, max-width='350')
|
||||
v-card(color='blue darken-3', dark)
|
||||
v-card-text.text-xs-center.py-4
|
||||
v-progress-circular(indeterminate, color='white', :width='1')
|
||||
atom-spinner.is-inline(
|
||||
:animation-duration='1000'
|
||||
:size='60'
|
||||
color='#FFF'
|
||||
)
|
||||
.subheading Processing
|
||||
.caption.blue--text.text--lighten-3 Please wait...
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { AtomSpinner } from 'epic-spinners'
|
||||
|
||||
import savePageMutation from 'gql/editor/save.gql'
|
||||
|
||||
import editorStore from '@/store/editor'
|
||||
|
||||
/* global WIKI */
|
||||
|
||||
WIKI.$store.registerModule('editor', editorStore)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AtomSpinner,
|
||||
editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'),
|
||||
editorModalAccess: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-access.vue'),
|
||||
editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
|
||||
},
|
||||
data() {
|
||||
@@ -49,8 +61,14 @@ export default {
|
||||
hideProgressDialog() {
|
||||
this.dialogProgress = false
|
||||
},
|
||||
save() {
|
||||
async save() {
|
||||
this.showProgressDialog('saving')
|
||||
// const resp = await this.$apollo.mutate({
|
||||
// mutation: savePageMutation,
|
||||
// variables: {
|
||||
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -58,4 +76,8 @@ export default {
|
||||
|
||||
<style lang='scss'>
|
||||
|
||||
.atom-spinner.is-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<template lang='pug'>
|
||||
.editor-code
|
||||
v-toolbar.editor-code-toolbar.px-3(dense, color='primary', dark)
|
||||
v-toolbar.editor-code-toolbar(dense, color='primary', dark)
|
||||
v-btn(icon).mx-0
|
||||
svg.icons.is-18(role='img')
|
||||
title Bold
|
||||
|
@@ -1,60 +0,0 @@
|
||||
<template lang='pug'>
|
||||
v-bottom-sheet(v-model='isShown', inset, persistent)
|
||||
v-toolbar(color='orange', flat)
|
||||
v-icon(color='white') vpn_lock
|
||||
v-toolbar-title.white--text Page Access
|
||||
v-spacer
|
||||
v-btn(icon, dark, @click.native='close')
|
||||
v-icon close
|
||||
v-card.pa-3(tile)
|
||||
v-form
|
||||
v-container(fluid)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12)
|
||||
v-switch(label='Published', v-model='isPublished', color='primary')
|
||||
v-flex(xs6)
|
||||
v-menu(ref='menuPublishStart', lazy='', :close-on-content-click='false', v-model='isPublishStartShown', transition='scale-transition', offset-y='', full-width='', :nudge-right='40', min-width='290px', :return-value.sync='publishStartDate')
|
||||
v-text-field(slot='activator', label='Publish starting on...', v-model='publishStartDate', prepend-icon='event', readonly)
|
||||
v-date-picker(v-model='publishStartDate', :min='(new Date()).toISOString().substring(0, 10)', reactive)
|
||||
v-spacer
|
||||
v-btn(flat='', color='primary', @click='isPublishStartShown = false') Cancel
|
||||
v-btn(flat='', color='primary', @click='$refs.menuPublishStart.save(date)') OK
|
||||
v-flex(xs6)
|
||||
v-menu(ref='menuPublishEnd', lazy='', :close-on-content-click='false', v-model='isPublishEndShown', transition='scale-transition', offset-y='', full-width='', :nudge-right='40', min-width='290px', :return-value.sync='publishEndDate')
|
||||
v-text-field(slot='activator', label='Publish ending on...', v-model='publishEndDate', prepend-icon='event', readonly)
|
||||
v-date-picker(v-model='publishEndDate', :min='(new Date()).toISOString().substring(0, 10)', reactive)
|
||||
v-spacer
|
||||
v-btn(flat='', color='primary', @click='isPublishEndShown = false') Cancel
|
||||
v-btn(flat='', color='primary', @click='$refs.menuPublishEnd.save(date)') OK
|
||||
v-card-actions
|
||||
v-btn(color='green', dark) Save
|
||||
v-btn(@click.native='close') Cancel
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShown: false,
|
||||
isPublished: true,
|
||||
isPublishStartShown: false,
|
||||
isPublishEndShown: false,
|
||||
publishStartDate: '',
|
||||
publishEndDate: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isShown = true
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.isShown = false
|
||||
this.$parent.$parent.closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
|
||||
</style>
|
@@ -1,30 +1,162 @@
|
||||
<template lang='pug'>
|
||||
v-bottom-sheet(v-model='isShown', inset, persistent)
|
||||
v-toolbar(color='blue-grey', flat)
|
||||
v-bottom-sheet(
|
||||
v-model='isShown'
|
||||
inset
|
||||
persistent
|
||||
)
|
||||
.dialog-header
|
||||
v-icon(color='white') sort_by_alpha
|
||||
v-toolbar-title.white--text Page Properties
|
||||
.subheading.white--text.ml-2 Page Properties
|
||||
v-spacer
|
||||
v-btn(icon, dark, @click.native='close')
|
||||
v-icon close
|
||||
v-card.pa-3(tile)
|
||||
v-btn(
|
||||
outline
|
||||
dark
|
||||
@click.native='close'
|
||||
)
|
||||
v-icon(left) close
|
||||
span Close
|
||||
v-card(tile)
|
||||
v-card-text
|
||||
v-form
|
||||
v-text-field(label='Title', counter='255')
|
||||
v-text-field(label='Short Description', counter='255')
|
||||
v-select(label='Tags', chips, tags, deletable-chips)
|
||||
v-text-field(label='Path', prefix='/', append-icon='folder')
|
||||
v-card-actions
|
||||
v-btn(color='green', dark) Save
|
||||
v-btn(@click.native='close') Cancel
|
||||
v-subheader.pl-0 Page Info
|
||||
v-text-field(
|
||||
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-text-field(
|
||||
outline
|
||||
background-color='grey lighten-2'
|
||||
label='Path'
|
||||
prefix='/'
|
||||
append-icon='folder'
|
||||
v-model='path'
|
||||
)
|
||||
v-divider
|
||||
v-card-text
|
||||
v-subheader.pl-0 Tags
|
||||
v-select(
|
||||
background-color='grey lighten-2'
|
||||
chips
|
||||
deletable-chips
|
||||
hide-details
|
||||
label='Tags'
|
||||
outline
|
||||
tags
|
||||
v-model='tags'
|
||||
single-line
|
||||
)
|
||||
v-divider
|
||||
v-card-text
|
||||
v-subheader.pl-0 Publishing State
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs4)
|
||||
v-switch(
|
||||
label='Published'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
)
|
||||
v-flex(xs4)
|
||||
v-menu(
|
||||
ref='menuPublishStart'
|
||||
lazy=''
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishStartShown'
|
||||
transition='scale-transition'
|
||||
offset-y=''
|
||||
full-width=''
|
||||
:nudge-right='40'
|
||||
min-width='290px'
|
||||
:return-value.sync='publishStartDate'
|
||||
)
|
||||
v-text-field(
|
||||
slot='activator'
|
||||
label='Publish starting on...'
|
||||
v-model='publishStartDate'
|
||||
prepend-icon='event'
|
||||
readonly)
|
||||
v-date-picker(
|
||||
v-model='publishStartDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
reactive
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='isPublishStartShown = false'
|
||||
) Cancel
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishStart.save(date)'
|
||||
) OK
|
||||
v-flex(xs4)
|
||||
v-menu(
|
||||
ref='menuPublishEnd'
|
||||
lazy=''
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishEndShown'
|
||||
transition='scale-transition'
|
||||
offset-y=''
|
||||
full-width=''
|
||||
:nudge-right='40'
|
||||
min-width='290px'
|
||||
:return-value.sync='publishEndDate'
|
||||
)
|
||||
v-text-field(
|
||||
slot='activator'
|
||||
label='Publish ending on...'
|
||||
v-model='publishEndDate'
|
||||
prepend-icon='event'
|
||||
readonly
|
||||
)
|
||||
v-date-picker(
|
||||
v-model='publishEndDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
reactive
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='isPublishEndShown = false'
|
||||
) Cancel
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishEnd.save(date)'
|
||||
) OK
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShown: false
|
||||
isShown: false,
|
||||
isPublishStartShown: false,
|
||||
isPublishEndShown: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title: sync('editor/title'),
|
||||
description: sync('editor/description'),
|
||||
tags: sync('editor/tags'),
|
||||
path: sync('editor/path'),
|
||||
isPublished: sync('editor/isPublished'),
|
||||
publishStartDate: sync('editor/publishStartDate'),
|
||||
publishEndDate: sync('editor/publishEndDate')
|
||||
},
|
||||
mounted() {
|
||||
this.isShown = true
|
||||
},
|
||||
|
Reference in New Issue
Block a user