liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: modal-move-page -> vue component

Browse Source
This commit is contained in:
NGPixel 2017-05-26 22:23:05 -04:00
parent 62e7ea5b2b
commit 3cb53bd1d5
11 changed files with 107 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/js/app.js
View File

@ -33,6 +33,7 @@ import colorPickerComponent from './components/color-picker.vue'
import loadingSpinnerComponent from './components/loading-spinner.vue'
import modalCreatePageComponent from './components/modal-create-page.vue'
import modalCreateUserComponent from './components/modal-create-user.vue'
import modalMovePageComponent from './components/modal-move-page.vue'
import pageLoaderComponent from './components/page-loader.vue'
import searchComponent from './components/search.vue'
import treeComponent from './components/tree.vue'
@ -100,6 +101,7 @@ $(() => {
loadingSpinner: loadingSpinnerComponent,
modalCreatePage: modalCreatePageComponent,
modalCreateUser: modalCreateUserComponent,
modalMovePage: modalMovePageComponent,
pageLoader: pageLoaderComponent,
search: searchComponent,
sourceView: sourceViewComponent,

2
client/js/components/modal-create-page.vue
View File

@ -8,7 +8,7 @@
label.label Enter the new document path:
p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
input.input(type='text', placeholder='page-name', v-model='userPath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
span.help.is-danger(v-show='isInvalid') This document path is invalid!
span.help.is-red(v-show='isInvalid') This document path is invalid!
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button.is-light-blue(v-on:click='create') Create

83
client/js/components/modal-move-page.vue Normal file
View File

@ -0,0 +1,83 @@
<template lang="pug">
.modal(v-bind:class='{ "is-active": isShown }')
.modal-background
.modal-container
.modal-content
header.is-indigo Move document
section
label.label Enter the new document path:
p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
input.input(type='text', placeholder='page-name', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
span.help.is-red(v-show='isInvalid') This document path is invalid or not allowed!
span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button.is-indigo(v-on:click='move') Move
</template>
<script>
export default {
name: 'modal-move-page',
props: ['currentPath'],
data () {
return {
movePath: '',
isLoading: false,
isInvalid: false
}
},
computed: {
isShown () {
if(this.$store.state.modalMovePage.shown) {
this.movePath = this.currentPath
this.makeSelection()
}
return this.$store.state.modalMovePage.shown
}
},
methods: {
makeSelection: function () {
let self = this;
self._.delay(() => {
let startPos = (self._.includes(self.currentPath, '/') ? self._.lastIndexOf(self.movePath, '/') + 1 : 0
self.$helpers.form.setInputSelection(self.$refs.movePageInput, startPos, self.movePath.length)
}, 100)
},
cancel: function () {
this.$store.dispatch('modalMovePage/close')
},
move: function () {
this.isInvalid = false
let newDocPath = this.$helpers.pages.makeSafePath(this.movePath)
if (this._.isEmpty(newDocPath) || newDocPath === this.currentPath || newDocPath === 'home') {) {
this.isInvalid = true
} else {
this.isLoading = true
this.$http.put(window.location.href, {
move: newDocPath
}).then(resp => {
return resp.json()
}).then(resp => {
if (resp.ok) {
window.location.assign('/' + newDocPath)
} else {
this.loading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: resp.msg
})
}
}).catch(err => {
this.loading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
})
})
}
}
}
}
</script>

35
client/js/modals/create.js
View File

@ -1,35 +0,0 @@
'use strict'
import $ from 'jquery'
import _ from 'lodash'
import { setInputSelection } from '../helpers/form'
import { makeSafePath } from '../helpers/pages'
// -> Create New Document
module.exports = (currentBasePath) => {
let suggestedCreatePath = currentBasePath + '/new-page'
$('.btn-create-prompt').on('click', (ev) => {
$('#txt-create-prompt').val(suggestedCreatePath)
$('#modal-create-prompt').toggleClass('is-active')
setInputSelection($('#txt-create-prompt').get(0), currentBasePath.length + 1, suggestedCreatePath.length)
$('#txt-create-prompt').removeClass('is-danger').next().addClass('is-hidden')
})
$('#txt-create-prompt').on('keypress', (ev) => {
if (ev.which === 13) {
$('.btn-create-go').trigger('click')
}
})
$('.btn-create-go').on('click', (ev) => {
let newDocPath = makeSafePath($('#txt-create-prompt').val())
if (_.isEmpty(newDocPath)) {
$('#txt-create-prompt').addClass('is-danger').next().removeClass('is-hidden')
} else {
$('#txt-create-prompt').parent().addClass('is-loading')
window.location.assign('/create/' + newDocPath)
}
})
}

54
client/js/modals/move.js
View File

@ -1,54 +0,0 @@
'use strict'
import $ from 'jquery'
import _ from 'lodash'
import { setInputSelection } from '../helpers/form'
import { makeSafePath } from '../helpers/pages'
// -> Move Existing Document
module.exports = (currentBasePath, alerts) => {
if (currentBasePath !== '') {
$('.btn-move-prompt').removeClass('is-hidden')
}
let moveInitialDocument = _.lastIndexOf(currentBasePath, '/') + 1
$('.btn-move-prompt').on('click', (ev) => {
$('#txt-move-prompt').val(currentBasePath)
$('#modal-move-prompt').toggleClass('is-active')
setInputSelection($('#txt-move-prompt').get(0), moveInitialDocument, currentBasePath.length)
$('#txt-move-prompt').removeClass('is-danger').next().addClass('is-hidden')
})
$('#txt-move-prompt').on('keypress', (ev) => {
if (ev.which === 13) {
$('.btn-move-go').trigger('click')
}
})
$('.btn-move-go').on('click', (ev) => {
let newDocPath = makeSafePath($('#txt-move-prompt').val())
if (_.isEmpty(newDocPath) || newDocPath === currentBasePath || newDocPath === 'home') {
$('#txt-move-prompt').addClass('is-danger').next().removeClass('is-hidden')
} else {
$('#txt-move-prompt').parent().addClass('is-loading')
$.ajax(window.location.href, {
data: {
move: newDocPath
},
dataType: 'json',
method: 'PUT'
}).then((rData, rStatus, rXHR) => {
if (rData.ok) {
window.location.assign('/' + newDocPath)
} else {
alerts.pushError('Something went wrong', rData.error)
}
}, (rXHR, rStatus, err) => {
alerts.pushError('Something went wrong', 'Save operation failed.')
})
}
})
}

2
client/js/store/index.js
View File

@ -5,6 +5,7 @@ import alert from './modules/alert'
import anchor from './modules/anchor'
import modalCreatePage from './modules/modal-create-page'
import modalCreateUser from './modules/modal-create-user'
import modalMovePage from './modules/modal-move-page'
import pageLoader from './modules/page-loader'
Vue.use(Vuex)
@ -26,6 +27,7 @@ export default new Vuex.Store({
anchor,
modalCreatePage,
modalCreateUser,
modalMovePage,
pageLoader
}
})

