Extracted Users filter as a single file component
This commit is contained in:
parent
fea370c2a8
commit
48b8c5d021
2 changed files with 49 additions and 1 deletions
43
src/views/users/components/UsersFilter.vue
Normal file
43
src/views/users/components/UsersFilter.vue
Normal 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>
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue