Change-Id: I3195e88a56b20b70f05893c57809b974f8bc7ebechanges/27/21727/4
Hans-Peter Herzog
7 years ago
parent
7c22a93be4
commit
0c98a79946
@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<div class="row justify-center">
|
||||||
|
<div v-if="formEnabled" class="col col-md-6 col-sm-12">
|
||||||
|
<q-field>
|
||||||
|
<q-input v-model="data.station_name" :disabled="loading" :readonly="loading" autofocus
|
||||||
|
:float-label="$t('pbxConfig.deviceStationName')" clearable />
|
||||||
|
</q-field>
|
||||||
|
<q-field>
|
||||||
|
<q-input v-model="data.identifier" :disabled="loading" :readonly="loading"
|
||||||
|
:float-label="$t('pbxConfig.deviceIdentifier')" clearable />
|
||||||
|
</q-field>
|
||||||
|
<q-field>
|
||||||
|
<csc-pbx-model-select :profiles="profiles" :modelImages="modelImages"
|
||||||
|
@opened="modelSelectOpened()" @select="selectProfile" />
|
||||||
|
</q-field>
|
||||||
|
<div class="row justify-center form-actions">
|
||||||
|
<q-btn v-if="!loading" flat color="secondary"
|
||||||
|
icon="clear" @click="cancel()">{{ $t('buttons.cancel') }}</q-btn>
|
||||||
|
<q-btn v-if="!loading" flat color="primary"
|
||||||
|
icon="done" @click="save()">{{ $t('buttons.save') }}</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="row justify-center">
|
||||||
|
<q-btn color="primary" icon="add" flat @click="enableForm()">Add device</q-btn>
|
||||||
|
</div>
|
||||||
|
<q-inner-loading v-show="loading" :visible="loading">
|
||||||
|
<q-spinner-mat size="60px" color="primary" />
|
||||||
|
</q-inner-loading>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn,
|
||||||
|
QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon, QItem, QItemMain } from 'quasar-framework'
|
||||||
|
import CscPbxModelSelect from './CscPbxModelSelect'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'csc-pbx-device-add-form',
|
||||||
|
props: [
|
||||||
|
'profiles',
|
||||||
|
'modelImages',
|
||||||
|
'loading'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
CscPbxModelSelect, QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn,
|
||||||
|
QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon, QItem, QItemMain
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
formEnabled: false,
|
||||||
|
data: this.getDefaults()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDefaults() {
|
||||||
|
return {
|
||||||
|
station_name: '',
|
||||||
|
identifier: '',
|
||||||
|
profile_id: null,
|
||||||
|
lines: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enableForm(){
|
||||||
|
this.reset();
|
||||||
|
this.formEnabled = true;
|
||||||
|
},
|
||||||
|
disableForm(){
|
||||||
|
this.formEnabled = false;
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.disableForm();
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.$emit('save', this.data);
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.data = this.getDefaults();
|
||||||
|
},
|
||||||
|
modelSelectOpened() {
|
||||||
|
this.$emit('modelSelectOpened');
|
||||||
|
},
|
||||||
|
selectProfile(profile) {
|
||||||
|
this.data.profile_id = profile.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
@import '../../../themes/quasar.variables.styl';
|
||||||
|
.form-actions
|
||||||
|
margin-top 16px
|
||||||
|
margin-bottom 8px
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<div class="csc-pbx-model-select">
|
||||||
|
<div>
|
||||||
|
<q-input
|
||||||
|
:value="selectedProfile.name"
|
||||||
|
readonly
|
||||||
|
class="cursor-pointer"
|
||||||
|
:float-label="label"
|
||||||
|
:after="clearButton"
|
||||||
|
/>
|
||||||
|
<q-popover ref="popover" fit @open="opened()">
|
||||||
|
<q-list no-borders class="csc-pbx-model-list" highlight inset-separator>
|
||||||
|
<q-item v-for="(profile, index) in profiles" :key="profile.id"
|
||||||
|
@click="selectProfile(profile)" class="cursor-pointer">
|
||||||
|
<q-item-side>
|
||||||
|
<q-item-tile avatar>
|
||||||
|
<img :src="frontImageUrl(profile.device_id)" />
|
||||||
|
</q-item-tile>
|
||||||
|
</q-item-side>
|
||||||
|
<q-item-main>
|
||||||
|
<q-item-tile>{{ profile.name }}</q-item-tile>
|
||||||
|
</q-item-main>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-popover>
|
||||||
|
</div>
|
||||||
|
<div v-if="selectedProfile.device_id != null" class="csc-pbx-model-image">
|
||||||
|
<img :src="frontImageUrl(selectedProfile.device_id)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { QInput, QPopover, QList, QItem, QItemMain, QItemTile, QItemSide } from 'quasar-framework'
|
||||||
|
import _ from 'lodash';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'csc-pbx-model-select',
|
||||||
|
props: [
|
||||||
|
'profiles',
|
||||||
|
'modelImages',
|
||||||
|
'loading',
|
||||||
|
'label',
|
||||||
|
'erasable'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
QInput, QPopover, QList, QItem, QItemMain, QItemTile, QItemSide
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
selectedProfile: this.getDefaults()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
clearButton() {
|
||||||
|
let self = this;
|
||||||
|
let buttons = [];
|
||||||
|
if (this.selectedProfile.device_id !== null && this.erasable === true) {
|
||||||
|
buttons = [{
|
||||||
|
icon: 'clear',
|
||||||
|
error: false,
|
||||||
|
handler (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
self.reset();
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
return buttons;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
opened() {
|
||||||
|
this.$emit('opened');
|
||||||
|
},
|
||||||
|
selectProfile(profile) {
|
||||||
|
this.selectedProfile = profile;
|
||||||
|
this.$refs.popover.close();
|
||||||
|
this.$emit("select", profile);
|
||||||
|
},
|
||||||
|
frontImageUrl(id) {
|
||||||
|
return _.get(this.modelImages, id + '.url', null);
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.selectedProfile = this.getDefaults();
|
||||||
|
this.$emit('reseted');
|
||||||
|
},
|
||||||
|
getDefaults() {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
device_id: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
|
||||||
|
.csc-pbx-model-list
|
||||||
|
.q-item-avatar
|
||||||
|
img
|
||||||
|
border-radius 0
|
||||||
|
|
||||||
|
.csc-pbx-model-image
|
||||||
|
margin-top 16px
|
||||||
|
text-align center
|
||||||
|
img
|
||||||
|
width: 50%
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
|
||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
export function reactiveSet(object, name, value) {
|
||||||
|
Vue.delete(object, name);
|
||||||
|
Vue.set(object, name, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function reactiveDelete(object, name) {
|
||||||
|
Vue.delete(object, name);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue