Change-Id: I9842a710fc07b3c349f3f1ab9609db8a5b5b2e52changes/73/22773/8
Hans-Peter Herzog
7 years ago
parent
9b97844cd8
commit
c3963b1f35
@ -1,66 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
@ -1,163 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
<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