From dd4ea075defb070b63c21a456f182c3a5d3856fa Mon Sep 17 00:00:00 2001
From: Hans-Peter Herzog <hherzog@sipwise.com>
Date: Thu, 12 Oct 2017 15:29:28 +0200
Subject: [PATCH] TT#23176 CallBlocking: As a Customer I want to remove a
 number from the list

Change-Id: I77ac239f7c8ec6ac97f604a692f672008d9eef01
---
 src/api/call-blocking.js                      | 12 ++-
 src/api/subscriber.js                         | 24 ++++++
 src/components/layouts/Default.vue            |  5 +-
 .../pages/CallBlocking/Incoming.vue           | 82 +++++++++++++------
 src/helpers/ui.js                             |  9 +-
 src/store/call-blocking.js                    | 16 +++-
 6 files changed, 115 insertions(+), 33 deletions(-)

diff --git a/src/api/call-blocking.js b/src/api/call-blocking.js
index b130bed1..9e0db2d9 100644
--- a/src/api/call-blocking.js
+++ b/src/api/call-blocking.js
@@ -1,7 +1,7 @@
 
 import Vue from 'vue';
 import { enableBlockIn, disableBlockIn,
-    getPreferences, addToBlockInList } from './subscriber';
+    getPreferences, addToBlockInList, removeFromBlockInList } from './subscriber';
 
 export function enableIncomingCallBlocking(id) {
     return enableBlockIn(id);
@@ -37,3 +37,13 @@ export function addNumberToIncomingList(id, number) {
         }
     });
 }
+
+export function removeNumberFromIncomingList(id, index) {
+    return new Promise((resolve, reject)=>{
+        removeFromBlockInList(id, index).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject(err);
+        });
+    });
+}
diff --git a/src/api/subscriber.js b/src/api/subscriber.js
index 082b00c0..9ea7e03c 100644
--- a/src/api/subscriber.js
+++ b/src/api/subscriber.js
@@ -65,6 +65,26 @@ export function appendItemToArrayPreference(id, field, value) {
     });
 }
 
+export function removeItemFromArrayPreference(id, field, itemIndex) {
+    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, []);
+            _.remove(prefs[field], (value, index)=>{
+                return index === itemIndex;
+            });
+            return Vue.http.put('/api/subscriberpreferences/' + id, prefs);
+        }).then(()=>{
+            resolve();
+        }).catch((err)=>{
+            reject();
+        });
+    });
+}
+
 export function setBlockInMode(id, value) {
     return setPreference(id, 'block_in_mode', value);
 }
