From 153adafdfd63694eb3ec69cf89ea0c6aebb11cde Mon Sep 17 00:00:00 2001
From: Hans-Peter Herzog <hherzog@sipwise.com>
Date: Wed, 15 Nov 2017 09:11:09 +0100
Subject: [PATCH] TT#24900 CallBlocking: Rework and fix wrong meaning of
 enabling and disabling

Change-Id: I7eb3c5337cafd383710c3987ec67d22b078c85c3
---
 .../pages/CallBlocking/CscCallBlocking.vue    | 91 +++++++++++++++----
 src/locales/en.json                           | 20 ++--
 2 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/src/components/pages/CallBlocking/CscCallBlocking.vue b/src/components/pages/CallBlocking/CscCallBlocking.vue
index d89eb9ae..3a89d90c 100644
--- a/src/components/pages/CallBlocking/CscCallBlocking.vue
+++ b/src/components/pages/CallBlocking/CscCallBlocking.vue
@@ -1,12 +1,31 @@
 <template>
     <csc-page :title="$t('pages.callBlocking' + suffix + '.title')">
-        <q-field id="toggle-call-blocking">
-            <csc-toggle :label="toggleButtonLabel" @change="toggle" :enabled="enabled"/>
-        </q-field>
+        <div class="row">
+            <q-list link no-border class="mode-list col">
+                <q-item tag="label">
+                    <q-item-side>
+                        <q-radio v-model="enabled" val="blacklist" color="negative"
+                                 checked-icon="fa-ban" uncheck-icon="fa-ban"/>
+                    </q-item-side>
+                    <q-item-main>
+                        <q-item-tile label>{{ $t('pages.callBlocking' + suffix + '.toggleDisableLabel') }}</q-item-tile>
+                    </q-item-main>
+                </q-item>
+                <q-item tag="label">
+                    <q-item-side>
+                        <q-radio v-model="enabled" val="whitelist" color="primary"
+                                 checked-icon="check" uncheck-icon="check" />
+                    </q-item-side>
+                    <q-item-main>
+                        <q-item-tile label>{{ $t('pages.callBlocking' + suffix + '.toggleEnableLabel') }}</q-item-tile>
+                    </q-item-main>
+                </q-item>
+            </q-list>
+        </div>
         <div id="add-number-form">
             <q-field v-if="!addFormEnabled">
                 <q-btn color="primary"
-                   icon="fa-plus"
+                   icon="fa-plus" flat
                    @click="enableAddForm()">{{ $t('pages.callBlocking' + suffix + '.addNumberButton') }}</q-btn>
             </q-field>
             <div v-if="addFormEnabled">
@@ -20,18 +39,20 @@
         <div>
             <q-card class="blocked-number" v-for="(number, index) in numbers">
                 <q-card-title>
-                    <q-icon v-if="!(editing && editingIndex == index)" name="fa-ban" color="secondary" size="22px"/>
-                    <span v-if="!(editing && editingIndex == index)" @click="editNumber(index)">{{ number }}</span>
+                    <q-icon v-if="!(editing && editingIndex == index) && enabled == 'blacklist'" name="fa-ban" color="negative" size="22px"/>
+                    <q-icon v-if="!(editing && editingIndex == index) && enabled == 'whitelist'" name="check" color="primary" size="22px"/>
+                    <span class="blocked-number-title" 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-btn color="primary" flat small round v-if="editing && editingIndex == index" slot="right"
-                           icon="fa-save" @click="saveNumber(index)" class="cursor-pointer">{{ $t('buttons.save') }}</q-btn>
-                    <q-btn color="primary" flat small round v-if="editing && editingIndex == index" slot="right"
-                           icon="clear" @click="saveNumber(index)" class="cursor-pointer">{{ $t('buttons.cancel') }}</q-btn>
-                    <q-btn color="primary" flat small round v-if="!(editing && editingIndex == index)" slot="right"
-                           icon="fa-edit" @click="editNumber(index)" class="cursor-pointer">{{ $t('buttons.edit') }}</q-btn>
-                    <q-btn color="primary" flat small round v-if="!(editing && editingIndex == index)" slot="right"
-                           icon="delete" @click="removeNumber(index)" class="cursor-pointer">{{ $t('buttons.remove') }}</q-btn>
+                    <q-btn color="primary" flat v-if="editing && editingIndex == index" slot="right"
+                           icon="fa-save" @click="saveNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.save') }}</span></q-btn>
+                    <q-btn flat v-if="editing && editingIndex == index" slot="right"
+                           icon="clear" @click="saveNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.cancel') }}</span></q-btn>
+                    <q-btn color="primary" flat v-if="!(editing && editingIndex == index)" slot="right"
+                           icon="fa-edit" @click="editNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.edit') }}</span></q-btn>
+                    <q-btn color="negative" flat v-if="!(editing && editingIndex == index)" slot="right"
+                           icon="delete" @click="removeNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.remove') }}</span></q-btn>
                 </q-card-title>
             </q-card>
             <q-inner-loading :visible="listLoading">
