TT#28064 Add new source and sourceset

Change-Id: I1e7b185fbdfc2e138f5a939806079532f911df21

src/api/call-forward.js

@@ -107,7 +107,8 @@ export function loadDestinations(options) {
             sourcesets.map((sourceset) => {
                 sourcesetsCollection.push({
                     id: sourceset.id,
-                    name: sourceset.name
+                    name: sourceset.name,
+                    mode: sourceset.mode
                 })
             });
             sourcesetsCollection.forEach((sourceset) => {
@@ -116,7 +117,8 @@ export function loadDestinations(options) {
                         timeset: options.timeset,
                         sourceset_id: sourceset.id,
                         sourceset_name: sourceset.name,
-                        subscriberId: options.subscriberId
+                        subscriberId: options.subscriberId,
+                        sourceset_mode: sourceset.mode
                     })
                 )
             });
@@ -174,6 +176,7 @@ export function getDestinationsBySourcesetId(options) {
             resolve({
                 sourcesetId: options.sourceset_id,
                 sourcesetName: options.sourceset_name,
+                sourcesetMode: options.sourceset_mode,
                 destinationGroups: {
                     online: result[0],
                     offline: result[1],
@@ -743,3 +746,20 @@ export function appendTimeToTimeset(options) {
         });
     });
 }
+
+export function createSourcesetWithSource(options) {
+    return new Promise((resolve, reject) => {
+        Vue.http.post('/api/cfsourcesets/', {
+                name: options.sourcesetName,
+                subscriber_id: options.subscriberId,
+                mode: options.mode,
+                sources: [{
+                    source: options.source
+                }]
+            }).then(() => {
+                resolve();
+            }).catch(err => {
+                reject(err);
+            });
+    });
+}

src/components/pages/CallBlocking/CscCallBlocking.vue

@@ -258,19 +258,19 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    #toggle-call-blocking {
+
-        margin-bottom: 60px;
+    #toggle-call-blocking
-    }
+        margin-bottom 60px
-    #add-number-form {
+
-        margin-bottom: 15px;
+    #add-number-form
-    }
+        margin-bottom 15px
-    .blocked-number .q-input {
+
-        margin: 0;
+    .blocked-number .q-input
-    }
+        margin 0
-    .blocked-number-title {
+
-        padding-left: 8px;
+    .blocked-number-title
-    }
+        padding-left 8px
-    .mode-list {
+
-        margin-bottom: 30px;
+    .mode-list
-    }
+        margin-bottom 30px
 </style>

src/components/pages/CallForward/Always.vue

@@ -1,7 +1,7 @@
 <template>
     <csc-page :title="$t('pages.callForward.titles.always')">
         <csc-sourcesets v-if="destinationsLoaded" :sourcesets="sourcesets"
-            :destinations="destinations" :timesetName="timesetName" />
+            :destinations="destinations" :timesetName="timesetName" ref="sourcesets" />
     </csc-page>
 </template>
 
@@ -10,6 +10,7 @@
     import {
         startLoading,
         stopLoading,
+        showToast,
         showGlobalError
     } from '../../../helpers/ui'
     import CscPage from '../../CscPage'
@@ -35,9 +36,12 @@
                 'destinations',
                 'sourcesets',
                 'loadDestinationState',
-                'loadDestinationError'
+                'loadDestinationError',
+                'addSourcesetState',
+                'lastAddedSourceset'
             ]),
             ...mapGetters('callForward', [
+                'addSourcesetError',
                 'destinationsLoaded'
             ]),
             destinationsLoaded() {
@@ -56,6 +60,26 @@
                 else if (state === 'succeeded') {
                     stopLoading();
                 }
+            },
+            addSourcesetState(state) {
+                if (state === 'requesting') {
+                    startLoading();
+                }
+                else if (state === 'failed') {
+                    stopLoading();
+                    showGlobalError(this.addSourcesetError);
+                }
+                else if (state === 'succeeded') {
+                    stopLoading();
+                    this.$refs.sourcesets.resetForm();
+                    showToast(this.$t('pages.callForward.sources.addSuccessMessage', {
+                        sourceset: this.lastAddedSourceset
+                    }));
+                    this.$store.dispatch('callForward/loadDestinations', {
+                        timeset: null
+                    });
+                    this.$store.dispatch('callForward/loadSourcesets');
+                }
             }
         }
     }

