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

TT#81502 CF: As a Customer, I want to delete entire forwarding groups

Browse Source 
Change-Id: I999a0ab380d87fe8986c9f6cfc8b4e034fce152d
changes/19/40319/2
Carlo Venusino 5 years ago
parent 9966fbb960
commit a063d1ab9c
7 changed files with 103 additions and 51 deletions
Show Stats Download Patch File Download Diff File

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

@ -81,9 +81,22 @@
@change="toggleGroupChange" @change="toggleGroupChange"
/> />
</div> </div>
<div class="col col-xs-12 col-md-5 "> <div class="col col-xs-12 col-md-5 csc-cf-group-actions">
<q-icon
name="delete"
color="negative"
size="24px"
@click="showConfirmDialog"
/>
<csc-confirm-dialog
ref="confirmDialog"
title-icon="delete"
:title="$t('pages.newCallForward.cancelGroupDialogTitle', {groupName: this.group.name})"
:message="$t('pages.newCallForward.cancelGroupDialogText', {groupName: this.group.name})"
@confirm="confirmDeleteGroup"
/>
<q-spinner-dots <q-spinner-dots
v-if="toggleGroupInProgress || destinationInCreation" v-if="groupIsLoading"
class="csc-call-spinner" class="csc-call-spinner"
color="primary" color="primary"
:size="24" :size="24"
@ -168,6 +181,7 @@
QItemSide QItemSide
} from 'quasar-framework' } from 'quasar-framework'
import CscObjectSpinner from "../../CscObjectSpinner"; import CscObjectSpinner from "../../CscObjectSpinner";
import CscConfirmDialog from "../../CscConfirmationDialog";
import CscNewCallForwardDestination from './CscNewCallForwardDestination' import CscNewCallForwardDestination from './CscNewCallForwardDestination'
import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm' import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
import CscNewCallForwardEditSources from './CscNewCallForwardEditSources' import CscNewCallForwardEditSources from './CscNewCallForwardEditSources'
@ -188,6 +202,7 @@
QItem, QItem,
QItemMain, QItemMain,
QItemSide, QItemSide,
CscConfirmDialog,
CscObjectSpinner, CscObjectSpinner,
CscNewCallForwardDestination, CscNewCallForwardDestination,
CscNewCallForwardAddDestinationForm, CscNewCallForwardAddDestinationForm,
@ -202,7 +217,7 @@
isEnabled: true, isEnabled: true,
toggleNumberForm: true, toggleNumberForm: true,
toggleConditionFromForm: true, toggleConditionFromForm: true,
toggleGroupInProgress: false, groupIsLoading: false,
sourceSet: null, sourceSet: null,
sources: [] sources: []
}; };
@ -222,9 +237,9 @@
computed: { computed: {
...mapGetters('newCallForward', [ ...mapGetters('newCallForward', [
'getOwnPhoneTimeout', 'getOwnPhoneTimeout',
'destinationInCreation',
'groupsCount', 'groupsCount',
'getMappings' 'getMappings',
'getGroupsLoaders'
]), ]),
showAddDestBtn(){ showAddDestBtn(){
const destinations = this.group.destinations; const destinations = this.group.destinations;
@ -261,9 +276,13 @@
} }
}, },
watch: { watch: {
group: function () { group: function () {
this.updateSourcesetNames(); this.updateSourcesetNames();
}, },
getGroupsLoaders: function(){
const groupLoaders = this.getGroupsLoaders;
this.groupIsLoading = groupLoaders.includes(this.group.id);
}
}, },
methods: { methods: {
// we need to generate key because destinations have no id // we need to generate key because destinations have no id
@ -280,10 +299,10 @@
this.$refs.numberForm.open(); this.$refs.numberForm.open();
break; break;
case 'voicemail': case 'voicemail':
await this.$store.dispatch('newCallForward/setDestinationInCreation', true); await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
await this.$store.dispatch('newCallForward/addVoiceMail', this.group.id); await this.$store.dispatch('newCallForward/addVoiceMail', this.group.id);
await this.$store.dispatch('newCallForward/loadForwardGroups'); await this.$store.dispatch('newCallForward/loadForwardGroups');
await this.$store.dispatch('newCallForward/setDestinationInCreation', false); await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
break; break;
} }
}, },
@ -310,13 +329,13 @@
return destination; return destination;
}, },
async toggleGroupChange(){ async toggleGroupChange(){
this.toggleGroupInProgress = true; await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
await this.$store.dispatch('newCallForward/enableGroup', { await this.$store.dispatch('newCallForward/enableGroup', {
groupName: this.group.name, groupName: this.group.name,
id: this.group.id, id: this.group.id,
enabled: this.isEnabled enabled: this.isEnabled
}); });
this.toggleGroupInProgress = false; await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
}, },
showConditions(){ showConditions(){
this.$refs.addCondition.add(); this.$refs.addCondition.add();
@ -345,6 +364,15 @@
this.sources = this.sourceSet.sources; this.sources = this.sourceSet.sources;
} }
} }
},
showConfirmDialog(){
this.$refs.confirmDialog.open();
},
async confirmDeleteGroup(){
await this.$store.dispatch('newCallForward/addGroupLoader', this.group.id);
await this.$store.dispatch('newCallForward/deleteForwardGroup', this.group);
await this.$store.dispatch('newCallForward/loadForwardGroups');
await this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id);
} }
} }
} }
@ -377,6 +405,8 @@
.csc-cf-from-link .csc-cf-from-link
color $primary color $primary
cursor pointer cursor pointer
.csc-cf-group-actions
cursor pointer
.csc-cf-destination-disabled .csc-cf-destination-disabled
color $cf-disabled-label color $cf-disabled-label
.csc-cf-destination-link .csc-cf-destination-link

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

