TT#23367 CallBlocking: As a Customer I want to block outgoing numbers

- CallBlocking: As a Customer I want to add a new number (outgoing)
- CallBlocking: As a Customer I want to edit a number (outgoing)
- CallBlocking: As a Customer I want to enable/disable the functionality (outgoing)
- CallBlocking: As a Customer I want to remove a number from the list (outgoing)
- CallBlocking: As a Customer I want to edit a number (incoming)

Change-Id: Ia456af57ef202dbf774739c5b9a5eb9955eaf9b8

src/api/call-blocking.js

@@ -1,8 +1,13 @@
 
 import Vue from 'vue';
-import { enableBlockIn, disableBlockIn, enablePrivacy,
-    disablePrivacy, getPreferences, addToBlockInList,
-    removeFromBlockInList } from './subscriber';
+import { enableBlockIn, disableBlockIn,
+    getPreferences, addToBlockInList,
+    editBlockInList, removeFromBlockInList,
+    enableBlockOut, disableBlockOut,
+    addToBlockOutList, editBlockOutList,
+    removeFromBlockOutList,
+    enablePrivacy, disablePrivacy
+} from './subscriber';
 
 export function enableIncomingCallBlocking(id) {
     return enableBlockIn(id);
@@ -39,6 +44,16 @@ export function addNumberToIncomingList(id, number) {
     });
 }
 
