feat: user-search component UI

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

@@ -78,7 +78,7 @@
       v-tab-item(key='users', :transition='false', :reverse-transition='false')
         v-card
           v-card-title.pb-0
-            v-btn(color='primary')
+            v-btn(color='primary', @click='assignUser')
               v-icon(left) assignment_ind
               | Assign User
           v-data-table(
@@ -106,17 +106,21 @@
               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')
+
+    user-search(v-model='searchUserDialog')
 </template>
 
 <script>
 import Criterias from '../common/criterias.vue'
+import UserSearch from '../common/user-search.vue'
 
 import groupQuery from 'gql/admin-groups-query-single.gql'
 import deleteGroupMutation from 'gql/admin-groups-mutation-delete.gql'
 
 export default {
   components: {
-    Criterias
+    Criterias,
+    UserSearch
   },
   data() {
     return {
@@ -126,6 +130,7 @@ export default {
         users: []
       },
       deleteGroupDialog: false,
+      searchUserDialog: false,
       pagination: {},
       users: [],
       headers: [
@@ -177,6 +182,9 @@ export default {
           icon: 'warning'
         })
       }
+    },
+    assignUser() {
+      this.searchUserDialog = true
     }
   },
   apollo: {

client/components/common/user-search.vue

@@ -0,0 +1,82 @@
+<template lang="pug">
+  v-dialog(v-model='dialogOpen', max-width='650')
+    v-card
+      .dialog-header Search User
+      v-card-text
+        v-select(
+          :items='items'
+          :loading='searchLoading'
+          :search-input.sync='search'
+          autocomplete
+          autofocus
+          cache-items
+          chips
+          clearable
+          hide-details
+          item-text='name',
+          item-value='id',
+          label='Search users...'
+          light
+          multiple
+          v-model='selectedItems'
+        )
+      v-card-actions
+        v-spacer
+        v-btn(flat, @click='close', :disabled='loading') Cancel
+        v-btn(color='primary', dark, @click='setUser', :loading='loading', :disabled='loading')
+          v-icon(left) assignment_ind
+          span Select User
+</template>
+
+<script>
+import searchUsersQuery from 'gql/common-users-query-search.gql'
+
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      searchLoading: false,
+      search: '',
+      items: [],
+      selectedItems: []
+    }
+  },
+  computed: {
+    dialogOpen: {
+      get() { return this.value },
+      set(value) { this.$emit('input', value) }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('input', false)
+    },
+    setUser() {
+
+    }
+  },
+  apollo: {
+    items: {
+      query: searchUsersQuery,
+      variables() {
+        return {
+          search: this.search
+        }
+      },
+      skip() {
+        return !this.search || this.search.length < 2
+      },
+      update: (data) => data.upsells.segments,
+      watchLoading (isLoading) {
+        this.searchLoading = isLoading
+      }
+    }
+  }
+}
+</script>

client/graph/common-users-query-search.gql

@@ -0,0 +1,9 @@
+query ($query: String!) {
+  users {
+    search(query:$query) {
+      id
+      name
+      email
+    }
+  }
+}