feat: admin - groups single view

client/components/admin.vue

@@ -91,24 +91,24 @@ const router = new VueRouter({
   base: '/a',
   routes: [
     { path: '/', redirect: '/dashboard' },
-    { path: '/dashboard', component: () => import(/* webpackChunkName: "admin" */ './admin-dashboard.vue') },
-    { path: '/general', component: () => import(/* webpackChunkName: "admin" */ './admin-general.vue') },
-    { path: '/locale', component: () => import(/* webpackChunkName: "admin" */ './admin-locale.vue') },
-    { 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') },
-    { path: '/editor', component: () => import(/* webpackChunkName: "admin" */ './admin-editor.vue') },
-    { path: '/logging', component: () => import(/* webpackChunkName: "admin" */ './admin-logging.vue') },
-    { path: '/search', component: () => import(/* webpackChunkName: "admin" */ './admin-search.vue') },
-    { path: '/storage', component: () => import(/* webpackChunkName: "admin" */ './admin-storage.vue') },
-    { path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin-api.vue') },
-    { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin-system.vue') },
-    { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin-utilities.vue') },
-    { path: '/dev', component: () => import(/* webpackChunkName: "admin-dev" */ './admin-dev.vue') }
+    { path: '/dashboard', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-dashboard.vue') },
+    { path: '/general', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-general.vue') },
+    { path: '/locale', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-locale.vue') },
+    { path: '/stats', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-stats.vue') },
+    { path: '/theme', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-theme.vue') },
+    { path: '/groups', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups.vue') },
+    { path: '/groups/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups-edit.vue') },
+    { path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users.vue') },
+    { path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-auth.vue') },
+    { path: '/rendering', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-rendering.vue') },
+    { path: '/editor', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-editor.vue') },
+    { path: '/logging', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-logging.vue') },
+    { path: '/search', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-search.vue') },
+    { path: '/storage', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-storage.vue') },
+    { path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-api.vue') },
+    { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-system.vue') },
+    { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-utilities.vue') },
+    { path: '/dev', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev.vue') }
   ]
 })
 

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

@@ -4,7 +4,7 @@
       .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-tabs(v-model='tab', 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
@@ -32,7 +32,39 @@
                   v-btn(color='red', dark, @click='deleteGroup') Delete
 
       v-tab-item(key='rights', :transition='false', :reverse-transition='false')
-        v-card Test
+        v-card
+          v-card-title.pb-0
+            v-btn(color='primary')
+              v-icon(left) add
+              | Add Rule
+            v-spacer
+            v-btn(flat)
+              v-icon(left) vertical_align_bottom
+              | Import Rules
+          v-list(dense, two-line)
+            v-list-tile.grey.lighten-5.px-2
+              v-list-tile-avatar(color='red'): v-icon(color='white') remove_circle
+              v-list-tile-content
+                v-list-tile-title /javascript/*
+                v-list-tile-sub-title.caption #[strong WRITE]
+              v-list-tile-action
+                v-btn(icon): v-icon(color='grey') delete
+            v-divider(inset).my-0
+            v-list-tile.grey.lighten-5.px-2
+              v-list-tile-avatar(color='green'): v-icon(color='white') check
+              v-list-tile-content
+                v-list-tile-title /javascript/*
+                v-list-tile-sub-title.caption #[strong WRITE]
+              v-list-tile-action
+                v-btn(icon): v-icon(color='grey') delete
+            v-divider(inset).my-0
+            v-list-tile.grey.lighten-5.px-2
+              v-list-tile-avatar(color='green'): v-icon(color='white') check
+              v-list-tile-content
+                v-list-tile-title /javascript/*
+                v-list-tile-sub-title.caption #[strong READ]
+              v-list-tile-action
+                v-btn(icon): v-icon(color='grey') delete
 
       v-tab-item(key='users', :transition='false', :reverse-transition='false')
         v-card
@@ -41,7 +73,7 @@
               v-icon(left) assignment_ind
               | Assign User
           v-data-table(
-            :items='users',
+            :items='group.users',
             :headers='headers',
             :search='search',
             :pagination.sync='pagination',
@@ -52,9 +84,7 @@
               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 {{ props.item.email }}
                 td
                   v-menu(bottom, right, min-width='200')
                     v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
@@ -70,7 +100,7 @@
 </template>
 
 <script>
-import groupsQuery from 'gql/admin-groups-query-list.gql'
+import groupQuery from 'gql/admin-groups-query-single.gql'
 import deleteGroupMutation from 'gql/admin-groups-mutation-delete.gql'
 
 export default {
@@ -78,7 +108,8 @@ export default {
     return {
       group: {
         id: 7,
-        name: 'Editors'
+        name: 'Editors',
+        users: []
       },
       deleteGroupDialog: false,
       pagination: {},
@@ -87,11 +118,10 @@ export default {
         { 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: ''
+      search: '',
+      tab: '1'
     }
   },
   computed: {
@@ -136,9 +166,14 @@ export default {
     }
   },
   apollo: {
-    users: {
-      query: groupsQuery,
-      update: (data) => data.groups.list,
+    group: {
+      query: groupQuery,
+      variables() {
+        return {
+          id: this.$route.params.id
+        }
+      },
+      update: (data) => data.groups.single,
       watchLoading (isLoading) {
         this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-refresh')
       }

client/components/editor.vue

@@ -24,9 +24,9 @@ import _ from 'lodash'
 
 export default {
   components: {
-    editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor-code.vue'),
-    editorModalAccess: () => import(/* webpackChunkName: "editor" */ './editor-modal-access.vue'),
-    editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor-modal-properties.vue')
+    editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'),
+    editorModalAccess: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-access.vue'),
+    editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
   },
   data() {
     return {

client/components/editor/editor-code.vue

@@ -114,7 +114,7 @@ import mdMark from 'markdown-it-mark'
 import mdImsize from 'markdown-it-imsize'
 
 // Prism (Syntax Highlighting)
-import Prism from '../libs/prism/prism.js'
+import Prism from '@/libs/prism/prism.js'
 
 // ========================================
 // INIT