src/components/pages/CallForward/CscCallForwardTimeset.vue

@@ -4,7 +4,7 @@
             <csc-call-forward-times :times="timesetTimes"
                 :timesetName="timesetName" ref="times"></csc-call-forward-times>
             <csc-sourcesets v-if="destinationsLoaded" :sourcesets="sourcesets"
-                :destinations="destinations" :timesetName="timesetName" />
+                :destinations="destinations" :timesetName="timesetName" ref="sourcesets" />
         </div>
         <q-card flat>
             <div v-if="timesetHasDuplicate">
@@ -95,7 +95,8 @@
                 'timesetExists',
                 'activeTimeForm',
                 'sourcesets',
-                'loadDestinationState'
+                'loadDestinationState',
+                'addSourcesetState'
             ]),
             ...mapGetters('callForward', [
                 'resetTimeError',
@@ -103,7 +104,8 @@
                 'showDefinedAlert',
                 'destinationsLoaded',
                 'showTimesAndDestinations',
-                'loadDestinationError'
+                'loadDestinationError',
+                'addSourcesetError'
             ]),
             labelReset() {
                 return this.$t('pages.callForward.times.resetTimeset', {
@@ -208,6 +210,24 @@
                 else if (state === 'succeeded') {
                     stopLoading();
                 }
+            },
+            addSourcesetState(state) {
+                if (state === 'requesting') {
+                    startLoading();
+                }
+                else if (state === 'failed') {
+                    stopLoading();
+                    showGlobalError(this.addSourcesetError);
+                }
+                else if (state === 'succeeded') {
+                    stopLoading();
+                    this.$refs.sourcesets.resetForm();
+                    showToast(this.$t('pages.callForward.sources.addSuccessMessage', {
+                        sourceset: this.lastAddedSourceset
+                    }));
+                    this.loadDestinations();
+                    this.loadSourcesets();
+                }
             }
         }
     }

src/components/pages/CallForward/CscSourcesets.vue

@@ -1,17 +1,19 @@
 <template>
-    <q-tabs no-pane-border inverted>
+    <q-tabs v-model="tab" no-pane-border inverted class="sourceset-tabs">
         <q-tab v-for="(sourceset, index) in destinations" :default="index === 0"
             :count="destinationsCount(sourceset.destinationGroups)"
             :key="sourceset.sourcesetId || 0" slot="title"
             :name="sourceset.sourcesetName || 'Everybody'" icon="people"
             :label="sourceset.sourcesetName || 'Everybody'" />
+        <q-tab slot="title" label="Add new" name="addnew" icon="fa-plus" />
         <q-tab-pane v-for="sourceset in destinations"
             :key="sourceset.sourcesetId || 0"
-            :name="sourceset.sourcesetName || 'Everybody'">
+            :name="sourceset.sourcesetName || 'Everybody'" class="sourceset-pane">
                 <div class="sources-section" v-if="sourceset.sourcesetId">
                     <div class="sources-title">
                         <q-icon name="contact_phone" class="sources-icon" />
-                        {{ $t('pages.callForward.titles.sources') }}
+                            {{ $t('pages.callForward.sources.sourcesTitleMode',
+                                { mode: capitalizedMode(sourceset.sourcesetMode) }) }}
                     </div>
                     <q-list no-border>
                         <q-item highlight separator
@@ -26,11 +28,52 @@
                     :timeset="timesetName"
                     :destinations="sourceset.destinationGroups" />
         </q-tab-pane>
