sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#79302 CF on/off the basic call forward sequence switcher

Browse Source 
Change-Id: I7e614ba765d77b67487cfd72d272afb9d8da1b62
changes/91/39191/5
Carlo Venusino 5 years ago
parent 6acc93e7cd
commit 477ddfcd50
7 changed files with 228 additions and 74 deletions
Show Stats Download Patch File Download Diff File

120
src/components/pages/NewCallForward/CscCallForwardGroup.vue
Unescape View File

@ -3,16 +3,20 @@
class="csc-cf-group"
v-if="group.destinations.length > 0"
>
<!-- <csc-object-spinner
/> -->
<div
v-if="group.id !== 'unconditional'"
class="csc-cf-group-title"
class="row csc-cf-destination-cont"
>
{{ group.title }}
<div class="col col-xs-12 col-md-4 text-right csc-cf-group-title">
{{ groupTitle }}
</div>
<div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
<q-toggle
v-model="isEnabled"
@change="toggleGroupChange"
/>
</div>
<div class="col col-xs-12 col-md-5 "></div>
</div>
<div
v-for="(destination, index) in group.destinations"
:key="genKey()"
@ -23,6 +27,8 @@
:groupId="group.id"
:groupName="group.name"
:allCallsFwd="group.name == 'csc-unconditional' && index === 0"
:class="{ 'cf-destination-disabled': !isEnabled }"
/>
</div>
<div
@ -32,16 +38,17 @@
<div
class="col col-xs-12 col-md-2 text-left"
v-if="showAddDestBtn"
:class="{ 'cf-destination-disabled': !isEnabled }"
>
<div
class='csc-cf-destination-add-destination'
@click="addDestination"
>
<q-icon
name="add"
color="primary"
size="24px"
/>
{{ $t('pages.newCallForward.addDestinationLabel') }}
<q-spinner-dots
@ -52,6 +59,28 @@
/>
</div>
<q-popover
ref="destTypeForm"
anchor="top right"
@open="showDestTypeForm()"
@close="showNumberFormPopover()"
>
<csc-new-call-forward-destination-type-form
ref="selectDestinationType"
/>
</q-popover>
<q-popover
ref="numberForm"
anchor="top right"
class="csc-cf-number-form"
v-bind:class="{ 'csc-cf-popover-hide': toggleNumberForm }"
@open="showNewDestNumber()"
>
<csc-new-call-forward-add-destination-form
ref="addDestinationForm"
:groupName="this.group.name"
/>
</q-popover>
</div>
<div class="col col-xs-12 col-md-6 "></div>
</div>
@ -64,6 +93,7 @@
} from 'vuex'
import {
QSpinnerDots,
QToggle,
QIcon,
QPopover,
QList,
@ -73,7 +103,8 @@
} from 'quasar-framework'
import CscObjectSpinner from "../../CscObjectSpinner";
import CscNewCallForwardDestination from './CscNewCallForwardDestination'
import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
import CscNewCallForwardDestinationTypeForm from './CscNewCallForwardDestinationTypeForm'
export default {
name: 'csc-cf-group',
props: [
@ -81,6 +112,7 @@
],
components: {
QSpinnerDots,
QToggle,
QIcon,
QPopover,
QList,
@ -88,16 +120,33 @@
QItemMain,
QItemSide,
CscObjectSpinner,
CscNewCallForwardDestination
CscNewCallForwardDestination,
CscNewCallForwardAddDestinationForm,
CscNewCallForwardDestinationTypeForm
},
data () {
return {
destinationInCreation: false
toggleGroup: true,
isEnabled: true,
toggleNumberForm: true
};
},
async mounted(){
try{
if(!this.inCreation){
const isGroupEnabled = await this.$store.dispatch('newCallForward/isGroupEnabled', this.group.name);
this.isEnabled = isGroupEnabled;
}
}
catch(err){
console.log(err)
}
},
computed: {
...mapGetters('newCallForward', [
'getOwnPhoneTimeout'
'getOwnPhoneTimeout',
'destinationInCreation'
]),
showAddDestBtn(){
const destinations = this.group.destinations;
@ -108,6 +157,9 @@
}
return true;
},
groupTitle(){
return ["csc-unconditional", "csc-timeout"].includes(this.group.name) ? `${this.$t('pages.newCallForward.timeoutGroupTitle')}` : "";
}
},
methods: {
@ -115,25 +167,33 @@
genKey(){
return Math.random();
},
async addDestination(){
this.destinationInCreation = true;
await this.$store.dispatch('newCallForward/addDestination', {
forwardGroupId: this.group.id,
destination: " "
});
await this.$store.dispatch('newCallForward/loadForwardGroups');
this.destinationInCreation = false;
showNewDestNumber(){
this.$refs.addDestinationForm.add();
},
showNumberFormPopover(){
this.toggleNumberForm = false;
this.$refs.numberForm.open();
},
showDestTypeForm(){
this.toggleNumberForm = true;
this.$refs.selectDestinationType.add();
},
getDestination(index){
let destination = {...this.group.destinations[index]}
if(index === 0){
destination.timeout = this.getOwnPhoneTimeout;
destination.timeout = !isNaN(this.getOwnPhoneTimeout) ? this.getOwnPhoneTimeout : 5;
}
else {
destination.timeout = this.group.destinations[index-1].timeout;
}
return destination;
},
toggleGroupChange(){
this.$store.dispatch('newCallForward/enableGroup', {
groupName: this.group.name,
id: this.group.id,
enabled: this.isEnabled
});
}
}
}
@ -143,6 +203,10 @@
@import '../../../themes/app.common.styl'
.csc-cf-group
width 100%
.csc-cf-group-cont
position relative
.csc-cf-group-title
font-weight bold
.csc-cf-group-title
text-align right
.csc-cf-destination-label
@ -157,4 +221,16 @@
text-overflow ellipsis
color $primary
cursor pointer
.cf-destination-disabled
color $cf-disabled-label
.csc-cf-timeout,
.csc-cf-destination
color $cf-disabled-link
.csc-cf-destination-actions
.q-icon
color $cf-disabled-btn !important
.csc-cf-destination-add-destination
color $cf-disabled-link
.q-icon
color $cf-disabled-link !important
</style>

