Updated "New" button with dropdown to a much better one

server/.externalToolBuilders/org.eclipse.wst.validation.validationbuilder.launch

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<launchConfiguration type="org.eclipse.ant.AntBuilderLaunchConfigurationType">
+<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_BUILDER_ENABLED" value="false"/>
+<stringAttribute key="org.eclipse.ui.externaltools.ATTR_DISABLED_BUILDER" value="org.eclipse.wst.validation.validationbuilder"/>
+<mapAttribute key="org.eclipse.ui.externaltools.ATTR_TOOL_ARGUMENTS"/>
+<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_TRIGGERS_CONFIGURED" value="true"/>
+</launchConfiguration>

server/.project

@@ -16,8 +16,13 @@
 			</arguments>
 		</buildCommand>
 		<buildCommand>
-			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<name>org.eclipse.ui.externaltools.ExternalToolBuilder</name>
+			<triggers>full,incremental,</triggers>
 			<arguments>
+				<dictionary>
+					<key>LaunchConfigHandle</key>
+					<value>&lt;project&gt;/.externalToolBuilders/org.eclipse.wst.validation.validationbuilder.launch</value>
+				</dictionary>
 			</arguments>
 		</buildCommand>
 	</buildSpec>

server/src/uds/static/adm/css/dataTables.bootstrap.css

@@ -92,8 +92,9 @@ div.dataTables_scrollFoot table {
 	border-top: none;
 }
 