@ -42,9 +42,6 @@
</template> </template>
<script> <script>
import {
mapGetters,
} from 'vuex'
import CscNewCallForwardInput from './CscNewCallForwardInput' import CscNewCallForwardInput from './CscNewCallForwardInput'
import CscSpinner from '../../CscSpinner' import CscSpinner from '../../CscSpinner'
import { import {
@ -95,9 +92,6 @@
} }
}, },
computed: { computed: {
...mapGetters('newCallForward', [
'destinationInCreation'
]),
saveDisabled() { saveDisabled() {
return this.numberError|| this.disable || this.loading; return this.numberError|| this.disable || this.loading;
} }
@ -107,6 +101,7 @@
const forwardGroupId = this.groupId; const forwardGroupId = this.groupId;
const forwardGroupName = this.groupName; const forwardGroupName = this.groupName;
const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', forwardGroupId); const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', forwardGroupId);
await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
if (this.numberError || this.saveDisabled) { if (this.numberError || this.saveDisabled) {
showGlobalError(this.$t('validationErrors.generic')); showGlobalError(this.$t('validationErrors.generic'));
} }
@ -118,7 +113,6 @@
}); });
} }
else { // new group else { // new group
await this.$store.dispatch('newCallForward/setDestinationInCreation', true);
if(forwardGroup.id.toString().includes('temp-')){ // unexisting group if(forwardGroup.id.toString().includes('temp-')){ // unexisting group
forwardGroup.destinations[0].simple_destination = this.number; // optimistic UI update :) forwardGroup.destinations[0].simple_destination = this.number; // optimistic UI update :)
await this.$store.dispatch('newCallForward/addForwardGroup', { await this.$store.dispatch('newCallForward/addForwardGroup', {
@ -134,8 +128,8 @@
}); });
} }
await this.$store.dispatch('newCallForward/loadForwardGroups'); await this.$store.dispatch('newCallForward/loadForwardGroups');
await this.$store.dispatch('newCallForward/setDestinationInCreation', false);
} }
await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
}, },
cancel() { cancel() {
this.number = ''; this.number = '';

10
src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue
Unescape View File

@ -49,9 +49,6 @@
</template> </template>
<script> <script>
import {
mapGetters,
} from 'vuex'
import CscNewCallForwardInput from './CscNewCallForwardInput' import CscNewCallForwardInput from './CscNewCallForwardInput'
import CscNewCallForwardInputText from './CscNewCallForwardInputText' import CscNewCallForwardInputText from './CscNewCallForwardInputText'
import CscSpinner from '../../CscSpinner' import CscSpinner from '../../CscSpinner'
@ -103,9 +100,6 @@
} }
}, },
computed: { computed: {
...mapGetters('newCallForward', [
'destinationInCreation'
]),
saveDisabled() { saveDisabled() {
return this.number.length < 1 || this.name.length < 1 || this.numberError|| this.nameError || this.disable || this.loading; return this.number.length < 1 || this.name.length < 1 || this.numberError|| this.nameError || this.disable || this.loading;
} }
@ -115,8 +109,7 @@
let sourceSetId; let sourceSetId;
const forwardGroupId = this.groupId; const forwardGroupId = this.groupId;
const forwardGroupName = this.groupName; const forwardGroupName = this.groupName;
const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', forwardGroupId);
if (this.numberError || this.nameError || this.saveDisabled) { if (this.numberError || this.nameError || this.saveDisabled) {
showGlobalError(this.$t('validationErrors.generic')); showGlobalError(this.$t('validationErrors.generic'));
} }
@ -143,7 +136,6 @@
case 'edit': case 'edit':
break; break;
} }
console.log(forwardGroupId, forwardGroupName, forwardGroup)
}, },
cancel() { cancel() {
this.number = ''; this.number = '';

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

@ -172,18 +172,19 @@
this.$refs.numberForm.open(); this.$refs.numberForm.open();
break; break;
case 'voicemail': case 'voicemail':
await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
if(this.groupId.toString().includes('temp-')){ // unexisting group if(this.groupId.toString().includes('temp-')){ // unexisting group
this.$parent.toggleGroupInProgress = true;
await this.$store.dispatch('newCallForward/addForwardGroup', { await this.$store.dispatch('newCallForward/addForwardGroup', {
name: this.groupName, name: this.groupName,
destination: 'voicebox' destination: 'voicebox'
}); });
await this.$store.dispatch('newCallForward/loadForwardGroups'); await this.$store.dispatch('newCallForward/loadForwardGroups');
this.$parent.toggleGroupInProgress = false;
} }
else{ else{
await this.$store.dispatch('newCallForward/addVoiceMail', this.groupId); await this.$store.dispatch('newCallForward/addVoiceMail', this.groupId);
} }
await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
break; break;
} }
}, },
@ -195,13 +196,13 @@
this.$refs.selectDestinationType.add(); this.$refs.selectDestinationType.add();
}, },
async saveTimeout(){ async saveTimeout(){
this.$parent.toggleGroupInProgress = true; await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
await this.$store.dispatch('newCallForward/editTimeout', { await this.$store.dispatch('newCallForward/editTimeout', {
index: this.destinationIndex, index: this.destinationIndex,
timeout: this.destinationTimeout, timeout: this.destinationTimeout,
forwardGroupId: this.groupId forwardGroupId: this.groupId
}); });
this.$parent.toggleGroupInProgress = false; await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
}, },
showConfirmDialog(){ showConfirmDialog(){
@ -209,10 +210,12 @@
}, },
async confirmDeleteDest(){ async confirmDeleteDest(){
this.removeInProgress = true; this.removeInProgress = true;
await this.$store.dispatch('newCallForward/addGroupLoader', this.groupId);
await this.$store.dispatch('newCallForward/removeDestination', { await this.$store.dispatch('newCallForward/removeDestination', {
destination: this.destination, destination: this.destination,
forwardGroupId: this.groupId forwardGroupId: this.groupId
}); });
await this.$store.dispatch('newCallForward/removeGroupLoader', this.groupId);
}, },
isVoiceMail(){ isVoiceMail(){
return this.destination.destination.includes('voicebox.local') return this.destination.destination.includes('voicebox.local')
@ -266,7 +269,7 @@
.csc-cf-dest-popover-bottom .csc-cf-dest-popover-bottom
margin-left 0px margin-left 0px
.csc-cf-removed-destination .csc-cf-removed-destination
visibility hidden visibility hidden
opacity 0 opacity 0
transition visibility 0s 1s, opacity 1s linear transition visibility 0s 2s, opacity 2s linear
</style> </style>

3
src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue
Unescape View File

@ -111,7 +111,8 @@
}, },
computed: { computed: {
...mapGetters('newCallForward', [ ...mapGetters('newCallForward', [
'destinationInCreation' 'getSourcesets',
'getSourcesesBySourcesetId'
]), ]),
saveDisabled() { saveDisabled() {
return this.number.length < 1 || this.numberError || this.disable || this.loading; return this.number.length < 1 || this.numberError || this.disable || this.loading;

2
src/locales/en.json
Unescape View File

@ -231,7 +231,9 @@
"addDestinationLabel": "Add destination", "addDestinationLabel": "Add destination",
"allCallsForwardedTo": "All calls forwarded to", "allCallsForwardedTo": "All calls forwarded to",
"cancelDialogTitle": "Delete from {groupName} forwarding", "cancelDialogTitle": "Delete from {groupName} forwarding",
"cancelGroupDialogTitle": "Delete {groupName} forwarding group",
"cancelDialogText": "You are about to delete {destination} from {groupName} call forwarding", "cancelDialogText": "You are about to delete {destination} from {groupName} call forwarding",
"cancelGroupDialogText": "You are about to delete {groupName} call forwarding group",
"unconditionalLabel": "If online", "unconditionalLabel": "If online",
"fromLabel": "If call from ...", "fromLabel": "If call from ...",
"fromLabelShort": " and call from ", "fromLabelShort": " and call from ",

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

@ -10,8 +10,8 @@ import {
updateOwnPhoneTimeout, updateOwnPhoneTimeout,
updateDestinationsetName, updateDestinationsetName,
createSourcesetWithSource, createSourcesetWithSource,
getSourcesetById, getSourcesets,
// getSourcesets addSourceToSourceset
} from '../api/call-forward'; } from '../api/call-forward';
const ForwardGroup = { const ForwardGroup = {
@ -45,11 +45,15 @@ export default {
namespaced: true, namespaced: true,
state: { state: {
mappings: [], mappings: [],
sourceSets: [],
forwardGroups: [], forwardGroups: [],
destinationInCreation: false, groupsLoaders: [],
selectedDestType: null selectedDestType: null
}, },
getters: { getters: {
getGroupsLoaders(state){
return state.groupsLoaders;
},
primaryNumber(state, getters, rootState, rootGetters) { primaryNumber(state, getters, rootState, rootGetters) {
const subscriber = rootGetters['user/getSubscriber']; const subscriber = rootGetters['user/getSubscriber'];
if(subscriber !== null) { if(subscriber !== null) {
@ -71,9 +75,6 @@ export default {
tempDestinations(state){ tempDestinations(state){
return state.tempDestinations; return state.tempDestinations;
}, },
destinationInCreation(state){
return state.destinationInCreation;
},
selectedDestType(state){ selectedDestType(state){
return state.selectedDestType; return state.selectedDestType;
}, },
@ -118,6 +119,13 @@ export default {
}, },
getMappings(state){ getMappings(state){
return state.mappings; return state.mappings;
},
getSourcesets(state){
return state.sourceSets;
},
getSourcesesBySourcesetId: (state) => (sourceSetId) => {
const sourceSet = state.sourceSets.filter($sourceset => $sourceset.id == sourceSetId);
return sourceSet ? sourceSet[0].sources : null;
} }
}, },
mutations: { mutations: {
@ -163,9 +171,28 @@ export default {
}, },
setSelectedDestType(state, destType){ setSelectedDestType(state, destType){
state.selectedDestType = destType; state.selectedDestType = destType;
},
setSourceSets(state, sourceSets){
state.sourceSets = sourceSets;
},
addGroupLoader(state, groupId){
state.groupsLoaders.push(groupId)
},
removeGroupLoader(state, groupId){
state.groupsLoaders = state.groupsLoaders.filter($groupId => $groupId !== groupId);
} }
}, },
actions: { actions: {
groupIsLoading(context, groupId){
const loader = context.state.groupsLoaders.filter($groupId => $groupId == groupId);
return loader && loader.length > 0;
},
addGroupLoader(context, groupId){
context.commit('addGroupLoader', groupId);
},
removeGroupLoader(context, groupId){
context.commit('removeGroupLoader', groupId);
},
async loadMappings(context) { async loadMappings(context) {
try{ try{
const mappings = await getMappings(localStorage.getItem('subscriberId')); const mappings = await getMappings(localStorage.getItem('subscriberId'));
@ -384,10 +411,6 @@ export default {
console.log(err); console.log(err);
} }
}, },
removeSourceFromSourceset(context, data){
// TODO
console.log(context, data)
},
async editDestination(context, data){ async editDestination(context, data){
let group = context.state.forwardGroups.find((group)=>{ let group = context.state.forwardGroups.find((group)=>{
return group.id === data.forwardGroupId; return group.id === data.forwardGroupId;
@ -564,6 +587,11 @@ export default {
setSelectedDestType(context, destType){ setSelectedDestType(context, destType){
context.commit('setSelectedDestType', destType); context.commit('setSelectedDestType', destType);
}, },
async loadSourcesets(context){
const subscriberId = localStorage.getItem('subscriberId');
const sourceSets = await getSourcesets(subscriberId);
context.commit('setSourceSets', sourceSets);
},
async createSourceSet(context, data){ async createSourceSet(context, data){
const sourceSetId = await createSourcesetWithSource({ const sourceSetId = await createSourcesetWithSource({
sourcesetName: data.name, sourcesetName: data.name,
@ -586,13 +614,15 @@ export default {
console.log(err) console.log(err)
} }
}, },
// async getSourcesets(){
// const sourceSets = await getSourcesets(localStorage.getItem('subscriberId'));
// return sourceSet;
// },
async getSourcesetById(context, id){ async getSourcesetById(context, id){
const sourceSet = await getSourcesetById(id); const sourceSet = context.state.sourceSets.filter($sourceset => $sourceset.id == id);
return sourceSet; return sourceSet ? sourceSet[0] : [];
} },
async addSourceToSourceset(context, data){
await addSourceToSourceset(data)
},
async removeSourceFromSourceset(context, data){
await addSourceToSourceset(data)
},
} }
}; };

Write Preview
Loading…
Cancel
Save