+export function editNumberFromIncomingList(id, index, number) {
+    return new Promise((resolve, reject)=>{
+        editBlockInList(id, index, number).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
 export function removeNumberFromIncomingList(id, index) {
     return new Promise((resolve, reject)=>{
         removeFromBlockInList(id, index).then(()=>{
@@ -49,6 +64,61 @@ export function removeNumberFromIncomingList(id, index) {
     });
 }
 
+export function enableOutgoingCallBlocking(id) {
+    return enableBlockOut(id);
+}
+
+export function disableOutgoingCallBlocking(id) {
+    return disableBlockOut(id);
+}
+
+export function getOutgoingCallBlocking(id) {
+    return new Promise((resolve, reject)=>{
+        getPreferences(id).then((result)=>{
+            resolve({
+                enabled: result.block_out_mode,
+                list: result.block_out_list
+            });
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
+export function addNumberToOutgoingList(id, number) {
+    return new Promise((resolve, reject)=>{
+        if(_.isEmpty(number)) {
+            reject(new Error('Number may not be empty'));
+        } else {
+            addToBlockOutList(id, number).then(()=>{
+                resolve();
+            }).catch((err)=>{
+                reject(err);
+            });
+        }
+    });
+}
+
+export function editNumberFromOutgoingList(id, index, number) {
+    return new Promise((resolve, reject)=>{
+        editBlockOutList(id, index, number).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
+export function removeNumberFromOutgoingList(id, index) {
+    return new Promise((resolve, reject)=>{
+        removeFromBlockOutList(id, index).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
 export function enablePrivacyCallBlocking(id) {
     return enablePrivacy(id);
 }

src/api/subscriber.js

@@ -26,7 +26,19 @@ export function setPreference(id, field, value) {
         }).then(()=>{
             resolve();
         }).catch((err)=>{
-            reject(err);
+            if(err.status === 422) {
+                Vue.http.patch('/api/subscriberpreferences/' + id, [{
+                    op: 'add',
+                    path: '/'+ field,
+                    value: value
+                }], { headers: headers }).then(()=>{
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            } else {
+                reject(err);
+            }
         });
     });
 }
@@ -67,6 +79,27 @@ export function appendItemToArrayPreference(id, field, value) {
     });
 }
 
+export function editItemInArrayPreference(id, field, itemIndex, value) {
+    return new Promise((resolve, reject)=>{
+        Promise.resolve().then(()=>{
+            return getPreferences(id);
+        }).then((result)=>{
+            var prefs = _.cloneDeep(result);
+            delete prefs._links;
+            if(_.isArray(prefs[field]) && itemIndex < prefs[field].length) {
+                prefs[field][itemIndex] = value;
+                return Vue.http.put('/api/subscriberpreferences/' + id, prefs);
+            } else {
+                return Promise.reject(new Error('Array index does not exists'));
+            }
+        }).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
+
 export function removeItemFromArrayPreference(id, field, itemIndex) {
     return new Promise((resolve, reject)=>{
         Promise.resolve().then(()=>{
@@ -103,10 +136,38 @@ export function addToBlockInList(id, number) {
     return prependItemToArrayPreference(id, 'block_in_list', number);
 }
 
+export function editBlockInList(id, index, number) {
+    return editItemInArrayPreference(id, 'block_in_list', index, number);
+}
+
 export function removeFromBlockInList(id, index) {
     return removeItemFromArrayPreference(id, 'block_in_list', index);
 }
 
+export function setBlockOutMode(id, value) {
+    return setPreference(id, 'block_out_mode', value);
+}
+
+export function enableBlockOut(id) {
+    return setBlockOutMode(id, true);
+}
+
+export function disableBlockOut(id) {
+    return setBlockOutMode(id, false);
+}
+
+export function addToBlockOutList(id, number) {
+    return prependItemToArrayPreference(id, 'block_out_list', number);
+}
+
+export function editBlockOutList(id, index, number) {
+    return editItemInArrayPreference(id, 'block_out_list', index, number);
+}
+
+export function removeFromBlockOutList(id, index) {
+    return removeItemFromArrayPreference(id, 'block_out_list', index);
+}
+
 export function setPrivacy(id, value) {
     return setPreference(id, 'clir', value);
 }

src/components/Login.vue

@@ -5,29 +5,22 @@
             <div class="column col-12 col-md-6 col-lg-4 col-xl-4">
                 <q-card>
                     <q-card-title>
-                        <q-icon name="" />{{ $t('login_title') }}
+                        <q-icon name="" />{{ $t('pages.login.title') }}
                         <span slot="subtitle"></span>
                     </q-card-title>
                     <q-card-main>
-                        <q-field icon="fa-user-circle" :helper="$t('username_helper')" :count="128">
-                            <q-input type="text"
-                                     max-length="128"
-                                     :float-label="$t('username')"
-                                     clearable
-                                     v-model="username"
-                                     @keyup.enter="login()"/>
+                        <q-field icon="fa-user-circle" :helper="$t('pages.login.username_helper')" :count="128">
+                            <q-input type="text" max-length="128" :float-label="$t('pages.login.username')"
+                                     clearable v-model="username" @keyup.enter="login()"/>
                         </q-field>
-                        <q-field icon="fa-lock" :helper="$t('password_helper')" :count="32">
-                            <q-input type="password"
-                                     max-length="32"
-                                     :float-label="$t('password')"
-                                     clearable
-                                     v-model="password"
-                                     @keyup.enter="login()"/>
+                        <q-field icon="fa-lock" :helper="$t('pages.login.password_helper')" :count="32">
+                            <q-input type="password" max-length="32" :float-label="$t('pages.login.password')"
+                                     clearable v-model="password" @keyup.enter="login()"/>
                         </q-field>
                     </q-card-main>
                     <q-card-actions class="pull-right">
-                        <q-btn flat icon-right="fa-arrow-right" color="primary" @click="login()">{{ $t('login_button') }}</q-btn>
+                        <q-btn flat icon-right="fa-arrow-right"
+                               color="primary" @click="login()">{{ $t('pages.login.button') }}</q-btn>
                     </q-card-actions>
                 </q-card>
             </div>
@@ -71,7 +64,7 @@
                     this.$router.push({path : '/'});
                 }).catch((err)=>{
                     stopLoading();
-                    showGlobalError(this.$i18n.t('login_error'));
+                    showGlobalError(this.$i18n.t('pages.login.error'));
                 });
             }
         }

src/components/form/CscToggle.vue

@@ -0,0 +1,36 @@
+<template>
+    <q-toggle
+        :label="label"
+        @input="toggle()"
+        v-model="toggleState" />
+</template>
+
+<script>
+    import { QToggle } from 'quasar-framework'
+    export default {
+        name: 'csc-toggle',
+        props: [
+            'enabled',
+            'label'
+        ],
+        data () {
+            return {
+                toggleState: this.enabled,
+            }
+        },
+        updated() {
+            this.toggleState = this.enabled;
+        },
+        components: {
+            QToggle
+        },
+        methods: {
+            toggle() {
+                this.$emit('change', this.toggleState);
+            }
+        }
+    }
+</script>
+
+<style>
+</style>

src/components/layouts/Default.vue

@@ -24,39 +24,39 @@
         <q-list id="main-menu" slot="left" no-border link inset-delimiter>
             <q-side-link item to="/user/conversations">
                 <q-item-side icon="question answer"></q-item-side>
-                <q-item-main :label="$t('mainNavigation.conversations.title')"
-                             :sublabel="$t('mainNavigation.conversations.subTitle')"/>
+                <q-item-main :label="$t('navigation.conversations.title')"
+                             :sublabel="$t('navigation.conversations.subTitle')"/>
             </q-side-link>
             <q-collapsible :opened="isCallForward" intend icon="fa-angle-double-right"
-                           :label="$t('mainNavigation.callForward.title')"
-                           :sublabel="$t('mainNavigation.callForward.subTitle')">
+                           :label="$t('navigation.callForward.title')"
+                           :sublabel="$t('navigation.callForward.subTitle')">
                 <q-side-link item to="/user/call-forward/always">
                     <q-item-side icon="check circle"/>
-                    <q-item-main :label="$t('mainNavigation.callForward.always')"/>
+                    <q-item-main :label="$t('navigation.callForward.always')"/>
                 </q-side-link>
                 <q-side-link item to="/user/call-forward/company-hours">
                     <q-item-side icon="schedule"/>
-                    <q-item-main :label="$t('mainNavigation.callForward.companyHours')"/>
+                    <q-item-main :label="$t('navigation.callForward.companyHours')"/>
                 </q-side-link>
                 <q-side-link item to="/user/call-forward/after-hours">
                     <q-item-side icon="watch later"/>
-                    <q-item-main :label="$t('mainNavigation.callForward.afterHours')"/>
+                    <q-item-main :label="$t('navigation.callForward.afterHours')"/>
                 </q-side-link>
             </q-collapsible>
             <q-collapsible :opened="isCallBlocking" intend icon="fa-ban"
-                           :label="$t('mainNavigation.callBlocking.title')"
-                           :sublabel="$t('mainNavigation.callBlocking.subTitle')">
+                           :label="$t('navigation.callBlocking.title')"
+                           :sublabel="$t('navigation.callBlocking.subTitle')">
                 <q-side-link item to="/user/call-blocking/incoming">
                     <q-item-side icon="call received"/>
-                    <q-item-main :label="$t('mainNavigation.callBlocking.incoming')"/>
+                    <q-item-main :label="$t('navigation.callBlocking.incoming')"/>
                 </q-side-link>
                 <q-side-link item to="/user/call-blocking/outgoing">
                     <q-item-side icon="call made"/>
-                    <q-item-main :label="$t('mainNavigation.callBlocking.outgoing')"/>
+                    <q-item-main :label="$t('navigation.callBlocking.outgoing')"/>
                 </q-side-link>
                 <q-side-link item to="/user/call-blocking/privacy">
                     <q-item-side icon="fa-user-secret"/>
-                    <q-item-main :label="$t('mainNavigation.callBlocking.privacy')"/>
+                    <q-item-main :label="$t('navigation.callBlocking.privacy')"/>
                 </q-side-link>
             </q-collapsible>
             <q-side-link item to="/user/reminder">
@@ -66,19 +66,19 @@
                     sublabel="Set your personal alarm"/>
             </q-side-link>
             <q-collapsible v-if="isPbxAdmin" :opened="isPbxConfiguration" intend icon="fa-gear"
-                           :label="$t('mainNavigation.pbxConfiguration.title')"
-                           :sublabel="$t('mainNavigation.pbxConfiguration.subTitle')">
+                           :label="$t('navigation.pbxConfiguration.title')"
+                           :sublabel="$t('navigation.pbxConfiguration.subTitle')">
                 <q-side-link item to="/user/pbx-configuration/groups">
                     <q-item-side icon="fa-group"/>
-                    <q-item-main :label="$t('mainNavigation.pbxConfiguration.groups')"/>
+                    <q-item-main :label="$t('navigation.pbxConfiguration.groups')"/>
                 </q-side-link>
                 <q-side-link item to="/user/pbx-configuration/seats">
                     <q-item-side icon="fa-home"/>
-                    <q-item-main :label="$t('mainNavigation.pbxConfiguration.seats')"/>
+                    <q-item-main :label="$t('navigation.pbxConfiguration.seats')"/>
                 </q-side-link>
                 <q-side-link item to="/user/pbx-configuration/devices">
                     <q-item-side icon="fa-fax"/>
-                    <q-item-main :label="$t('mainNavigation.pbxConfiguration.devices')"/>
+                    <q-item-main :label="$t('navigation.pbxConfiguration.devices')"/>
                 </q-side-link>
             </q-collapsible>
         </q-list>

src/components/pages/CallBlocking/CscCallBlocking.vue

@@ -0,0 +1,219 @@
+<template>
+    <page :title="$t('pages.callBlocking' + suffix + '.title')">
+        <q-field id="toggle-call-blocking">
+            <csc-toggle :label="toggleButtonLabel" @change="toggle" :enabled="enabled"/>
+        </q-field>
+        <div id="add-number-form">
+            <q-field v-if="!addFormEnabled">
+                <q-btn color="primary"
+                       icon="fa-plus"
+                       @click="enableAddForm()">{{ $t('pages.callBlocking' + suffix + '.addNumberButton') }}</q-btn>
+            </q-field>
+            <div v-if="addFormEnabled">
+                <q-field :error="addFormError" :error-label="$t('pages.callBlocking' + suffix + '.addInputError')">
+                    <q-input type="text" float-label="Number" v-model="newNumber" clearable @keyup.enter="addNumber()" />
+                </q-field>
+                <q-btn @click="disableAddForm()">{{ $t('buttons.cancel') }}</q-btn>
+                <q-btn color="primary" icon-right="fa-save" @click="addNumber()">{{ $t('buttons.save') }}</q-btn>
+            </div>
+        </div>
+        <div>
+            <q-card class="blocked-number" v-for="(number, index) in numbers">
+                <q-card-title>
+                    <span v-if="!(editing && editingIndex == index)" @click="editNumber(index)">{{ number }}</span>
+                    <q-input autofocus v-if="editing && editingIndex == index" type="text" float-label="Number"
+                             v-model="editingNumber" @keyup.enter="saveNumber(index)" />
+                    <q-icon v-if="editing && editingIndex == index" slot="right"
+                            name="fa-save" @click="saveNumber(index)" class="cursor-pointer"></q-icon>
+                    <q-icon v-if="!(editing && editingIndex == index)" slot="right"
+                            name="fa-edit" @click="editNumber(index)" class="cursor-pointer"></q-icon>
+                    <q-icon v-if="!(editing && editingIndex == index)" slot="right"
+                            name="fa-remove" @click="removeNumber(index)" class="cursor-pointer"></q-icon>
+                </q-card-title>
+            </q-card>
+            <q-inner-loading :visible="listLoading">
+                <q-spinner-mat size="50px" color="primary"></q-spinner-mat>
+            </q-inner-loading>
+        </div>
+    </page>
+</template>
+
+<script>
+    import _ from 'lodash';
+    import { startLoading, stopLoading, showGlobalError, showToast } from '../../../helpers/ui'
+    import Page  from '../../Page'
+    import CscToggle from '../../form/CscToggle'
+    import { QInput, QCard, QBtn, QField, QIcon, QCardTitle, Dialog, QSpinnerMat, QToggle,
+        Toast, QList, QItem, QItemMain, QCardMain, QInnerLoading } from 'quasar-framework'
+    export default {
+        name: 'csc-call-blocking',
+        props: [
+            'pageName',
+            'title',
+            'loadMethod',
+            'addMethod',
+            'editMethod',
+            'removeMethod',
+            'toggleMethod'
+        ],
+        data () {
+            return {
+                addFormEnabled: false,
+                addFormError: false,
+                newNumber: '',
+                listLoading: false,
+                editing: false,
+                editingIndex: 0,
+                editingNumber: ''
+            }
+        },
+        mounted() {
+            this.listLoading = true;
+            this.$store.dispatch('callBlocking/load' + this.suffix).then(()=>{
+                this.listLoading = false;
+            }).catch((err)=>{
+                this.listLoading = false;
+            });
+        },
+        components: {
+            Page,
+            QToggle,
+            Toast,
+            QField,
+            QBtn,
+            QCard,
+            QInput,
+            QList,
+            QItem,
+            QItemMain,
+            QCardMain,
+            QIcon,
+            QCardTitle,
+            Dialog,
+            QInnerLoading,
+            QSpinnerMat,
+            CscToggle
+        },
+        computed: {
+            numbers (){
+                return this.$store.state.callBlocking[this.pageName + 'List'];
+            },
+            enabled () {
+                return this.$store.state.callBlocking[this.pageName + 'Enabled'];
+            },
+            toggleButtonLabel() {
+                if(!this.enabled) {
+                    return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleEnableLabel');
+                } else {
+                    return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleDisableLabel');
+                }
+            },
+            toggleToastMessage() {
+                if(this.enabled) {
+                    return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleEnabledToast');
+                } else {
+                    return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleDisabledToast');
+                }
+            },
+            suffix () {
+                return _.upperFirst(this.pageName);
+            }
+        },
+        methods: {
+            enableAddForm() {
+                this.addFormEnabled = true;
+                this.newNumber = '';
+                this.addFormError = false;
+            },
+            disableAddForm() {
+                this.addFormEnabled = false;
+            },
+            addNumber() {
+                this.listLoading = true;
+                this.$store.dispatch('callBlocking/addNumber' + this.suffix, this.newNumber).then(()=>{
+                    this.disableAddForm();
+                    showToast(this.$i18n.t('pages.callBlocking' + this.suffix + '.addedToast', {
+                        number:this.newNumber
+                    }));
+                    this.listLoading = false;
+                }).catch((err)=>{
+                    this.listLoading = false;
+                    this.addFormError = true;
+                });
+            },
+            editNumber(index) {
+                this.editing = true;
+                this.editingIndex = index;
+                this.editingNumber = this.numbers[index];
+            },
+            saveNumber(index) {
+                this.editing = false;
+                this.editingIndex = index;
+                this.listLoading = true;
+                if(this.numbers[index] !== this.editingNumber) {
+                    this.$store.dispatch('callBlocking/editNumber' + this.suffix, {
+                        index: index,
+                        number: this.editingNumber
+                    }).then(()=>{
+                        this.listLoading = false;
+                    }).catch((err)=>{
+                        this.listLoading = false;
+                    });
+                } else {
+                    this.listLoading = false;
+                }
+            },
+            removeNumber(index) {
+                var store = this.$store;
+                var state = this;
+                var i18n = this.$i18n;
+                Dialog.create({
+                    title: i18n.t('pages.callBlocking' + this.suffix + '.removeDialogTitle'),
+                    message: i18n.t('pages.callBlocking' + this.suffix + '.removeDialogText', {
+                        number: this.numbers[index]
+                    }),
+                    buttons: [
+                        'Cancel',
+                        {
+                            label: i18n.t('buttons.remove'),
+                            color: 'negative',
+                            handler () {
+                                state.listLoading = true;
+                                store.dispatch('callBlocking/removeNumber' + state.suffix, index).then(()=>{
+                                    state.listLoading = false;
+                                    showToast(i18n.t('pages.callBlocking' + state.suffix + '.removedToast', {
+                                        number: state.numbers[index]
+                                    }));
+                                }).catch((err)=>{
+                                    state.listLoading = false;
+                                });
+                            }
+                        }
+                    ]
+                });
+            },
+            toggle (enabled) {
+                this.$store.dispatch('callBlocking/toggle' + this.suffix, enabled).then(()=>{
+                    showToast(this.toggleToastMessage);
+                }).catch((err)=>{
+                    console.log(err);
+                });
+            }
+        }
+    }
+</script>
+
+<style>
+    #toggle-call-blocking {
+        margin-bottom:60px;
+    }
+    #add-number-form {
+        margin-bottom:15px;
+    }
+    .blocked-number .q-card-title-extra .q-icon {
+        margin-left: 10px;
+    }
+    .blocked-number .q-input {
+        margin:0;
+    }
+</style>

src/components/pages/CallBlocking/Incoming.vue

@@ -1,145 +1,18 @@
 <template>
-    <page title="Block incoming calls">
-        <q-field id="toggle-incoming">
-            <q-toggle :label="((!callBlockingEnabled)?'Enable':'Disable') + ' Call Blocking'"
-                      @input="toggle()" v-model="callBlockingEnabled"/>
-        </q-field>
-        <div id="add-number-form">
-            <q-field v-if="!addFormEnabled">
-                <q-btn color="primary" icon="fa-plus" @click="enableAddForm()">Add number</q-btn>
-            </q-field>
-            <div v-if="addFormEnabled">
-                <q-field :error="addFormError" error-label="Input a valid number or subscriber name">
-                    <q-input type="text" float-label="Number" v-model="newNumber"
-                             clearable @keyup.enter="saveNumber()" />
-                </q-field>
-                <q-btn @click="disableAddForm()">Cancel</q-btn>
-                <q-btn color="primary" icon-right="fa-save" @click="saveNumber()">Save</q-btn>
-            </div>
-        </div>
-        <div>
-            <q-card v-for="(number, index) in numbers">
-                <q-card-title>
-                    {{ number }}
-                    <q-icon slot="right" name="fa-remove" @click="removeNumber(index)" class="cursor-pointer"></q-icon>
-                </q-card-title>
-            </q-card>
-            <q-inner-loading :visible="listLoading">
-                <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
-            </q-inner-loading>
-        </div>
-    </page>
+    <csc-call-blocking page-name="incoming" />
 </template>
 
 <script>
-    import { startLoading, stopLoading, showGlobalError, showToast } from '../../../helpers/ui'
-    import Page  from '../../Page'
-    import { QInput, QCard, QBtn, QField, QIcon, QCardTitle, Dialog, QSpinnerGears,
-        QToggle, Toast, QList, QItem, QItemMain, QCardMain, QInnerLoading } from 'quasar-framework'
+    import CscCallBlocking from './CscCallBlocking'
     export default {
         data () {
-            return {
-                callBlockingEnabled: false,
-                addFormEnabled: false,
-                addFormError: false,
-                newNumber: '',
-                listLoading: false,
-            }
-        },
-        mounted() {
-            this.listLoading = true;
-            this.$store.dispatch('callBlocking/loadIncoming').then(()=>{
-                this.callBlockingEnabled = this.$store.state.callBlocking.incomingEnabled;
-                this.listLoading = false;
-            }).catch((err)=>{
-                this.listLoading = false;
-            });
+            return {}
         },
         components: {
-            Page,
-            QToggle,
-            Toast,
-            QField,
-            QBtn,
-            QCard,
-            QInput,
-            QList,
-            QItem,
-            QItemMain,
-            QCardMain,
-            QIcon,
-            QCardTitle,
-            Dialog,
-            QInnerLoading,
-            QSpinnerGears
-        },
-        computed: {
-            numbers: {
-                get(){
-                    return this.$store.state.callBlocking.incomingList;
-                }
-            }
-        },
-        methods: {
-            enableAddForm() {
-                this.addFormEnabled = true;
-                this.newNumber = '';
-                this.addFormError = false;
-            },
-            disableAddForm() {
-                this.addFormEnabled = false;
-            },
-            saveNumber() {
-                this.listLoading = true;
-                this.$store.dispatch('callBlocking/addNumberToIncoming', this.newNumber).then(()=>{
-                    this.disableAddForm();
-                    showToast('Added new number to list');
-                    this.listLoading = false;
-                }).catch((err)=>{
-                    this.listLoading = false;
-                    this.addFormError = true;
-                });
-
-            },
-            removeNumber(index) {
-                var store = this.$store;
-                var state = this;
-                Dialog.create({
-                    title: 'Remove number',
-                    message: 'You are about to remove the number',
-                    buttons: [
-                        'Cancel',
-                        {
-                            label: 'Remove',
-                            handler () {
-                                state.listLoading = true;
-                                store.dispatch('callBlocking/removeNumberFromIncoming', index).then(()=>{
-                                    state.listLoading = false;
-                                    showToast('Removed number from list');
-                                }).catch((err)=>{
-                                    state.listLoading = false;
-                                });
-                            }
-                        }
-                    ]
-                });
-            },
-            toggle () {
-                this.$store.dispatch('callBlocking/toggleIncoming', this.callBlockingEnabled).then(()=>{
-                    showToast('Call blocking for incoming calls ' + ((this.callBlockingEnabled)?'enabled':'disabled'));
-                }).catch((err)=>{
-                    console.log(err);
-                });
-            }
+            CscCallBlocking
         }
     }
 </script>
 
 <style>
-    #toggle-incoming {
-        margin-bottom:60px;
-    }
-    #add-number-form {
-        margin-bottom:15px;
-    }
 </style>

src/components/pages/CallBlocking/Outgoing.vue

@@ -1,15 +1,15 @@
 <template>
-    <page title="Outgoing"></page>
+    <csc-call-blocking page-name="outgoing" />
 </template>
 
 <script>
-    import Page  from '../../Page'
+    import CscCallBlocking from './CscCallBlocking'
     export default {
         data () {
             return {}
         },
         components: {
-            Page
+            CscCallBlocking
         }
     }
 </script>

src/locales/en.json

@@ -1,17 +1,16 @@
 {
     "title": "Customer Self-Care Portal",
-    "login_title": "Customer Self-Care Portal",
-    "login_button": "Sign In",
-    "login_error": "Wrong username or password",
-    "username": "Username",
-    "username_helper": "Web-Username, SIP-URI",
-    "password": "Password",
-    "password_helper": "Web-Password",
     "rtcEngineDisconnected": "You can not start a call. Service ist currently unavailable.",
     "startCall": "Start Call",
     "sendSms": "Send SMS",
     "sendFax": "Send Fax",
-    "mainNavigation": {
+    "loggedInAs": "Logged in as",
+    "buttons": {
+        "cancel": "Cancel",
+        "save": "Save",
+        "remove": "Remove"
+    },
+    "navigation": {
         "conversations":{
             "title": "Conversations",
             "subTitle": "Calls, SMS, VoiceMails"
@@ -41,5 +40,41 @@
             "devices": "Devices"
         }
     },
-    "loggedInAs": "Logged in as"
+    "pages": {
+        "login": {
+            "title": "Customer Self-Care Portal",
+            "button": "Sign In",
+            "error": "Wrong username or password",
+            "username": "Username",
+            "username_helper": "Web-Username, SIP-URI",
+            "password": "Password",
+            "password_helper": "Web-Password"
+        },
+        "callBlockingIncoming": {
+            "title": "Block incoming calls",
+            "toggleEnableLabel": "Enable call blocking list",
+            "toggleDisableLabel": "Disable call blocking list",
+            "toggleEnabledToast": "Call blocking of incoming calls enabled",
+            "toggleDisabledToast": "Call blocking of incoming calls disabled",
+            "removeDialogTitle": "Remove number",
+            "removeDialogText": "You are about to remove the number {number}",
+            "removedToast": "Removed number {number}",
+            "addedToast": "Added number {number}",
+            "addInputError": "Input a valid number or subscriber name",
+            "addNumberButton": "Add number"
+        },
+        "callBlockingOutgoing": {
+            "title": "Block outgoing calls",
+            "toggleEnableLabel": "Enable call blocking list",
+            "toggleDisableLabel": "Disable call blocking list",
+            "toggleEnabledToast": "Call blocking of outgoing calls enabled",
+            "toggleDisabledToast": "Call blocking of outgoing calls disabled",
+            "removeDialogTitle": "Remove number",
+            "removeDialogText": "You are about to remove the number {number}",
+            "removedToast": "Removed number {number}",
+            "addedToast": "Added number {number}",
+            "addInputError": "Input a valid number or subscriber name",
+            "addNumberButton": "Add number"
+        }
+    }
 }

src/store/call-blocking.js

@@ -1,21 +1,30 @@
 'use strict';
 
-import _ from 'lodash';
 import { enableIncomingCallBlocking,
     disableIncomingCallBlocking,
     getIncomingCallBlocking,
     addNumberToIncomingList,
+    editNumberFromIncomingList,
     removeNumberFromIncomingList,
+    enableOutgoingCallBlocking,
+    disableOutgoingCallBlocking,
+    getOutgoingCallBlocking,
+    addNumberToOutgoingList,
+    editNumberFromOutgoingList,
+    removeNumberFromOutgoingList,
     enablePrivacyCallBlocking,
     disablePrivacyCallBlocking,
     getPrivacyCallBlocking
 } from '../api/call-blocking';
 
+
 export default {
     namespaced: true,
     state: {
         incomingEnabled: false,
         incomingList: [],
+        outgoingEnabled: false,
+        outgoingList: [],
         privacyEnabled: false
     },
     getters: {},
@@ -38,6 +47,16 @@ export default {
         },
         loadPrivacy(state, options) {
             state.privacyEnabled = options.enabled;
+        },
+        enableOutgoing (state) {
+            state.outgoingEnabled = true;
+        },
+        disableOutgoing (state) {
+            state.outgoingEnabled = false;
+        },
+        loadOutgoing(state, options) {
+            state.outgoingEnabled = options.enabled;
+            state.outgoingList = options.list;
         }
     },
     actions: {
@@ -70,7 +89,7 @@ export default {
                 });
             });
         },
-        addNumberToIncoming(context, number) {
+        addNumberIncoming(context, number) {
             return new Promise((resolve, reject)=>{
                 addNumberToIncomingList(localStorage.getItem('subscriberId'), number).then(()=>{
                     return context.dispatch('loadIncoming');
@@ -81,7 +100,18 @@ export default {
                 });
             });
         },
-        removeNumberFromIncoming(context, index) {
+        editNumberIncoming(context, options) {
+            return new Promise((resolve, reject)=>{
+                editNumberFromIncomingList(localStorage.getItem('subscriberId'), options.index, options.number).then(()=>{
+                    return context.dispatch('loadIncoming');
+                }).then(()=>{
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            });
+        },
+        removeNumberIncoming(context, index) {
             return new Promise((resolve, reject)=>{
                 removeNumberFromIncomingList(localStorage.getItem('subscriberId'), index).then(()=>{
                     return context.dispatch('loadIncoming');
@@ -92,6 +122,68 @@ export default {
                 });
             });
         },
+        toggleOutgoing(context, enabled) {
+            return new Promise((resolve, reject)=>{
+                if(enabled) {
+                    enableOutgoingCallBlocking(localStorage.getItem('subscriberId')).then(()=>{
+                        context.commit('enableOutgoing');
+                        resolve();
+                    }).catch((err)=>{
+                        reject(err);
+                    });
+                } else {
+                    disableOutgoingCallBlocking(localStorage.getItem('subscriberId')).then(()=>{
+                        context.commit('disableOutgoing');
+                        resolve();
+                    }).catch((err)=>{
+                        reject(err);
+                    });
+                }
+            });
+        },
+        loadOutgoing(context) {
+            return new Promise((resolve, reject)=>{
+                getOutgoingCallBlocking(localStorage.getItem('subscriberId')).then((result)=>{
+                    context.commit('loadOutgoing', result);
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            });
+        },
+        addNumberOutgoing(context, number) {
+            return new Promise((resolve, reject)=>{
+                addNumberToOutgoingList(localStorage.getItem('subscriberId'), number).then(()=>{
+                    return context.dispatch('loadOutgoing');
+                }).then(()=>{
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            });
+        },
+        editNumberOutgoing(context, options) {
+            return new Promise((resolve, reject)=>{
+                editNumberFromOutgoingList(localStorage.getItem('subscriberId'), options.index, options.number).then(()=>{
+                    return context.dispatch('loadOutgoing');
+                }).then(()=>{
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            });
+        },
+        removeNumberOutgoing(context, index) {
+            return new Promise((resolve, reject)=>{
+                removeNumberFromOutgoingList(localStorage.getItem('subscriberId'), index).then(()=>{
+                    return context.dispatch('loadOutgoing');
+                }).then(()=>{
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            });
+        },
         togglePrivacy(context, enabled) {
             return new Promise((resolve, reject)=>{
                 if(enabled) {

t/api/call-blocking.js

@@ -0,0 +1,310 @@
+'use strict';
+
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import {
+    enableIncomingCallBlocking,
+    disableIncomingCallBlocking,
+    getIncomingCallBlocking,
+    addNumberToIncomingList,
+    editNumberFromIncomingList,
+    removeNumberFromIncomingList,
+    enableOutgoingCallBlocking,
+    disableOutgoingCallBlocking,
+    getOutgoingCallBlocking,
+    addNumberToOutgoingList,
+    editNumberFromOutgoingList,
+    removeNumberFromOutgoingList
+} from '../../src/api/call-blocking';
+import { assert } from 'chai';
+
+Vue.use(VueResource);
+
+describe('CallBlocking', function(){
+
+    var subscriberId = 123;
+
+    beforeEach(function(){
+        Vue.http.interceptors = [];
+    });
+
+    describe('Incoming', function(){
+        it('should enable call blocking for incoming calls', function(done) {
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                assert.equal(request.body[0].op, 'replace');
+                assert.equal(request.body[0].path, '/block_in_mode');
+                assert.equal(request.body[0].value, true);
+                next(request.respondWith('', {
+                    status: 204
+                }));
+            });
+            enableIncomingCallBlocking(subscriberId).then(()=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should disable call blocking for incoming calls', function(done) {
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                assert.equal(request.body[0].op, 'replace');
+                assert.equal(request.body[0].path, '/block_in_mode');
+                assert.equal(request.body[0].value, false);
+                next(request.respondWith('', {
+                    status: 204
+                }));
+            });
+            disableIncomingCallBlocking(subscriberId).then(()=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should get all data regarding incoming call blocking', function(done){
+            var list = [
+                "0123456789",
+                "0987654321"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                next(request.respondWith(JSON.stringify({
+                    "block_in_list" : list,
+                    "block_in_mode" : true
+                }), {
+                    status: 200
+                }));
+            });
+            getIncomingCallBlocking(subscriberId).then((result)=>{
+                assert.deepEqual(result.list, list);
+                assert.equal(result.enabled, true);
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should add a new number to incoming call blocking list', function(done){
+            var number = '0987654321';
+            var list = [
+                "0123456789"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                if(request.method === 'GET') {
+                    next(request.respondWith(JSON.stringify({
+                        "block_in_list" : list
+                    }), {
+                        status: 200
+                    }));
+                } else if(request.method === 'PUT') {
+                    assert.deepEqual(request.body.block_in_list, [].concat([number], list));
+                    next(request.respondWith('', {
+                        status: 200
+                    }));
+                }
+            });
+            addNumberToIncomingList(subscriberId, number).then((result)=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should edit a number from incoming call blocking list', function(done){
+            var number = '0987654321';
+            var list = [
+                "0123456789"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                if(request.method === 'GET') {
+                    next(request.respondWith(JSON.stringify({
+                        "block_in_list" : list
+                    }), {
+                        status: 200
+                    }));
+                } else if(request.method === 'PUT') {
+                    assert.deepEqual(request.body.block_in_list, [number]);
+                    next(request.respondWith('', {
+                        status: 200
+                    }));
+                }
+            });
+            editNumberFromIncomingList(subscriberId, 0, number).then((result)=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should remove a number from incoming call blocking list', function(done){
+            var number = '0987654321';
+            var list = [
+                "0123456789"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                if(request.method === 'GET') {
+                    next(request.respondWith(JSON.stringify({
+                        "block_in_list" : [].concat(list).concat(number)
+                    }), {
+                        status: 200
+                    }));
+                } else if(request.method === 'PUT') {
+                    assert.deepEqual(request.body.block_in_list, list);
+                    next(request.respondWith('', {
+                        status: 200
+                    }));
+                }
+            });
+            removeNumberFromIncomingList(subscriberId, 0, number).then((result)=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+    });
+
+    describe('Outgoing', function(){
+        it('should enable call blocking for outgoing calls', function(done) {
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                assert.equal(request.body[0].op, 'replace');
+                assert.equal(request.body[0].path, '/block_out_mode');
+                assert.equal(request.body[0].value, true);
+                next(request.respondWith('', {
+                    status: 204
+                }));
+            });
+            enableOutgoingCallBlocking(subscriberId).then(()=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should disable call blocking for outgoing calls', function(done) {
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                assert.equal(request.body[0].op, 'replace');
+                assert.equal(request.body[0].path, '/block_out_mode');
+                assert.equal(request.body[0].value, false);
+                next(request.respondWith('', {
+                    status: 204
+                }));
+            });
+            disableOutgoingCallBlocking(subscriberId).then(()=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should get all data regarding outgoing call blocking', function(done){
+            var list = [
+                "0123456789",
+                "0987654321"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                next(request.respondWith(JSON.stringify({
+                    "block_out_list" : list,
+                    "block_out_mode" : true
+                }), {
+                    status: 200
+                }));
+            });
+            getOutgoingCallBlocking(subscriberId).then((result)=>{
+                assert.deepEqual(result.list, list);
+                assert.equal(result.enabled, true);
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should add a new number to outgoing call blocking list', function(done){
+            var number = '0987654321';
+            var list = [
+                "0123456789"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                if(request.method === 'GET') {
+                    next(request.respondWith(JSON.stringify({
+                        "block_out_list" : list
+                    }), {
+                        status: 200
+                    }));
+                } else if(request.method === 'PUT') {
+                    assert.deepEqual(request.body.block_out_list, [].concat([number], list));
+                    next(request.respondWith('', {
+                        status: 200
+                    }));
+                }
+            });
+            addNumberToOutgoingList(subscriberId, number).then((result)=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should edit a number from outgoing call blocking list', function(done){
+            var number = '0987654321';
+            var list = [
+                "0123456789"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                if(request.method === 'GET') {
+                    next(request.respondWith(JSON.stringify({
+                        "block_out_list" : list
+                    }), {
+                        status: 200
+                    }));
+                } else if(request.method === 'PUT') {
+                    assert.deepEqual(request.body.block_out_list, [number]);
+                    next(request.respondWith('', {
+                        status: 200
+                    }));
+                }
+            });
+            editNumberFromOutgoingList(subscriberId, 0, number).then((result)=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+
+        it('should remove a number from outgoing call blocking list', function(done){
+            var number = '0987654321';
+            var list = [
+                "0123456789"
+            ];
+            Vue.http.interceptors.unshift((request, next)=>{
+                assert.equal(request.url, '/api/subscriberpreferences/' + subscriberId);
+                if(request.method === 'GET') {
+                    next(request.respondWith(JSON.stringify({
+                        "block_out_list" : [].concat(list).concat(number)
+                    }), {
+                        status: 200
+                    }));
+                } else if(request.method === 'PUT') {
+                    assert.deepEqual(request.body.block_in_list, list);
+                    next(request.respondWith('', {
+                        status: 200
+                    }));
+                }
+            });
+            removeNumberFromOutgoingList(subscriberId, 0, number).then((result)=>{
+                done();
+            }).catch((err)=>{
+                done(err);
+            });
+        });
+    });
+});