+        <q-tab-pane name="addnew">
+            <q-list no-border>
+                <q-item>
+                    <q-item-main>
+                        <q-item-tile class="row no-wrap">
+                            <q-input
+                                autofocus
+                                class="col"
+                                v-model="sourcesetName"
+                                :float-label="$t('pages.callForward.sources.sourceset')"
+                                color="primary"
+                                @keyup.enter="addSourceset()" />
+                            <q-input
+                                class="col"
+                                v-model="source"
+                                :float-label="$t('pages.callForward.sources.source')"
+                                color="primary"
+                                @keyup.enter="addSourceset()" />
+                            <q-select
+                                v-model="mode"
+                                :options="modes"
+                                color="primary"
+                                class="col"
+                                align="right" />
+                        </q-item-tile>
+                        <q-item-tile>
+                            <q-btn
+                                flat
+                                color="primary"
+                                icon-right="fa-save"
+                                @click="addSourceset()"
+                                :disable="!isValid"
+                                class="sourceset-add-button">
+                                    {{ $t('buttons.save') }}
+                            </q-btn>
+                        </q-item-tile>
+                    </q-item-main>
+                </q-item>
+            </q-list>
+        </q-tab-pane>
     </q-tabs>
 </template>
 
 <script>
     import CscCallForwardDestinations from './CscCallForwardDestinations'
+    import { showGlobalError } from '../../../helpers/ui'
     import {
         QTabs,
         QTab,
@@ -38,7 +81,11 @@
         QBtn,
         QList,
         QItem,
-        QIcon
+        QItemMain,
+        QItemTile,
+        QInput,
+        QIcon,
+        QSelect
     } from 'quasar-framework'
     export default {
         name: 'csc-sourcesets',
@@ -47,6 +94,24 @@
             'sourcesets',
             'timesetName'
         ],
