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

refactor: admin-edit-user -> vue + fixes

Browse Source
This commit is contained in:
NGPixel
2017-06-09 22:33:33 -04:00
parent d590c67d50
commit 33c05b327b
8 changed files with 285 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/js/app.js
View File

@@ -74,6 +74,7 @@ import pageLoaderComponent from './components/page-loader.vue'
import searchComponent from './components/search.vue'
import treeComponent from './components/tree.vue'
import adminEditUserComponent from './pages/admin-edit-user.component.js'
import adminProfileComponent from './pages/admin-profile.component.js'
import adminSettingsComponent from './pages/admin-settings.component.js'
import contentViewComponent from './pages/content-view.component.js'
@@ -163,6 +164,7 @@ $(() => {
mixins: [helpers],
components: {
alert: alertComponent,
adminEditUser: adminEditUserComponent,
adminProfile: adminProfileComponent,
adminSettings: adminSettingsComponent,
anchor: anchorComponent,

122
client/js/components/modal-create-user.vue
View File

@@ -8,11 +8,11 @@
.modal-content(v-show='isShown')
header.is-blue
span {{ $t('modal.createusertitle') }}
p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
p.modal-notify(:class='{ "is-active": isLoading }'): i
section
label.label {{ $t('modal.createuseremail') }}
p.control.is-fullwidth
input.input(type='text', v-bind:placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput')
input.input(type='text', :placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput')
section
label.label {{ $t('modal.createuserprovider') }}
p.control.is-fullwidth
@@ -30,76 +30,76 @@
section(v-if='provider=="local"')
label.label {{ $t('modal.createuserfullname') }}
p.control.is-fullwidth
input.input(type='text', v-bind:placeholder='$t("modal.createusernameplaceholder")', v-model='name')
input.input(type='text', :placeholder='$t("modal.createusernameplaceholder")', v-model='name')
footer
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }}
a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }}
a.button.is-grey.is-outlined(@click='cancel') {{ $t('modal.discard') }}
a.button(@click='create', v-if='provider=="local"', :disabled='isLoading', :class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }}
a.button(@click='create', v-if='provider!="local"', :disabled='isLoading', :class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }}
</template>
<script>
export default {
name: 'modal-create-user',
data () {
return {
email: '',
provider: 'local',
password: '',
name: '',
isLoading: false
}
export default {
name: 'modal-create-user',
data() {
return {
email: '',
provider: 'local',
password: '',
name: '',
isLoading: false
}
},
computed: {
isShown() {
return this.$store.state.modalCreateUser.shown
}
},
methods: {
init() {
let self = this
self._.delay(() => {
self.$refs.createUserEmailInput.focus()
}, 100)
},
computed: {
isShown () {
return this.$store.state.modalCreateUser.shown
}
cancel() {
this.$store.dispatch('modalCreateUser/close')
this.email = ''
this.provider = 'local'
},
methods: {
init () {
let self = this
self._.delay(() => {
self.$refs.createUserEmailInput.focus()
}, 100)
},
cancel () {
this.$store.dispatch('modalCreateUser/close')
this.email = ''
this.provider = 'local'
},
create () {
let self = this
this.isLoading = true
this.$http.post('/admin/users/create', {
email: this.email,
provider: this.provider,
password: this.password,
name: this.name
}).then(resp => {
return resp.json()
}).then(resp => {
this.isLoading = false
if (resp.ok) {
this.cancel()
window.location.reload(true)
} else {
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: resp.msg
})
}
}).catch(err => {
this.isLoading = false
create() {
let self = this
this.isLoading = true
this.$http.post('/admin/users/create', {
email: this.email,
provider: this.provider,
password: this.password,
name: this.name
}).then(resp => {
return resp.json()
}).then(resp => {
this.isLoading = false
if (resp.ok) {
this.cancel()
window.location.reload(true)
} else {
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
msg: resp.msg
})
}
}).catch(err => {
this.isLoading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
})
},
mounted () {
this.$root.$on('modalCreateUser/init', this.init)
}
})
}
},
mounted() {
this.$root.$on('modalCreateUser/init', this.init)
}
}
</script>

