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

refactor: modal-delete-user -> vue component + localizations

Browse Source
This commit is contained in:
NGPixel 2017-05-29 21:58:33 -04:00
parent fa098f8ece
commit 8239adfe7b
15 changed files with 135 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/js/app.js
View File

@ -60,6 +60,7 @@ import editorVideoComponent from './components/editor-video.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 modalDeleteUserComponent from './components/modal-delete-user.vue'
import modalDiscardPageComponent from './components/modal-discard-page.vue'
import modalMovePageComponent from './components/modal-move-page.vue'
import pageLoaderComponent from './components/page-loader.vue'
@ -162,6 +163,7 @@ $(() => {
loadingSpinner: loadingSpinnerComponent,
modalCreatePage: modalCreatePageComponent,
modalCreateUser: modalCreateUserComponent,
modalDeleteUser: modalDeleteUserComponent,
modalDiscardPage: modalDiscardPageComponent,
modalMovePage: modalMovePageComponent,
pageLoader: pageLoaderComponent,

10
client/js/components/anchor.vue
View File

@ -7,13 +7,13 @@
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-blue
span Copy link to this section
span {{ $t('modal.anchortitle') }}
section
p.control.is-fullwidth
input.input(type='text', ref='anchorURLinput', v-model='anchorURL')
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") Copy to Clipboard
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") {{ $t('modal.copyclipboard') }}
</template>
<script>
@ -38,7 +38,7 @@
this.$store.dispatch('alert', {
style: 'blue',
icon: 'clipboard',
msg: 'The URL has been copied to your clipboard.'
msg: this.$t('modal.anchorsuccess')
})
this.$store.dispatch('anchorClose')
},
@ -46,7 +46,7 @@
this.$store.dispatch('alert', {
style: 'red',
icon: 'clipboard',
msg: 'Clipboard copy failed. Copy the URL manually.'
msg: this.$t('modal.anchorerror')
})
this.$refs.anchorURLinput.select()
}

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

@ -6,15 +6,15 @@
.modal-container
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-light-blue Create New Document
header.is-light-blue {{ $t('modal.createpagetitle') }}
section
label.label Enter the new document path:
label.label {{ $t('modal.createpagepath') }}
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-red(v-show='isInvalid') This document path is invalid!
span.help.is-red(v-show='isInvalid') {{ $t('modal.createpageinvalid') }}
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button.is-light-blue(v-on:click='create') Create
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
a.button.is-light-blue(v-on:click='create') {{ $t('modal.create') }}
</template>
<script>

65
client/js/components/modal-delete-user.vue Normal file
View File

@ -0,0 +1,65 @@
<template lang="pug">
transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-red
span {{ $t('modal.deleteusertitle') }}
p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
section
span {{ $t('modal.deleteuserwarning') }}
footer
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.abort') }}
a.button.is-red(v-on:click='deleteUser') {{ $t('modal.delete') }}
</template>
<script>
export default {
name: 'modal-delete-user',
props: ['currentUser'],
data () {
return {
isLoading: false
}
},
computed: {
isShown () {
return this.$store.state.modalDeleteUser.shown
}
},
methods: {
cancel: function () {
this.isLoading = false
this.$store.dispatch('modalDeleteUser/close')
},
discard: function () {
let self = this
this.isLoading = true
this.$http.delete('/admin/users/' + this.currentUser).then(resp => {
return resp.json()
}).then(resp => {
if (resp.ok) {
window.location.assign('/admin/users')
} else {
self.isLoading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: resp.msg
})
}
}).catch(err => {
self.isLoading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
})
})
}
}
}
</script>

10
client/js/components/modal-discard-page.vue
View File

@ -6,13 +6,13 @@
.modal-container
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-orange Discard?
header.is-orange {{ $t('modal.discardpagetitle') }}
section
span(v-if='mode === "create"') Are you sure you want to leave this page and loose anything you wrote so far?
span(v-else) Are you sure you want to leave this page and loose any modifications?
span(v-if='mode === "create"') {{ $t('modal.discardpagecreate') }}
span(v-else) {{ $t('modal.discardpageedit') }}
footer
a.button.is-grey.is-outlined(v-on:click='stay') Stay on page
a.button.is-orange(v-on:click='discard') Discard
a.button.is-grey.is-outlined(v-on:click='stay') {{ $t('modal.discardpagestay') }}
a.button.is-orange(v-on:click='discard') {{ $t('modal.discard') }}
</template>
<script>

14
client/js/components/modal-move-page.vue
View File

@ -6,16 +6,16 @@
.modal-container
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-indigo Move document
header.is-indigo {{ $t('modal.movepagetitle') }}
section
label.label Enter the new document path:
label.label {{ $t('modal.movepagepath') }}
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!
input.input(type='text', v-bind:placeholder='$t("modal.movepageplaceholder")', v-model='movePath', ref='movePageInput', @keyup.enter='move', @keyup.esc='cancel')
span.help.is-red(v-show='isInvalid') {{ $t('modal.movepageinvalid') }}
span.note {{ $t('modal.movepagewarning') }}
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
a.button.is-indigo(v-on:click='move') Move
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
a.button.is-indigo(v-on:click='move') {{ $t('modal.move') }}
</template>
<script>

43
client/js/modals/admin-users-delete.js
View File

