TT#9602 ngcp-csc Adressbook adjustments

- save callback
- contact layout

Change-Id: I21945eecc4afdb8dce502c8d1c773705159fd790

app/locales.js

@@ -853,11 +853,11 @@ Ext.define('Ngcp.csc.locales', {
                 sp: 'web'
             },
             new_contact: {
-                en: 'Create new contact',
+                en: 'ADD NEW CONTACT',
-                it: 'Create new contact',
+                it: 'ADD NEW CONTACT',
-                de: 'Create new contact',
+                de: 'ADD NEW CONTACT',
-                fr: 'Create new contact',
+                fr: 'ADD NEW CONTACT',
-                sp: 'Create new contact'
+                sp: 'ADD NEW CONTACT'
             },
             firstname: {
                 en: 'firstname',

classic/src/view/pages/addressbook/Addressbook.js

@@ -90,7 +90,7 @@ Ext.define('NgcpCsc.view.pages.addressbook.Addressbook', {
                 hidden: '{!selection}'
             }
         }]
-    },{
+    }, {
         userCls: 'big-70 small-100',
         xtype: 'core-container',
         items: [{
@@ -102,6 +102,15 @@ Ext.define('NgcpCsc.view.pages.addressbook.Addressbook', {
             html: Ext.String.format('<div class="addressbook-heading">{0} {1}</div>', Ngcp.csc.locales.addressbook.user_label[localStorage.getItem('languageSelected')], localStorage.getItem('username'))
         }, {
             xtype: 'addressbook-grid'
+        }, {
+            margin: 10,
+            xtype: 'button',
+            reference: 'addNewBtn',
+            text: Ngcp.csc.locales.addressbook.new_contact[localStorage.getItem('languageSelected')],
+            handler: 'createNewContact',
+            bind: {
+                disabled: '{selection}'
+            }
         }]
     }]
 });

classic/src/view/pages/addressbook/AddressbookController.js

@@ -11,6 +11,11 @@ Ext.define('NgcpCsc.view.pages.addressbook.AddressbookController', {
         }
     },
 
+    onIconClicked: function(event, el) {
+        // eval is never the best option
+        Ext.Function.defer(eval('this.' + el.dataset.callback), 1, this, [el.id]);
+    },
+
     resetChanges: function() {
         var grid = this.lookupReference('addressBookGrid');
         var store = Ext.getStore('Addressbook');
@@ -52,9 +57,9 @@ Ext.define('NgcpCsc.view.pages.addressbook.AddressbookController', {
         return Ngcp.csc.locales.addressbook.company[localStorage.getItem('languageSelected')].toLowerCase();
     },
 
-    removeContact: function(grid, rowIndex, colIndex) {
+    removeContact: function(id) {
-        var store = grid.getStore();
+        var store = Ext.getStore('Addressbook');
-        var rec = grid.getStore().getAt(rowIndex);
+        var rec = store.findRecord('id', id);
         store.remove(rec);
         this.fireEvent('showmessage', true, Ngcp.csc.locales.common.remove_success[localStorage.getItem('languageSelected')]);
     },

classic/src/view/pages/addressbook/AddressbookGrid.js

@@ -11,54 +11,53 @@ Ext.define('NgcpCsc.view.pages.addressbook.AddressbookGrid', {
 
     listeners: {
         afterrender: 'onGridRendered',
-        cellclick: 'onCellClicked'
+        cellclick: 'onCellClicked',
+        click: {
+            fn: 'onIconClicked',
+            element: 'el',
+            delegate: 'div.card-icon'
+        }
     },
-
     tbar: [{
-            xtype: 'label',
+        xtype: 'label',
-            text: Ngcp.csc.locales.common.order_by[localStorage.getItem('languageSelected')]
+        text: Ngcp.csc.locales.common.order_by[localStorage.getItem('languageSelected')]
-        }, {
+    }, {
-            xtype: 'container',
+        xtype: 'container',
-            id: 'group-firstname',
+        id: 'group-firstname',
-            padding: '0 10 0 0',
+        padding: '0 10 0 0',
-            html: Ngcp.csc.locales.addressbook.firstname[localStorage.getItem('languageSelected')],
+        html: Ngcp.csc.locales.addressbook.firstname[localStorage.getItem('languageSelected')],
-            cls: 'link',
+        cls: 'link',
-            listeners: {
+        listeners: {
-                click: {
+            click: {
-                    element: 'el',
+                element: 'el',
-                    fn: 'changeGroupField'
+                fn: 'changeGroupField'
-                }
             }
-        }, {
+        }
-            xtype: 'container',
+    }, {
-            id: 'group-lastname',
+        xtype: 'container',
-            padding: '0 10 0 0',
+        id: 'group-lastname',
-            html: Ngcp.csc.locales.addressbook.lastname[localStorage.getItem('languageSelected')],
+        padding: '0 10 0 0',
-            cls: 'link no-underline',
+        html: Ngcp.csc.locales.addressbook.lastname[localStorage.getItem('languageSelected')],
-            listeners: {
+        cls: 'link no-underline',
-                click: {
+        listeners: {
-                    element: 'el',
+            click: {
-                    fn: 'changeGroupField'
+                element: 'el',
-                }
+                fn: 'changeGroupField'
             }
-        }, {
+        }
-            xtype: 'container',
+    }, {
-            id: 'group-company',
+        xtype: 'container',
-            padding: '0 10 0 0',
+        id: 'group-company',
-            renderer: 'renderCompanyGroupText',
+        padding: '0 10 0 0',
-            cls: 'link no-underline',
+        renderer: 'renderCompanyGroupText',
-            listeners: {
+        cls: 'link no-underline',
-                click: {
+        listeners: {
-                    element: 'el',
+            click: {
-                    fn: 'changeGroupField'
+                element: 'el',
-                }
+                fn: 'changeGroupField'
             }
-        },
-        '->', {
-            text: Ngcp.csc.locales.addressbook.new_contact[localStorage.getItem('languageSelected')],
-            handler: 'createNewContact'
         }
-    ],
+    }],
     columns: {
         defaults: {
             menuDisabled: true,
@@ -81,15 +80,6 @@ Ext.define('NgcpCsc.view.pages.addressbook.AddressbookGrid', {
         }, {
             flex: 1,
             dataIndex: 'mobile'
-        }, {
-            xtype: 'actioncolumn',
-            width: 30,
-            align: 'right',
-            items: [{
-                glyph: 'xf00d@FontAwesome',
-                tooltip: Ngcp.csc.locales.common.delete[localStorage.getItem('languageSelected')],
-                handler: 'removeContact'
-            }]
         }]
     },
 
@@ -114,6 +104,11 @@ Ext.define('NgcpCsc.view.pages.addressbook.AddressbookGrid', {
             '<p><div class="label">' + Ngcp.csc.locales.addressbook.e_mail[localStorage.getItem('languageSelected')] + ':</div><div> <a class="link" href="mailto:{e_mail}">{e_mail}</a></div></p>',
             '<p><div class="label">' + Ngcp.csc.locales.addressbook.homepage[localStorage.getItem('languageSelected')] + ':</div><div> <a target="_blank" class="link" href="{homepage}">{homepage}</a></div></p>',
             '</div>',
+            '<div class="card-wrapper">',
+            '<div class="card-icon-row">',
+            '<div id="{id}" class="card-icon" data-callback="removeContact"><i class="fa fa-trash green-icon fa-2x pointer" aria-hidden="true"></i></div>',
+            '</div>',
+            '</div>',
             '</div>')
     }]
 });