feat: admin groups - list + create, gql refactoring

2018-03-24 22:35:47 -04:00
parent cb253f7bfa
commit 7793df9bd4
28 changed files with 445 additions and 183 deletions
--- a/client/components/admin-groups.vue
+++ b/client/components/admin-groups.vue
@@ -2,7 +2,7 @@
  v-card(flat)
    v-card(flat, color='grey lighten-5').pa-3.pt-4
      .headline.blue--text.text--darken-2 Groups
-      .subheading.grey--text Manage groups
+      .subheading.grey--text Manage groups and their permissions
    v-card
      v-card-title
        v-dialog(v-model='newGroupDialog', max-width='500')
@@ -17,7 +17,7 @@
              v-spacer
              v-btn(flat, @click='newGroupDialog = false') Cancel
              v-btn(color='primary', @click='createGroup') Create
-        v-btn(icon)
+        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')
@@ -44,6 +44,11 @@
 </template>

 <script>
+import _ from 'lodash'
+
+import groupsQuery from 'gql/admin-groups-query-list.gql'
+import createGroupMutation from 'gql/admin-groups-mutation-create.gql'
+
 export default {
  data() {
    return {
@@ -71,18 +76,53 @@ export default {
    }
  },
  methods: {
+    async refresh() {
+      await this.$apollo.queries.groups.refetch()
+      this.$store.commit('showNotification', {
+        message: 'Groups have been refreshed.',
+        style: 'success',
+        icon: 'cached'
+      })
+    },
    async createGroup() {
-      // try {
-      //   const resp = await this.$apollo.mutate({
-      //     mutation: CONSTANTS.GRAPH.GROUPS.CREATE,
-      //     variables: {
-      //       name: this.newGroupName
-      //     }
-      //   })
+      this.newGroupDialog = false
+      try {
+        await this.$apollo.mutate({
+          mutation: createGroupMutation,
+          variables: {
+            name: this.newGroupName
+          },
+          update (store, resp) {
+            const data = _.get(resp, 'data.groups.create', { responseResult: {} })
+            if (data.responseResult.succeeded === true) {
+              const apolloData = store.readQuery({ query: groupsQuery })
+              apolloData.groups.list.push(data.group)
+              store.writeQuery({ query: groupsQuery, data: apolloData })
+            } else {
+              throw new Error(data.responseResult.message)
+            }
+          },
+          watchLoading (isLoading) {
+            this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-create')
+          }
+        })
+        this.$store.commit('showNotification', {
+          style: 'success',
+          message: `Group has been created successfully.`,
+          icon: 'check'
+        })
+      } catch (err) {

-      // } catch (err) {
-
-      // }
+      }
+    }
+  },
+  apollo: {
+    groups: {
+      query: groupsQuery,
+      update: (data) => data.groups.list,
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-refresh')
+      }
    }
  }
 }
--- a/client/components/admin-system.vue
+++ b/client/components/admin-system.vue
@@ -93,24 +93,15 @@
                  v-list-tile-content
                    v-list-tile-title {{ info.postgreVersion }}
                    v-list-tile-sub-title {{ info.postgreHost }}
-
-    v-snackbar(
-      color='success'
-      top
-      v-model='refreshCompleted'
-    )
-      v-icon.mr-3(dark) cached
-      | System Info has been refreshed.
-
 </template>

 <script>
-import gql from 'graphql-tag'
-
 import IconCube from 'mdi/cube'
 import IconDatabase from 'mdi/database'
 import IconNodeJs from 'mdi/nodejs'

+import systemInfoQuery from 'gql/admin-system-query-info.gql'
+
 export default {
  components: {
    IconCube,
@@ -119,42 +110,26 @@ export default {
  },
  data() {
    return {
-      info: {},
-      refreshCompleted: false
-    }
-  },
-  apollo: {
-    info: {
-      query: gql`
-        query {
-          system {
-            info {
-              currentVersion
-              latestVersion
-              latestVersionReleaseDate
-              operatingSystem
-              hostname
-              cpuCores
-              ramTotal
-              workingDirectory
-              nodeVersion
-              redisVersion
-              redisUsedRAM
-              redisTotalRAM
-              redisHost
-              postgreVersion
-              postgreHost
-            }
-          }
-        }
-      `,
-      update: (data) => data.system.info
+      info: {}
    }
  },
  methods: {
    async refresh() {
      await this.$apollo.queries.info.refetch()
-      this.refreshCompleted = true
+      this.$store.commit('showNotification', {
+        message: 'System Info has been refreshed.',
+        style: 'success',
+        icon: 'cached'
+      })
+    }
+  },
+  apollo: {
+    info: {
+      query: systemInfoQuery,
+      update: (data) => data.system.info,
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-system-refresh')
+      }
    }
  }
 }
