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