sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#24900 CallBlocking: Rework and fix wrong meaning of enabling and disabling

Browse Source 
Change-Id: I7eb3c5337cafd383710c3987ec67d22b078c85c3
changes/08/16908/5
Hans-Peter Herzog 8 years ago
parent 93ea8818ea
commit 153adafdfd
2 changed files with 81 additions and 30 deletions
Show Stats Download Patch File Download Diff File

91
src/components/pages/CallBlocking/CscCallBlocking.vue
Unescape View File

@ -1,12 +1,31 @@
<template> <template>
<csc-page :title="$t('pages.callBlocking' + suffix + '.title')"> <csc-page :title="$t('pages.callBlocking' + suffix + '.title')">
<q-field id="toggle-call-blocking"> <div class="row">
<csc-toggle :label="toggleButtonLabel" @change="toggle" :enabled="enabled"/> <q-list link no-border class="mode-list col">
</q-field> <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"> <div id="add-number-form">
<q-field v-if="!addFormEnabled"> <q-field v-if="!addFormEnabled">
<q-btn color="primary" <q-btn color="primary"
icon="fa-plus" icon="fa-plus" flat
@click="enableAddForm()">{{ $t('pages.callBlocking' + suffix + '.addNumberButton') }}</q-btn> @click="enableAddForm()">{{ $t('pages.callBlocking' + suffix + '.addNumberButton') }}</q-btn>
</q-field> </q-field>
<div v-if="addFormEnabled"> <div v-if="addFormEnabled">
@ -20,18 +39,20 @@
<div> <div>
<q-card class="blocked-number" v-for="(number, index) in numbers"> <q-card class="blocked-number" v-for="(number, index) in numbers">
<q-card-title> <q-card-title>
<q-icon v-if="!(editing && editingIndex == index)" name="fa-ban" color="secondary" size="22px"/> <q-icon v-if="!(editing && editingIndex == index) && enabled == 'blacklist'" name="fa-ban" color="negative" size="22px"/>
<span v-if="!(editing && editingIndex == index)" @click="editNumber(index)">{{ number }}</span> <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" <q-input autofocus v-if="editing && editingIndex == index" type="text" float-label="Number"
v-model="editingNumber" @keyup.enter="saveNumber(index)" /> v-model="editingNumber" @keyup.enter="saveNumber(index)" />
<q-btn color="primary" flat small round v-if="editing && editingIndex == index" slot="right" <q-btn color="primary" flat v-if="editing && editingIndex == index" slot="right"
icon="fa-save" @click="saveNumber(index)" class="cursor-pointer">{{ $t('buttons.save') }}</q-btn> icon="fa-save" @click="saveNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.save') }}</span></q-btn>
<q-btn color="primary" flat small round v-if="editing && editingIndex == index" slot="right" <q-btn flat v-if="editing && editingIndex == index" slot="right"
icon="clear" @click="saveNumber(index)" class="cursor-pointer">{{ $t('buttons.cancel') }}</q-btn> icon="clear" @click="saveNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.cancel') }}</span></q-btn>
<q-btn color="primary" flat small round v-if="!(editing && editingIndex == index)" slot="right" <q-btn color="primary" flat v-if="!(editing && editingIndex == index)" slot="right"
icon="fa-edit" @click="editNumber(index)" class="cursor-pointer">{{ $t('buttons.edit') }}</q-btn> icon="fa-edit" @click="editNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.edit') }}</span></q-btn>
<q-btn color="primary" flat small round v-if="!(editing && editingIndex == index)" slot="right" <q-btn color="negative" flat v-if="!(editing && editingIndex == index)" slot="right"
icon="delete" @click="removeNumber(index)" class="cursor-pointer">{{ $t('buttons.remove') }}</q-btn> icon="delete" @click="removeNumber(index)" class="cursor-pointer"><span class="gt-sm">{{ $t('buttons.remove') }}</span></q-btn>
</q-card-title> </q-card-title>
</q-card> </q-card>
<q-inner-loading :visible="listLoading"> <q-inner-loading :visible="listLoading">
@ -47,7 +68,7 @@
import CscPage from '../../CscPage' import CscPage from '../../CscPage'
import CscToggle from '../../form/CscToggle' import CscToggle from '../../form/CscToggle'
import { QInput, QCard, QBtn, QField, QIcon, QCardTitle, QCardActions, Dialog, QSpinnerMat, QToggle, 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 { export default {
name: 'csc-call-blocking', name: 'csc-call-blocking',
props: [ props: [
@ -67,7 +88,8 @@
listLoading: false, listLoading: false,
editing: false, editing: false,
editingIndex: 0, editingIndex: 0,
editingNumber: '' editingNumber: '',
mode: null
} }
}, },
mounted() { mounted() {
@ -87,6 +109,7 @@
QInput, QInput,
QList, QList,
QItem, QItem,
QItemSide,
QItemMain, QItemMain,
QCardMain, QCardMain,
QIcon, QIcon,
@ -96,14 +119,31 @@
QInnerLoading, QInnerLoading,
QSpinnerMat, QSpinnerMat,
CscToggle, CscToggle,
CscPage CscPage,
QOptionGroup,
QSelect,
QRadio
}, },
computed: { computed: {
numbers() { numbers() {
return this.$store.state.callBlocking[this.pageName + 'List']; return this.$store.state.callBlocking[this.pageName + 'List'];
}, },
enabled() { enabled: {
return this.$store.state.callBlocking[this.pageName + '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() { toggleButtonLabel() {
if(!this.enabled) { if(!this.enabled) {
@ -113,7 +153,7 @@
} }
}, },
toggleToastMessage() { toggleToastMessage() {
if(this.enabled) { if(this.mode) {
return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleEnabledToast'); return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleEnabledToast');
} else { } else {
return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleDisabledToast'); return this.$i18n.t('pages.callBlocking' + this.suffix + '.toggleDisabledToast');
@ -123,6 +163,11 @@
return _.upperFirst(this.pageName); return _.upperFirst(this.pageName);
} }
}, },
watch: {
mode(value) {
this.toggle(value);
}
},
methods: { methods: {
enableAddForm() { enableAddForm() {
this.addFormEnabled = true; this.addFormEnabled = true;
@ -217,4 +262,10 @@
.blocked-number .q-input { .blocked-number .q-input {
margin: 0; margin: 0;
} }
.blocked-number-title {
padding-left: 8px;
}
.mode-list {
margin-bottom: 30px;
}
</style> </style>

20
src/locales/en.json
Unescape View File

@ -56,11 +56,11 @@
"password_helper": "Web-Password" "password_helper": "Web-Password"
}, },
"callBlockingIncoming": { "callBlockingIncoming": {
"title": "Block incoming calls", "title": "Block/Allow incoming calls",
"toggleEnableLabel": "Enable call blocking list", "toggleEnableLabel": "Allow only listed numbers",
"toggleDisableLabel": "Disable call blocking list", "toggleDisableLabel": "Block all listed number",
"toggleEnabledToast": "Call blocking of incoming calls enabled", "toggleEnabledToast": "All listed numbers are allowed",
"toggleDisabledToast": "Call blocking of incoming calls disabled", "toggleDisabledToast": "All listed numbers are blocked",
"removeDialogTitle": "Remove number", "removeDialogTitle": "Remove number",
"removeDialogText": "You are about to remove the number {number}", "removeDialogText": "You are about to remove the number {number}",
"removedToast": "Removed number {number}", "removedToast": "Removed number {number}",
@ -69,11 +69,11 @@
"addNumberButton": "Add number" "addNumberButton": "Add number"
}, },
"callBlockingOutgoing": { "callBlockingOutgoing": {
"title": "Block outgoing calls", "title": "Block/Allow outgoing calls",
"toggleEnableLabel": "Enable call blocking list", "toggleEnableLabel": "Allow only listed numbers",
"toggleDisableLabel": "Disable call blocking list", "toggleDisableLabel": "Block all listed number",
"toggleEnabledToast": "Call blocking of outgoing calls enabled", "toggleEnabledToast": "All listed numbers are allowed",
"toggleDisabledToast": "Call blocking of outgoing calls disabled", "toggleDisabledToast": "All listed numbers are blocked",
"removeDialogTitle": "Remove number", "removeDialogTitle": "Remove number",
"removeDialogText": "You are about to remove the number {number}", "removeDialogText": "You are about to remove the number {number}",
"removedToast": "Removed number {number}", "removedToast": "Removed number {number}",

Write Preview
Loading…
Cancel
Save