-
+.DTTT_nonbutton {
-
+    display: inline-block;
+}
 
 /*
  * TableTools styles

server/src/uds/static/adm/js/dataTables.bootstrap.js

@@ -116,7 +116,7 @@ if ($.fn.DataTable.TableTools) {
     $.extend(true, $.fn.DataTable.TableTools.classes, {
         "container" : "DTTT btn-group-3d",
         "buttons" : {
-            "normal" : "btn",
+            "normal" : "",
             "disabled" : "disabled"
         },
         "collection" : {
@@ -145,6 +145,7 @@ if ($.fn.DataTable.TableTools) {
             "button" : "li",
             "liner" : "a"
         },
+        "liner" : "div",
 //        "button" : "button",
     });
 }

server/src/uds/static/adm/js/gui-element.js

@@ -265,38 +265,38 @@ GuiElement.prototype = {
                             var btn;
                             switch (value) {
                             case 'new':
-                                if(Object.keys(self.types).length === 0) {
+                                if(Object.keys(self.types).length !== 0) {
-                                    btn = {
+                                    var menuId = gui.genRamdonId('dd-');
-                                        "sExtends" : "text",
+                                    var ordered = [];
-                                        "sButtonText" : gui.config.dataTableButtons['new'].text,
-                                        "fnClick" : clickHandlerFor(options.onNew, 'new', true),
-                                        "sButtonClass" : gui.config.dataTableButtons['new'].css,
-                                    };
-                                } else {
-                                    // This table has "types, so we create a dropdown with Types
-                                    var newButtons = [];
-                                    // Order buttons by name, much more easy for users... :-)
-                                    var order = [];
                                     $.each(self.types, function(k, v){
-                                       order.push({
+                                       ordered.push({
                                            type: k,
                                            css: v.css,
                                            name: v.name,
                                            description: v.description,
                                        }); 
                                     });
-                                    $.each(order.sort(function(a,b){return a.name.localeCompare(b.name);}), function(i, val){
+                                    
-                                       newButtons.push({
+                                    ordered = ordered.sort(function(a,b){return a.name.localeCompare(b.name);});
-                                               "sExtends" : "text",
+
-                                               "sButtonText" : '<span class="' + val.css + '"></span> <span data-toggle="tooltip" data-title="' + val.description + '">' + val.name + '</span>',
-                                               "fnClick" : clickHandlerFor(options.onNew, val.type, true),
-                                       });
-                                    });
                                     btn = {
-                                            "sExtends" : "collection",
+                                            "sExtends" : "div",
-                                            "aButtons":  newButtons,
+                                            "sButtonText" : api.templates.evaluate('tmpl_comp_dropdown', {
+                                                label: gui.config.dataTableButtons['new'].text,
+                                                css: gui.config.dataTableButtons['new'].css,
+                                                id: menuId,
+                                                tableId: tableId,
+                                                columns: columns,
+                                                menu: ordered,
+                                            }),
+                                    };
+                                    
+                                } else {
+                                    btn = {
+                                            "sExtends" : "text",
                                             "sButtonText" : gui.config.dataTableButtons['new'].text,
                                             "sButtonClass" : gui.config.dataTableButtons['new'].css,
+                                            "fnClick" : clickHandlerFor(options.onNew, 'new', true),
                                         };
                                 }
                                 break;
@@ -417,11 +417,23 @@ GuiElement.prototype = {
                     $(table.refreshSelector).click(refreshFnc);
                     
                     // Add tooltips to "new" buttons
-                    $('.DTTT_dropdown [data-toggle="tooltip"]').tooltip({
+                    $('#' + table.panelId + ' [data-toggle="tooltip"]').tooltip({
                         container:'body',
                         delay: { show: 1000, hide: 100},
                         placement: 'auto right',
                     });
+                    // And the handler of the new "dropdown" button links
+                    if( options.onNew ) {  // If onNew, set the handlers for dropdown
+                        $('#' + table.panelId + ' [data-type]').on('click', function(event){
+                            event.preventDefault();
+                            var tbl = $('#' + tableId).dataTable();
+                            // Executes "onNew" outside click event
+                            var type = $(this).attr('data-type');
+                            setTimeout(function() {
+                                options.onNew(type, tbl, refreshFnc);
+                            }, 0);
+                        });
+                    }
                     
                     if (options.scrollToTable === true ) {
                         var tableTop = $('#' + tableId).offset().top;

server/src/uds/static/adm/js/gui-tools.js

@@ -16,10 +16,13 @@
             selector += ' .btn3d';
             console.log(selector);
             $.each($(selector), function(index, value) {
+                // If no events associated, return
+                if( $._data(value, 'events') === undefined )
+                    return;
+
                 var $this = $(this);
                 
                 var clkEvents = [];
-                
                 // Store old click events, so we can reconstruct click chain later
                 $.each($._data(value, 'events').click, function(index, fnc) {
                     clkEvents.push(fnc);

server/src/uds/static/adm/js/gui.js

@@ -35,22 +35,27 @@
     gui.config.dataTableButtons = {
         'new': {
             text: '<span class="fa fa-pencil"></span> <span class="label-tbl-button">' + gettext('New') + '</span>',
-            css: 'btn3d btn3d-primary btn3d-tables',
+            css: 'btn btn3d btn3d-primary btn3d-tables',
         },
         'edit': { 
             text: '<span class="fa fa-edit"></span> <span class="label-tbl-button">' + gettext('Edit') + '</span>',
-            css: 'disabled btn3d-default btn3d btn3d-tables',
+            css: 'btn disabled btn3d-default btn3d btn3d-tables',
         },
         'delete': {
             text: '<span class="fa fa-eraser"></span> <span class="label-tbl-button">' + gettext('Delete') + '</span>',
-            css: 'disabled btn3d-default btn3d btn3d-tables',
+            css: 'btn disabled btn3d-default btn3d btn3d-tables',
         },
         'xls': {
             text: '<span class="fa fa-save"></span> <span class="label-tbl-button">' + gettext('Xls') + '</span>',
-            css: 'btn3d-info btn3d btn3d-tables',
+            css: 'btn btn3d-info btn3d btn3d-tables',
         },
     };
     
+    gui.genRamdonId = function(prefix) {
+        prefix = prefix || '';
+        return prefix + Math.random().toString().split('.')[1];
+    };
+    
     gui.table = function(title, table_id, options) {
         options = options || {};
         var size = options.size || 12;
@@ -96,7 +101,7 @@
     
     gui.launchModal = function(title, content, options) {
         options = options || {};
-        var id = Math.random().toString().split('.')[1]; // Get a random ID for this modal
+        var id = gui.genRamdonId('modal-'); // Get a random ID for this modal
         gui.appendToWorkspace(gui.modal(id, title, content, options));
         id = '#' + id; // for jQuery
         
@@ -285,10 +290,9 @@
     // "Generic" new method to set onNew table
     gui.methods.typedNew = function(parent, modalTitle, modalErrorMsg, options) {
         options = options || {};
-        var self = parent;
         return function(type, table, refreshFnc) {
             gui.tools.blockUI();
-            self.rest.gui(type, function(guiDefinition) {
+            parent.rest.gui(type, function(guiDefinition) {
                 gui.tools.unblockUI();
                 var buttons;
                 if( options.testButton ) {
@@ -296,7 +300,7 @@
                 }
                 var tabs = options.guiProcessor ? options.guiProcessor(guiDefinition) : guiDefinition; // Preprocess fields (probably generate tabs...)
                 gui.forms.launchModal({
-                    title: modalTitle, 
+                    title: modalTitle + ' ' + gettext('of type') +' <b>' + parent.types[type].name + '</b>', 
                     fields: tabs, 
                     item: undefined, 
                     buttons: buttons,
@@ -304,7 +308,7 @@
                         var fields = gui.forms.read(form_selector);
                         fields.data_type = type;
                         fields = options.fieldsProcessor ? options.fieldsProcessor(fields) : fields; // Process fields before creating?
-                        self.rest.create(fields, function(data) { // Success on put
+                        parent.rest.create(fields, function(data) { // Success on put
                             closeFnc();
                             refreshFnc();
                             gui.notify(gettext('Creation successfully done'), 'success');

server/src/uds/templates/uds/admin/index.html

@@ -99,8 +99,8 @@
         
         <!-- user interface management -->
         <script src="{% get_static_prefix %}adm/js/gui-definition.js"></script>
-        <script src="{% get_static_prefix %}adm/js/gui-service-providers.js"></script>
+        <script src="{% get_static_prefix %}adm/js/gui-d-service-providers.js"></script>
-        <script src="{% get_static_prefix %}adm/js/gui-authenticators.js"></script>
+        <script src="{% get_static_prefix %}adm/js/gui-d-authenticators.js"></script>
         
         <script>
             $(function() {
@@ -122,7 +122,7 @@
         {% js_template 'comp/table' %}
         {% js_template 'comp/modal' %}
         {% js_template 'comp/responsive_table' %}
-        {% js_template 'comp/alert' %}
+        {% js_template 'comp/dropdown' %}
         <!-- fields -->
         {% js_template 'fld/checkbox' %}
         {% js_template 'fld/choice' %}

server/src/uds/templates/uds/admin/tmpl/comp/dropdown.html

@@ -0,0 +1,14 @@
+{% load i18n %}
+{% verbatim %}
+<div class="dropdown">
+  <button class="{{ css }} dropdown-toggle" type="button" data-toggle="dropdown">
+    {{{ label }}}
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="">
+    {{# each menu }}
+        <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tooltip" title="{{ description }}" href="#" data-type="{{ type }}">{{ name }}</a></li>
+    {{/ each }}
+  </ul>
+</div>
+{% endverbatim %}