TT#23175 CallBlocking: As a Customer I want to add a new number

Change-Id: Idf59aff6496dcbf1911ec3eab6931d1c826141db

src/api/call-blocking.js

@@ -1,6 +1,7 @@
 
 import Vue from 'vue';
-import { enableBlockIn, disableBlockIn, getPreferences } from './subscriber';
+import { enableBlockIn, disableBlockIn,
+    getPreferences, addToBlockInList } from './subscriber';
 
 export function enableIncomingCallBlocking(id) {
     return enableBlockIn(id);
@@ -14,10 +15,15 @@ export function getIncomingCallBlocking(id) {
     return new Promise((resolve, reject)=>{
         getPreferences(id).then((result)=>{
             resolve({
-                enabled: result.block_in_mode
+                enabled: result.block_in_mode,
+                list: result.block_in_list
             });
         }).catch((err)=>{
             reject(err);
         });
     });
 }
+
+export function addNumberToIncomingList(id, number) {
+    return addToBlockInList(id, number);
+}

src/api/subscriber.js

@@ -1,4 +1,5 @@
 
+import _ from 'lodash';
 import Vue from 'vue';
 
 export function getPreferences(id) {
@@ -13,12 +14,36 @@ export function getPreferences(id) {
 
 export function setPreference(id, field, value) {
     return new Promise((resolve, reject)=>{
-        var pref = {};
-        pref[field] = value;
-        Vue.http.put('/api/subscriberpreferences/' + id, pref).then((result)=>{
+        Promise.resolve().then(()=>{
+            return getPreferences(id);
+        }).then((result)=>{
+            var prefs = _.cloneDeep(result);
+            delete prefs._links;
+            prefs[field] = value;
+            return Vue.http.put('/api/subscriberpreferences/' + id, prefs);
+        }).then(()=>{
             resolve();
         }).catch((err)=>{
-            reject(err);
+            reject();
+        });
+    });
+}
+
+export function addItemToArrayPreference(id, field, value) {
+    return new Promise((resolve, reject)=>{
+        Promise.resolve().then(()=>{
+            return getPreferences(id);
+        }).then((result)=>{
+            var prefs = _.cloneDeep(result);
+            delete prefs._links;
+            prefs[field] = _.get(prefs, field, []);
+            // prefs[field].push(value);
+            prefs[field] = [value].concat(prefs[field]);
+            return Vue.http.put('/api/subscriberpreferences/' + id, prefs);
+        }).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject();
         });
     });
 }
@@ -34,3 +59,7 @@ export function enableBlockIn(id) {
 export function disableBlockIn(id) {
     return setBlockInMode(id, false);
 }
+
+export function addToBlockInList(id, number) {
+    return addItemToArrayPreference(id, 'block_in_list', number);
+}

src/components/layouts/Default.vue

@@ -231,15 +231,13 @@
     }
 
     .q-card {
-        margin: 0;
+        margin:15px;
+        margin-left: 0px;
     }
 
     .q-card.page {
         padding: 15px;
-    }
-
-    .q-card.pbx-group {
-        margin-bottom: 15px;
+        margin: 0;
     }
 
     .page-action-button {

src/components/pages/CallBlocking/Incoming.vue

@@ -1,18 +1,40 @@
 <template>
     <page title="Incoming Calls">
-        <q-toggle :label="((!callBlockingEnabled)?'Enable':'Disable') + ' Call Blocking'"
-                  @input="toggleIncoming()" v-model="callBlockingEnabled"/>
+        <q-field id="toggle-incoming">
+            <q-toggle :label="((!callBlockingEnabled)?'Enable':'Disable') + ' Call Blocking'"
+                      @input="toggleIncoming()" 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-input type="text" float-label="Number" v-model="newNumber"
+                         clearable @keyup.enter="saveNewNumber()" />
+                <q-btn @click="disableAddForm()">Cancel</q-btn>
+                <q-btn color="primary" icon-right="fa-save" @click="saveNewNumber()">Save</q-btn>
+            </div>
+        </div>
+        <q-card v-for="number in numbers">
+            <q-card-main>
+                {{ number }}
+            </q-card-main>
+        </q-card>
     </page>
 </template>
 
 <script>
     import { startLoading, stopLoading, showGlobalError } from '../../../helpers/ui'
     import Page  from '../../Page'
-    import { QField, QToggle, Toast } from 'quasar-framework'
+    import { QInput, QCard, QBtn, QField,
+        QToggle, Toast, QList, QItem, QItemMain, QCardMain } from 'quasar-framework'
     export default {
         data () {
             return {
-                callBlockingEnabled: false
+                callBlockingEnabled: false,
+                addFormEnabled: false,
+                newNumber: '',
+                listLoading: false
             }
         },
         mounted() {
@@ -26,11 +48,50 @@
             Page,
             QToggle,
             Toast,
-            QField
+            QField,
+            QBtn,
+            QCard,
+            QInput,
+            QList,
+            QItem,
+            QItemMain,
+            QCardMain
+        },
+        computed: {
+            numbers: {
+                get(){
+                    return this.$store.state.callBlocking.incomingList;
+                }
+            }
         },
         methods: {
+            enableAddForm() {
+                this.addFormEnabled = true;
+            },
+            disableAddForm() {
+                this.addFormEnabled = false;
+            },
+            saveNewNumber() {
+                this.listLoading = true;
+                this.$store.dispatch('callBlocking/addNumber', this.newNumber).then(()=>{
+                    this.disableAddForm();
+                    Toast.create({
+                        html: 'Added new number to list',
+                        color: 'white',
+                        bgColor: '#68A44E'
+                    });
+                    this.listLoading = false;
+                    this.newNumber = '';
+                }).catch((err)=>{
+                    this.listLoading = false;
+                    this.newNumber = '';
+                    console.log(err);
+                });
+
+            },
             toggleIncoming () {
                 this.$store.dispatch('callBlocking/toggleIncoming', this.callBlockingEnabled).then(()=>{
+                    console.log('djskhfjksdhfkjhskdjh');
                     Toast.create({
                         html: 'Call blocking for incoming calls ' + ((this.callBlockingEnabled)?'enabled':'disabled'),
                         color: 'white',
@@ -45,4 +106,10 @@
 </script>
 
 <style>
+    #toggle-incoming {
+        margin-bottom:60px;
+    }
+    #add-number-form {
+        margin-bottom:15px;
+    }
 </style>

src/store/call-blocking.js

@@ -3,7 +3,8 @@
 import _ from 'lodash';
 import { enableIncomingCallBlocking,
     disableIncomingCallBlocking,
-    getIncomingCallBlocking
+    getIncomingCallBlocking,
+    addNumberToIncomingList
 } from '../api/call-blocking';
 
 
@@ -23,6 +24,7 @@ export default {
         },
         loadIncoming(state, options) {
             state.incomingEnabled = options.enabled;
+            state.incomingList = options.list;
         }
     },
     actions: {
@@ -54,6 +56,17 @@ export default {
                     reject(err);
                 });
             });
+        },
+        addNumber(context, number) {
+            return new Promise((resolve, reject)=>{
+                addNumberToIncomingList(localStorage.getItem('subscriberId'), number).then(()=>{
+                    return context.dispatch('loadIncoming');
+                }).then(()=>{
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            });
         }
     }
 };