feat: admin - groups edit UI

client/app.js

@@ -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
 

client/components/admin-groups-edit.vue

@@ -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>

client/components/admin-groups.vue

@@ -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'
+        })
       }
     }
   },

client/components/admin.vue

@@ -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') },

client/graph/admin-groups-mutation-delete.gql

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

client/graph/admin-groups-query-single.gql

@@ -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
+    }
+  }
+}

client/scss/app.scss

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

client/scss/components/_data-table.scss

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

client/scss/components/_dialog.scss

@@ -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);
+  }
 }

package.json

@@ -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",

server/graph/resolvers/group.js

@@ -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 => {

server/graph/schemas/group.graphql

@@ -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!
 }

yarn.lock

@@ -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"