Extracted Users filter as a single file component

This commit is contained in:
Angelina Filippova 2019-03-23 23:46:59 +03:00
parent fea370c2a8
commit 48b8c5d021
2 changed files with 49 additions and 1 deletions

View file

@ -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>

View file

@ -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