- Navigate to a separate page to manage manager secretary configurations - Create new configuration - Update existing configuration by adding and removing numbers - Remove existing configuration Change-Id: I61a7c6ea384cd58854f96fbe2c20f26a09feef6dchanges/09/32009/2
Hans-Peter Herzog
6 years ago
parent
fa5486e61f
commit
3b25cc26a3
@ -0,0 +1,95 @@
|
||||
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
addPreference,
|
||||
addPreferenceFull,
|
||||
getAllPreferences,
|
||||
getSubscriber,
|
||||
} from "./subscriber";
|
||||
|
||||
export function getMsConfigs() {
|
||||
return new Promise((resolve, reject)=>{
|
||||
Promise.resolve().then(()=>{
|
||||
return getAllPreferences({
|
||||
all: true
|
||||
});
|
||||
}).then((preferencesList)=>{
|
||||
resolve({
|
||||
items: _.get(preferencesList, 'items', []).filter((preferences)=>{
|
||||
return _.get(preferences, 'manager_secretary', false)
|
||||
})
|
||||
});
|
||||
}).catch((err)=>{
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function getMsConfigList() {
|
||||
return new Promise((resolve, reject)=>{
|
||||
let msConfigs = [];
|
||||
Promise.resolve().then(()=>{
|
||||
return getMsConfigs();
|
||||
}).then(($msConfigs)=>{
|
||||
msConfigs = $msConfigs;
|
||||
let subscriberPromises = [];
|
||||
msConfigs.items.forEach((msConfig)=>{
|
||||
subscriberPromises.push(getSubscriber(msConfig.id));
|
||||
});
|
||||
return Promise.all(subscriberPromises);
|
||||
}).then((subscribers)=>{
|
||||
resolve({
|
||||
subscribers: {
|
||||
items: subscribers
|
||||
},
|
||||
msConfigs: msConfigs
|
||||
});
|
||||
}).catch((err)=>{
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function createMsConfig(options) {
|
||||
return new Promise((resolve, reject)=>{
|
||||
Promise.resolve().then(()=>{
|
||||
return Promise.all([
|
||||
addPreference(options.subscriberId, 'manager_secretary', true),
|
||||
addPreference(options.subscriberId, 'secretary_numbers', options.secretaryNumbers)
|
||||
]);
|
||||
}).then(()=>{
|
||||
resolve();
|
||||
}).catch((err)=>{
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function removeMsConfig(subscriberId) {
|
||||
return new Promise((resolve, reject)=>{
|
||||
Promise.resolve().then(()=>{
|
||||
return Promise.all([
|
||||
addPreference(subscriberId, 'manager_secretary', false),
|
||||
addPreference(subscriberId, 'secretary_numbers', [])
|
||||
]);
|
||||
}).then(()=>{
|
||||
resolve();
|
||||
}).catch((err)=>{
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function setSecretaryNumber(options) {
|
||||
return new Promise((resolve, reject)=>{
|
||||
let numbers = _.get(options, 'secretaryNumbers', []);
|
||||
Promise.resolve().then(()=>{
|
||||
return addPreferenceFull(options.msConfigId, 'secretary_numbers', numbers);
|
||||
}).then((prefs)=>{
|
||||
resolve(prefs);
|
||||
}).catch((err)=>{
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<csc-list-item
|
||||
ref="listItem"
|
||||
icon="arrow_forward"
|
||||
:odd="odd"
|
||||
:loading="loading"
|
||||
:expanded="expanded"
|
||||
@toggle="toggle"
|
||||
>
|
||||
<template
|
||||
slot="title"
|
||||
>
|
||||
<csc-list-item-title
|
||||
:icon="getTitleIcon"
|
||||
>
|
||||
{{ subscriber | displayName }}
|
||||
</csc-list-item-title>
|
||||
<q-slide-transition>
|
||||
<csc-list-item-subtitle
|
||||
v-if="!expanded"
|
||||
>
|
||||
<template
|
||||
v-if="currentSecretaryNumbers.length > 0"
|
||||
>
|
||||
{{ $t('pbxConfig.msConfigNumbersLabel')}}:
|
||||
<span
|
||||
v-for="number in currentSecretaryNumbers"
|
||||
:key="number"
|
||||
class="csc-list-item-title-keyword"
|
||||
>
|
||||
<q-icon
|
||||
name="call"
|
||||
size="16px"
|
||||
/>
|
||||
{{ number }}
|
||||
</span>
|
||||
</template>
|
||||
<template
|
||||
v-else
|
||||
>
|
||||
<span
|
||||
>
|
||||
<q-icon
|
||||
name="info"
|
||||
color="info"
|
||||
size="24px"
|
||||
/>
|
||||
{{ $t('pbxConfig.msConfigNoSecretaryNumbers') }}
|
||||
</span>
|
||||
</template>
|
||||
</csc-list-item-subtitle>
|
||||
</q-slide-transition>
|
||||
</template>
|
||||
<template slot="menu">
|
||||
<csc-list-menu-item
|
||||
icon="delete"
|
||||
icon-color="negative"
|
||||
@click="remove"
|
||||
>
|
||||
{{ $t('buttons.remove') }}
|
||||
</csc-list-menu-item>
|
||||
</template>
|
||||
<template
|
||||
slot="body"
|
||||
>
|
||||
<q-field
|
||||
:label="$t('pbxConfig.msConfigNumbersLabel')"
|
||||
>
|
||||
<q-select
|
||||
dark
|
||||
multiple
|
||||
chips
|
||||
v-model="changes.secretaryNumbers"
|
||||
:disable="loading || numberOptionsLoading"
|
||||
:readonly="loading"
|
||||
:float-label="$t('pbxConfig.msConfigNumberSelectionLabel')"
|
||||
:options="numberOptions"
|
||||
/>
|
||||
<csc-fade>
|
||||
<csc-form-save-button
|
||||
v-if="hasSecretaryNumbersChanged"
|
||||
@click="saveSecretaryNumbers"
|
||||
/>
|
||||
</csc-fade>
|
||||
<csc-fade>
|
||||
<csc-form-reset-button
|
||||
v-if="hasSecretaryNumbersChanged"
|
||||
@click="resetSecretaryNumbers"
|
||||
/>
|
||||
</csc-fade>
|
||||
</q-field>
|
||||
</template>
|
||||
</csc-list-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
QSlideTransition,
|
||||
QField,
|
||||
QInput,
|
||||
QIcon,
|
||||
QSelect
|
||||
} from 'quasar-framework'
|
||||
import CscFade from "../../transitions/CscFade";
|
||||
import CscObjectSpinner from "../../CscObjectSpinner";
|
||||
import CscListItem from "../../CscListItem";
|
||||
import CscListItemTitle from "../../CscListItemTitle";
|
||||
import CscListItemSubtitle from "../../CscListItemSubtitle";
|
||||
import CscListMenuItem from "../../CscListMenuItem";
|
||||
import CscFormSaveButton from "../../form/CscFormSaveButton";
|
||||
import CscFormResetButton from "../../form/CscFormResetButton";
|
||||
export default {
|
||||
name: 'csc-pbx-call-queue',
|
||||
props: [
|
||||
'odd',
|
||||
'expanded',
|
||||
'msConfig',
|
||||
'subscriber',
|
||||
'loading',
|
||||
'numberOptions',
|
||||
'numberOptionsLoading'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
changes: this.getDefaultData()
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CscFormResetButton,
|
||||
CscFormSaveButton,
|
||||
CscListItem,
|
||||
CscListItemTitle,
|
||||
CscListItemSubtitle,
|
||||
CscObjectSpinner,
|
||||
CscListMenuItem,
|
||||
QSlideTransition,
|
||||
QField,
|
||||
QInput,
|
||||
CscFade,
|
||||
QIcon,
|
||||
QSelect
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('ready');
|
||||
},
|
||||
validations: {
|
||||
changes: {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTitleIcon() {
|
||||
let icon = 'person';
|
||||
if(this.subscriber.is_pbx_group) {
|
||||
icon = 'group';
|
||||
}
|
||||
else if (this.subscriber.is_pbx_pilot) {
|
||||
icon = 'person_outline';
|
||||
}
|
||||
return icon;
|
||||
},
|
||||
hasSecretaryNumbersChanged() {
|
||||
let changedSecretaryNumbers = _.get(this.changes, 'secretaryNumbers', []).sort();
|
||||
let currentSecretaryNumbers = this.currentSecretaryNumbers.sort();
|
||||
return !_.isEqual(changedSecretaryNumbers, currentSecretaryNumbers);
|
||||
},
|
||||
currentSecretaryNumbers() {
|
||||
return _.get(this.msConfig, 'secretary_numbers', []);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remove() {
|
||||
if(this.$refs.listItem) {
|
||||
this.$refs.listItem.closePopoverMenu();
|
||||
}
|
||||
this.$emit('remove', this.msConfig.id);
|
||||
},
|
||||
toggle() {
|
||||
if(this.expanded) {
|
||||
this.$emit('collapse');
|
||||
}
|
||||
else {
|
||||
this.$emit('expand');
|
||||
}
|
||||
},
|
||||
getDefaultData() {
|
||||
return {
|
||||
secretaryNumbers: _.clone(_.get(this.msConfig, 'secretary_numbers', []))
|
||||
}
|
||||
},
|
||||
resetSecretaryNumbers() {
|
||||
this.changes.secretaryNumbers = this.getDefaultData().secretaryNumbers;
|
||||
},
|
||||
saveSecretaryNumbers() {
|
||||
if(this.hasSecretaryNumbersChanged) {
|
||||
this.$emit('save-secretary-numbers', {
|
||||
msConfigId: this.msConfig.id,
|
||||
secretaryNumbers: this.changes.secretaryNumbers
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
msConfig() {
|
||||
this.changes = this.getDefaultData();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/quasar.variables';
|
||||
</style>
|
||||
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div
|
||||
class="csc-form csc-pbx-ms-config-add-form"
|
||||
>
|
||||
<q-field>
|
||||
<q-select
|
||||
dark
|
||||
v-model="data.subscriberId"
|
||||
:disable="loading || subscriberOptionsLoading"
|
||||
:readonly="loading"
|
||||
:stack-label="$t('pbxConfig.msConfigSubscriberSelectionLabel')"
|
||||
:options="subscriberOptions"
|
||||
/>
|
||||
</q-field>
|
||||
<q-field>
|
||||
<q-select
|
||||
dark
|
||||
multiple
|
||||
chips
|
||||
clearable
|
||||
v-model="data.secretaryNumbers"
|
||||
:disable="loading || numberOptionsLoading"
|
||||
:readonly="loading"
|
||||
:float-label="$t('pbxConfig.msConfigNumberSelectionLabel')"
|
||||
:options="numberOptions"
|
||||
/>
|
||||
</q-field>
|
||||
<!--<q-field-->
|
||||
<!--:error-label="maxQueueLengthErrorMessage"-->
|
||||
<!-->-->
|
||||
<!--<q-input-->
|
||||
<!--dark-->
|
||||
<!--v-model="data.max_queue_length"-->
|
||||
<!--:error="$v.data.max_queue_length.$error"-->
|
||||
<!--:disable="loading"-->
|
||||
<!--:readonly="loading"-->
|
||||
<!--:float-label="$t('pbxConfig.queueLength')"-->
|
||||
<!--default="3"-->
|
||||
<!--@input="$v.data.max_queue_length.$touch"-->
|
||||
<!--/>-->
|
||||
<!--</q-field>-->
|
||||
<!--<q-field-->
|
||||
<!--:error-label="wrapUpTimeErrorMessage"-->
|
||||
<!-->-->
|
||||
<!--<q-input-->
|
||||
<!--dark-->
|
||||
<!--v-model="data.queue_wrap_up_time"-->
|
||||
<!--:error="$v.data.queue_wrap_up_time.$error"-->
|
||||
<!--:disable="loading"-->
|
||||
<!--:readonly="loading"-->
|
||||
<!--:float-label="$t('pbxConfig.wrapUpTime')"-->
|
||||
<!--:suffix="$t('pbxConfig.seconds')"-->
|
||||
<!--@input="$v.data.queue_wrap_up_time.$touch"-->
|
||||
<!--/>-->
|
||||
<!--</q-field>-->
|
||||
<div
|
||||
class="csc-form-actions row justify-center"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
v-if="!loading"
|
||||
color="default"
|
||||
icon="clear"
|
||||
@click="cancel()"
|
||||
>
|
||||
{{ $t('buttons.cancel') }}
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
v-if="!loading"
|
||||
:disable="$v.data.$invalid || !this.secretaryNumbersIsValid"
|
||||
color="primary"
|
||||
icon="arrow_forward"
|
||||
@click="save()"
|
||||
>
|
||||
{{ $t('pbxConfig.msConfigCreationLabel') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
<csc-object-spinner
|
||||
v-if="loading"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
required,
|
||||
// maxValue,
|
||||
// minValue,
|
||||
// numeric
|
||||
} from 'vuelidate/lib/validators'
|
||||
import {
|
||||
QCard,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QCardSeparator,
|
||||
QBtn,
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QField,
|
||||
QInput,
|
||||
QSelect,
|
||||
QIcon
|
||||
} from 'quasar-framework'
|
||||
import CscObjectSpinner from "../../CscObjectSpinner"
|
||||
export default {
|
||||
name: 'csc-pbx-ms-config-add-form',
|
||||
props: [
|
||||
'loading',
|
||||
'subscriberOptions',
|
||||
'subscriberOptionsLoading',
|
||||
'numberOptions',
|
||||
'numberOptionsLoading'
|
||||
],
|
||||
components: {
|
||||
CscObjectSpinner,
|
||||
QCard,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QCardSeparator,
|
||||
QBtn,
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QField,
|
||||
QInput,
|
||||
QSelect,
|
||||
QIcon
|
||||
},
|
||||
validations: {
|
||||
data: {
|
||||
subscriberId: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: this.getDefaults()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$emit('ready');
|
||||
},
|
||||
computed: {
|
||||
// maxQueueLengthErrorMessage() {
|
||||
// if (!this.$v.data.max_queue_length.numeric) {
|
||||
// return this.$t('validationErrors.numeric', {
|
||||
// field: this.$t('pbxConfig.queueLength'),
|
||||
// });
|
||||
// }
|
||||
// else if (!this.$v.data.max_queue_length.minValue) {
|
||||
// return this.$t('validationErrors.minValueSecond', {
|
||||
// field: this.$t('pbxConfig.queueLength'),
|
||||
// minValue: this.$v.data.max_queue_length.$params.minValue.min
|
||||
// });
|
||||
// }
|
||||
// else if (!this.$v.data.max_queue_length.maxValue) {
|
||||
// return this.$t('validationErrors.maxValueSecond', {
|
||||
// field: this.$t('pbxConfig.queueLength'),
|
||||
// maxValue: this.$v.data.max_queue_length.$params.maxValue.max
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// wrapUpTimeErrorMessage() {
|
||||
// if (!this.$v.data.queue_wrap_up_time.numeric) {
|
||||
// return this.$t('validationErrors.numeric', {
|
||||
// field: this.$t('pbxConfig.wrapUpTime'),
|
||||
// });
|
||||
// }
|
||||
// else if (!this.$v.data.queue_wrap_up_time.minValue) {
|
||||
// return this.$t('validationErrors.minValueSecond', {
|
||||
// field: this.$t('pbxConfig.wrapUpTime'),
|
||||
// minValue: this.$v.data.queue_wrap_up_time.$params.minValue.min
|
||||
// });
|
||||
// }
|
||||
// else if (!this.$v.data.queue_wrap_up_time.maxValue) {
|
||||
// return this.$t('validationErrors.maxValueSecond', {
|
||||
// field: this.$t('pbxConfig.wrapUpTime'),
|
||||
// maxValue: this.$v.data.queue_wrap_up_time.$params.maxValue.max
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
secretaryNumbersIsValid() {
|
||||
return _.get(this.data, 'secretaryNumbers.length', 0) > 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDefaults() {
|
||||
return {
|
||||
subscriberId: null,
|
||||
secretaryNumbers: []
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('cancel');
|
||||
},
|
||||
save() {
|
||||
this.$emit('submit', this.data);
|
||||
},
|
||||
reset() {
|
||||
this.data = this.getDefaults();
|
||||
this.$v.$reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/app.common.styl';
|
||||
</style>
|
||||
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<csc-page
|
||||
:is-list="true"
|
||||
>
|
||||
<csc-list-actions>
|
||||
<csc-list-action-button
|
||||
v-if="!isMsConfigAddFormEnabled"
|
||||
slot="slot1"
|
||||
icon="add"
|
||||
color="primary"
|
||||
:label="$t('pbxConfig.msConfigCreationIndicationLabel')"
|
||||
@click="enableMsConfigAddForm"
|
||||
/>
|
||||
</csc-list-actions>
|
||||
<q-slide-transition>
|
||||
<div
|
||||
v-if="isMsConfigAddFormEnabled"
|
||||
class="row justify-center"
|
||||
>
|
||||
<csc-pbx-ms-config-add-form
|
||||
class="csc-list-form col-xs-12 col-md-6"
|
||||
:loading="isMsConfigCreating"
|
||||
:subscriber-options="getSubscriberOptions"
|
||||
:subscriber-options-loading="isSubscribersRequesting"
|
||||
:number-options="getFullNumberOptions"
|
||||
:numbers-options-loading="isNumbersRequesting"
|
||||
@cancel="disableMsConfigAddForm"
|
||||
@submit="createMsConfig"
|
||||
@ready="addFormReady"
|
||||
/>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
<csc-list-spinner
|
||||
v-if="isMsConfigListRequesting && !msConfigListVisible"
|
||||
/>
|
||||
<csc-list
|
||||
v-if="!isMsConfigListRequesting || msConfigListVisible"
|
||||
>
|
||||
<csc-fade
|
||||
v-for="(msConfig, index) in msConfigList"
|
||||
:key="'csc-fade-'+msConfig.id"
|
||||
>
|
||||
<csc-pbx-ms-config
|
||||
:key="msConfig.id"
|
||||
:odd="(index % 2) === 0"
|
||||
:loading="isMsConfigLoading(msConfig.id)"
|
||||
:expanded="isMsConfigExpanded(msConfig.id)"
|
||||
:msConfig="msConfig"
|
||||
:subscriber="subscriberMap[msConfig.id]"
|
||||
:number-options="getFullNumberOptions"
|
||||
:numbers-options-loading="isNumbersRequesting"
|
||||
@remove="openMsConfigRemovalDialog"
|
||||
@expand="expandMsConfig(msConfig.id)"
|
||||
@collapse="collapseMsConfig"
|
||||
@ready="addFormReady"
|
||||
@save-secretary-numbers="setSecretaryNumbers"
|
||||
/>
|
||||
</csc-fade>
|
||||
</csc-list>
|
||||
<csc-remove-dialog
|
||||
ref="removeDialog"
|
||||
:title="$t('pbxConfig.msConfigRemovalDialogTitle')"
|
||||
:message="getMsConfigRemoveDialogMessage"
|
||||
@remove="removeMsConfig"
|
||||
@cancel="closeMsConfigRemovalDialog"
|
||||
/>
|
||||
</csc-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscPage from '../../CscPage'
|
||||
import CscPbxMsConfig from './CscPbxMsConfig'
|
||||
import CscPbxMsConfigAddForm from './CscPbxMsConfigAddForm'
|
||||
import CscRemoveDialog from '../../CscRemoveDialog'
|
||||
import CscListSpinner from '../../CscListSpinner'
|
||||
import CscListActions from '../../CscListActions'
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapGetters,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
// import {
|
||||
// CreationState,
|
||||
// RequestState
|
||||
// } from "../../../store/common"
|
||||
// import {
|
||||
// showGlobalError,
|
||||
// showToast
|
||||
// } from '../../../helpers/ui'
|
||||
import {
|
||||
QField,
|
||||
QInput,
|
||||
QIcon,
|
||||
QSelect,
|
||||
QChip,
|
||||
QList,
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QSpinnerDots,
|
||||
QBtn,
|
||||
QSlideTransition
|
||||
} from 'quasar-framework'
|
||||
import CscSpinner from "../../CscSpinner";
|
||||
import CscList from "../../CscList";
|
||||
import CscFade from "../../transitions/CscFade";
|
||||
import CscListActionButton from "../../CscListActionButton";
|
||||
export default {
|
||||
components: {
|
||||
CscListActionButton,
|
||||
CscFade,
|
||||
CscList,
|
||||
CscSpinner,
|
||||
CscPage,
|
||||
CscPbxMsConfig,
|
||||
CscPbxMsConfigAddForm,
|
||||
CscRemoveDialog,
|
||||
QField,
|
||||
QInput,
|
||||
QIcon,
|
||||
QSelect,
|
||||
QChip,
|
||||
QList,
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QSpinnerDots,
|
||||
QBtn,
|
||||
QSlideTransition,
|
||||
CscListSpinner,
|
||||
CscListActions
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadMsConfigList();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('pbx', [
|
||||
'isSubscribersRequesting',
|
||||
'getSubscriberOptions',
|
||||
'isNumbersRequesting',
|
||||
'getFullNumberOptions'
|
||||
]),
|
||||
...mapState('pbxMsConfigs', [
|
||||
'msConfigList',
|
||||
'msConfigListVisible',
|
||||
'subscriberMap',
|
||||
'msConfigCreationState',
|
||||
'msConfigUpdateState',
|
||||
'msConfigRemovalState',
|
||||
'msConfigCreationError',
|
||||
'msConfigUpdateError',
|
||||
'msConfigRemovalError'
|
||||
]),
|
||||
...mapGetters('pbxMsConfigs', [
|
||||
'isMsConfigListRequesting',
|
||||
'isMsConfigAddFormEnabled',
|
||||
'isMsConfigCreating',
|
||||
'getMsConfigRemoveDialogMessage',
|
||||
'isMsConfigLoading',
|
||||
'isMsConfigExpanded',
|
||||
'getMsConfigCreationToastMessage',
|
||||
'getMsConfigUpdateToastMessage',
|
||||
'getMsConfigRemovalToastMessage'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('pbx', [
|
||||
'loadSubscribers',
|
||||
'loadNumbers'
|
||||
]),
|
||||
...mapMutations('pbxMsConfigs', [
|
||||
'enableMsConfigAddForm',
|
||||
'disableMsConfigAddForm',
|
||||
'msConfigRemovalRequesting',
|
||||
'msConfigRemovalCanceled',
|
||||
'expandMsConfig',
|
||||
'collapseMsConfig'
|
||||
]),
|
||||
...mapActions('pbxMsConfigs', [
|
||||
'loadMsConfigList',
|
||||
'createMsConfig',
|
||||
'removeMsConfig',
|
||||
'setSecretaryNumbers'
|
||||
]),
|
||||
openMsConfigRemovalDialog(msConfigId) {
|
||||
if(this.$refs.removeDialog) {
|
||||
this.$refs.removeDialog.open();
|
||||
}
|
||||
this.msConfigRemovalRequesting(msConfigId);
|
||||
},
|
||||
closeMsConfigRemovalDialog() {
|
||||
if(this.$refs.removeDialog) {
|
||||
this.$refs.removeDialog.close();
|
||||
}
|
||||
this.msConfigRemovalCanceled();
|
||||
},
|
||||
addFormReady() {
|
||||
this.loadSubscribers();
|
||||
this.loadNumbers();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// msConfigCreationState(state) {
|
||||
// if(state === CreationState.created) {
|
||||
// this.$scrollTo(this.$parent.$el);
|
||||
// showToast(this.getMsConfigCreationToastMessage);
|
||||
// }
|
||||
// else if(state === CreationState.error) {
|
||||
// showGlobalError(this.msConfigCreationError);
|
||||
// }
|
||||
// },
|
||||
// msConfigUpdateState(state) {
|
||||
// if(state === RequestState.succeeded) {
|
||||
// showToast(this.getMsConfigUpdateToastMessage);
|
||||
// }
|
||||
// else if(state === RequestState.failed) {
|
||||
// showGlobalError(this.msConfigUpdateError);
|
||||
// }
|
||||
// },
|
||||
// msConfigRemovalState(state) {
|
||||
// if(state === RequestState.succeeded) {
|
||||
// this.$scrollTo(this.$parent.$el);
|
||||
// showToast(this.getMsConfigRemovalToastMessage);
|
||||
// }
|
||||
// else if(state === RequestState.failed) {
|
||||
// showGlobalError(this.msConfigRemovalError);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/quasar.variables.styl';
|
||||
</style>
|
||||
@ -0,0 +1,269 @@
|
||||
'use strict';
|
||||
|
||||
import {
|
||||
router
|
||||
} from '../router'
|
||||
import Vue from 'vue'
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
CreationState,
|
||||
RequestState
|
||||
} from "./common";
|
||||
import {
|
||||
getMsConfigList,
|
||||
createMsConfig,
|
||||
removeMsConfig,
|
||||
setSecretaryNumber
|
||||
} from "../api/pbx-ms-configs";
|
||||
import {
|
||||
i18n
|
||||
} from "../i18n";
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
msConfigListState: RequestState.initiated,
|
||||
msConfigListVisible: true,
|
||||
msConfigList: [],
|
||||
msConfigMap: {},
|
||||
msConfigSelected: null,
|
||||
msConfigCreationState: CreationState.initiated,
|
||||
msConfigCreationData: null,
|
||||
msConfigCreationError: null,
|
||||
msConfigUpdateState: RequestState.initiated,
|
||||
msConfigUpdating: null,
|
||||
msConfigUpdatingField: null,
|
||||
msConfigUpdateError: null,
|
||||
msConfigRemovalState: RequestState.initiated,
|
||||
msConfigRemoving: null,
|
||||
msConfigRemovalError: null,
|
||||
subscriberMap: {}
|
||||
},
|
||||
getters: {
|
||||
isMsConfigListRequesting(state) {
|
||||
return state.msConfigListState === RequestState.requesting;
|
||||
},
|
||||
isMsConfigAddFormEnabled(state) {
|
||||
return state.msConfigCreationState !== CreationState.initiated &&
|
||||
state.msConfigCreationState !== CreationState.created;
|
||||
},
|
||||
isMsConfigCreating(state) {
|
||||
return state.msConfigCreationState === CreationState.creating;
|
||||
},
|
||||
isMsConfigUpdating(state) {
|
||||
return state.msConfigUpdateState === RequestState.requesting;
|
||||
},
|
||||
isMsConfigRemoving(state) {
|
||||
return state.msConfigRemoving === RequestState.requesting;
|
||||
},
|
||||
isMsConfigLoading(state) {
|
||||
return (id)=>{
|
||||
return (state.msConfigRemovalState === RequestState.requesting &&
|
||||
state.msConfigRemoving !== null && state.msConfigRemoving.id === id) ||
|
||||
(state.msConfigUpdateState === RequestState.requesting &&
|
||||
state.msConfigUpdating !== null && state.msConfigUpdating.id === id);
|
||||
};
|
||||
},
|
||||
isMsConfigExpanded(state) {
|
||||
return (id)=>{
|
||||
return state.msConfigSelected !== null && state.msConfigSelected.id === id;
|
||||
};
|
||||
},
|
||||
getMsConfigRemoveDialogMessage(state) {
|
||||
if(state.msConfigRemoving !== null) {
|
||||
return i18n.t('pbxConfig.msConfigRemovalDialogText', {
|
||||
msConfig: state.subscriberMap[state.msConfigRemoving.id].display_name
|
||||
});
|
||||
}
|
||||
return '';
|
||||
},
|
||||
getMsConfigRemovingName(state) {
|
||||
let subscriber = _.get(state.subscriberMap, _.get(state.msConfigRemoving, 'id', null), null);
|
||||
return _.get(subscriber, 'display_name', '');
|
||||
},
|
||||
getMsConfigCreatingName(state) {
|
||||
let subscriber = _.get(state.subscriberMap, _.get(state.msConfigCreationData, 'subscriberId', null), null);
|
||||
return _.get(subscriber, 'display_name', '');
|
||||
},
|
||||
getMsConfigUpdatingName(state) {
|
||||
let subscriber = _.get(state.subscriberMap, _.get(state.msConfigUpdating, 'id', null), null);
|
||||
return _.get(subscriber, 'display_name', '');
|
||||
},
|
||||
getMsConfigUpdatingField(state) {
|
||||
return state.msConfigUpdatingField;
|
||||
},
|
||||
getMsConfigRemovalDialogMessage(state, getters) {
|
||||
if(getters.isMsConfigRemoving) {
|
||||
return i18n.t('pbxConfig.msConfigRemovalDialogMessage', {
|
||||
msConfig: getters.getMsConfigRemovingName
|
||||
});
|
||||
}
|
||||
return '';
|
||||
},
|
||||
getMsConfigCreationToastMessage(state, getters) {
|
||||
return i18n.t('pbxConfig.msConfigCreationToast', {
|
||||
msConfig: getters.getMsConfigCreatingName
|
||||
});
|
||||
},
|
||||
getMsConfigUpdateToastMessage(state, getters) {
|
||||
return i18n.t('pbxConfig.msConfigUpdateToast', {
|
||||
msConfig: getters.getMsConfigUpdatingName,
|
||||
field: getters.getMsConfigUpdatingField
|
||||
});
|
||||
},
|
||||
getMsConfigRemovalToastMessage(state, getters) {
|
||||
return i18n.t('pbxConfig.msConfigRemovalToast', {
|
||||
msConfig: getters.getMsConfigRemovingName
|
||||
});
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
msConfigListRequesting(state, options) {
|
||||
state.msConfigListState = RequestState.requesting;
|
||||
if(!options.listVisible) {
|
||||
state.msConfigList = [];
|
||||
state.msConfigMap = {};
|
||||
state.msConfigListVisible = false;
|
||||
}
|
||||
else {
|
||||
state.msConfigListVisible = true;
|
||||
}
|
||||
},
|
||||
msConfigListSucceeded(state, msConfigList) {
|
||||
state.msConfigListState = RequestState.succeeded;
|
||||
state.msConfigList = _.get(msConfigList, 'msConfigs.items', []);
|
||||
state.msConfigList.forEach((msConfig) => {
|
||||
Vue.set(state.msConfigMap, msConfig.id, msConfig);
|
||||
});
|
||||
_.get(msConfigList, 'subscribers.items', []).forEach((subscriber) => {
|
||||
Vue.set(state.subscriberMap, subscriber.id, subscriber);
|
||||
});
|
||||
state.msConfigListVisible = true;
|
||||
},
|
||||
msConfigCreationRequesting(state, data) {
|
||||
state.msConfigCreationState = CreationState.creating;
|
||||
state.msConfigCreationData = data;
|
||||
},
|
||||
msConfigCreationSucceeded(state) {
|
||||
state.msConfigCreationState = CreationState.created;
|
||||
},
|
||||
msConfigCreationFailed(state, err) {
|
||||
state.msConfigCreationState = CreationState.error;
|
||||
state.msConfigCreationError = err;
|
||||
},
|
||||
msConfigRemovalRequesting(state, msConfigId) {
|
||||
state.msConfigRemovalState = RequestState.requesting;
|
||||
if(msConfigId) {
|
||||
state.msConfigRemoving = state.msConfigMap[msConfigId];
|
||||
}
|
||||
},
|
||||
msConfigRemovalCanceled(state) {
|
||||
state.msConfigRemovalState = RequestState.initiated;
|
||||
state.msConfigRemoving = null;
|
||||
},
|
||||
msConfigRemovalSucceeded(state) {
|
||||
state.msConfigRemovalState = RequestState.succeeded;
|
||||
},
|
||||
msConfigRemovalFailed(state, err) {
|
||||
state.msConfigRemovalState = RequestState.failed;
|
||||
state.msConfigRemovalError = err;
|
||||
},
|
||||
msConfigUpdateRequesting(state, options) {
|
||||
state.msConfigUpdateState = RequestState.requesting;
|
||||
state.msConfigUpdating = state.msConfigMap[options.msConfigId];
|
||||
state.msConfigUpdatingField = options.field;
|
||||
},
|
||||
msConfigUpdateSucceeded(state, preferences) {
|
||||
state.msConfigUpdateState = RequestState.succeeded;
|
||||
if(preferences) {
|
||||
for(let i = 0; i < state.msConfigList.length; i++) {
|
||||
if(state.msConfigList[i].id === preferences.id) {
|
||||
state.msConfigList[i] = preferences;
|
||||
}
|
||||
}
|
||||
Vue.delete(state.msConfigMap, preferences.id);
|
||||
Vue.set(state.msConfigMap, preferences.id, preferences);
|
||||
}
|
||||
},
|
||||
msConfigUpdateFailed(state, err) {
|
||||
state.msConfigUpdateState = RequestState.failed;
|
||||
state.msConfigUpdateError = err;
|
||||
},
|
||||
enableMsConfigAddForm(state) {
|
||||
state.msConfigCreationState = CreationState.input;
|
||||
},
|
||||
disableMsConfigAddForm(state) {
|
||||
state.msConfigCreationState = CreationState.initiated;
|
||||
},
|
||||
expandMsConfig(state, msConfigId) {
|
||||
state.msConfigSelected = state.msConfigMap[msConfigId];
|
||||
},
|
||||
collapseMsConfig(state) {
|
||||
state.msConfigSelected = null;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
loadMsConfigList(context, options) {
|
||||
return new Promise((resolve)=>{
|
||||
let listVisible = _.get(options, 'listVisible', false);
|
||||
let selectedId = _.get(options, 'selectedId', null);
|
||||
context.commit('msConfigListRequesting', {
|
||||
listVisible: listVisible
|
||||
});
|
||||
getMsConfigList().then((msConfigList)=>{
|
||||
context.commit('msConfigListSucceeded', msConfigList);
|
||||
if(selectedId !== null) {
|
||||
context.commit('expandMsConfig', msConfigList);
|
||||
context.commit('highlightMsConfig', msConfigList);
|
||||
}
|
||||
resolve();
|
||||
}).catch(()=>{
|
||||
resolve();
|
||||
context.commit('msConfigListSucceeded');
|
||||
});
|
||||
});
|
||||
},
|
||||
createMsConfig(context, msConfigData) {
|
||||
context.commit('msConfigCreationRequesting', msConfigData);
|
||||
createMsConfig(msConfigData).then(()=>{
|
||||
return context.dispatch('loadMsConfigList',{
|
||||
listVisible: true
|
||||
});
|
||||
}).then(()=>{
|
||||
context.commit('msConfigCreationSucceeded');
|
||||
}).catch((err)=>{
|
||||
console.debug(err);
|
||||
context.commit('msConfigCreationFailed', err.message);
|
||||
});
|
||||
},
|
||||
removeMsConfig(context) {
|
||||
context.commit('msConfigRemovalRequesting');
|
||||
removeMsConfig(context.state.msConfigRemoving.id).then(()=>{
|
||||
return context.dispatch('loadMsConfigList',{
|
||||
listVisible: true
|
||||
});
|
||||
}).then(()=>{
|
||||
context.commit('msConfigRemovalSucceeded');
|
||||
}).catch((err)=>{
|
||||
console.debug(err);
|
||||
context.commit('msConfigRemovalFailed', err.message);
|
||||
});
|
||||
},
|
||||
setSecretaryNumbers(context, options) {
|
||||
context.commit('msConfigUpdateRequesting', {
|
||||
msConfigId: options.msConfigId,
|
||||
field: i18n.t('pbxConfig.msConfigNumbersLabel')
|
||||
});
|
||||
setSecretaryNumber(options).then((preferences)=>{
|
||||
context.commit('msConfigUpdateSucceeded', preferences);
|
||||
}).catch((err)=>{
|
||||
console.debug(err);
|
||||
context.commit('msConfigUpdateFailed', err.message);
|
||||
});
|
||||
},
|
||||
jumpToMsConfig(context, subscriber) {
|
||||
router.push({path: '/user/pbx-configuration/ms-configs'});
|
||||
context.commit('expandMsConfig', subscriber.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Reference in new issue