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

feat: admin - groups edit UI

Browse Source
This commit is contained in:
NGPixel 2018-03-26 01:11:49 -04:00
parent 7793df9bd4
commit 346493f845
13 changed files with 275 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/app.js
View File

@ -12,6 +12,8 @@ import VueApollo from 'vue-apollo'
import Vuetify from 'vuetify'
import Velocity from 'velocity-animate'
import Hammer from 'hammerjs'
import moment from 'moment'
import VueMoment from 'vue-moment'
import store from './store'
// ====================================
@ -64,6 +66,7 @@ Vue.use(localization.VueI18Next)
Vue.use(helpers)
Vue.use(VeeValidate, { events: '' })
Vue.use(Vuetify)
Vue.use(VueMoment, { moment })
Vue.prototype.Velocity = Velocity

152
client/components/admin-groups-edit.vue Normal file
View File

@ -0,0 +1,152 @@
<template lang='pug'>
v-card
v-card(flat, color='grey lighten-5').pa-3.pt-4
.headline.blue--text.text--darken-2 Edit Group
.subheading.grey--text {{group.name}}
v-btn(color='primary', fab, absolute, bottom, right, small, to='/groups'): v-icon arrow_upward
v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
v-tab(key='properties') Properties
v-tab(key='rights') Permissions
v-tab(key='users') Users
v-tab-item(key='properties', :transition='false', :reverse-transition='false')
v-card
v-card-text
v-text-field(v-model='group.name', label='Group Name', counter='255', prepend-icon='people')
v-card-actions.pa-3
v-btn(color='primary', @click='')
v-icon(left) check
| Save Changes
.caption.ml-4.grey--text ID: {{group.id}}
v-spacer
v-dialog(v-model='deleteGroupDialog', max-width='500')
v-btn(color='red', flat, @click='', slot='activator')
v-icon(left) delete
| Delete Group
v-card
.dialog-header.is-red Delete Group?
v-card-text Are you sure you want to delete group #[strong {{ group.name }}]? All users will be unassigned from this group.
v-card-actions
v-spacer
v-btn(flat, @click='deleteGroupDialog = false') Cancel
v-btn(color='red', dark, @click='deleteGroup') Delete
v-tab-item(key='rights', :transition='false', :reverse-transition='false')
v-card Test
v-tab-item(key='users', :transition='false', :reverse-transition='false')
v-card
v-card-title.pb-0
v-btn(color='primary')
v-icon(left) assignment_ind
| Assign User
v-data-table(
:items='users',
:headers='headers',
:search='search',
:pagination.sync='pagination',
:rows-per-page-items='[15]'
hide-actions
)
template(slot='items', slot-scope='props')
tr(:active='props.selected')
td.text-xs-right {{ props.item.id }}
td {{ props.item.name }}
td {{ props.item.userCount }}
td {{ props.item.createdAt | moment('calendar') }}
td {{ props.item.updatedAt | moment('calendar') }}
td
v-menu(bottom, right, min-width='200')
v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
v-list
v-list-tile(@click='deleteGroupConfirm(props.item)')
v-list-tile-action: v-icon(color='orange') highlight_off
v-list-tile-content
v-list-tile-title Unassign
template(slot='no-data')
v-alert.ma-3(icon='warning', :value='true', outline) No users to display.
.text-xs-center.py-2(v-if='users.length > 15')
v-pagination(v-model='pagination.page', :length='pages')
</template>
<script>
import groupsQuery from 'gql/admin-groups-query-list.gql'
import deleteGroupMutation from 'gql/admin-groups-mutation-delete.gql'
export default {
data() {
return {
group: {
id: 7,
name: 'Editors'
},
deleteGroupDialog: false,
pagination: {},
users: [],
headers: [
{ text: 'ID', value: 'id', width: 50, align: 'right' },
{ text: 'Name', value: 'name' },
{ text: 'Email', value: 'email' },
{ text: 'Created', value: 'createdAt', width: 250 },
{ text: 'Last Updated', value: 'updatedAt', width: 250 },
{ text: '', value: 'actions', sortable: false, width: 50 }
],
search: ''
}
},
computed: {
pages () {
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
return 0
}
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
}
},
methods: {
async deleteGroupConfirm(group) {
this.deleteGroupDialog = true
this.selectedGroup = group
},
async deleteGroup() {
this.deleteGroupDialog = false
try {
await this.$apollo.mutate({
mutation: deleteGroupMutation,
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) {
this.$store.commit('showNotification', {
style: 'red',
message: err.message,
icon: 'warning'
})
}
}
},
apollo: {
users: {
query: groupsQuery,
update: (data) => data.groups.list,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>

57
client/components/admin-groups.vue
View File

@ -12,7 +12,7 @@
v-card
.dialog-header.is-short New Group
v-card-text
v-text-field(v-model='newGroupName', label='Group Name', autofocus, counter='255')
v-text-field(v-model='newGroupName', label='Group Name', autofocus, counter='255', @keyup.enter='createGroup')
v-card-actions
v-spacer
v-btn(flat, @click='newGroupDialog = false') Cancel
@ -20,23 +20,22 @@
v-btn(icon, @click='refresh')
v-icon.grey--text refresh
v-spacer
v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
v-text-field(solo, append-icon='search', label='Search', single-line, hide-details, v-model='search')
v-data-table(
v-model='selected'
:items='groups',
:headers='headers',
:search='search',
:pagination.sync='pagination',
:rows-per-page-items='[15]'
hide-actions,
disable-initial-sort
hide-actions
)
template(slot='items', slot-scope='props')
tr(:active='props.selected')
tr.is-clickable(:active='props.selected', @click='$router.push("/groups/" + props.item.id)')
td.text-xs-right {{ props.item.id }}
td {{ props.item.name }}
td {{ props.item.userCount }}
td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
td {{ props.item.createdAt | moment('calendar') }}
td {{ props.item.updatedAt | moment('calendar') }}
template(slot='no-data')
v-alert.ma-3(icon='warning', :value='true', outline) No groups to display.
.text-xs-center.py-2(v-if='groups.length > 15')
@ -48,20 +47,22 @@ import _ from 'lodash'
import groupsQuery from 'gql/admin-groups-query-list.gql'
import createGroupMutation from 'gql/admin-groups-mutation-create.gql'
import deleteGroupMutation from 'gql/admin-groups-mutation-delete.gql'
export default {
data() {
return {
newGroupDialog: false,
newGroupName: '',
selected: [],
selectedGroup: {},
pagination: {},
groups: [],
headers: [
{ text: 'ID', value: 'id', width: 50, align: 'right' },
{ text: 'Name', value: 'name' },
{ text: 'Users', value: 'userCount', width: 200 },
{ text: '', value: 'actions', sortable: false, width: 50 }
{ text: 'Created', value: 'createdAt', width: 250 },
{ text: 'Last Updated', value: 'updatedAt', width: 250 }
],
search: ''
}
@ -96,6 +97,7 @@ export default {
const data = _.get(resp, 'data.groups.create', { responseResult: {} })
if (data.responseResult.succeeded === true) {
const apolloData = store.readQuery({ query: groupsQuery })
data.group.userCount = 0
apolloData.groups.list.push(data.group)
store.writeQuery({ query: groupsQuery, data: apolloData })
} else {
@ -106,13 +108,48 @@ export default {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-create')
}
})
this.newGroupName = ''
this.$store.commit('showNotification', {
style: 'success',
message: `Group has been created successfully.`,
icon: 'check'
})
} catch (err) {
this.$store.commit('showNotification', {
style: 'red',
message: err.message,
icon: 'warning'
})
}
},
async deleteGroupConfirm(group) {
this.deleteGroupDialog = true
this.selectedGroup = group
},
async deleteGroup() {
this.deleteGroupDialog = false
try {
await this.$apollo.mutate({
mutation: deleteGroupMutation,
variables: {
id: this.selectedGroup.id
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-delete')
}
})
await this.$apollo.queries.groups.refetch()
this.$store.commit('showNotification', {
style: 'success',
message: `Group ${this.selectedGroup.name} has been deleted.`,
icon: 'delete'
})
} catch (err) {
this.$store.commit('showNotification', {
style: 'red',
message: err.message,
icon: 'warning'
})
}
}
},

1
client/components/admin.vue
View File

@ -97,6 +97,7 @@ const router = new VueRouter({
{ path: '/stats', component: () => import(/* webpackChunkName: "admin" */ './admin-stats.vue') },
{ path: '/theme', component: () => import(/* webpackChunkName: "admin" */ './admin-theme.vue') },
{ path: '/groups', component: () => import(/* webpackChunkName: "admin" */ './admin-groups.vue') },
{ path: '/groups/:id', component: () => import(/* webpackChunkName: "admin" */ './admin-groups-edit.vue') },
{ path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin-users.vue') },
{ path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin-auth.vue') },
{ path: '/rendering', component: () => import(/* webpackChunkName: "admin" */ './admin-rendering.vue') },

12
client/graph/admin-groups-mutation-delete.gql Normal file
View File

@ -0,0 +1,12 @@
mutation ($id: Int!) {
groups {
delete(id: $id) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}

22
client/graph/admin-groups-query-single.gql Normal file
View File

@ -0,0 +1,22 @@
query ($id: Int!) {
groups {
single(id: $id) {
id
name
rights {
id
path
role
exact
allow
}
users {
id
name
email
}
createdAt
updatedAt
}
}
}

1
client/scss/app.scss
View File

@ -7,6 +7,7 @@
// @import "../libs/animate/animate";
@import 'components/markdown-content';
@import 'components/data-table';
@import 'components/dialog';
// @import '../libs/twemoji/twemoji-awesome';

5
client/scss/components/_data-table.scss Normal file
View File

@ -0,0 +1,5 @@
.datatable {
.is-clickable {
cursor: pointer;
}
}

6
client/scss/components/_dialog.scss
View File

@ -8,4 +8,10 @@
align-items: center;
padding: 0 1rem;
font-size: 1.2rem;
&.is-red {
background-color: mc('red', '700');
background: radial-gradient(ellipse at top, mc('red', '500'), transparent),
radial-gradient(ellipse at bottom, mc('red', '800'), transparent);
}
}

1
package.json
View File

@ -218,6 +218,7 @@
"vue-hot-reload-api": "2.3.0",
"vue-loader": "14.2.1",
"vue-material-design-icons": "1.2.1",
"vue-moment": "3.2.0",
"vue-router": "3.0.1",
"vue-simple-breakpoints": "1.0.3",
"vue-template-compiler": "2.5.16",

8
server/graph/resolvers/group.js
View File

@ -48,19 +48,21 @@ module.exports = {
const group = await WIKI.db.Group.create({
name: args.name
})
console.info(group)
return {
responseResult: graphHelper.generateSuccess('Group created successfully.'),
group
}
},
delete(obj, args) {
return WIKI.db.Group.destroy({
async delete(obj, args) {
await WIKI.db.Group.destroy({
where: {
id: args.id
},
limit: 1
})
return {
responseResult: graphHelper.generateSuccess('Group has been deleted.')
}
},
unassignUser(obj, args) {
return WIKI.db.Group.findById(args.groupId).then(grp => {

15
server/graph/schemas/group.graphql
View File

@ -18,7 +18,11 @@ type GroupQuery {
list(
filter: String
orderBy: String
): [Group]
): [GroupMinimal]
single(
id: String!
): Group
}
# -----------------------------------------------
@ -59,12 +63,19 @@ type GroupResponse {
group: Group
}
type GroupMinimal {
id: Int!
name: String!
userCount: Int
createdAt: Date!
updatedAt: Date!
}
type Group {
id: Int!
name: String!
rights: [String]
users: [User]
userCount: Int
createdAt: Date!
updatedAt: Date!
}

8
yarn.lock
View File

@ -7992,7 +7992,7 @@ moment-timezone@^0.5.0, moment-timezone@^0.5.x:
dependencies:
moment ">= 2.9.0"
moment@2.21.0:
moment@2.21.0, moment@^2.11.1:
version "2.21.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
@ -12767,6 +12767,12 @@ vue-material-design-icons@1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/vue-material-design-icons/-/vue-material-design-icons-1.2.1.tgz#3231ffc3c4aadbaf9de06e9c29b6994691f010aa"
vue-moment@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-3.2.0.tgz#28cd2b313831ae83953f646ac4785a2cc724e412"
dependencies:
moment "^2.11.1"
vue-router@3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"