From b68f819de75073285c17c28a30afe5b5dbfe5176 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvoborni@redhat.com>
Date: Fri, 4 Jul 2014 13:24:47 +0200
Subject: webui: improve usability of attributes widget

Attributes widget layour was changed from tiny table which allowed
to display only few options to a checkbox list with multiple
columns (depends on container).

Check all attributes option was removed to force the user
to read through the attributes which he selects.

Initial version authored by: Adam Misnyovszki

https://fedorahosted.org/freeipa/ticket/4253

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
---
 install/ui/ipa.css                      | 15 +++++-
 install/ui/src/freeipa/aci.js           | 88 ++-------------------------------
 install/ui/src/freeipa/widget.js        |  1 -
 ipatests/test_webui/test_delegation.py  |  6 +--
 ipatests/test_webui/test_rbac.py        |  6 +--
 ipatests/test_webui/test_selfservice.py |  6 +--
 6 files changed, 26 insertions(+), 96 deletions(-)

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 8d350cc5d..ec79688a2 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -345,7 +345,7 @@ table.scrollable tbody {
 .option_widget {
     list-style-type: none;
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 1px;
 }
 
 .option_widget.nested {
@@ -365,6 +365,19 @@ table.scrollable tbody {
     max-width: 150px;
 }
 
+.option_widget.columns.attribute_widget {
+    position: relative;
+    overflow-y: auto;
+    max-height: 36em;
+}
+
+.option_widget.columns.attribute_widget > li {
+    float: left;
+    width: 50%;
+    min-width: 90px;
+    max-width: 200px;
+}
+
 .combobox-widget-input {
     position: relative;
 }
diff --git a/install/ui/src/freeipa/aci.js b/install/ui/src/freeipa/aci.js
index 67579026f..ce7d42787 100644
--- a/install/ui/src/freeipa/aci.js
+++ b/install/ui/src/freeipa/aci.js
@@ -544,6 +544,7 @@ return {
 aci.attributes_widget = function(spec) {
 
     spec = spec || {};
+    spec.layout = spec.layout || 'columns attribute_widget';
 
     var that = IPA.checkboxes_widget(spec);
 
@@ -552,83 +553,6 @@ aci.attributes_widget = function(spec) {
 
     var id = spec.name;
 
-    that.create = function(container) {
-        that.container = container;
-
-        var attr_container = $('<div/>', {
-            'class': 'aci-attribute-table-container'
-        }).appendTo(container);
-
-        that.$node = that.table = $('<table/>', {
-            id: id,
-            name: that.name,
-            'class': 'table table-bordered table-condensed aci-attribute-table scrollable'
-        }).
-            append('<thead/>').
-            append('<tbody/>').
-            appendTo(attr_container);
-
-        var tr = $('<tr></tr>').appendTo($('thead', that.table));
-
-        var th = $('<th/>').appendTo(tr);
-        IPA.standalone_option({
-            type: "checkbox",
-            click: function() {
-                $('.aci-attribute', that.table).
-                    prop('checked', $(this).prop('checked'));
-                that.value_changed.notify([], that);
-                that.emit('value-change', { source: that });
-            }
-        }, th);
-
-        tr.append($('<th/>', {
-            'class': 'aci-attribute-column',
-            html: text.get('@i18n:objects.aci.attribute')
-        }));
-
-        if (that.undo) {
-            that.create_undo(container);
-        }
-
-        if (that.object_type) {
-            that.populate(that.object_type);
-        }
-
-        that.create_error_link(container);
-    };
-
-    that.create_options = function(options) {
-        var tbody = $('tbody', that.table);
-
-        for (var i=0; i<options.length ; i++){
-            var option = options[i];
-            var value = option.value.toLowerCase();
-            var tr = $('<tr/>').appendTo(tbody);
-
-            var td =  $('<td/>').appendTo(tr);
-            var name = that.get_input_name();
-            var id = that._option_next_id + name;
-            var opt = IPA.standalone_option({
-                id: id,
-                type: 'checkbox',
-                name: name,
-                value: value,
-                'class': 'aci-attribute',
-                change: function() {
-                    that.value_changed.notify([], that);
-                    that.emit('value-change', { source: that });
-                }
-            }, td);
-            td = $('<td/>').appendTo(tr);
-            td.append($('<label/>',{
-                text: value,
-                'for': id
-            }));
-            option.input_node = opt[0];
-            that.new_option_id();
-        }
-    };
-
     that.update = function(values) {
 
         that.values = [];
@@ -646,14 +570,12 @@ aci.attributes_widget = function(spec) {
 
         that.populate(that.object_type);
         that.append();
-        that.create_options(that.options);
+        that.owb_create(that.container);
         that.owb_update(values);
     };
 
     that.populate = function(object_type) {
 
-        $('tbody tr', that.table).remove();
-
         if (!object_type || object_type === '') return;
 
         var metadata = metadata_provider.get('@mo:'+object_type);
@@ -689,10 +611,6 @@ aci.attributes_widget = function(spec) {
         return false;
     };
 
-    that.show_undo = function() {
-        $(that.undo_span).css('display', 'inline-block');
-    };
-
     return that;
 };
 
@@ -1080,4 +998,4 @@ aci.register = function() {
 phases.on('registration', aci.register);
 
 return aci;
-});
\ No newline at end of file
+});
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 780afb2bc..1bda37350 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -1444,7 +1444,6 @@ IPA.option_widget_base = function(spec, that) {
 
     that.create = function(container) {
         that.destroy();
-        that.create_options(that.$node);
         var css_class = [that.css_class, 'option_widget', that.layout,
                 that.nested ? 'nested': ''].join(' ');
 
diff --git a/ipatests/test_webui/test_delegation.py b/ipatests/test_webui/test_delegation.py
index 22276c2e7..a3e70609f 100644
--- a/ipatests/test_webui/test_delegation.py
+++ b/ipatests/test_webui/test_delegation.py
@@ -33,11 +33,11 @@ DATA = {
         ('textbox', 'aciname', PKEY),
         ('combobox', 'group', 'editors'),
         ('combobox', 'memberof', 'ipausers'),
-        ('table', 'attrs', 'audio'),
-        ('table', 'attrs', 'businesscategory'),
+        ('checkbox', 'attrs', 'audio'),
+        ('checkbox', 'attrs', 'businesscategory'),
     ],
     'mod': [
-        ('table', 'attrs', 'businesscategory'),
+        ('checkbox', 'attrs', 'businesscategory'),
     ],
 }
 
diff --git a/ipatests/test_webui/test_rbac.py b/ipatests/test_webui/test_rbac.py
index 8477b118d..07cc28826 100644
--- a/ipatests/test_webui/test_rbac.py
+++ b/ipatests/test_webui/test_rbac.py
@@ -61,11 +61,11 @@ PERMISSION_DATA = {
         ('checkbox', 'ipapermright', 'write'),
         ('checkbox', 'ipapermright', 'read'),
         ('selectbox', 'type', 'user'),
-        ('table', 'attrs', 'audio'),
-        ('table', 'attrs', 'cn'),
+        ('checkbox', 'attrs', 'audio'),
+        ('checkbox', 'attrs', 'cn'),
     ],
     'mod': [
-        ('table', 'attrs', 'carlicense'),
+        ('checkbox', 'attrs', 'carlicense'),
     ],
 }
 
diff --git a/ipatests/test_webui/test_selfservice.py b/ipatests/test_webui/test_selfservice.py
index ce1971e54..15fd23d4e 100644
--- a/ipatests/test_webui/test_selfservice.py
+++ b/ipatests/test_webui/test_selfservice.py
@@ -30,11 +30,11 @@ DATA = {
     'pkey': PKEY,
     'add': [
         ('textbox', 'aciname', PKEY),
-        ('table', 'attrs', 'audio'),
-        ('table', 'attrs', 'businesscategory'),
+        ('checkbox', 'attrs', 'audio'),
+        ('checkbox', 'attrs', 'businesscategory'),
     ],
     'mod': [
-        ('table', 'attrs', 'businesscategory'),
+        ('checkbox', 'attrs', 'businesscategory'),
     ],
 }
 
-- 
cgit