Change-Id: I147c4e52e35f5fc8540320badacaebc7b2eb1708changes/69/22669/6
Tijana Maksimovic
7 years ago
committed by
raxelsen
parent
72ad4e4381
commit
7b6b3c0f32
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="col">
|
||||
<div class="filterOptionsPanel">
|
||||
<csc-pbx-mac-input
|
||||
@filter="filterByMacAddress"
|
||||
@reset="resetMacAddressFilter"
|
||||
/>
|
||||
<csc-pbx-model-select
|
||||
:erasable="true"
|
||||
:profiles="profiles"
|
||||
:modelImages="modelImages"
|
||||
:label="$t('pbxConfig.filterPhoneModel')"
|
||||
@opened="modelSelectOpened()"
|
||||
@select="filterByProfile"
|
||||
@reseted="resetProfileFilter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import CscPbxModelSelect from './CscPbxModelSelect'
|
||||
import CscPbxMacInput from './CscPbxMacInput'
|
||||
|
||||
export default {
|
||||
name: 'csc-pbx-devices-filter',
|
||||
components: {
|
||||
CscPbxModelSelect,
|
||||
CscPbxMacInput
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('pbxConfig', [
|
||||
'profiles',
|
||||
'modelImages'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
filterByProfile(profile) {
|
||||
this.$store.dispatch('pbxConfig/filterByProfile', profile);
|
||||
},
|
||||
filterByMacAddress(identifier) {
|
||||
this.$store.dispatch('pbxConfig/filterByMacAddress', identifier);
|
||||
},
|
||||
resetProfileFilter() {
|
||||
this.$store.dispatch('pbxConfig/resetProfileFilter');
|
||||
},
|
||||
resetMacAddressFilter() {
|
||||
this.$store.dispatch('pbxConfig/resetMacAddressFilter');
|
||||
},
|
||||
modelSelectOpened() {
|
||||
this.$store.dispatch('pbxConfig/loadProfiles');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
.filter-model-select
|
||||
margin 16px 16px 8px 16px
|
||||
|
||||
.filter-icon
|
||||
padding 10px
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-toolbar
|
||||
color="primary"
|
||||
inverted
|
||||
class="row justify-center"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="add"
|
||||
flat
|
||||
@click="enableForm()"
|
||||
:class="{ cscLabelMobile: isSmallLabelBreakpoint }"
|
||||
>
|
||||
{{ $t('pbxConfig.addDevice') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="isMobile"
|
||||
:disabled="checkDevicesCreated"
|
||||
color="primary"
|
||||
icon="fa-filter"
|
||||
flat
|
||||
@click="toggleFilterOptions()"
|
||||
:class="{ cscIconMobile: isSmallIconBreakpoint }"
|
||||
>
|
||||
{{ showFilterLabel }}
|
||||
</q-btn>
|
||||
<div
|
||||
v-if="!isMobile"
|
||||
@click="toggleFilterOptions()"
|
||||
>
|
||||
<q-btn
|
||||
:disabled="checkDevicesCreated"
|
||||
icon="fa-filter"
|
||||
flat
|
||||
:class="{ cscIconMobile: isSmallIconBreakpoint }"
|
||||
>
|
||||
{{ $t('pbxConfig.filterDevices') }}
|
||||
</q-btn>
|
||||
<q-chip
|
||||
small
|
||||
tag
|
||||
square
|
||||
color="primary"
|
||||
v-if="chipMacAddressFilter"
|
||||
>
|
||||
{{ chipMacAddressFilter | removeTrailingWildcard }}
|
||||
</q-chip>
|
||||
<q-chip
|
||||
small
|
||||
tag
|
||||
square
|
||||
color="primary"
|
||||
v-if="chipModelFilter"
|
||||
>
|
||||
{{ chipModelFilter }}
|
||||
</q-chip>
|
||||
</div>
|
||||
<div class="resetAllBtn">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="highlight_off"
|
||||
flat
|
||||
:disabled="checkFiltersApplied"
|
||||
@click="resetAllFilters"
|
||||
:class="{ cscIconMobile: isSmallIconBreakpoint }"
|
||||
>
|
||||
{{ $t('pbxConfig.resetFilters') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
QChip,
|
||||
QIcon,
|
||||
QBtn,
|
||||
QToolbar,
|
||||
Platform,
|
||||
dom
|
||||
} from 'quasar-framework'
|
||||
import { mapGetters } from 'vuex'
|
||||
const { viewport } = dom
|
||||
let { width } = viewport()
|
||||
|
||||
export default {
|
||||
name: 'csc-pbx-devices-toolbar',
|
||||
data () {
|
||||
return {
|
||||
formEnabled: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
QChip,
|
||||
QIcon,
|
||||
QBtn,
|
||||
QToolbar,
|
||||
Platform
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('pbxConfig', [
|
||||
'devices',
|
||||
'chipModelFilter',
|
||||
'chipMacAddressFilter'
|
||||
]),
|
||||
isSmallLabelBreakpoint() {
|
||||
return (width <= 390 && width > 352);
|
||||
},
|
||||
isSmallIconBreakpoint() {
|
||||
return (width <= 500);
|
||||
},
|
||||
isMobile() {
|
||||
return (Platform.is.mobile || width < 1270);
|
||||
},
|
||||
filtersApplied() {
|
||||
return (this.chipModelFilter || this.chipMacAddressFilter);
|
||||
},
|
||||
showFilterLabel() {
|
||||
return this.filtersApplied ? this.$t('pbxConfig.showFilters') : this.$t('pbxConfig.filterDevices');
|
||||
},
|
||||
checkFiltersApplied() {
|
||||
return !(this.chipModelFilter || this.chipMacAddressFilter);
|
||||
},
|
||||
checkDevicesCreated() {
|
||||
return (this.devices.length === 0 && !this.chipModelFilter && !this.chipMacAddressFilter);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enableForm() {
|
||||
if(this.chipModelFilter || this.chipMacAddressFilter) {
|
||||
this.resetAllFilters();
|
||||
}
|
||||
this.$emit('showForm');
|
||||
},
|
||||
toggleFilterOptions() {
|
||||
if(this.devices.length !== 0 || this.chipModelFilter || this.chipMacAddressFilter) {
|
||||
this.$emit('toggleFilterOptions');
|
||||
}
|
||||
},
|
||||
resetAllFilters() {
|
||||
this.$emit('resetAll');
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
removeTrailingWildcard: function(value) {
|
||||
return value.slice(0, -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
.cscIconMobile
|
||||
.on-left
|
||||
margin-right 0
|
||||
|
||||
.cscLabelMobile
|
||||
padding-bottom 20px
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="col">
|
||||
<q-field class="row">
|
||||
<q-input
|
||||
v-model="macAddress"
|
||||
:float-label="$t('pbxConfig.filterMacAddress')"
|
||||
:after="clearButton"
|
||||
@keyup="filterByMacAddress"
|
||||
/>
|
||||
</q-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
import {
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QField,
|
||||
QInput,
|
||||
debounce } from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-pbx-mac-input',
|
||||
data () {
|
||||
return {
|
||||
macAddress: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QField,
|
||||
QInput
|
||||
},
|
||||
created() {
|
||||
if (this.listMacAddressFilter) {
|
||||
this.macAddress = this.listMacAddressFilter.slice(0, -1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('pbxConfig', [
|
||||
'listMacAddressFilter'
|
||||
]),
|
||||
clearButton() {
|
||||
let self = this;
|
||||
let buttons = [];
|
||||
if (this.macAddress) {
|
||||
buttons = [{
|
||||
icon: 'clear',
|
||||
error: false,
|
||||
handler (event) {
|
||||
event.stopPropagation();
|
||||
self.reset();
|
||||
}
|
||||
}];
|
||||
}
|
||||
return buttons;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.debouncedFilterByMacAddress = debounce(() => {
|
||||
if(this.macAddress === '') {
|
||||
this.reset();
|
||||
}
|
||||
else {
|
||||
this.$emit('filter', this.macAddress + '*');
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.macAddress = '';
|
||||
this.$emit('reset');
|
||||
},
|
||||
filterByMacAddress() {
|
||||
this.debouncedFilterByMacAddress();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
listMacAddressFilter() {
|
||||
if (this.listMacAddressFilter === null) {
|
||||
this.macAddress = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/quasar.variables.styl';
|
||||
</style>
|
||||
Loading…
Reference in new issue