TT#21848 Ngcp CSC - CallForwarding - Timeset/Timeperiod Creation

Change-Id: Icf5ac61c708dbe91e6d50213377aae5a3cbecfd0

app/utils/locales.js

@@ -777,6 +777,13 @@ Ext.define('Ngcp.csc.locales', {
                 fr: 'CALL FORWARD',
                 sp: 'CALL FORWARD'
             },
+            add_new_period: {
+                en: 'ADD NEW PERIOD',
+                it: 'ADD NEW PERIOD',
+                de: 'ADD NEW PERIOD',
+                fr: 'ADD NEW PERIOD',
+                sp: 'ADD NEW PERIOD'
+            },
             time_one: {
                 en: 'Always',
                 it: 'Always',

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

@@ -49,7 +49,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         return mday || minute || month || year;
     },
 
-    parseTimesetApiToRecords: function(times, timesetName) {
+    parseTimesetApiToRecords: function(times, timesetName, timesetId) {
         var retData = [];
         var me = this;
         var vm = me.getViewModel();
@@ -63,14 +63,17 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
             7: 'Saturday'
         };
         Ext.each(times, function(timeSlot) {
-            var days = timeSlot.wday.split('-');
+            var days, fromHour, toHour;
-            var fromHour = timeSlot.hour ? parseInt(timeSlot.hour.split('-')[0]) : null;
-            var toHour = timeSlot.hour ? parseInt(timeSlot.hour.split('-')[1]) : null;
             var checkIncompatibleTimeset = me.checkIncompatibleTimeset(timeSlot);
-            if (checkIncompatibleTimeset) {
+            if (checkIncompatibleTimeset || !timeSlot.wday || !timeSlot.hour) {
                 vm.set(me.getTimesetPrexifFromName(timesetName) + '_add_text', '<div class="cf-invalid-period-box">' + Ngcp.csc.locales.callforward.invalid_times[localStorage.getItem('languageSelected')] + '</div>');
+                vm.set(me.getTimesetPrexifFromName(timesetName) + '_is_invalid', timesetId);
                 return;
             }
+            days = timeSlot.wday.split('-');
+            fromHour = timeSlot.hour ? parseInt(timeSlot.hour.split('-')[0]) : null;
+            toHour = timeSlot.hour ? parseInt(timeSlot.hour.split('-')[1]) : null;
+
             if (days.length > 1) {
                 var fromDay = parseInt(days[0]);
                 var toDay = parseInt(days[1]);
@@ -136,7 +139,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
             var timesetId = timeset.id;
             store._timesetId = timeset.id;
             if (/(After|Company)\s(Hours)/.test(timesetName)) {
-                var times = me.parseTimesetApiToRecords(timeset.times, timesetName);
+                var times = me.parseTimesetApiToRecords(timeset.times, timesetName, timeset.id);
                 Ext.each(times, function(time) {
                     var cfModel = Ext.create('NgcpCsc.model.CallForwardDestination', {
                         id: Ext.id(),
@@ -147,18 +150,18 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                         day: time.day
                     });
                     arrayOfModels.push(cfModel);
-                    me.setVmToTrue(timesetName, true);
+                    me.setVm(timesetName, true);
                 });
             };
         });
         if (arrayOfModels.length > 0) {
             me.populateTimesetStores(arrayOfModels);
         } else {
-            me.setVmToTrue(me.getTimesetFromRoute(currentRoute), false);
+            me.setVm(me.getTimesetFromRoute(currentRoute), false);
         }
     },
 
-    setVmToTrue: function(name, exists) {
+    setVm: function(name, exists) {
         var vm = this.getViewModel();
         switch (name) {
             case 'After Hours':
@@ -502,6 +505,51 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         });
         return false;
     },
+    createTimesetReq: function(timesetName, subscriberId, store) {
+        var me = this;
+        Ext.Ajax.request({
+            url: '/api/cftimesets/',
+            method: 'POST',
+            jsonData: {
+                name: timesetName,
+                subscriber_id: subscriberId,
+                times: [{
+                        wday: '1',
+                        hour: '0'
+                    }] // we need to create a default valid period
+            },
+            success: function(response, opts) {
+                store.load();
+            }
+        });
+    },
+
+    createTimeset: function() {
+        var vm = this.getViewModel();
+        var me = this;
+        var currentRoute = window.location.hash;
+        var timesetName = me.getTimesetFromRoute(currentRoute);
+        var subscriberId = localStorage.getItem('subscriber_id');
+        var store = Ext.getStore(me.getModuleFromRoute() + '-Timeset');
+        switch (true) {
+            case !!vm.get(me.getTimesetPrexifFromName(timesetName) + '_is_invalid'):
+                // if timeset is invalid it's deleted and recreated with the same name
+                Ext.Ajax.request({
+                    url: '/api/cftimesets/' + vm.get(me.getTimesetPrexifFromName(timesetName) + '_is_invalid'),
+                    method: 'DELETE',
+                    success: function(response, opts) {
+                        vm.set(me.getTimesetPrexifFromName(timesetName) + '_is_invalid', null);
+                        me.createTimesetReq(timesetName, subscriberId, store);
+                    }
+                });
+                break;
+            case !vm.get(me.getTimesetPrexifFromName(timesetName) + '_exists_in_api'):
+                me.createTimesetReq(timesetName, subscriberId, store);
+                break
+            default:
+                me.setVm(timesetName, true);
+        }
+    },
 
     cfTimesetBeforeSync: function(store, options) {
         var me = this;
@@ -522,12 +570,18 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
             var nextRec = store.getRange()[index + 1];
             var timeFrom = Ext.isDate(rec.get('time_from')) ? new Date(rec.get('time_from')).getHours() : rec.get('time_from');
             var timeTo = Ext.isDate(rec.get('time_to')) ? new Date(rec.get('time_to')).getHours() : rec.get('time_to');
-            var nextRecTimeFrom =  nextRec ? Ext.isDate(nextRec.get('time_from')) ? new Date(nextRec.get('time_from')).getHours() : nextRec.get('time_from') : null;
+            var nextRecTimeFrom = nextRec ? Ext.isDate(nextRec.get('time_from')) ? new Date(nextRec.get('time_from')).getHours() : nextRec.get('time_from') : null;
-            var nextRecTimeTo =  nextRec ? Ext.isDate(nextRec.get('time_to')) ? new Date(nextRec.get('time_to')).getHours() : nextRec.get('time_to') : null;
+            var nextRecTimeTo = nextRec ? Ext.isDate(nextRec.get('time_to')) ? new Date(nextRec.get('time_to')).getHours() : nextRec.get('time_to') : null;
-            if (!nextRec || daysMapping[nextRec.get('day')] > (daysMapping[rec.get('day')] +1) || timeFrom.toString() !== nextRecTimeFrom.toString() || timeTo.toString() !== nextRecTimeTo.toString()) {
+            if (!rec.get('day')) { // periods wit no day are not going to be saved
+                return;
+            } else if (!nextRec || !nextRec.get('day') || daysMapping[nextRec.get('day')] > (daysMapping[rec.get('day')] + 1) ||  (timeFrom && nextRecTimeFrom  && (timeFrom.toString() !== nextRecTimeFrom.toString() || timeTo.toString() !== nextRecTimeTo.toString()))) {
                 times.push({
                     wday: (multiDayPeriod ? multiDayPeriod + '-' + daysMapping[rec.get('day')] : daysMapping[rec.get('day')]).toString(),
-                    hour: timeFrom.toString() + '-' + timeTo.toString()
+                    hour: timeFrom ? timeTo ? timeFrom.toString() + '-' + timeTo.toString() : timeFrom.toString() : null
+                    // this above allows saving empty hours (from/to), following the current behaviour of ngcp panel and API.
+                    // But in current implementation of CSC, saving a period wich has no time_from cause the timeset to be invalid.
+                    // I guess this requires a clarification with backend to understand if it's a missing validation in the API or a feature,
+                    // and we can then adjust the UI accordingly.
                 });
                 multiDayPeriod = null;
             } else {
@@ -1311,29 +1365,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         };
     },
 
-
-    createNewStandardSet: function(url, name, subscriberId) {
-        var vm = this.getViewModel();
-        Ext.Ajax.request({
-            url: url,
-            method: 'POST',
-            jsonData: {
-                name: name,
-                subscriber_id: subscriberId
-            },
-            success: function(response, opts) {
-                switch (name) {
-                    case 'After Hours':
-                        vm.set('after_hours_exists_in_api', true);
-                        break;
-                    case 'Company Hours':
-                        vm.set('company_hours_exists_in_api', true);
-                        break;
-                }
-            }
-        });
-    },
-
     createNewMapping: function(subscriberId, newType, newDestinationsetName, newSourceset, newTimeset) {
         Ext.Ajax.request({
             url: '/api/cfmappings/' + localStorage.getItem('subscriber_id'),
@@ -1485,6 +1516,12 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         var store = grid.getStore()
         var rec = store.getAt(rowIndex);
         store.remove(rec);
+    },
+    addNewPeriod: function(btn) {
+        var grid = btn.up('[name=timesetCont]').down('grid');
+        var store = grid.getStore();
+        var newModel = Ext.create('NgcpCsc.model.CallForwardTimeset');
+        store.add(newModel);
     }
 
 });

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

@@ -16,16 +16,28 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardTimesetGrid', {
             items: [{
                 text: Ngcp.csc.locales.common.day[localStorage.getItem('languageSelected')],
                 dataIndex: 'day',
-                flex: 1
+                xtype: 'widgetcolumn',
+                editable: true,
+                flex: 1,
+                widget: {
+                    xtype: 'combo',
+                    editable: false,
+                    margin: '8 0 0 0',
+                    bind: {
+                        value: '{record.day}'
+                    },
+                    store: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+                }
             }, {
                 text: Ngcp.csc.locales.common.from[localStorage.getItem('languageSelected')],
                 dataIndex: 'time_from',
                 xtype: 'widgetcolumn',
-                editable: false,
                 flex: 1,
                 widget: {
                     xtype: 'timefield',
+                    editable: false,
                     margin: '8 0 0 0',
+                    increment: 60,
                     tooltip: Ngcp.csc.locales.callforward.tooltips.change_time_from[localStorage.getItem('languageSelected')],
                     bind: {
                         value: '{record.time_from}'
@@ -39,7 +51,9 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardTimesetGrid', {
                 flex: 1,
                 widget: {
                     xtype: 'timefield',
+                    editable: false,
                     margin: '8 0 0 0',
+                    increment: 60,
                     tooltip: Ngcp.csc.locales.callforward.tooltips.change_time_to[localStorage.getItem('languageSelected')],
                     bind: {
                         value: '{record.time_to}'

classic/src/view/pages/callforward/afterhours/AfterHours.js

@@ -35,7 +35,8 @@ Ext.define('NgcpCsc.view.pages.callforward.afterhours.Afterhours', {
                 xtype: 'container',
                 items: [{
                     xtype: 'panel',
-                    id: 'collapsePanel-afterHours',
+                    name: 'timesetCont',
+                    id: 'collapsePanel-afterhours',
                     title: Ngcp.csc.locales.callforward.for_calls_during_after_hours[localStorage.getItem('languageSelected')],
                     width: '100%',
                     collapsible: true,
@@ -65,23 +66,38 @@ Ext.define('NgcpCsc.view.pages.callforward.afterhours.Afterhours', {
                                 },{
                                     flex: 1,
                                     xtype: 'button',
+                                    handler: 'createTimeset',
                                     text: Ngcp.csc.locales.common.create[localStorage.getItem('languageSelected')]
                                 }]
                             }]
                         },
                         callForwardAfterGrid, {
-                            text: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
+                            margin: '10 0 10 0',
-                            xtype: 'button',
+                            layout: 'hbox',
-                            cls: 'x-btn-left',
+                            width: '100%',
-                            id: 'afterhours-saveButton',
-                            width: 135,
-                            margin: '10 0 10 623',
-                            listeners: {
-                                click: 'saveTimesetGrid'
-                            },
                             bind: {
                                 hidden: '{!after_hours_exists_in_api}'
-                            }
+                            },
+                            items: [{
+                                flex: 6
+                            },{
+                                flex: 2,
+                                margin: '0 5 0 0',
+                                text: Ngcp.csc.locales.callforward.add_new_period[localStorage.getItem('languageSelected')],
+                                xtype: 'button',
+                                id: 'afterhours-addNewPeriodButton',
+                                listeners: {
+                                    click: 'addNewPeriod'
+                                }
+                            }, {
+                                text: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
+                                xtype: 'button',
+                                cls: 'x-btn-left',
+                                id: 'afterhours-saveButton',
+                                listeners: {
+                                    click: 'saveTimesetGrid'
+                                }
+                            }]
                         }
                     ]
                 }]

classic/src/view/pages/callforward/companyhours/CompanyHours.js

@@ -35,7 +35,8 @@ Ext.define('NgcpCsc.view.pages.callforward.companyhours.Companyhours', {
                 xtype: 'container',
                 items: [{
                     xtype: 'panel',
-                    id: 'collapsePanel-companyHours',
+                    name: 'timesetCont',
+                    id: 'collapsePanel-companyhours',
                     title: Ngcp.csc.locales.callforward.for_calls_during_company_hours[localStorage.getItem('languageSelected')],
                     width: '100%',
                     collapsible: true,
@@ -65,23 +66,38 @@ Ext.define('NgcpCsc.view.pages.callforward.companyhours.Companyhours', {
                                 },{
                                     flex: 1,
                                     xtype: 'button',
+                                    handler: 'createTimeset',
                                     text: Ngcp.csc.locales.common.create[localStorage.getItem('languageSelected')]
                                 }]
                             }]
                         },
                         callForwardCompanyGrid, {
-                            text: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
+                            margin: '10 0 10 0',
-                            xtype: 'button',
+                            layout: 'hbox',
-                            id: 'companyhours-saveButton',
+                            width: '100%',
-                            cls: 'x-btn-left',
-                            width: 135,
-                            margin: '10 0 10 585',
-                            listeners: {
-                                click: 'saveTimesetGrid'
-                            },
                             bind: {
                                 hidden: '{!company_hours_exists_in_api}'
-                            }
+                            },
+                            items: [{
+                                flex: 6
+                            },{
+                                flex: 2,
+                                margin: '0 5 0 0',
+                                text: Ngcp.csc.locales.callforward.add_new_period[localStorage.getItem('languageSelected')],
+                                xtype: 'button',
+                                id: 'companyhours-addNewPeriodButton',
+                                listeners: {
+                                    click: 'addNewPeriod'
+                                }
+                            }, {
+                                flex: 1,
+                                text: Ngcp.csc.locales.common.save_caps[localStorage.getItem('languageSelected')],
+                                xtype: 'button',
+                                id: 'companyhours-saveButton',
+                                listeners: {
+                                    click: 'saveTimesetGrid'
+                                }
+                            }]
                         }
                     ]
                 }]