Entity select widget improvements

The IPA.entity_select_widget has been modified into a searchable and
editable drop down list. The base functionality has been extracted
into IPA.combobox_widget.

Ticket #1361

1 files changed, 223 insertions, 117 deletions

diff --git a/install/ui/widget.js b/install/ui/widget.js
index 90ebaba1f..f5ed03652 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -227,6 +227,7 @@ IPA.widget = function(spec) {
     };
 
     that.create = function(container) {
+        container.addClass('widget');
         that.container = container;
     };
 
@@ -395,6 +396,10 @@ IPA.text_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('text-widget');
+
         $('<label/>', {
             name: that.name,
             style: 'display: none;'
@@ -535,6 +540,10 @@ IPA.multivalued_text_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('multivalued-text-widget');
+
         var div = $('<div/>', {
             name: 'value'
         }).appendTo(container);
@@ -766,6 +775,10 @@ IPA.checkbox_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('checkbox-widget');
+
         $('<input/>', {
             type: 'checkbox',
             name: that.name,
@@ -833,6 +846,10 @@ IPA.checkboxes_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('checkboxes-widget');
+
         var vertical = that.direction === 'vertical';
 
         for (var i=0; i<that.options.length; i++) {
@@ -920,6 +937,10 @@ IPA.radio_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('radio-widget');
+
         for (var i=0; i<that.options.length; i++) {
             var option = that.options[i];
 
@@ -996,6 +1017,10 @@ IPA.select_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('select-widget');
+
         var select = $('<select/>', {
             name: that.name
         }).appendTo(container);
@@ -1074,6 +1099,10 @@ IPA.textarea_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('textarea-widget');
+
         $('<textarea/>', {
             name: that.name,
             rows: that.rows,
@@ -1252,6 +1281,8 @@ IPA.table_widget = function (spec) {
 
         that.widget_create(container);
 
+        container.addClass('table-widget');
+
         that.table = $('<table/>', {
             'class': 'search-table'
         }).appendTo(container);
@@ -1602,149 +1633,227 @@ IPA.table_widget = function (spec) {
     return that;
 };
 
-IPA.entity_select_widget = function(spec) {
+IPA.combobox_widget = function(spec) {
 
-    var that = IPA.widget(spec);
-    var entity = spec.entity || 'group';
-    var field_name = spec.field_name || 'cn';
-    var editable = spec.editable || false;
+    spec = spec || {};
 
-    function populate_select(value) {
-        function find_success(result) {
-            $('option', that.entity_select).remove();
+    var that = IPA.widget(spec);
 
-            // add default empty value
-            $('<option/>', {
-                text: '',
-                value: ''
-            }).
-            appendTo(that.entity_select);
-
-            var entities = result.result.result;
-            for (var i =0; i < result.result.count; i +=1){
-                var entity = entities[i];
-                var field_array = entity[field_name];
-                var field_value = field_array[0];
-                var option =
-                    $('<option/>',{
-                        text:field_value,
-                        value:field_value
-                    }).
-                    appendTo(that.entity_select);
-                if (value === field_value){
-                    option.attr('selected','selected');
-                }
-            }
-            that.set_dirty(that.test_dirty());
-        }
-        function find_error(err){
-        }
-        IPA.command({
-            entity: entity,
-            method: 'find',
-            args:[that.entity_filter.val()],
-            options:{},
-            on_success:find_success,
-            on_error:find_error
-        }).execute();
-    }
+    that.editable = spec.editable;
+    that.searchable = spec.searchable;
+    that.list_size = spec.list_size || 5;
 
     that.create = function(container) {
 
-        if (editable){
-            that.edit_box = $('<input />',{
-                type: 'text',
-                title: that.tooltip,
-                name: that.name,
-                keyup:function(){
-                    that.validate();
-                }
-            });
-
-            $('<div style:"display=block;" />').
-                append(that.edit_box).
-                appendTo(container);
-        }
+        that.widget_create(container);
 
-        that.create_error_link(container);
+        container.addClass('combobox-widget');
 
-        that.entity_select = $('<select/>', {
-            id: that.name + '-entity-select',
-            change: function(){
-                that.validate();
-                if (editable){
-                    that.edit_box.val(
-                        $('option:selected', that.entity_select).val());
-                    IPA.select_range(that.edit_box,0,0);
-                }
-                that.set_dirty(that.test_dirty());
+        $(document).keyup(function(e) {
+            if (e.which == 27) { // Escape
+                that.close();
             }
+        });
+
+        that.input_container = $('<div/>', {
+            'class': 'combobox-widget-input'
         }).appendTo(container);
 
-        that.entity_filter = $('<input/>', {
-            size:10,
+        that.text = $('<label/>', {
+            name: that.name,
+            style: 'display: none;'
+        }).appendTo(that.input_container);
+
+        that.input = $('<input/>', {
             type: 'text',
-            id: 'entity_filter',
-            style: 'display: none;',
-            keyup: function(){
-                populate_select(current_value());
+            name: that.name,
+            title: that.tooltip,
+            readonly: !that.editable,
+            keyup: function() {
+                that.validate();
+            },
+            click: function() {
+                if (that.editable) return false;
+                if (that.is_open()) {
+                    that.close();
+                } else {
+                    that.open();
+                }
+                return false;
             }
-        }).appendTo(container);
+        }).appendTo(that.input_container);
 
-        $('<a/>', {
-            href: '',
-            text: 'add ' +entity + ' filter: ',
+        that.open_button = IPA.action_button({
+            name: 'open',
+            icon: 'combobox-icon',
             click: function() {
-                that.entity_filter.css('display','inline');
-                $(this).css('display','none');
+                if (that.is_open()) {
+                    that.close();
+                } else {
+                    that.open();
+                }
                 return false;
             }
-        }).appendTo(container);
+        }).appendTo(that.input_container);
+
+        that.list_container = $('<div/>', {
+            'class': 'combobox-widget-list'
+        }).appendTo(that.input_container);
+
+        var div = $('<div/>', {
+            style: 'position: relative; width: 100%;'
+        }).appendTo(that.list_container);
+
+        if (that.searchable) {
+            that.filter = $('<input/>', {
+                type: 'text',
+                name: 'filter',
+                keypress: function(e) {
+                    if (e.which == 13) { // Enter
+                        that.search();
+                    }
+                }
+            }).appendTo(div);
+
+            that.search_button = IPA.action_button({
+                name: 'search',
+                icon: 'search-icon',
+                click: function() {
+                    that.search();
+                    return false;
+                }
+            }).appendTo(div);
+
+            div.append('<br/>');
+        }
+
+        that.list = $('<select/>', {
+            name: 'list',
+            size: that.list_size,
+            style: 'width: 100%',
+            click: function(){
+                that.close();
+                var value = $('option:selected', that.list).val();
+                that.input.val(value);
+                IPA.select_range(that.input, 0, 0);
+
+                that.validate();
+                that.set_dirty(that.test_dirty());
+            }
+        }).appendTo(div);
 
         if (that.undo) {
+            container.append(' ');
             that.create_undo(container);
+
+            var undo = that.get_undo();
+            undo.click(function() {
+                that.reset();
+            });
         }
-        var undo = that.get_undo();
-        undo.click(function() {
-            that.reset();
-        });
 
-        populate_select();
+        that.create_error_link(container);
+
+        that.search();
     };
 
-    that.reset = function() {
-        that.entity_filter.val(that.values[0]);
-        populate_select(that.values[0]);
-        if (editable){
-            that.edit_box.val(that.values[0]);
-        }
-        that.validate();
-        that.set_dirty(false);
+    that.open = function() {
+        that.list_container.css('visibility', 'visible');
     };
 
-    that.load = function(record) {
-        var value = record[that.name];
-        if (value instanceof Array) {
-            that.values = value;
-        } else {
-            that.values = value ? [value] : [''];
-        }
-        that.reset();
+    that.close = function() {
+        that.list_container.css('visibility', 'hidden');
     };
 
-    function current_value(){
-        var value;
-        if (editable){
-            value = that.edit_box.val();
-        }else{
-            value = $('option:selected', that.entity_select).val();
+    that.is_open = function() {
+        return that.list_container.css('visibility') == 'visible';
+    };
+
+    that.search = function() {
+    };
+
+    that.update = function() {
+        that.close();
+        if (that.writable) {
+            that.text.css('display', 'none');
+            that.input.css('display', 'inline');
+            that.input.val(that.values[0]);
+            that.open_button.css('display', 'inline');
+        } else {
+            that.text.css('display', 'inline');
+            that.text.html(that.values[0]);
+            that.input.css('display', 'none');
+            that.open_button.css('display', 'none');
+            that.input.val(that.values[0]);
         }
-        return value;
-    }
+        if (that.searchable) {
+            that.filter.empty();
+            that.search();
+        }
+    };
 
     that.save = function() {
-        var value = current_value();
-        return [value];
+        var value = that.input.val();
+        return value === '' ? [] : [value];
+    };
+
+    that.create_option = function(text, value) {
+        return $('<option/>', {
+            text: text,
+            value: value
+        }).appendTo(that.list);
+    };
+
+    that.remove_options = function() {
+        that.list.empty();
+    };
+
+    return that;
+};
+
+IPA.entity_select_widget = function(spec) {
+
+    spec = spec || {};
+    spec.searchable = spec.searchable === undefined ? true : spec.searchable;
+
+    var that = IPA.combobox_widget(spec);
+
+    that.other_entity = spec.other_entity;
+    that.other_field = spec.other_field;
+
+    that.search = function() {
+
+        var filter = that.filter.val();
+
+        var command = IPA.command({
+            entity: that.other_entity,
+            method: 'find',
+            args: [filter]
+        });
+
+        command.on_success = function(data, text_status, xhr) {
+
+            that.remove_options();
+
+            that.create_option();
+
+            var entries = data.result.result;
+            for (var i=0; i<data.result.count; i++) {
+                var entry = entries[i];
+                var values = entry[that.other_field];
+                var value = values[0];
+
+                var option = that.create_option(value, value);
+
+                if (filter === value) {
+                    option.attr('selected', 'selected');
+                }
+            }
+
+            that.set_dirty(that.test_dirty());
+        };
+
+        command.execute();
     };
 
     return that;
@@ -1759,9 +1868,8 @@ IPA.entity_link_widget = function(spec) {
     }
     that.other_pkeys = spec.other_pkeys || other_pkeys;
 
-    that.super_create = that.create;
     that.create = function(container) {
-        that.super_create(container);
+        that.widget_create(container);
         that.link =
         $('<a/>', {
             href: 'jslink',
@@ -1780,10 +1888,8 @@ IPA.entity_link_widget = function(spec) {
             appendTo(container);
     };
 
-    that.super_load = that.load;
-
     that.load = function (record){
-        that.super_load(record);
+        that.widget_load(record);
         if (that.values || that.values.length > 0){
             that.nonlink.html(that.values[0]);
             that.link.html(that.values[0]);