@@ -80,3 +100,7 @@ export function disableBlockIn(id) {
 export function addToBlockInList(id, number) {
     return prependItemToArrayPreference(id, 'block_in_list', number);
 }
+
+export function removeFromBlockInList(id, index) {
+    return removeItemFromArrayPreference(id, 'block_in_list', index);
+}
diff --git a/src/components/layouts/Default.vue b/src/components/layouts/Default.vue
index 17eb19e3..b1775c9a 100644
--- a/src/components/layouts/Default.vue
+++ b/src/components/layouts/Default.vue
@@ -47,11 +47,11 @@
                            :label="$t('mainNavigation.callBlocking.title')"
                            :sublabel="$t('mainNavigation.callBlocking.subTitle')">
                 <q-side-link item to="/user/call-blocking/incoming">
-                    <q-item-side icon="fa-arrow-circle-o-left"/>
+                    <q-item-side icon="call received"/>
                     <q-item-main :label="$t('mainNavigation.callBlocking.incoming')"/>
                 </q-side-link>
                 <q-side-link item to="/user/call-blocking/outgoing">
-                    <q-item-side icon="fa-arrow-circle-o-right"/>
+                    <q-item-side icon="call made"/>
                     <q-item-main :label="$t('mainNavigation.callBlocking.outgoing')"/>
                 </q-side-link>
                 <q-side-link item to="/user/call-blocking/privacy">
@@ -233,6 +233,7 @@
     .q-card {
         margin:15px;
         margin-left: 0px;
+        margin-right: 0px;
     }
 
     .q-card.page {
diff --git a/src/components/pages/CallBlocking/Incoming.vue b/src/components/pages/CallBlocking/Incoming.vue
index 8209c2f6..280be19a 100644
--- a/src/components/pages/CallBlocking/Incoming.vue
+++ b/src/components/pages/CallBlocking/Incoming.vue
@@ -1,8 +1,8 @@
 <template>
-    <page title="Incoming Calls">
+    <page title="Block incoming calls">
         <q-field id="toggle-incoming">
             <q-toggle :label="((!callBlockingEnabled)?'Enable':'Disable') + ' Call Blocking'"
-                      @input="toggleIncoming()" v-model="callBlockingEnabled"/>
+                      @input="toggle()" v-model="callBlockingEnabled"/>
         </q-field>
         <div id="add-number-form">
             <q-field v-if="!addFormEnabled">
@@ -11,25 +11,31 @@
             <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="saveNewNumber()" />
+                             clearable @keyup.enter="saveNumber()" />
                 </q-field>
                 <q-btn @click="disableAddForm()">Cancel</q-btn>
-                <q-btn color="primary" icon-right="fa-save" @click="saveNewNumber()">Save</q-btn>
+                <q-btn color="primary" icon-right="fa-save" @click="saveNumber()">Save</q-btn>
             </div>
         </div>
-        <q-card v-for="number in numbers">
-            <q-card-main>
-                {{ number }}
-            </q-card-main>
-        </q-card>
+        <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>
 </template>
 
 <script>
-    import { startLoading, stopLoading, showGlobalError } from '../../../helpers/ui'
+    import { startLoading, stopLoading, showGlobalError, showToast } from '../../../helpers/ui'
     import Page  from '../../Page'
-    import { QInput, QCard, QBtn, QField,
-        QToggle, Toast, QList, QItem, QItemMain, QCardMain } from 'quasar-framework'
+    import { QInput, QCard, QBtn, QField, QIcon, QCardTitle, Dialog, QSpinnerGears,
+        QToggle, Toast, QList, QItem, QItemMain, QCardMain, QInnerLoading } from 'quasar-framework'
     export default {
         data () {
             return {
@@ -41,10 +47,12 @@
             }
         },
         mounted() {
+            this.listLoading = true;
             this.$store.dispatch('callBlocking/loadIncoming').then(()=>{
                 this.callBlockingEnabled = this.$store.state.callBlocking.incomingEnabled;
+                this.listLoading = false;
             }).catch((err)=>{
-                console.log(err);
+                this.listLoading = false;
             });
         },
         components: {
@@ -58,7 +66,12 @@
             QList,
             QItem,
             QItemMain,
-            QCardMain
+            QCardMain,
+            QIcon,
+            QCardTitle,
+            Dialog,
+            QInnerLoading,
+            QSpinnerGears
         },
         computed: {
             numbers: {
@@ -76,15 +89,11 @@
             disableAddForm() {
                 this.addFormEnabled = false;
             },
-            saveNewNumber() {
+            saveNumber() {
                 this.listLoading = true;
-                this.$store.dispatch('callBlocking/addNumber', this.newNumber).then(()=>{
+                this.$store.dispatch('callBlocking/addNumberToIncoming', this.newNumber).then(()=>{
                     this.disableAddForm();
-                    Toast.create({
-                        html: 'Added new number to list',
-                        color: 'white',
-                        bgColor: '#68A44E'
-                    });
+                    showToast('Added new number to list');
                     this.listLoading = false;
                 }).catch((err)=>{
                     this.listLoading = false;
@@ -92,13 +101,32 @@
                 });
 
             },
-            toggleIncoming () {
+            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(()=>{
-                    Toast.create({
-                        html: 'Call blocking for incoming calls ' + ((this.callBlockingEnabled)?'enabled':'disabled'),
-                        color: 'white',
-                        bgColor: '#68A44E'
-                    });
+                    showToast('Call blocking for incoming calls ' + ((this.callBlockingEnabled)?'enabled':'disabled'));
                 }).catch((err)=>{
                     console.log(err);
                 });
diff --git a/src/helpers/ui.js b/src/helpers/ui.js
index e800627b..97ebaa82 100644
--- a/src/helpers/ui.js
+++ b/src/helpers/ui.js
@@ -1,5 +1,5 @@
 
-import { Loading, Alert } from 'quasar-framework'
+import { Loading, Alert, Toast } from 'quasar-framework'
 
 export function startLoading() {
     Loading.show({ delay: 0 });
@@ -19,3 +19,10 @@ export function showGlobalError(message) {
     setTimeout(()=>{ alert.dismiss(); }, 2000);
 }
 
+export function showToast(message) {
+    Toast.create({
+        html: message,
+        color: 'white',
+        bgColor: '#68A44E'
+    });
+}
diff --git a/src/store/call-blocking.js b/src/store/call-blocking.js
index 4e725fca..7471cffc 100644
--- a/src/store/call-blocking.js
+++ b/src/store/call-blocking.js
@@ -4,7 +4,8 @@ import _ from 'lodash';
 import { enableIncomingCallBlocking,
     disableIncomingCallBlocking,
     getIncomingCallBlocking,
-    addNumberToIncomingList
+    addNumberToIncomingList,
+    removeNumberFromIncomingList
 } from '../api/call-blocking';
 
 
@@ -57,7 +58,7 @@ export default {
                 });
             });
         },
-        addNumber(context, number) {
+        addNumberToIncoming(context, number) {
             return new Promise((resolve, reject)=>{
                 addNumberToIncomingList(localStorage.getItem('subscriberId'), number).then(()=>{
                     return context.dispatch('loadIncoming');
@@ -67,6 +68,17 @@ export default {
                     reject(err);
                 });
             });
+        },
+        removeNumberFromIncoming(context, index) {
+            return new Promise((resolve, reject)=>{
+                removeNumberFromIncomingList(localStorage.getItem('subscriberId'), index).then(()=>{
+                    return context.dispatch('loadIncoming');
+                }).then(()=>{
+                    resolve();
+                }).catch((err)=>{
+                    reject(err);
+                });
+            });
         }
     }
 };