TT#39589 CallBlocking: Refactor component, actions and store methods

Change-Id: Iac9b421c0684b1ecc2db0b4482c229ff5b5634ea

src/api/call-blocking.js

@@ -1,13 +1,20 @@
 
 import _ from 'lodash';
 
-import { enableBlockIn, disableBlockIn,
-    getPreferences, addToBlockInList,
-    editBlockInList, removeFromBlockInList,
-    enableBlockOut, disableBlockOut,
-    addToBlockOutList, editBlockOutList,
+import {
+    enableBlockIn,
+    disableBlockIn,
+    getPreferences,
+    addToBlockInList,
+    editBlockInList,
+    removeFromBlockInList,
+    enableBlockOut,
+    disableBlockOut,
+    addToBlockOutList,
+    editBlockOutList,
     removeFromBlockOutList,
-    enablePrivacy, disablePrivacy
+    enablePrivacy,
+    disablePrivacy
 } from './subscriber';
 
 export function enableIncomingCallBlocking(id) {
@@ -133,9 +140,7 @@ export function disablePrivacyCallBlocking(id) {
 export function getPrivacyCallBlocking(id) {
     return new Promise((resolve, reject)=>{
         getPreferences(id).then((result)=>{
-            resolve({
-                enabled: result.clir
-            });
+            resolve(result.clir);
         }).catch((err)=>{
             reject(err);
         });

src/components/pages/CallBlocking/Privacy.vue

@@ -1,45 +1,106 @@
 <template>
-    <csc-page title="Privacy" class="csc-simple-page">
-        <q-toggle :label="(!callBlockingEnabled ? 'Hide' : 'Show') + ' Own Number'"
-                @input="toggle()" v-model="callBlockingEnabled"/>
+    <csc-page
+        class="csc-simple-page"
+    >
+        <q-field
+            class="csc-privacy"
+        >
+            <q-toggle
+                :label="privacyLabel"
+                :value="privacy"
+                @input="toggle()"
+                checked-icon="visibility_off"
+                unchecked-icon="visibility"
+            />
+            <q-inner-loading
+                v-if="privacyLoading"
+                :visible="privacyLoading"
+            >
+                <q-spinner-mat
+                    size="30px"
+                    color="primary"
+                />
+            </q-inner-loading>
+        </q-field>
     </csc-page>
 </template>
 
 <script>
-    import { showToast } from '../../../helpers/ui'
+
+    import {
+        mapGetters
+    } from 'vuex'
+    import {
+        showToast
+    } from '../../../helpers/ui'
     import CscPage  from '../../CscPage'
-    import { QField, QToggle, Toast } from 'quasar-framework'
+    import {
+        QField,
+        QToggle,
+        Toast,
+        QInnerLoading,
+        QSpinnerMat
+    } from 'quasar-framework'
+
     export default {
         data () {
-            return {
-                callBlockingEnabled: false
-            }
-        },
-        mounted() {
-            this.$store.dispatch('callBlocking/loadPrivacy').then(()=>{
-                this.callBlockingEnabled = this.$store.state.callBlocking.privacyEnabled;
-            }).catch((err)=>{
-                console.log(err);
-            });
+            return {}
         },
         components: {
             CscPage,
             QToggle,
             Toast,
-            QField
+            QField,
+            QInnerLoading,
+            QSpinnerMat
+        },
+        mounted() {
+            this.$store.dispatch('callBlocking/loadPrivacy');
+        },
+        computed: {
+            privacyLabel() {
+                if(this.privacy) {
+                    return this.$t('callBlocking.privacyEnabledLabel');
+                }
+                else {
+                    return this.$t('callBlocking.privacyDisabledLabel');
+                }
+            },
+            fieldIcon() {
+                if(!this.privacy) {
+                    return 'visibility';
+                }
+                else {
+                    return 'visibility_off';
+                }
+            },
+            ...mapGetters('callBlocking', [
+                'privacy',
+                'privacyError',
+                'privacyUpdated',
+                'privacyLoadingState',
+                'privacyLoading'
+            ])
         },
         methods: {
             toggle () {
-                this.$store.dispatch('callBlocking/togglePrivacy', this.callBlockingEnabled).then(()=>{
-                    showToast('Own number will now be ' + (this.callBlockingEnabled ? 'hidden' : 'shown') +
-                    ' on outbound calls');
-                }).catch((err)=>{
-                    console.log(err);
-                });
+                this.$store.dispatch('callBlocking/updatePrivacy', !this.privacy);
+            }
+        },
+        watch: {
+            privacyUpdated(updated) {
+                if(updated && this.privacy) {
+                    showToast(this.$t('callBlocking.privacyEnabledToast'));
+                }
+                else if (updated && !this.privacy) {
+                    showToast(this.$t('callBlocking.privacyDisabledToast'));
+                }
             }
         }
     }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+    .csc-privacy
+        position relative
 </style>

src/locales/en.json

@@ -318,6 +318,12 @@
         "keyTypePrivate": "Private",
         "filterPhoneModel": "Filter by phone model"
     },
+    "callBlocking": {
+        "privacyEnabledToast": "Your number is hidden to the callee",
+        "privacyEnabledLabel": "Your number is hidden to the callee",
+        "privacyDisabledToast": "Your number is visible to the callee",
+        "privacyDisabledLabel": "Your number is visible to the callee"
+    },
     "communication": {
         "sendFax": "Send Fax",
         "quality": {

src/store/call-blocking.js

@@ -1,6 +1,8 @@
 'use strict';
 
-import { enableIncomingCallBlocking,
+import { RequestState } from './common'
+import {
+    enableIncomingCallBlocking,
     disableIncomingCallBlocking,
     getIncomingCallBlocking,
     addNumberToIncomingList,
@@ -12,10 +14,11 @@ import { enableIncomingCallBlocking,
     addNumberToOutgoingList,
     editNumberFromOutgoingList,
     removeNumberFromOutgoingList,
-    enablePrivacyCallBlocking,
-    disablePrivacyCallBlocking,
     getPrivacyCallBlocking
 } from '../api/call-blocking';
+import {
+    setPrivacy
+} from '../api/subscriber';
 
 export default {
     namespaced: true,
@@ -24,9 +27,28 @@ export default {
         incomingList: [],
         outgoingEnabled: false,
         outgoingList: [],
-        privacyEnabled: false
+        privacy: false,
+        privacyLoadingState: RequestState.initiated,
+        privacyUpdated: false,
+        privacyError: null
+    },
+    getters: {
+        privacy(state) {
+            return state.privacy;
+        },
+        privacyError(state) {
+            return state.privacyError;
+        },
+        privacyUpdated(state) {
+            return state.privacyUpdated;
+        },
+        privacyLoadingState(state) {
+            return state.privacyUpdated;
+        },
+        privacyLoading(state) {
+            return state.privacyLoadingState === RequestState.requesting;
+        }
     },
-    getters: {},
     mutations: {
         enableIncoming (state) {
             state.incomingEnabled = true;
@@ -38,15 +60,6 @@ export default {
             state.incomingEnabled = options.enabled;
             state.incomingList = options.list;
         },
-        enablePrivacy (state) {
-            state.privacyEnabled = true;
-        },
-        disablePrivacy (state) {
-            state.privacyEnabled= false;
-        },
-        loadPrivacy(state, options) {
-            state.privacyEnabled = options.enabled;
-        },
         enableOutgoing (state) {
             state.outgoingEnabled = true;
         },
@@ -56,6 +69,31 @@ export default {
         loadOutgoing(state, options) {
             state.outgoingEnabled = options.enabled;
             state.outgoingList = options.list;
+        },
+        privacyLoading(state) {
+            state.privacyLoadingState = RequestState.requesting;
+            state.privacyError = null;
+            state.privacyUpdated = false;
+        },
+        privacyLoaded(state, privacy) {
+            state.privacy = privacy;
+            state.privacyLoadingState = RequestState.succeeded;
+            state.privacyError = null;
+        },
+        privacyLoadingFailed(state, error) {
+            state.privacyLoadingState = RequestState.failed;
+            state.privacyError = error;
+        },
+        privacyUpdated(state, privacy) {
+            state.privacy = privacy;
+            state.privacyLoadingState = RequestState.succeeded;
+            state.privacyError = null;
+            state.privacyUpdated = true;
+        },
+        privacyUpdatingFailed(state, error) {
+            state.privacyLoadingState = RequestState.failed;
+            state.privacyError = error;
+            state.privacyUpdated = true;
         }
     },
     actions: {
@@ -185,34 +223,20 @@ export default {
                 });
             });
         },
-        togglePrivacy(context, enabled) {
-            return new Promise((resolve, reject)=>{
-                if(enabled) {
-                    enablePrivacyCallBlocking(localStorage.getItem('subscriberId')).then(()=>{
-                        context.commit('enablePrivacy');
-                        resolve();
-                    }).catch((err)=>{
-                        reject(err);
-                    });
-                }
-                else {
-                    disablePrivacyCallBlocking(localStorage.getItem('subscriberId')).then(()=>{
-                        context.commit('disablePrivacy');
-                        resolve();
-                    }).catch((err)=>{
-                        reject(err);
-                    });
-                }
+        updatePrivacy(context, privacy) {
+            context.commit('privacyLoading');
+            setPrivacy(localStorage.getItem('subscriberId'), privacy).then(()=>{
+                context.commit('privacyUpdated', privacy);
+            }).catch((err)=>{
+                context.commit('privacyUpdatingFailed', err.message);
             });
         },
         loadPrivacy(context) {
-            return new Promise((resolve, reject)=>{
-                getPrivacyCallBlocking(localStorage.getItem('subscriberId')).then((result)=>{
-                    context.commit('loadPrivacy', result);
-                    resolve();
-                }).catch((err)=>{
-                    reject(err);
-                });
+            context.commit('privacyLoading');
+            getPrivacyCallBlocking(localStorage.getItem('subscriberId')).then((privacy)=>{
+                context.commit('privacyLoaded', privacy);
+            }).catch((err)=>{
+                context.commit('privacyLoadingFailed', err.message);
             });
         }
     }

t/store/call-blocking.js

@@ -62,12 +62,4 @@ describe('CallBlocking', function(){
             assert.deepEqual(state.outgoingList, list);
         });
     });
-
-    it('should enable/disable privacy call blocking', ()=>{
-        var state = {};
-        CallBlockingModule.mutations.enablePrivacy(state);
-        assert.equal(state.privacyEnabled, true);
-        CallBlockingModule.mutations.disablePrivacy(state);
-        assert.equal(state.privacyEnabled, false);
-    });
 });