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