wikijs-fork/client/components/admin/admin-groups-edit.vue

272 lines
8.4 KiB
Vue
Raw Normal View History

2018-03-26 05:11:49 +00:00
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img(src='/_assets/svg/icon-social-group.svg', alt='Edit Group', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 Edit Group
2019-08-03 04:48:55 +00:00
.subtitle-1.grey--text {{group.name}}
v-spacer
2020-05-23 03:29:42 +00:00
v-btn(color='grey', icon, outlined, to='/groups')
v-icon mdi-arrow-left
2018-10-14 21:38:39 +00:00
v-dialog(v-model='deleteGroupDialog', max-width='500', v-if='!group.isSystem')
template(v-slot:activator='{ on }')
v-btn.ml-3(color='red', icon, outlined, v-on='on')
v-icon(color='red') mdi-trash-can-outline
v-card
.dialog-header.is-red Delete Group?
v-card-text.pa-4 Are you sure you want to delete group #[strong {{ group.name }}]? All users will be unassigned from this group.
v-card-actions
v-spacer
2019-10-05 03:51:51 +00:00
v-btn(text, @click='deleteGroupDialog = false') Cancel
v-btn(color='red', dark, @click='deleteGroup') Delete
v-btn.ml-3(color='success', large, depressed, @click='updateGroup')
v-icon(left) mdi-check
span Update Group
v-card.mt-3
2019-11-16 23:56:56 +00:00
v-tabs.grad-tabs(v-model='tab', :color='$vuetify.theme.dark ? `blue` : `primary`', fixed-tabs, show-arrows, icons-and-text)
v-tab(key='settings')
span Settings
v-icon mdi-cog-box
2019-11-16 23:56:56 +00:00
v-tab(key='permissions')
span Permissions
v-icon mdi-lock-pattern
v-tab(key='rules')
span Page Rules
v-icon mdi-file-lock
v-tab(key='users')
span Users
v-icon mdi-account-group
2018-03-26 05:11:49 +00:00
v-tab-item(key='settings', :transition='false', :reverse-transition='false')
v-card(flat)
template(v-if='group.id <= 2')
v-card-text
v-alert.radius-7.mb-0(
color='orange darken-2'
:class='$vuetify.theme.dark ? "grey darken-4" : "orange lighten-5"'
outlined
:value='true'
icon='mdi-lock-outline'
) This is a system group and its settings cannot be modified.
v-divider
v-card-text
v-text-field(
outlined
v-model='group.name'
label='Group Name'
hide-details
prepend-icon='mdi-account-group'
style='max-width: 600px;'
:disabled='group.id <= 2'
)
template(v-if='group.id > 2')
v-divider
v-card-text
v-text-field(
outlined
v-model='group.redirectOnLogin'
label='Redirect on Login'
persistent-hint
hint='The path / URL where the user will be redirected upon successful login.'
prepend-icon='mdi-arrow-top-left-thick'
append-icon='mdi-folder-search'
@click:append='selectPage'
style='max-width: 850px;'
:counter='255'
)
v-tab-item(key='permissions', :transition='false', :reverse-transition='false')
group-permissions(v-model='group', @refresh='refresh')
2018-03-26 05:11:49 +00:00
v-tab-item(key='rules', :transition='false', :reverse-transition='false')
group-rules(v-model='group', @refresh='refresh')
v-tab-item(key='users', :transition='false', :reverse-transition='false')
group-users(v-model='group', @refresh='refresh')
2020-05-23 03:29:42 +00:00
v-card-chin
v-spacer
.caption.grey--text.pr-2 Group ID #[strong {{group.id}}]
page-selector(mode='select', v-model='selectPageModal', :open-handler='selectPageHandle', path='home', :locale='currentLang')
2018-03-26 05:11:49 +00:00
</template>
<script>
2018-10-14 03:28:59 +00:00
import _ from 'lodash'
import gql from 'graphql-tag'
2018-10-14 03:28:59 +00:00
import GroupPermissions from './admin-groups-edit-permissions.vue'
import GroupRules from './admin-groups-edit-rules.vue'
import GroupUsers from './admin-groups-edit-users.vue'
2018-03-31 05:48:04 +00:00
/* global siteConfig */
2018-03-26 05:11:49 +00:00
export default {
2018-03-31 05:48:04 +00:00
components: {
GroupPermissions,
GroupRules,
GroupUsers
2018-03-31 05:48:04 +00:00
},
2018-03-26 05:11:49 +00:00
data() {
return {
group: {
id: 0,
name: '',
2018-10-14 21:38:39 +00:00
isSystem: false,
permissions: [],
pageRules: [],
users: [],
redirectOnLogin: '/'
2018-03-26 05:11:49 +00:00
},
deleteGroupDialog: false,
tab: null,
selectPageModal: false,
currentLang: siteConfig.lang
2018-03-26 05:11:49 +00:00
}
},
methods: {
selectPage () {
this.selectPageModal = true
},
selectPageHandle ({ path, locale }) {
this.group.redirectOnLogin = `/${locale}/${path}`
},
async updateGroup() {
try {
await this.$apollo.mutate({
mutation: gql`
mutation (
$id: Int!
$name: String!
$redirectOnLogin: String!
$permissions: [String]!
$pageRules: [PageRuleInput]!
) {
groups {
update(
id: $id
name: $name
redirectOnLogin: $redirectOnLogin
permissions: $permissions
pageRules: $pageRules
) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
id: this.group.id,
name: this.group.name,
redirectOnLogin: this.group.redirectOnLogin,
permissions: this.group.permissions,
pageRules: this.group.pageRules
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-update')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: `Group changes have been saved.`,
icon: 'check'
})
} catch (err) {
2019-01-13 03:33:30 +00:00
this.$store.commit('pushGraphError', err)
}
2018-03-26 05:11:49 +00:00
},
async deleteGroup() {
this.deleteGroupDialog = false
try {
await this.$apollo.mutate({
mutation: gql`
mutation ($id: Int!) {
groups {
delete(id: $id) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
2018-03-26 05:11:49 +00:00
variables: {
id: this.group.id
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-delete')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: `Group ${this.group.name} has been deleted.`,
icon: 'delete'
})
this.$router.replace('/groups')
} catch (err) {
2019-01-13 03:33:30 +00:00
this.$store.commit('pushGraphError', err)
2018-03-26 05:11:49 +00:00
}
2018-04-23 04:27:30 +00:00
},
async refresh() {
return this.$apollo.queries.group.refetch()
2018-03-26 05:11:49 +00:00
}
},
apollo: {
2018-03-28 04:02:32 +00:00
group: {
query: gql`
query ($id: Int!) {
groups {
single(id: $id) {
id
name
redirectOnLogin
isSystem
permissions
pageRules {
id
path
roles
match
deny
locales
}
users {
id
name
email
}
createdAt
updatedAt
}
}
}
`,
2018-03-28 04:02:32 +00:00
variables() {
return {
2018-10-14 03:28:59 +00:00
id: _.toSafeInteger(this.$route.params.id)
2018-03-28 04:02:32 +00:00
}
},
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.groups.single),
2018-03-26 05:11:49 +00:00
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>