--- a/client/components/admin.vue
+++ b/client/components/admin.vue
@@ -69,10 +69,22 @@

    v-footer.py-2.justify-center(app, absolute, color='grey lighten-3', inset, height='auto')
      .caption.grey--text.text--darken-1 Powered by Wiki.js
+
+    v-snackbar(
+      :color='notification.style'
+      bottom,
+      right,
+      multi-line,
+      v-model='notificationState'
+    )
+      .text-xs-left
+        v-icon.mr-3(dark) {{ notification.icon }}
+        span {{ notification.message }}
 </template>

 <script>
 import VueRouter from 'vue-router'
+import { mapState } from 'vuex'

 const router = new VueRouter({
  mode: 'history',
@@ -105,6 +117,13 @@ export default {
      adminDrawerShown: true
    }
  },
+  computed: {
+    ...mapState(['notification']),
+    notificationState: {
+      get() { return this.notification.isActive },
+      set(newState) { this.$store.commit('updateNotificationState', newState) }
+    }
+  },
  router
 }
 </script>
--- a/client/components/login.vue
+++ b/client/components/login.vue
@@ -38,10 +38,13 @@
 </template>

 <script>
-/* global graphQL, siteConfig */
+/* global siteConfig */

 import _ from 'lodash'
-import gql from 'graphql-tag'
+
+import strategiesQuery from 'gql/login-query-strategies.gql'
+import loginMutation from 'gql/login-mutation-login.gql'
+import tfaMutation from 'gql/login-mutation-tfa.gql'

 export default {
  data () {
@@ -81,22 +84,8 @@ export default {
    },
    refreshStrategies () {
      this.isLoading = true
-      graphQL.query({
-        query: gql`
-          query {
-            authentication {
-              providers(
-                filter: "isEnabled eq true",
-                orderBy: "title ASC"
-              ) {
-                key
-                title
-                useForm
-                icon
-              }
-            }
-          }
-        `
+      this.$apollo.query({
+        query: strategiesQuery
      }).then(resp => {
        if (_.has(resp, 'data.authentication.providers')) {
          this.strategies = _.get(resp, 'data.authentication.providers', [])
@@ -131,23 +120,8 @@ export default {
        this.$refs.iptPassword.focus()
      } else {
        this.isLoading = true
-        graphQL.mutate({
-          mutation: gql`
-            mutation($username: String!, $password: String!, $provider: String!) {
-              authentication {
-                login(username: $username, password: $password, provider: $provider) {
-                  operation {
-                    succeeded
-                    code
-                    slug
-                    message
-                  }
-                  tfaRequired
-                  tfaLoginToken
-                }
-              }
-            }
-          `,
+        this.$apollo.mutate({
+          mutation: loginMutation,
          variables: {
            username: this.username,
            password: this.password,
@@ -199,21 +173,8 @@ export default {
        this.$refs.iptTFA.focus()
      } else {
        this.isLoading = true
-        graphQL.mutate({
-          mutation: gql`
-            mutation($loginToken: String!, $securityCode: String!) {
-              authentication {
-                loginTFA(loginToken: $loginToken, securityCode: $securityCode) {
-                  operation {
-                    succeeded
-                    code
-                    slug
-                    message
-                  }
-                }
-              }
-            }
-          `,
+        this.$apollo.mutate({
+          mutation: tfaMutation,
          variables: {
            loginToken: this.loginToken,
            securityCode: this.securityCode
--- a/client/components/nav-header.vue
+++ b/client/components/nav-header.vue
@@ -61,7 +61,7 @@
          color='blue'
        )
    v-spacer
-    v-progress-circular.mr-3(indeterminate, color='blue', v-show='$apollo.loading')
+    v-progress-circular.mr-3(indeterminate, color='blue', v-show='isLoading')
    slot(name='actions')
    transition(name='navHeaderSearch')
      v-btn(icon, @click='searchToggle', v-if='!searchIsShown')
@@ -88,6 +88,8 @@
 </template>

 <script>
+import { mapGetters } from 'vuex'
+
 export default {
  data() {
    return {
@@ -97,6 +99,9 @@ export default {
      search: ''
    }
  },
+  computed: {
+    ...mapGetters(['isLoading'])
+  },
  methods: {
    searchToggle() {
      this.searchIsLoading = false