+        data() {
+            return {
+                sourcesetName: '',
+                source: '',
+                mode: 'whitelist',
+                modes: [
+                    {
+                        label: 'Whitelist',
+                        value: 'whitelist'
+                    },
+                    {
+                        label: 'Blacklist',
+                        value: 'blacklist'
+                    }
+                ],
+                tab: 'Everybody'
+            }
+        },
         components: {
             CscCallForwardDestinations,
             QTabs,
@@ -55,9 +120,27 @@
             QBtn,
             QList,
             QItem,
-            QIcon
+            QItemMain,
+            QItemTile,
+            QInput,
+            QIcon,
+            QSelect
+        },
+        computed: {
+            isValid() {
+                return this.source.length > 0 && this.sourcesetName.length > 0;
+            }
         },
         methods: {
+            capitalizedMode(mode) {
+                return `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
+            },
+            resetForm() {
+                this.source = '';
+                this.sourcesetName = '';
+                this.mode = 'whitelist';
+                this.tab = 'Everybody';
+            },
             sourcesetSources(id) {
                 return this.sourcesets.filter((sourceset) => {
                     return sourceset.id === id;
@@ -85,6 +168,18 @@
             },
             tabName(name) {
                 return name === null ? 'Everybody' : name;
+            },
+            addSourceset() {
+                if (this.isValid) {
+                    this.$store.dispatch('callForward/createSourcesetWithSource', {
+                        sourcesetName: this.sourcesetName,
+                        source: this.source,
+                        mode: this.mode
+                    });
+                }
+                else {
+                    showGlobalError(this.$t('pages.callForward.sources.fieldMissing'));
+                }
             }
         }
     }
@@ -99,6 +194,17 @@
     .q-item.source-item
         padding 0
 
+    .sourceset-tabs
+
+        .q-tab-pane
+            padding 12px 0 0 0
+
+            .q-item
+                padding 8px 0 0 0
+
+    .sourceset-add-button
+        margin-top 8px
+
     .sources-section
         padding 30px 0 20px 0
 
@@ -106,6 +212,4 @@
         color $secondary
         font-size 16px
 
-    .sources-icon
-        margin-right 5px
 </style>

src/locales/en.json

@@ -191,7 +191,16 @@
                 "resetTimeset": "Reset {timeset}",
                 "addTimeset": "Add {timeset}",
                 "selectValidTime": "Select valid time"
+            },
+            "sources": {
+                "sourcesTitleMode": "{mode} of sources",
+                "addSuccessMessage": "Created sourceset {sourceset}",
+                "sourceset": "Sourceset",
+                "source": "Source",
+                "fieldMissing": "Both sourceset name and source is required. Please provide both and try again.",
+                "addSourcesetErrorMessage": "An error occured while trying to create the sourceset. Please try again."
             }
+
         },
         "home": {
             "title": "Home",

src/store/call-forward.js

@@ -21,7 +21,8 @@ import {
     resetTimesetByName,
     createTimesetWithTime,
     appendTimeToTimeset,
-    loadDestinations
+    loadDestinations,
+    createSourcesetWithSource
 } from '../api/call-forward';
 
 const RequestState = {
@@ -56,6 +57,9 @@ export default {
         resetTimeError: null,
         addTimeState: RequestState.button,
         addTimeError: null,
+        addSourcesetState: RequestState.button,
+        addSourcesetError: null,
+        lastAddedSourceset: null,
         lastRemovedDay: null,
         activeForm: '',
         formType: '',
@@ -126,8 +130,11 @@ export default {
         loadDestinationError(state) {
             return state.loadDestinationError ||
                 i18n.t('pages.callForward.times.loadDestinationErrorMessage');
+        },
+        addSourcesetError(state) {
+            return state.addSourcesetError ||
+                i18n.t('pages.callForward.sources.addSourcesetErrorMessage');
         }
-
     },
     mutations: {
         loadMappings(state, result) {
@@ -291,6 +298,21 @@ export default {
         loadDestinationFailed(state, error) {
             state.loadDestinationState = RequestState.failed;
             state.loadDestinationError = error;
+        },
+        addSourcesetRequesting(state) {
+            state.addSourcesetState = RequestState.requesting;
+            state.addSourcesetError = null;
+        },
+        addSourcesetSucceeded(state) {
+            state.addSourcesetState = RequestState.succeeded;
+            state.addSourcesetError = null;
+        },
+        addSourcesetFailed(state, error) {
+            state.addSourcesetState = RequestState.failed;
+            state.addSourcesetError = error;
+        },
+        setLastAddedSourceset(state, value) {
+            state.lastAddedSourceset = value;
         }
     },
     actions: {
@@ -549,6 +571,20 @@ export default {
             }).catch((err) => {
                 context.commit('loadDestinationFailed', err.message);
             });
+        },
+        createSourcesetWithSource(context, options) {
+            context.commit('addSourcesetRequesting');
+            createSourcesetWithSource({
+                sourcesetName: options.sourcesetName,
+                source: options.source,
+                subscriberId: context.getters.getSubscriberId,
+                mode: options.mode
+            }).then(() => {
+                context.commit('setLastAddedSourceset', options.sourcesetName);
+                context.commit('addSourcesetSucceeded');
+            }).catch((err) => {
+                context.commit('addSourcesetFailed', err.message);
+            });
         }
     }
 };

t/api/call-forward.js

@@ -3,14 +3,20 @@
 
 import Vue from 'vue';
 import VueResource from 'vue-resource';
-import { getMappings, getSourcesets, getTimesets,
+import {
-    getDestinationsets, getDestinationsetById,
+    getMappings,
+    getSourcesets,
+    getTimesets,
+    getDestinationsets,
+    getDestinationsetById,
     deleteDestinationFromDestinationset,
     addDestinationToDestinationset,
     convertTimesetToWeekdays,
     deleteTimeFromTimeset,
     convertAddTime,
-    addNameIdAndTerminating } from '../../src/api/call-forward';
+    addNameIdAndTerminating,
+    createSourcesetWithSource
+} from '../../src/api/call-forward';
 import { assert } from 'chai';
 
 Vue.use(VueResource);