76
client/js/components/modal-delete-user.vue
View File

@@ -12,54 +12,54 @@
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') }}
a.button.is-grey.is-outlined(@click='cancel') {{ $t('modal.abort') }}
a.button.is-red(@click='deleteUser') {{ $t('modal.delete') }}
</template>
<script>
export default {
name: 'modal-delete-user',
props: ['currentUser'],
data () {
return {
isLoading: false
}
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')
},
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 => {
deleteUser: 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: 'Error: ' + err.body.msg
msg: resp.msg
})
}
}).catch(err => {
self.isLoading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
})
}
})
}
}
}
</script>

74
client/js/pages/admin-edit-user.component.js Normal file
View File

@@ -0,0 +1,74 @@
'use strict'
export default {
name: 'admin-edit-user',
props: ['usrdata'],
data() {
return {
id: '',
email: '',
password: '********',
name: '',
rights: [],
roleoverride: 'none'
}
},
methods: {
addRightsRow() {
this.rights.push({
role: 'write',
path: '/',
exact: false,
deny: false
})
},
removeRightsRow(idx) {
this._.pullAt(this.rights, idx)
this.$forceUpdate()
},
saveUser() {
let self = this
let formattedRights = this._.cloneDeep(this.rights)
switch (this.roleoverride) {
case 'admin':
formattedRights.push({
role: 'admin',
path: '/',
exact: false,
deny: false
})
break
}
this.$http.post(window.location.href, {
password: this.password,
name: this.name,
rights: JSON.stringify(formattedRights)
}).then(resp => {
self.$store.dispatch('alert', {
style: 'green',
icon: 'check',
msg: 'Changes have been applied successfully.'
})
}).catch(err => {
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
})
})
}
},
mounted() {
let usr = JSON.parse(this.usrdata)
this.id = usr._id
this.email = usr.email
this.name = usr.name
if (this._.find(usr.rights, { role: 'admin' })) {
this.rights = this._.reject(usr.rights, ['role', 'admin'])
this.roleoverride = 'admin'
} else {
this.rights = usr.rights
}
}
}

72
client/js/pages/admin.js
View File

@@ -1,72 +0,0 @@
'use strict'
/* global usrData */
import $ from 'jquery'
import _ from 'lodash'
import Vue from 'vue'
module.exports = (alerts) => {
if ($('#page-type-admin-users-edit').length) {
let vueEditUser = new Vue({
el: '#page-type-admin-users-edit',
data: {
id: '',
email: '',
password: '********',
name: '',
rights: [],
roleoverride: 'none'
},
methods: {
addRightsRow: (ev) => {
vueEditUser.rights.push({
role: 'write',
path: '/',
exact: false,
deny: false
})
},
removeRightsRow: (idx) => {
_.pullAt(vueEditUser.rights, idx)
vueEditUser.$forceUpdate()
},
saveUser: (ev) => {
let formattedRights = _.cloneDeep(vueEditUser.rights)
switch (vueEditUser.roleoverride) {
case 'admin':
formattedRights.push({
role: 'admin',
path: '/',
exact: false,
deny: false
})
break
}
$.post(window.location.href, {
password: vueEditUser.password,
name: vueEditUser.name,
rights: JSON.stringify(formattedRights)
}).done((resp) => {
alerts.pushSuccess('Saved successfully', 'Changes have been applied.')
}).fail((jqXHR, txtStatus, resp) => {
alerts.pushError('Error', resp)
})
}
},
created: function () {
this.id = usrData._id
this.email = usrData.email
this.name = usrData.name
if (_.find(usrData.rights, { role: 'admin' })) {
this.rights = _.reject(usrData.rights, ['role', 'admin'])
this.roleoverride = 'admin'
} else {
this.rights = usrData.rights
}
}
})
require('../modals/admin-users-delete.js')(alerts)
}
}