TT#8303 Implement ngcp-csc sourceset widget

Implement ngcp-csc sourceset widget with functionality for editing
and adding sources in the form of numbers or buddies. Only contains
a generic row named "Phone" for now. Also refactored some code in
controller.

Change-Id: I5c7167dbdc92ade2aa2d9a2f471c66473afc8609

app/locales.js

@@ -522,6 +522,20 @@ Ext.define('Ngcp.csc.locales', {
                 de: 'Company hours',
                 fr: 'Company hours',
                 sp: 'Company hours'
+            },
+            list_a: {
+                en: 'List A',
+                it: 'List A',
+                de: 'List A',
+                fr: 'List A',
+                sp: 'List A'
+            },
+            list_b: {
+                en: 'List B',
+                it: 'List B',
+                de: 'List B',
+                fr: 'List B',
+                sp: 'List B'
             }
         },
         filters: {

app/model/CallForwardSourceset.js

@@ -0,0 +1,9 @@
+Ext.define('NgcpCsc.model.CallForwardSourceset', {
+    extend: 'Ext.data.Model',
+
+    fields: [{
+        name: 'phone',
+        type: 'string'
+    }]
+
+});

app/store/CallForwardSourceset.js

@@ -0,0 +1,10 @@
+Ext.define('NgcpCsc.store.CallForwardSourceset', {
+    extend: 'Ext.data.Store',
+
+    storeId: 'CallForwardSourceset',
+
+    model: 'NgcpCsc.model.CallForwardSourceset',
+
+    autoLoad: true
+
+});

classic/sass/src/view/pages/callforward/CallForward.scss

@@ -4,7 +4,7 @@
 );
 
 @include extjs-panel-ui (
-    $ui: 'cf-timeset',
+    $ui: 'cf-widget',
 );
 
 @include extjs-panel-ui (
@@ -17,7 +17,7 @@
     padding-top: 20px;
 }
 