16
client/js/store/modules/modal-move-page.js Normal file
View File

@ -0,0 +1,16 @@
'use strict'
export default {
namespaced: true,
state: {
shown: false
},
getters: {},
mutations: {
shownChange: (state, shownState) => { state.shown = shownState }
},
actions: {
open({ commit }) { commit('shownChange', true) },
close({ commit }) { commit('shownChange', false) }
}
}

39
server/views/modals/admin-createuser.pug
View File

@ -1,39 +0,0 @@
.modal#modal-admin-users-create
.modal-background
.modal-container
.modal-content
header.is-blue
span Create / Authorize User
p.modal-notify(v-bind:class='{ "is-active": loading }'): i
section
label.label Email address:
p.control.is-fullwidth
input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email')
section
label.label Provider:
p.control.is-fullwidth
select(v-model='provider')
option(value='local') Local Database
if appconfig.auth.microsoft.enabled
option(value='windowslive') Microsoft Account
if appconfig.auth.google.enabled
option(value='google') Google ID
if appconfig.auth.facebook.enabled
option(value='facebook') Facebook
if appconfig.auth.github.enabled
option(value='github') GitHub
if appconfig.auth.slack.enabled
option(value='slack') Slack
section(v-if='provider=="local"')
label.label Password:
p.control.is-fullwidth
input.input(type='password', placeholder='', v-model='password')
section(v-if='provider=="local"')
label.label Full Name:
p.control.is-fullwidth
input.input(type='text', placeholder='e.g. John Doe', v-model='name')
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Create User
a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='loading', v-bind:class='{ "is-disabled": loading, "is-blue": !loading }') Authorize User

14
server/views/modals/create.pug
View File

@ -1,14 +0,0 @@
.modal#modal-create-prompt
.modal-background
.modal-container
.modal-content
header.is-light-blue Create New Document
section
label.label Enter the new document path:
p.control.is-fullwidth
input.input#txt-create-prompt(type='text', placeholder='page-name')
span.help.is-danger.is-hidden This document path is invalid!
footer
a.button.is-grey.is-outlined.btn-create-prompt Discard
a.button.is-light-blue.btn-create-go Create

15
server/views/modals/move.pug
View File

@ -1,15 +0,0 @@
.modal#modal-move-prompt
.modal-background
.modal-container
.modal-content
header.is-indigo Move document
section
label.label Enter the new document path:
p.control.is-fullwidth
input.input#txt-move-prompt(type='text', placeholder='page-name')
span.help.is-red.is-hidden This document path is invalid or not allowed!
span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
footer
a.button.is-grey.is-outlined.btn-move-prompt Discard
a.button.is-indigo.btn-move-go Move

5
server/views/pages/view.pug
View File

@ -11,8 +11,8 @@ mixin tocMenu(ti)
block rootNavRight
loading-spinner
.nav-item
if rights.write
a.button.is-outlined.btn-move-prompt.is-hidden
if rights.write && pageData.meta.path !== 'home'
a.button.is-outlined(v-on:click='$store.dispatch("modalMovePage/open")')
i.icon-shuffle
span= t('nav.move')
a.button.is-outlined(href='/source/' + pageData.meta.path)
@ -82,4 +82,5 @@ block content
!= pageData.html
modal-create-page(basepath=pageData.meta.path)
modal-move-page(current-path=pageData.meta.path)
anchor