From 48b8c5d0219e8328aa1075eb0175f5d29b421c60 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 23 Mar 2019 23:46:59 +0300
Subject: [PATCH] Extracted Users filter as a single file component

---
 src/views/users/components/UsersFilter.vue | 43 ++++++++++++++++++++++
 src/views/users/index.vue                  |  7 +++-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/views/users/components/UsersFilter.vue

diff --git a/src/views/users/components/UsersFilter.vue b/src/views/users/components/UsersFilter.vue
new file mode 100644
index 00000000..a866584a
--- /dev/null
+++ b/src/views/users/components/UsersFilter.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-select v-model="value" placeholder="Select filter">
+    <el-option-group
+      v-for="group in filters"
+      :key="group.label"
+      :label="group.label">
+      <el-option
+        v-for="item in group.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"/>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      filters: [{
+        label: 'By user type',
+        options: [{
+          label: 'Show local',
+          value: 'showLocal'
+        }, {
+          label: 'Show external',
+          value: 'showExternal'
+        }]
+      }, {
+        label: 'By status',
+        options: [{
+          label: 'Show Active',
+          value: 'showActive'
+        }, {
+          label: 'Show Deactivated',
+          value: 'showDeactivated'
+        }]
+      }],
+      value: ''
+    }
+  }
+}
+</script>
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index f27ac791..51860f0e 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -2,7 +2,8 @@
   <div class="users-container">
     <h1>{{ $t('users.users') }}</h1>
     <div class="search-container">
-      <el-checkbox :value="showLocalUsersOnly" @change="handleLocalUsersCheckbox">{{ $t('users.localUsersOnly') }}</el-checkbox>
+      <users-filter/>
+      <!-- <el-checkbox :value="showLocalUsersOnly" @change="handleLocalUsersCheckbox">{{ $t('users.localUsersOnly') }}</el-checkbox> -->
       <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
     </div>
     <el-table v-loading="loading" :data="users" style="width: 100%">
@@ -93,9 +94,13 @@
 
 <script>
 import debounce from 'lodash.debounce'
+import UsersFilter from './components/UsersFilter'
 
 export default {
   name: 'Users',
+  components: {
+    UsersFilter
+  },
   computed: {
     loading() {
       return this.$store.state.users.loading