@ -1,43 +0,0 @@
'use strict'
/* global usrData */
'use strict'
import $ from 'jquery'
import Vue from 'vue'
// Vue Delete User instance
module.exports = (alerts) => {
let vueDeleteUser = new Vue({
el: '#modal-admin-users-delete',
data: {
loading: false
},
methods: {
open: (ev) => {
$('#modal-admin-users-delete').addClass('is-active')
},
cancel: (ev) => {
$('#modal-admin-users-delete').removeClass('is-active')
},
deleteUser: (ev) => {
vueDeleteUser.loading = true
$.ajax('/admin/users/' + usrData._id, {
dataType: 'json',
method: 'DELETE'
}).then((rData, rStatus, rXHR) => {
vueDeleteUser.loading = false
vueDeleteUser.cancel()
window.location.assign('/admin/users')
}, (rXHR, rStatus, err) => {
vueDeleteUser.loading = false
alerts.pushError('Error', rXHR.responseJSON.msg)
})
}
}
})
$('.btn-deluser-prompt').on('click', vueDeleteUser.open)
}

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

@ -8,6 +8,7 @@ import editorCodeblock from './modules/editor-codeblock'
import editorVideo from './modules/editor-video'
import modalCreatePage from './modules/modal-create-page'
import modalCreateUser from './modules/modal-create-user'
import modalDeleteUser from './modules/modal-delete-user'
import modalDiscardPage from './modules/modal-discard-page'
import modalMovePage from './modules/modal-move-page'
import pageLoader from './modules/page-loader'
@ -34,6 +35,7 @@ export default new Vuex.Store({
editorVideo,
modalCreatePage,
modalCreateUser,
modalDeleteUser,
modalDiscardPage,
modalMovePage,
pageLoader

16
client/js/store/modules/modal-delete-user.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) }
}
}

25
server/locales/en/browser.json
View File

@ -15,6 +15,31 @@
"videoanymp4file": "Any standard MP4 file",
"videosuccess": "The video code has been inserted."
},
"modal": {
"abort": "Abort",
"anchortitle": "Copy link to this section",
"anchorsuccess": "The URL has been copied to your clipboard.",
"anchorerror": "Clipboard copy failed. Copy the URL manually.",
"copyclipboard": "Copy to Clipboard",
"create": "Create",
"createpagetitle": "Create New Page",
"createpagepath": "Enter the new page path:",
"createpageinvalid": "This page path is invalid!",
"discard": "Discard",
"discardpagestay": "Stay on page",
"discardpagetitle": "Discard?",
"discardpagecreate": "Are you sure you want to leave this page and loose anything you wrote so far?",
"discardpageedit": "Are you sure you want to leave this page and loose any modifications?",
"delete": "Delete",
"deleteusertitle": "Delete User Account?",
"deleteuserwarning": "Are you sure you want to delete this user account? This action cannot be undone!",
"move": "Move",
"movepagetitle": "Move Page",
"movepagepath": "Enter the new page path:",
"movepageinvalid": "This page path is invalid or not allowed!",
"movepagewarning": "Note that moving or renaming pages can lead to broken links. Make sure to edit any page that links to this page afterwards!",
"movepageplaceholder": "page-name"
},
"nav": {
"home": "Home"
},

12
server/views/modals/admin-deleteuser.pug
View File

@ -1,12 +0,0 @@
.modal#modal-admin-users-delete
.modal-background
.modal-container
.modal-content
header.is-red
span Delete User Account?
p.modal-notify(v-bind:class='{ "is-active": loading }'): i
section
span Are you sure you want to delete this user account? This action cannot be undone!
footer
a.button.is-grey.is-outlined(v-on:click='cancel') Abort
a.button.is-red(v-on:click='deleteUser') Delete

10
server/views/modals/create-discard.pug
View File

@ -1,10 +0,0 @@
.modal#modal-create-discard
.modal-background
.modal-container
.modal-content
header.is-orange Discard?
section
span Are you sure you want to leave this page and loose anything you wrote so far?
footer
a.button.is-grey.is-outlined.btn-create-discard Stay on page
a.button.is-orange(href='/') Discard

11
server/views/modals/edit-discard.pug
View File

@ -1,11 +0,0 @@
.modal#modal-edit-discard
.modal-background
.modal-container
.modal-content
header.is-orange Discard?
section
span Are you sure you want to leave this page and loose any modifications?
footer
a.button.is-grey.is-outlined.btn-edit-discard Stay on page
a.button.is-orange(href='/' + pageData.meta.path) Discard

33
server/views/modals/editor-link.pug
View File

@ -1,33 +0,0 @@
//.modallayer#modal-editor-link
.modallayer-content
.tabs.is-boxed
ul
li
a
span.icon.is-small
i.fa.fa-file-text-o
span Internal Document Link
li.is-active
a
span.icon.is-small
i.fa.fa-external-link
span External Link
.columns.is-hidden
.column
label.label Text to display
p.control
input.input(type='text', placeholder='Text input')
.column
label.label Link
p.control
input.input(type='text', placeholder='http://')
.columns
.column
label.label Text to display
p.control
input.input(type='text', placeholder='Text input')
.column
label.label Link
p.control
input.input(type='text', placeholder='http://')

6
server/views/pages/admin/users-edit.pug
View File

@ -1,7 +1,7 @@
extends ./_layout.pug
block rootNavRight
i.nav-item#notifload
loading-spinner
.nav-item
a.button(href='/admin/users')
i.icon-reply
@ -113,11 +113,11 @@ block adminContent
.column.is-narrow
section
if usrOpts.canBeDeleted
button.button.is-red.btn-deluser-prompt
button.button.is-red(v-on:click='$store.dispatch("modalDeleteUser/open")')
i.icon-trash2
span Delete Account
include ../../modals/admin-deleteuser.pug
modal-delete-user(current-user=usr._id)
script(type='text/javascript').
var usrData = !{JSON.stringify(usr)};