From e79dfc0822e70809cdc8da14c40a8b6402e97ee2 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Wed, 28 Mar 2018 00:02:32 -0400
Subject: [PATCH] feat: admin - groups single view

---
 client/components/admin.vue                   | 36 +++++------
 client/components/{ => admin}/admin-api.vue   |  0
 client/components/{ => admin}/admin-auth.vue  |  0
 .../{ => admin}/admin-dashboard.vue           |  0
 client/components/{ => admin}/admin-dev.vue   |  0
 .../components/{ => admin}/admin-editor.vue   |  0
 .../components/{ => admin}/admin-general.vue  |  0
 .../{ => admin}/admin-groups-edit.vue         | 63 ++++++++++++++-----
 .../components/{ => admin}/admin-groups.vue   |  0
 .../components/{ => admin}/admin-locale.vue   |  0
 .../components/{ => admin}/admin-logging.vue  |  0
 .../{ => admin}/admin-rendering.vue           |  0
 .../components/{ => admin}/admin-search.vue   |  0
 client/components/{ => admin}/admin-stats.vue |  0
 .../components/{ => admin}/admin-storage.vue  |  0
 .../components/{ => admin}/admin-system.vue   |  0
 client/components/{ => admin}/admin-theme.vue |  0
 client/components/{ => admin}/admin-users.vue |  0
 .../{ => admin}/admin-utilities.vue           |  0
 client/components/editor.vue                  |  6 +-
 .../components/{ => editor}/editor-code.vue   |  2 +-
 .../{ => editor}/editor-modal-access.vue      |  0
 .../{ => editor}/editor-modal-properties.vue  |  0
 server/graph/resolvers/group.js               |  3 +
 server/graph/schemas/group.graphql            |  4 +-
 25 files changed, 76 insertions(+), 38 deletions(-)
 rename client/components/{ => admin}/admin-api.vue (100%)
 rename client/components/{ => admin}/admin-auth.vue (100%)
 rename client/components/{ => admin}/admin-dashboard.vue (100%)
 rename client/components/{ => admin}/admin-dev.vue (100%)
 rename client/components/{ => admin}/admin-editor.vue (100%)
 rename client/components/{ => admin}/admin-general.vue (100%)
 rename client/components/{ => admin}/admin-groups-edit.vue (71%)
 rename client/components/{ => admin}/admin-groups.vue (100%)
 rename client/components/{ => admin}/admin-locale.vue (100%)
 rename client/components/{ => admin}/admin-logging.vue (100%)
 rename client/components/{ => admin}/admin-rendering.vue (100%)
 rename client/components/{ => admin}/admin-search.vue (100%)
 rename client/components/{ => admin}/admin-stats.vue (100%)
 rename client/components/{ => admin}/admin-storage.vue (100%)
 rename client/components/{ => admin}/admin-system.vue (100%)
 rename client/components/{ => admin}/admin-theme.vue (100%)
 rename client/components/{ => admin}/admin-users.vue (100%)
 rename client/components/{ => admin}/admin-utilities.vue (100%)
 rename client/components/{ => editor}/editor-code.vue (99%)
 rename client/components/{ => editor}/editor-modal-access.vue (100%)
 rename client/components/{ => editor}/editor-modal-properties.vue (100%)

diff --git a/client/components/admin.vue b/client/components/admin.vue
index 327e25ca..59ea4986 100644
--- a/client/components/admin.vue
+++ b/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') }
   ]
 })
 
diff --git a/client/components/admin-api.vue b/client/components/admin/admin-api.vue
similarity index 100%
rename from client/components/admin-api.vue
rename to client/components/admin/admin-api.vue
diff --git a/client/components/admin-auth.vue b/client/components/admin/admin-auth.vue
similarity index 100%
rename from client/components/admin-auth.vue
rename to client/components/admin/admin-auth.vue
diff --git a/client/components/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue
similarity index 100%
rename from client/components/admin-dashboard.vue
rename to client/components/admin/admin-dashboard.vue
diff --git a/client/components/admin-dev.vue b/client/components/admin/admin-dev.vue
similarity index 100%
rename from client/components/admin-dev.vue
rename to client/components/admin/admin-dev.vue
diff --git a/client/components/admin-editor.vue b/client/components/admin/admin-editor.vue
similarity index 100%
rename from client/components/admin-editor.vue
rename to client/components/admin/admin-editor.vue
diff --git a/client/components/admin-general.vue b/client/components/admin/admin-general.vue
similarity index 100%
rename from client/components/admin-general.vue
rename to client/components/admin/admin-general.vue
diff --git a/client/components/admin-groups-edit.vue b/client/components/admin/admin-groups-edit.vue
similarity index 71%
rename from client/components/admin-groups-edit.vue
rename to client/components/admin/admin-groups-edit.vue
index 9f2f989f..1cab4afb 100644
--- a/client/components/admin-groups-edit.vue
+++ b/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')
       }
