What has been done: - TT#31802, CallForwarding: As a Customer, I want to see a list of AfterHours - TT#28061, CallForwarding: As a Customer, I want to add After Hours - TT#31804, CallForwarding: As a Customer, I want to remove After Hours Change-Id: I95c8c59eeed61f1c2efc5564125ccd2a74adc514changes/04/20004/7
raxelsen
7 years ago
parent
d04cbe3d1b
commit
5503be27a3
@ -1,32 +1,25 @@
|
||||
<template>
|
||||
<csc-page :title="$t('pages.callForward.titles.afterHours')">
|
||||
<csc-call-forward-destinations timeset="After Hours" :destinations="destinations">
|
||||
</csc-call-forward-destinations>
|
||||
<csc-call-forward-timeset timesetName="After Hours" />
|
||||
</csc-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import CscPage from '../../CscPage'
|
||||
import CscCallForwardDestinations from './CscCallForwardDestinations'
|
||||
import CscCallForwardTimeset from './CscCallForwardTimeset'
|
||||
export default {
|
||||
data () {
|
||||
return {}
|
||||
return {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CscPage,
|
||||
CscCallForwardDestinations
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('callForward/loadAfterHoursEverybodyDestinations');
|
||||
},
|
||||
computed: {
|
||||
...mapState('callForward', [
|
||||
'destinations'
|
||||
])
|
||||
CscCallForwardTimeset
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/quasar.variables.styl'
|
||||
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="showTimesAndDestinations">
|
||||
<csc-call-forward-times :times="timesetTimes" :timesetName="timesetName" ref="times"></csc-call-forward-times>
|
||||
<csc-call-forward-destinations :timeset="timesetName" :destinations="destinations" />
|
||||
</div>
|
||||
<q-card flat>
|
||||
<div v-if="timesetHasDuplicate">
|
||||
<q-alert color="red"
|
||||
v-model="showAlertDuplicate"
|
||||
icon="date_range"
|
||||
:actions="[{ label: labelReset, handler: resetTimeset }]"
|
||||
appear>
|
||||
{{ $t('pages.callForward.times.timesetDuplicate', { timeset: timesetName }) }}
|
||||
</q-alert>
|
||||
</div>
|
||||
<div v-else-if="!timesetIsCompatible">
|
||||
<q-alert color="red"
|
||||
v-model="showAlertCompatible"
|
||||
icon="date_range"
|
||||
:actions="[{ label: labelReset, handler: resetTimeset }]"
|
||||
appear>
|
||||
{{ $t('pages.callForward.times.timesetIncompatible', { timeset: timesetName }) }}
|
||||
</q-alert>
|
||||
</div>
|
||||
<div v-else-if="timesetHasReverse">
|
||||
<q-alert color="red"
|
||||
v-model="showAlertReverse"
|
||||
icon="date_range"
|
||||
:actions="[{ label: labelReset, handler: resetTimeset }]"
|
||||
appear>
|
||||
{{ $t('pages.callForward.times.timesetReverse', { timeset: timesetName }) }}
|
||||
</q-alert>
|
||||
</div>
|
||||
<div v-show="showDefinedAlert">
|
||||
<q-alert color="warning"
|
||||
v-model="showAlertDefined"
|
||||
icon="date_range"
|
||||
:actions="[{ label: labelAdd, handler: addTimeset }]"
|
||||
appear>
|
||||
{{ $t('pages.callForward.times.timesetNotDefined', { timeset: timesetName }) }}
|
||||
</q-alert>
|
||||
</div>
|
||||
<csc-add-time-form v-if="activeTimeForm" type="new" :title="getAddLabel" :timeset="timesetName" ref="addTimeNew"></csc-add-time-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import { startLoading, stopLoading,
|
||||
showGlobalError, showToast } from '../../../helpers/ui'
|
||||
import { QAlert, QCard } from 'quasar-framework'
|
||||
import CscCallForwardDestinations from './CscCallForwardDestinations'
|
||||
import CscCallForwardTimes from './CscCallForwardTimes'
|
||||
import CscAddTimeForm from './CscAddTimeForm'
|
||||
export default {
|
||||
name: 'csc-call-forward-timeset',
|
||||
props: [
|
||||
'timesetName'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
showAlertDuplicate: true,
|
||||
showAlertCompatible: true,
|
||||
showAlertReverse: true,
|
||||
showAlertDefined: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CscCallForwardDestinations,
|
||||
CscCallForwardTimes,
|
||||
CscAddTimeForm,
|
||||
QAlert,
|
||||
QCard
|
||||
},
|
||||
computed: {
|
||||
...mapState('callForward', [
|
||||
'destinations',
|
||||
'timesetTimes',
|
||||
'resetTimeState',
|
||||
'addTimeState',
|
||||
'timesetHasDuplicate',
|
||||
'timesetIsCompatible',
|
||||
'timesetHasReverse',
|
||||
'timesetExists',
|
||||
'activeTimeForm'
|
||||
]),
|
||||
...mapGetters('callForward', [
|
||||
'resetTimeError',
|
||||
'addTimeError',
|
||||
'showDefinedAlert'
|
||||
]),
|
||||
labelReset() {
|
||||
return this.$t('pages.callForward.times.resetTimeset', {
|
||||
timeset: this.timesetName
|
||||
});
|
||||
},
|
||||
labelAdd() {
|
||||
return this.$t('pages.callForward.times.addTimeset', {
|
||||
timeset: this.timesetName
|
||||
});
|
||||
},
|
||||
showTimesAndDestinations() {
|
||||
return this.timesetIsCompatible &&
|
||||
!this.timesetHasReverse &&
|
||||
!this.timesetHasDuplicate &&
|
||||
this.timesetExists;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetTimeset() {
|
||||
this.$store.dispatch('callForward/resetTimesetByName', this.timesetName);
|
||||
},
|
||||
addTimeset() {
|
||||
this.$store.commit('callForward/setActiveTimeForm', true);
|
||||
},
|
||||
loadDestinations() {
|
||||
this.$store.dispatch('callForward/loadEverybodyDestinations', {
|
||||
timeset: this.timesetName
|
||||
});
|
||||
},
|
||||
loadTimes() {
|
||||
this.$store.dispatch('callForward/loadTimesetTimes', {
|
||||
timeset: this.timesetName
|
||||
});
|
||||
this.resetAlerts();
|
||||
},
|
||||
loadAll() {
|
||||
this.$store.commit('callForward/resetTimesetState');
|
||||
this.loadTimes();
|
||||
this.loadDestinations();
|
||||
},
|
||||
resetAlerts() {
|
||||
this.showAlertDuplicate = true;
|
||||
this.showAlertCompatible = true;
|
||||
this.showAlertReverse = true;
|
||||
this.showAlertDefined = true;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route': {
|
||||
handler: 'loadAll',
|
||||
immediate: true
|
||||
},
|
||||
resetTimeState(state) {
|
||||
if (state === 'requesting') {
|
||||
startLoading();
|
||||
}
|
||||
else if (state === 'failed') {
|
||||
stopLoading();
|
||||
showGlobalError(this.resetTimeError);
|
||||
}
|
||||
else if (state === 'succeeded') {
|
||||
stopLoading();
|
||||
showToast(this.$t('pages.callForward.times.resetSuccessMessage'));
|
||||
this.loadTimes();
|
||||
}
|
||||
},
|
||||
addTimeState(state) {
|
||||
if (state === 'requesting') {
|
||||
this.$store.commit('callForward/setActiveTimeForm', true);
|
||||
startLoading();
|
||||
}
|
||||
else if (state === 'failed') {
|
||||
stopLoading();
|
||||
showGlobalError(this.addTimeError);
|
||||
}
|
||||
else if (state === 'succeeded') {
|
||||
this.$store.commit('callForward/setActiveTimeForm', false);
|
||||
stopLoading();
|
||||
if (this.$refs.times) {
|
||||
this.$refs.times.resetTimes();
|
||||
}
|
||||
else {
|
||||
this.$refs.addTimeNew.resetTimes();
|
||||
}
|
||||
this.loadTimes();
|
||||
this.loadDestinations();
|
||||
showToast(this.$t('pages.callForward.times.addTimeSuccessMessage'));
|
||||
}
|
||||
},
|
||||
activeTimeForm(state) {
|
||||
if (!state) {
|
||||
this.resetAlerts();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/quasar.variables.styl'
|
||||
|
||||
.times-card
|
||||
.q-alert-container
|
||||
padding 15px 0
|
||||
</style>
|
||||
Loading…
Reference in new issue