@@ -47,7 +68,7 @@
     import CscPage  from '../../CscPage'
     import CscToggle from '../../form/CscToggle'
     import { QInput, QCard, QBtn, QField, QIcon, QCardTitle, QCardActions, Dialog, QSpinnerMat, QToggle,
-        Toast, QList, QItem, QItemMain, QCardMain, QInnerLoading } from 'quasar-framework'
+        Toast, QList, QItem, QItemSide, QItemMain, QCardMain, QInnerLoading, QOptionGroup, QSelect, QRadio } from 'quasar-framework'
     export default {
         name: 'csc-call-blocking',
         props: [
@@ -67,7 +88,8 @@
                 listLoading: false,
                 editing: false,
                 editingIndex: 0,
-                editingNumber: ''
+                editingNumber: '',
+                mode: null
             }
         },
         mounted() {
@@ -87,6 +109,7 @@
             QInput,
             QList,
             QItem,
+            QItemSide,
             QItemMain,
             QCardMain,
             QIcon,
@@ -96,14 +119,31 @@
             QInnerLoading,
             QSpinnerMat,
             CscToggle,
-            CscPage
+            CscPage,
+            QOptionGroup,
+            QSelect,
+            QRadio
         },
         computed: {
             numbers() {
                 return this.$store.state.callBlocking[this.pageName + 'List'];
             },
-            enabled() {
-                return this.$store.state.callBlocking[this.pageName + 'Enabled'];
+            enabled: {
+                get() {
+                    var enabled = this.$store.state.callBlocking[this.pageName + 'Enabled'];
+                    if(enabled) {
+                        return 'whitelist';
+                    } else {
+                        return 'blacklist';
+                    }
+                },
+                set(value) {
+                    if(value === 'blacklist') {
+                        this.mode = false;
+                    } else {
+                        this.mode = true;
+                    }
+                }
             },
             toggleButtonLabel() {
                 if(!this.enabled) {
@@ -113,7 +153,7 @@
                 }
             },
             toggleToastMessage() {
-                if(this.enabled) {
+                if(this.mode) {
                     return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleEnabledToast');
                 } else {
                     return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleDisabledToast');
@@ -123,6 +163,11 @@
                 return _.upperFirst(this.pageName);
             }
         },
+        watch: {
+            mode(value) {
+                this.toggle(value);
+            }
+        },
         methods: {
             enableAddForm() {
                 this.addFormEnabled = true;
@@ -217,4 +262,10 @@
     .blocked-number .q-input {
         margin: 0;
     }
+    .blocked-number-title {
+        padding-left: 8px;
+    }
+    .mode-list {
+        margin-bottom: 30px;
+    }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 967a95a2..a9e8bf15 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -56,11 +56,11 @@
             "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",
+            "title": "Block/Allow incoming calls",
+            "toggleEnableLabel": "Allow only listed numbers",
+            "toggleDisableLabel": "Block all listed number",
+            "toggleEnabledToast": "All listed numbers are allowed",
+            "toggleDisabledToast": "All listed numbers are blocked",
             "removeDialogTitle": "Remove number",
             "removeDialogText": "You are about to remove the number {number}",
             "removedToast": "Removed number {number}",
@@ -69,11 +69,11 @@
             "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",
+            "title": "Block/Allow outgoing calls",
+            "toggleEnableLabel": "Allow only listed numbers",
+            "toggleDisableLabel": "Block all listed number",
+            "toggleEnabledToast": "All listed numbers are allowed",
+            "toggleDisabledToast": "All listed numbers are blocked",
             "removeDialogTitle": "Remove number",
             "removeDialogText": "You are about to remove the number {number}",
             "removedToast": "Removed number {number}",