-.x-panel-cf-timeset {
+.x-panel-cf-widget {
     border: solid 1px;
     border-color: #d0d0d0;
     padding: 20px 10px;

classic/src/view/pages/callforward/CallForward.js

@@ -12,12 +12,12 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForward', {
     title: Ngcp.csc.locales.callforward.title[localStorage.getItem('languageSelected')],
 
     initComponent: function () {
-        var callForwardTimesetAfterGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardTimesetGrid', {
+        var callForwardAfterGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardTimesetGrid', {
             id: 'cf-timeset-after-grid',
             store: Ext.create('NgcpCsc.store.CallForwardTimeset', {
                 proxy: {
                     type: 'ajax',
-                    url: '/resources/data/callForwardTimesetAfter.json',
+                    url: '/resources/data/callForwardAfter.json',
                     reader: {
                         type: 'json',
                         rootProperty: 'data'
@@ -25,12 +25,38 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForward', {
                 }
             })
         });
-        var callForwardTimesetCompanyGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardTimesetGrid', {
+        var callForwardCompanyGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardTimesetGrid', {
             id: 'cf-timeset-company-grid',
             store: Ext.create('NgcpCsc.store.CallForwardTimeset', {
                 proxy: {
                     type: 'ajax',
-                    url: '/resources/data/callForwardTimesetCompany.json',
+                    url: '/resources/data/callForwardCompany.json',
+                    reader: {
+                        type: 'json',
+                        rootProperty: 'data'
+                    }
+                }
+            })
+        });
+        var callForwardListAGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardSourcesetGrid', {
+            id: 'cf-sourceset-list-a-grid',
+            store: Ext.create('NgcpCsc.store.CallForwardSourceset', {
+                proxy: {
+                    type: 'ajax',
+                    url: '/resources/data/callForwardListA.json',
+                    reader: {
+                        type: 'json',
+                        rootProperty: 'data'
+                    }
+                }
+            })
+        });
+        var callForwardListBGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardSourcesetGrid', {
+            id: 'cf-sourceset-list-b-grid',
+            store: Ext.create('NgcpCsc.store.CallForwardSourceset', {
+                proxy: {
+                    type: 'ajax',
+                    url: '/resources/data/callForwardListB.json',
                     reader: {
                         type: 'json',
                         rootProperty: 'data'
@@ -54,15 +80,15 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForward', {
             }, {
                 xtype: 'core-container',
                 bind: {
-                    title: '{active_widget_form}',
-                    hidden: '{after_hours_form}'
+                    title: '{active_widget}',
+                    hidden: '{after_hours}'
                 },
                 items: [{
                     xtype: 'panel',
-                    ui: 'cf-timeset',
+                    ui: 'cf-widget',
                     width: '100%',
                     items: [
-                        callForwardTimesetAfterGrid,
+                        callForwardAfterGrid,
                         {
                             layout: 'hbox',
                             width: '100%',
@@ -85,15 +111,15 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForward', {
             }, {
                 xtype: 'core-container',
                 bind: {
-                    title: '{active_widget_form}',
-                    hidden: '{company_hours_form}'
+                    title: '{active_widget}',
+                    hidden: '{company_hours}'
                 },
                 items: [{
                     xtype: 'panel',
-                    ui: 'cf-timeset',
+                    ui: 'cf-widget',
                     width: '100%',
                     items: [
-                        callForwardTimesetCompanyGrid,
+                        callForwardCompanyGrid,
                         {
                             layout: 'hbox',
                             width: '100%',
@@ -113,6 +139,56 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForward', {
                         }
                     ]
                 }]
+            }, {
+                xtype: 'core-container',
+                bind: {
+                    title: '{active_widget}',
+                    hidden: '{list_a}'
+                },
+                items: [{
+                    xtype: 'panel',
+                    ui: 'cf-widget',
+                    width: '100%',
+                    items: [
+                        callForwardListAGrid,
+                        {
+                            html: 'ADD NEW SOURCE',
+                            xtype: 'button',
+                            id: 'addListAButton',
+                            width: 135,
+                            margin: '15 0 0 0',
+                            listeners: {
+                                element: 'el',
+                                click: 'addEmptyRow'
+                            }
+                        }
+                    ]
+                }]
+            }, {
+                xtype: 'core-container',
+                bind: {
+                    title: '{active_widget}',
+                    hidden: '{list_b}'
+                },
+                items: [{
+                    xtype: 'panel',
+                    ui: 'cf-widget',
+                    width: '100%',
+                    items: [
+                        callForwardListBGrid,
+                        {
+                            html: 'ADD NEW SOURCE',
+                            xtype: 'button',
+                            id: 'addListBButton',
+                            width: 135,
+                            margin: '15 0 0 0',
+                            listeners: {
+                                element: 'el',
+                                click: 'addEmptyRow'
+                            }
+                        }
+                    ]
+                }]
             }]
         }, {
             userCls: 'big-70 small-100',

classic/src/view/pages/callforward/CallForwardController.js

@@ -25,6 +25,10 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         rec.set('active', !rec.get('active'));
     },
 
+    checkIndex: function(button, target) {
+        return (target.indexOf(button) > -1) === true ? true : false;
+    },
+
     addEmptyRow: function (el) {
         var targetId = el.getTarget().id;
         function addRowToStore(store) {
@@ -34,12 +38,18 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                 targetStore.add({ "phone": "", "active": false, "ring_for": "0 secs" });
             }
         };
-        if (targetId.indexOf('onlineButton') > -1) {
+        if (this.checkIndex('onlineButton', targetId)) {
             addRowToStore('CallForwardOnline');
-        } else if (targetId.indexOf('busyButton') > -1) {
+        } else if (this.checkIndex('busyButton', targetId)) {
             addRowToStore('CallForwardBusy');
-        } else if (targetId.indexOf('offlineButton') > -1) {
+        } else if (this.checkIndex('offlineButton', targetId)) {
             addRowToStore('CallForwardOffline');
+        } else if (this.checkIndex('addListAButton', targetId)) {
+            var grid = Ext.getCmp('cf-sourceset-list-a-grid');
+            addRowToStore(grid.getStore());
+        } else if (this.checkIndex('addListBButton', targetId)) {
+            var grid = Ext.getCmp('cf-sourceset-list-b-grid');
+            addRowToStore(grid.getStore());
         };
     },
 
@@ -52,20 +62,22 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
     clickSegmentedButton: function (el) {
         var targetId = el.getTarget().id;
         var vm = this.getViewModel();
-        vm.set('after_hours_form', true);
-        vm.set('company_hours_form', true);
-        vm.set('list_a_form', true);
-        vm.set('list_b_form', true);
-        if (targetId.indexOf('afterHoursButton-btnIconEl') > -1) {
-            vm.set('active_widget_form', Ngcp.csc.locales.callforward.after_hours[localStorage.getItem('languageSelected')]);
-            vm.set('after_hours_form', false);
-        } else if (targetId.indexOf('companyHoursButton-btnIconEl') > -1) {
-            vm.set('active_widget_form', Ngcp.csc.locales.callforward.company_hours[localStorage.getItem('languageSelected')]);
-            vm.set('company_hours_form', false);
-        } else if (targetId.indexOf('listAButton-btnIconEl') > -1) {
-            // TODO
-        } else if (targetId.indexOf('listAButton-btnIconEl') > -1) {
-            // TODO
+        vm.set('after_hours', true);
+        vm.set('company_hours', true);
+        vm.set('list_a', true);
+        vm.set('list_b', true);
+        if (this.checkIndex('afterHoursButton-btnIconEl', targetId)) {
+            vm.set('active_widget', Ngcp.csc.locales.callforward.after_hours[localStorage.getItem('languageSelected')]);
+            vm.set('after_hours', false);
+        } else if (this.checkIndex('companyHoursButton-btnIconEl', targetId)) {
+            vm.set('active_widget', Ngcp.csc.locales.callforward.company_hours[localStorage.getItem('languageSelected')]);
+            vm.set('company_hours', false);
+        } else if (this.checkIndex('listAButton-btnIconEl', targetId)) {
+            vm.set('active_widget', Ngcp.csc.locales.callforward.list_a[localStorage.getItem('languageSelected')]);
+            vm.set('list_a', false);
+        } else if (this.checkIndex('listBButton-btnIconEl', targetId)) {
+            vm.set('active_widget', Ngcp.csc.locales.callforward.list_b[localStorage.getItem('languageSelected')]);
+            vm.set('list_b', false);
         };
     },
 
@@ -99,6 +111,13 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
             store.rejectChanges();
             grid.reconfigure(store);
         };
+    },
+
+    removeSourcelistRecord: function(grid, rowIndex, colIndex) {
+        var store = grid.getStore();
+        var rec = grid.getStore().getAt(rowIndex);
+        store.remove(rec);
+        this.fireEvent('showmessage', true, Ngcp.csc.locales.common.remove_success[localStorage.getItem('languageSelected')]);
     }
 
 });

classic/src/view/pages/callforward/CallForwardModel.js

@@ -3,14 +3,14 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardModel', {
     alias: 'viewmodel.callforward',
 
     data: {
-        after_hours_form: true,
-        company_hours_form: true,
-        list_a_form: true,
-        list_b_form: true,
+        after_hours: true,
+        company_hours: true,
+        list_a: true,
+        list_b: true,
         online_timeout_hidden: false,
         busy_timeout_hidden: true,
         offline_timeout_hidden: true,
-        active_widget_form: '',
+        active_widget: '',
         row_elements_disabled: false
     }
 

classic/src/view/pages/callforward/CallForwardSourcesetGrid.js

@@ -0,0 +1,42 @@
+Ext.define('NgcpCsc.view.pages.callforward.CallForwardSourcesetGrid', {
+    extend: 'Ext.grid.Panel',
+
+    xtype: 'callforwardsourcesetgrid',
+
+    viewConfig: {
+        markDirty: false
+    },
+
+    plugins: {
+        ptype: 'cellediting',
+        clicksToEdit: 1
+    },
+
+    hideHeaders: true,
+
+    initComponent: function() {
+        this.columns = {
+            defaults: {
+                menuDisabled: true,
+                resizable: false
+            },
+            items: [{
+                text: Ngcp.csc.locales.callforward.phone[localStorage.getItem('languageSelected')],
+                dataIndex: 'phone',
+                editor: 'textfield',
+                flex: 1
+            }, {
+                text: Ngcp.csc.locales.common.delete[localStorage.getItem('languageSelected')],
+                xtype: 'actioncolumn',
+                width: 30,
+                align: 'right',
+                items: [{
+                    glyph: 'xf1f8@FontAwesome',
+                    handler: 'removeSourcelistRecord'
+                }]
+            }]
+        };
+        this.callParent();
+    }
+
+});

resources/data/callForwardListA.json

@@ -0,0 +1,15 @@
+{
+    "data": [{
+        "phone": "43775600",
+    }, {
+        "phone": "John Smith",
+    }, {
+        "phone": "43770061",
+    }, {
+        "phone": "43806402",
+    }, {
+        "phone": "Bob Jones",
+    }, {
+        "phone": "43806402",
+    }]
+}

resources/data/callForwardListB.json

@@ -0,0 +1,13 @@
+{
+    "data": [{
+        "phone": "King Cole",
+    }, {
+        "phone": "11656143",
+    }, {
+        "phone": "Carla James",
+    }, {
+        "phone": "43806401",
+    }, {
+        "phone": "11656142",
+    }]
+}