diff --git a/client/components/admin-groups.vue b/client/components/admin/admin-groups.vue
similarity index 100%
rename from client/components/admin-groups.vue
rename to client/components/admin/admin-groups.vue
diff --git a/client/components/admin-locale.vue b/client/components/admin/admin-locale.vue
similarity index 100%
rename from client/components/admin-locale.vue
rename to client/components/admin/admin-locale.vue
diff --git a/client/components/admin-logging.vue b/client/components/admin/admin-logging.vue
similarity index 100%
rename from client/components/admin-logging.vue
rename to client/components/admin/admin-logging.vue
diff --git a/client/components/admin-rendering.vue b/client/components/admin/admin-rendering.vue
similarity index 100%
rename from client/components/admin-rendering.vue
rename to client/components/admin/admin-rendering.vue
diff --git a/client/components/admin-search.vue b/client/components/admin/admin-search.vue
similarity index 100%
rename from client/components/admin-search.vue
rename to client/components/admin/admin-search.vue
diff --git a/client/components/admin-stats.vue b/client/components/admin/admin-stats.vue
similarity index 100%
rename from client/components/admin-stats.vue
rename to client/components/admin/admin-stats.vue
diff --git a/client/components/admin-storage.vue b/client/components/admin/admin-storage.vue
similarity index 100%
rename from client/components/admin-storage.vue
rename to client/components/admin/admin-storage.vue
diff --git a/client/components/admin-system.vue b/client/components/admin/admin-system.vue
similarity index 100%
rename from client/components/admin-system.vue
rename to client/components/admin/admin-system.vue
diff --git a/client/components/admin-theme.vue b/client/components/admin/admin-theme.vue
similarity index 100%
rename from client/components/admin-theme.vue
rename to client/components/admin/admin-theme.vue
diff --git a/client/components/admin-users.vue b/client/components/admin/admin-users.vue
similarity index 100%
rename from client/components/admin-users.vue
rename to client/components/admin/admin-users.vue
diff --git a/client/components/admin-utilities.vue b/client/components/admin/admin-utilities.vue
similarity index 100%
rename from client/components/admin-utilities.vue
rename to client/components/admin/admin-utilities.vue
diff --git a/client/components/editor.vue b/client/components/editor.vue
index 2b6739a3..2b615c00 100644
--- a/client/components/editor.vue
+++ b/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 {
diff --git a/client/components/editor-code.vue b/client/components/editor/editor-code.vue
similarity index 99%
rename from client/components/editor-code.vue
rename to client/components/editor/editor-code.vue
index abe986ef..ea5230e1 100644
--- a/client/components/editor-code.vue
+++ b/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
diff --git a/client/components/editor-modal-access.vue b/client/components/editor/editor-modal-access.vue
similarity index 100%
rename from client/components/editor-modal-access.vue
rename to client/components/editor/editor-modal-access.vue
diff --git a/client/components/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue
similarity index 100%
rename from client/components/editor-modal-properties.vue
rename to client/components/editor/editor-modal-properties.vue
diff --git a/server/graph/resolvers/group.js b/server/graph/resolvers/group.js
index 4fdfc1f8..9dfd4e56 100644
--- a/server/graph/resolvers/group.js
+++ b/server/graph/resolvers/group.js
@@ -28,6 +28,9 @@ module.exports = {
         // TODO: Figure out how to exclude these extra fields...
         group: ['group.id', 'users->userGroups.createdAt', 'users->userGroups.updatedAt', 'users->userGroups.version', 'users->userGroups.userId', 'users->userGroups.groupId']
       })
+    },
+    async single(obj, args, context, info) {
+      return WIKI.db.Group.findById(args.id)
     }
   },
   GroupMutation: {
diff --git a/server/graph/schemas/group.graphql b/server/graph/schemas/group.graphql
index 04e4c883..6ddee819 100644
--- a/server/graph/schemas/group.graphql
+++ b/server/graph/schemas/group.graphql
@@ -21,7 +21,7 @@ type GroupQuery {
   ): [GroupMinimal]
 
   single(
-    id: String!
+    id: Int!
   ): Group
 }
 
@@ -74,7 +74,7 @@ type GroupMinimal {
 type Group {
   id: Int!
   name: String!
-  rights: [String]
+  rights: [Right]
   users: [User]
   createdAt: Date!
   updatedAt: Date!