20
src/components/pages/NewCallForward/CscNewCallForward.vue
Unescape View File

@ -21,18 +21,15 @@
>
<q-toggle
v-if="showSwitcher"
v-if="forwardGroups.length > 0"
v-model="toggleDefaultNumber"
@change="toggleChange" />
</div>
</div>
<div class="csc-cf-row row">
<div
class="column col col-xs-12 col-md-4 items-end"
>
<div
class="csc-text-action"
>
@ -75,7 +72,6 @@
:group="forwardGroup"
/>
</div>
<div class="csc-cf-row row">
<div
class="column col col-xs-12 col-md-4"
@ -156,8 +152,7 @@
...mapGetters('newCallForward', [
'primaryNumber',
'subscriberDisplayName',
'forwardGroups',
'showSwitcher'
'forwardGroups'
]),
primaryNumberEnabled(){
return true;
@ -172,21 +167,22 @@
if(this.toggleDefaultNumber){
const timeoutFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'timeout');
if(!timeoutFwdGroup){
await this.$store.dispatch('newCallForward/addForwardGroup', 'timeout');
await this.$store.dispatch('newCallForward/loadForwardGroups');
//await this.$store.dispatch('newCallForward/addForwardGroup', 'timeout');
await this.$store.dispatch('newCallForward/addTempDestination','timeout' );
//await this.$store.dispatch('newCallForward/loadForwardGroups');
}
}
else{
const unconditionalFwdGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', 'unconditional');
if(!unconditionalFwdGroup){
await this.$store.dispatch('newCallForward/addForwardGroup', 'unconditional');
await this.$store.dispatch('newCallForward/loadForwardGroups');
//await this.$store.dispatch('newCallForward/addForwardGroup', 'unconditional');
await this.$store.dispatch('newCallForward/addTempDestination','unconditional' );
//await this.$store.dispatch('newCallForward/loadForwardGroups');
}
}
this.groupInCreation = false;
},
togglePrimaryNumber(){},
showForm(){
this.$refs.destinationType.close();
this.$refs.addDestinationForm.add();

37
src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue
Unescape View File

@ -42,6 +42,9 @@
</template>
<script>
import {
mapGetters,
} from 'vuex'
import CscNewCallForwardInput from './CscNewCallForwardInput'
import CscSpinner from '../../CscSpinner'
import {
@ -91,6 +94,9 @@
}
},
computed: {
...mapGetters('newCallForward', [
'destinationInCreation'
]),
saveDisabled() {
return this.numberError|| this.disable || this.loading;
}
@ -99,33 +105,34 @@
async save() {
const forwardGroupName = this.groupName;
const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupByName', forwardGroupName);
if (this.numberError || this.saveDisabled) {
showGlobalError(this.$t('validationErrors.generic'));
}
else if(Number.isInteger(this.destinationIndex)){ // edit mode
this.$store.dispatch('newCallForward/editDestination',{
else if(Number.isInteger(this.destinationIndex) && Number.isInteger(forwardGroup.id)){ // edit mode
await this.$store.dispatch('newCallForward/editDestination',{
index: this.destinationIndex,
forwardGroupId: forwardGroup.id,
destination: this.number
});
}
else { // new destination
let forwardGroupId;
if(!forwardGroup){
forwardGroupId = await this.$store.dispatch('newCallForward/addForwardGroup', forwardGroupName);
await this.$store.dispatch('newCallForward/loadForwardGroups'); // keeps local data updated
if(forwardGroup.id.toString().includes('temp-')){ // unexisting group
forwardGroup.destinations[0].simple_destination = this.number; // optimistic UI update :)
await this.$store.dispatch('newCallForward/addForwardGroup', {
name: forwardGroupName,
destination: this.number
});
}
else{
forwardGroupId = forwardGroup.id;
else{ // existing group
await this.$store.dispatch('newCallForward/setDestinationInCreation', true);
await this.$store.dispatch('newCallForward/addDestination', {
forwardGroupId: forwardGroup.id,
destination: this.number
});
}
this.$store.dispatch('newCallForward/addDestination', {
forwardGroupId: forwardGroupId,
destination: this.number
});
await this.$store.dispatch('newCallForward/loadForwardGroups');
await this.$store.dispatch('newCallForward/setDestinationInCreation', false);
}
},
cancel() {
this.number = '';

7
src/components/pages/NewCallForward/CscNewCallForwardDestination.vue
Unescape View File

@ -50,7 +50,6 @@
anchor="top right"
class="csc-cf-number-form"
v-bind:class="{ 'csc-cf-popover-hide': toggleNumberForm }"
v-if=""
@open="showNumberForm()"
>
<csc-new-call-forward-add-destination-form
@ -148,7 +147,11 @@
},
methods: {
updateValues(destination){
this.destinationTimeout = this.index === 0 && this.groupName === 'csc-timeout' ? this.getOwnPhoneTimeout : destination.timeout;
this.destinationTimeout = this.index === 0
&& this.groupName === 'csc-timeout'
&& isNaN(this.getOwnPhoneTimeout) === false
? this.getOwnPhoneTimeout
: destination.timeout;
this.destinationNumber = destination.simple_destination;
this.destinationIndex = this.index;
},

1
src/locales/en.json
Unescape View File

@ -223,6 +223,7 @@
"allCallsForwardedTo": "All calls forwarded to",
"cancelDialogTitle": "Delete from {groupName} forwarding",
"cancelDialogText": "You are about to delete {destination} from {groupName} call forwarding",
"timeoutGroupTitle" : "",
"uncoditionalLabel": "Unconditional"
},
"callForward": {

113
src/store/new-call-forward.js
Unescape View File

@ -26,7 +26,7 @@ export default {
state: {
mappings: [],
forwardGroups: [],
showSwitcher: true
destinationInCreation: false
},
getters: {
primaryNumber(state, getters, rootState, rootGetters) {
@ -48,8 +48,11 @@ export default {
getOwnPhoneTimeout(state){
return parseInt(state.mappings.cft_ringtimeout);
},
showSwitcher(state){
return state.showSwitcher;
tempDestinations(state){
return state.tempDestinations;
},
destinationInCreation(state){
return state.destinationInCreation;
}
},
mutations: {
@ -82,15 +85,8 @@ export default {
loadForwardGroups(state, forwardGroups){
state.forwardGroups = forwardGroups;
},
setShowSwitcher(state){
const forwardGroups = state.forwardGroups;
const timeoutGroup = forwardGroups.find(($forwardGroup) => {
return $forwardGroup.name === 'csc-timeout';
});
const unconditionalGroup = forwardGroups.find(($forwardGroup) => {
return $forwardGroup.name === 'csc-unconditional';
});
state.showSwitcher = (timeoutGroup && timeoutGroup.destinations.length > 0) || (unconditionalGroup && unconditionalGroup.destinations.length > 0);
setDestinationInCreation(state, isInCreation){
state.destinationInCreation = isInCreation;
}
},
actions: {
@ -107,7 +103,6 @@ export default {
try{
const forwardGroups = await getDestinationsets(localStorage.getItem('subscriberId'));
context.commit('loadForwardGroups', forwardGroups);
context.commit('setShowSwitcher');
return forwardGroups;
}
catch(err){
@ -117,7 +112,7 @@ export default {
async editMapping(context, data){
try{
const subscriberId = localStorage.getItem('subscriberId');
const groupMappingId = ForwardGroup[data.name].mapping;
const groupMappingId = ForwardGroup[data.name] ? ForwardGroup[data.name].mapping : await context.dispatch('getMappingIdByGroupName', data.name);
const allMappings = await getMappings(subscriberId);
let groupMappings = allMappings[groupMappingId];
@ -140,19 +135,32 @@ export default {
}
},
async addForwardGroup(context, name) {
createEmptyForwardGroup(context, groupName){
const destination = {
"announcement_id": null,
"simple_destination": " ",
"destination": " ",
"priority": 1,
"timeout": 5
};
context.state.tempForwardGroups.push({
name: groupName,
destinations:[destination]
});
},
async addForwardGroup(context, data) {
try{
const newForwardGroupId = await addNewDestinationsetWithName(ForwardGroup[name].name);
const newForwardGroupId = await addNewDestinationsetWithName(ForwardGroup[data.name] ? ForwardGroup[data.name].name : data.name);
const destination = {
"announcement_id": null,
"simple_destination": " ",
"destination": " ",
"simple_destination": data.destination || " ",
"destination": data.destination || " ",
"priority": 1,
"timeout": 5
};
await context.dispatch('editMapping', {
name: name,
name: data.name,
groupId: newForwardGroupId
});
@ -163,7 +171,7 @@ export default {
// setting cft_ringtimeout in case it is
// not set while creating timeout group
if(name === 'timeout' && !context.getters.getOwnPhoneTimeout){
if((data.name === 'timeout' || data.name === 'csc-timeout') && (!context.getters.getOwnPhoneTimeout || isNaN(context.getters.getOwnPhoneTimeout))){
await context.dispatch('editRingTimeout', 5);
}
@ -196,10 +204,23 @@ export default {
});
return forwardGroups.length > 0 ? forwardGroups[0] : null;
},
addTempDestination(context, groupName){
context.state.forwardGroups.push({
id: "temp-" + ForwardGroup[groupName].name,
name: ForwardGroup[groupName].name,
destinations: [{
"announcement_id": null,
"simple_destination": " ",
"destination": " ",
"priority": 1,
"timeout": 5
}]
});
},
async addDestination(context, data){
try{
let group = context.state.forwardGroups.find((group)=>{
return group.id === data.forwardGroupId;
return group.id === data.forwardGroupId || group.id.toString() === data.forwardGroupId;
});
const destination = {
"announcement_id": null,
@ -312,13 +333,17 @@ export default {
let timeoutGroup = await context.dispatch('getForwardGroupByName', 'timeout');
if(!unconditionalGroup){
await context.dispatch('addForwardGroup', 'unconditional');
await context.dispatch('addForwardGroup', {
name: 'unconditional'
});
await context.dispatch('loadMappings');
await context.dispatch('loadForwardGroups');
unconditionalGroup = await context.dispatch('getForwardGroupByName', 'unconditional');
}
if(!timeoutGroup){
await context.dispatch('addForwardGroup', 'timeout');
await context.dispatch('addForwardGroup', {
name: 'timeout'
});
await context.dispatch('loadMappings');
await context.dispatch('loadForwardGroups');
timeoutGroup = await context.dispatch('getForwardGroupByName', 'timeout');
@ -346,6 +371,48 @@ export default {
catch(err){
console.log(err)
}
},
getMappingIdByGroupName(context, groupName){
let mappingId;
for(let key in ForwardGroup){
if(ForwardGroup[key].name == groupName){
mappingId = ForwardGroup[key].mapping;
break;
}
}
return mappingId;
},
async isGroupEnabled(context, groupName){
const mappingId = await context.dispatch('getMappingIdByGroupName', groupName);
return mappingId
&& context.state.mappings[mappingId]
&& context.state.mappings[mappingId][0] // IMPROVE remove hardcoded [0]
? context.state.mappings[mappingId][0].enabled
: true;
},
async enableGroup(context, data){
try{
if(!data.id.toString().includes('temp-')){
const subscriberId = localStorage.getItem('subscriberId');
const mappingId = await context.dispatch('getMappingIdByGroupName', data.groupName);
let groupMappings = context.state.mappings[mappingId];
groupMappings[0].enabled = data.enabled; // IMPROVE remove hardcoded [0]
await addNewMapping({
mappings: groupMappings,
group: mappingId,
subscriberId: subscriberId
});
context.dispatch('loadMappings');
}
}
catch(err){
console.log(err)
}
},
setDestinationInCreation(context, isInCreation){
context.commit('setDestinationInCreation', isInCreation);
}
}
};

4
src/themes/app.variables.styl
Unescape View File

@ -97,3 +97,7 @@ $chip-color = $dark
$conf-participant-icon-color = rgba(255, 255, 255, 0.6);
$conf-participant-box-color = rgba(21,29,48,0.8);
$cf-disabled-label = lighten($white, -35%);
$cf-disabled-link = lighten($primary, -35%);
$cf-disabled-btn = lighten($negative, -35%);

Write Preview
Loading…
Cancel
Save