- PBXConfig: As a Customer, I want to add new PBX Seats - PBXConfig: As a Customer, I want to remove PBX Seats - PBXConfig: As a Customer, I want to see a list of all PBX Seats Change-Id: I27abf950f0594a67f233c707a702663a550bfa4cchanges/24/18924/2
Hans-Peter Herzog
7 years ago
parent
fcbd7f64ef
commit
3475daa3dd
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<q-card class="csc-pbx-seat">
|
||||
<q-card-title class="cursor-pointer" @click="toggleMain()">
|
||||
<q-icon name="person" color="primary" size="24px"/>
|
||||
<span v-if="!expanded" class="csc-pbx-seat-title">{{ name }}</span>
|
||||
<q-chip v-if="!expanded" pointing="left" color="primary">
|
||||
{{ $t('pbxConfig.extension') }}: <span class="csc-important">{{ extension }}</span>
|
||||
</q-chip>
|
||||
<q-icon :name="titleIcon" color="primary" size="22px" slot="right"/>
|
||||
</q-card-title>
|
||||
<q-card-main v-if="expanded">
|
||||
<q-field :label="$t('pbxConfig.seatName')">
|
||||
<q-input v-model="name" readonly />
|
||||
</q-field>
|
||||
<q-field :label="$t('pbxConfig.extension')">
|
||||
<q-input v-model="extension" readonly />
|
||||
</q-field>
|
||||
<q-field :label="$t('pbxConfig.primaryNumber')">
|
||||
<q-input v-model="primaryNumber" readonly disabled />
|
||||
</q-field>
|
||||
<q-field :label="$t('pbxConfig.aliasNumbers')">
|
||||
<q-select v-model="aliasNumbers" :options="aliasNumberOptions" multiple chips readonly clearable />
|
||||
</q-field>
|
||||
<q-field :label="$t('pbxConfig.groups')">
|
||||
<q-select v-model="groups" :options="groupOptions" multiple chips readonly clearable />
|
||||
</q-field>
|
||||
</q-card-main>
|
||||
<q-card-actions align="center">
|
||||
<q-btn flat :small="isMobile" :round="isMobile" color="negative"
|
||||
icon="delete" @click="remove()">Delete</q-btn>
|
||||
</q-card-actions>
|
||||
<q-inner-loading :visible="isLoading">
|
||||
<q-spinner-mat size="60px" color="primary"></q-spinner-mat>
|
||||
</q-inner-loading>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import numberFilter from '../../../filters/number'
|
||||
import {
|
||||
QCard,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QField,
|
||||
QInput,
|
||||
QIcon,
|
||||
QSelect,
|
||||
QChip,
|
||||
QBtn,
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QTransition,
|
||||
Platform,
|
||||
Dialog
|
||||
} from 'quasar-framework'
|
||||
export default {
|
||||
name: 'csc-pbx-seat',
|
||||
props: [
|
||||
'seat',
|
||||
'aliasNumberOptions',
|
||||
'groupOptions',
|
||||
'deleting'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
expanded: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
QCard,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QField,
|
||||
QInput,
|
||||
QIcon,
|
||||
QSelect,
|
||||
QChip,
|
||||
QBtn,
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QTransition
|
||||
},
|
||||
computed: {
|
||||
id() {
|
||||
return this.seat.id;
|
||||
},
|
||||
name() {
|
||||
return this.seat.display_name;
|
||||
},
|
||||
extension() {
|
||||
return this.seat.pbx_extension;
|
||||
},
|
||||
primaryNumber() {
|
||||
return numberFilter(this.seat.primary_number);
|
||||
},
|
||||
aliasNumbers() {
|
||||
let numbers = [];
|
||||
if(_.isArray(this.seat.alias_numbers)) {
|
||||
this.seat.alias_numbers.forEach((number)=>{
|
||||
numbers.push(number.number_id);
|
||||
});
|
||||
}
|
||||
return numbers;
|
||||
},
|
||||
groups() {
|
||||
let groups = [];
|
||||
if(_.isArray(this.seat.groups)) {
|
||||
this.seat.groups.forEach((group)=>{
|
||||
groups.push(group.id);
|
||||
});
|
||||
}
|
||||
return groups;
|
||||
},
|
||||
seatModel() {
|
||||
return {
|
||||
id: this.id,
|
||||
name: this.name,
|
||||
extension: this.extension,
|
||||
primaryNumber: this.primaryNumber,
|
||||
aliasNumbers: this.aliasNumbers,
|
||||
groups: this.groups
|
||||
}
|
||||
},
|
||||
isLoading() {
|
||||
return this.deleting;
|
||||
},
|
||||
cardClasses() {
|
||||
var cardClasses = ['csc-pbx-seat'];
|
||||
if(this.isLoading) {
|
||||
cardClasses.push('light-dimmed');
|
||||
}
|
||||
return cardClasses;
|
||||
},
|
||||
titleIcon() {
|
||||
if(this.expanded) {
|
||||
return 'keyboard arrow down';
|
||||
} else {
|
||||
return 'keyboard arrow up';
|
||||
}
|
||||
},
|
||||
isMobile() {
|
||||
return Platform.is.mobile;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleMain() {
|
||||
this.expanded = !this.expanded
|
||||
},
|
||||
remove() {
|
||||
var store = this.$store;
|
||||
var state = this;
|
||||
var i18n = this.$i18n;
|
||||
Dialog.create({
|
||||
title: i18n.t('pbxConfig.removeSeatTitle'),
|
||||
message: i18n.t('pbxConfig.removeSeatText', { seat: this.name }),
|
||||
buttons: [
|
||||
'Cancel',
|
||||
{
|
||||
label: i18n.t('pbxConfig.removeSeat'),
|
||||
color: 'negative',
|
||||
handler () {
|
||||
state.loading = true;
|
||||
state.$emit('remove', state.seatModel);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.csc-pbx-seat {
|
||||
position: relative;
|
||||
}
|
||||
.csc-pbx-seat .csc-pbx-seat-title {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.csc-important {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="csc-add-form csc-pbx-seat-add-form">
|
||||
<q-card v-if="enabled">
|
||||
<q-card-title>
|
||||
<q-icon name="add" color="primary" size="24px"/>
|
||||
<span>{{ $t('pbxConfig.addSeat') }}</span>
|
||||
</q-card-title>
|
||||
<q-card-main>
|
||||
<q-field>
|
||||
<q-input :disabled="isRequesting" ref="name" v-model="form.name" autofocus
|
||||
:float-label="$t('pbxConfig.seatName')" clearable />
|
||||
</q-field>
|
||||
<q-field>
|
||||
<q-input :disabled="isRequesting" type="number" v-model="form.extension" clearable
|
||||
min="1" max="1000000" :float-label="$t('pbxConfig.extension')" />
|
||||
</q-field>
|
||||
<q-field>
|
||||
<q-select :disabled="isRequesting" v-model="form.aliasNumbers" multiple chips readonly clearable
|
||||
:float-label="$t('pbxConfig.aliasNumbers')" :options="aliasNumberOptions" />
|
||||
</q-field>
|
||||
<q-field>
|
||||
<q-select :disabled="isRequesting" v-model="form.groups" multiple chips readonly clearable
|
||||
:float-label="$t('pbxConfig.groups')" :options="groupOptions" />
|
||||
</q-field>
|
||||
</q-card-main>
|
||||
<q-card-separator/>
|
||||
<q-card-actions align="center">
|
||||
<q-btn v-if="!isRequesting" flat color="secondary" icon="clear"
|
||||
@click="cancel()">{{ $t('buttons.cancel') }}</q-btn>
|
||||
<q-btn loader v-model="isRequesting" flat color="primary" icon="done"
|
||||
@click="save()">{{ $t('buttons.save') }}</q-btn>
|
||||
</q-card-actions>
|
||||
<q-inner-loading :visible="isRequesting">
|
||||
<q-spinner-mat size="60px" color="primary"></q-spinner-mat>
|
||||
</q-inner-loading>
|
||||
</q-card>
|
||||
<q-card v-else flat>
|
||||
<q-card-actions align="center">
|
||||
<q-btn color="primary" icon="add" flat @click="add()">{{ $t('pbxConfig.addSeat') }}</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
QChip,
|
||||
QCard,
|
||||
QCardSeparator,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QIcon,
|
||||
QPopover,
|
||||
QList,
|
||||
QItem,
|
||||
QItemMain,
|
||||
QField,
|
||||
QInput,
|
||||
QBtn,
|
||||
QSelect,
|
||||
QInnerLoading,
|
||||
QSpinnerDots,
|
||||
QSpinnerMat,
|
||||
Dialog
|
||||
} from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-pbx-seat-add-form',
|
||||
props: [
|
||||
'aliasNumberOptions',
|
||||
'groupOptions'
|
||||
],
|
||||
components: {
|
||||
QChip,
|
||||
QCard,
|
||||
QCardSeparator,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QIcon,
|
||||
QPopover,
|
||||
QList,
|
||||
QItem,
|
||||
QItemMain,
|
||||
QField,
|
||||
QInput,
|
||||
QBtn,
|
||||
QSelect,
|
||||
QInnerLoading,
|
||||
QSpinnerDots,
|
||||
QSpinnerMat,
|
||||
Dialog
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: this.getDefaultData(),
|
||||
enabled: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isRequesting() {
|
||||
return this.loading;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDefaultData() {
|
||||
return {
|
||||
name: '',
|
||||
extension: '',
|
||||
aliasNumbers: [],
|
||||
groups: []
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.enabled = false;
|
||||
},
|
||||
add() {
|
||||
this.enabled = true;
|
||||
this.form = this.getDefaultData();
|
||||
},
|
||||
save() {
|
||||
this.loading = true;
|
||||
this.$emit('save', {
|
||||
name: this.form.name,
|
||||
extension: this.form.extension,
|
||||
aliasNumbers: this.form.aliasNumbers,
|
||||
groups: this.form.groups
|
||||
});
|
||||
},
|
||||
succeeded() {
|
||||
this.loading = false;
|
||||
this.enabled = false;
|
||||
},
|
||||
failed() {
|
||||
this.loading = false;
|
||||
this.enabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import '../../../../src/themes/app.variables.styl';
|
||||
.csc-pbx-seat-add-form .q-card {
|
||||
position: relative;
|
||||
}
|
||||
.csc-pbx-seat-add-form .q-card .q-field:last-child {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="csc-pbx-seat-list">
|
||||
<q-card v-if="loading" flat>
|
||||
<q-card-actions align="center">
|
||||
<q-spinner-dots color="primary" :size="40"/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
<csc-pbx-seat v-for="seat in seats" :seat="seat" @remove="remove" :deleting="isDeleting(seat)"
|
||||
:alias-number-options="aliasNumberOptions" :group-options="groupOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
QCard,
|
||||
QCardActions,
|
||||
QSpinnerDots
|
||||
} from 'quasar-framework'
|
||||
import CscPbxSeat from './CscPbxSeat'
|
||||
|
||||
export default {
|
||||
name: 'csc-pbx-seat-list',
|
||||
components: {
|
||||
QCard,
|
||||
QCardActions,
|
||||
QSpinnerDots,
|
||||
CscPbxSeat
|
||||
},
|
||||
props: [
|
||||
'seats',
|
||||
'loading',
|
||||
'aliasNumberOptions',
|
||||
'groupOptions',
|
||||
'deletingSeat'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remove(seat) {
|
||||
this.$emit('remove', seat);
|
||||
},
|
||||
isDeleting(seat) {
|
||||
return this.deletingSeat !== null && seat.id === this.deletingSeat.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,35 @@
|
||||
'use strict';
|
||||
|
||||
import numberFilter from '../filters/number';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
aliasNumbers() {
|
||||
return this.$store.getters['pbxConfig/aliasNumbers'];
|
||||
},
|
||||
aliasNumberOptions() {
|
||||
let aliasNumber = [];
|
||||
this.aliasNumbers.forEach((number)=>{
|
||||
let owner = this.$t('pbxConfig.allocatedByNobody');
|
||||
if(number.subscriber !== null && number.subscriber.display_name !== null &&
|
||||
number.subscriber.is_pbx_group) {
|
||||
owner = this.$t('pbxConfig.allocatedBy', {
|
||||
type: this.$t('pbxConfig.group'),
|
||||
name: number.subscriber.display_name
|
||||
});
|
||||
} else if (number.subscriber !== null && number.subscriber.display_name !== null) {
|
||||
owner = this.$t('pbxConfig.allocatedBy', {
|
||||
type: this.$t('pbxConfig.seat'),
|
||||
name: number.subscriber.display_name
|
||||
});
|
||||
}
|
||||
aliasNumber.push({
|
||||
label: numberFilter(number),
|
||||
sublabel: owner,
|
||||
value: number.id
|
||||
});
|
||||
});
|
||||
return aliasNumber;
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Reference in new issue