Better table column width computing

Columns can have width set or not. Without setting the width it was computed based on tbody width and number of columns. This method is working well if no column has width set. The disadvantage of this approach is that all columns have the same width and so they are not reflecting their possible usage. Flag columns such as 'external' in rule association tables or various 'enable' flags in search facets can be narrower. If we set them fixed small width it will have different size because this width is not currently added to the computation.

This is fixing this problem so dynamic and fixed width can be combined and the columns have desired width.

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

2 files changed, 44 insertions, 22 deletions

diff --git a/install/ui/rule.js b/install/ui/rule.js
index 3b1308bc..ab2e234d 100644
--- a/install/ui/rule.js
+++ b/install/ui/rule.js
@@ -122,7 +122,8 @@ IPA.rule_association_table_widget = function(spec) {
                     name: that.external,
                     label: IPA.messages.objects.sudorule.external,
                     entity_name: that.other_entity,
-                    format: IPA.boolean_format
+                    format: IPA.boolean_format,
+                    width: '200px'
                 });
             }
         }
diff --git a/install/ui/widget.js b/install/ui/widget.js
index ab39b24e..29c133c0 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -1084,34 +1084,53 @@ IPA.table_widget = function (spec) {
                 });
             }
         }
-
         var columns = that.columns.values;
-        for (var i=0; i<columns.length; i++) {
-            var column = columns[i];
+        var column;
 
-            th = $('<th/>').appendTo(tr);
+        var columns_without_width = 0;
+        var per_column_space = 16; //cell padding(2x6px), border (2x1px), spacing (2px)
+        var available_width = that.thead.width();
+        available_width -= 2;  //first cell spacing
 
-            var width;
-            var cell_spacing = 16; //cell padding(2x6px), border (2x1px), spacing (2px)
+        //subtract checkbox column
+        if(that.selectable) {
+            available_width -= IPA.checkbox_column_width;
+            available_width -= per_column_space;
+        }
+
+        //subtract width of columns with their width set
+        for (i=0; i<columns.length; i++) {
+            column = columns[i];
             if (column.width) {
-                width = parseInt(
+                available_width -= parseInt(
                     column.width.substring(0, column.width.length-2),10);
-                width += 16;
+                available_width -= per_column_space;
             } else {
-                /* don't use the checkbox column as part of the overall
-                    calculation for column widths.  It is so small
-                    that it throws off the average. */
-                width = (that.thead.width() -
-                        2 - //first cell spacing
-                        ((that.selectable ? IPA.checkbox_column_width +
-                          cell_spacing : 0))) /
-                        columns.length;
-                width -= cell_spacing;
+                columns_without_width++;
+            }
+        }
+
+        //width for columns without width set
+        var new_column_width = (available_width -
+                                per_column_space * columns_without_width) /
+                                columns_without_width;
+
+
+        //set the new width, now all columns should have width set
+        for (i=0; i<columns.length; i++) {
+            column = columns[i];
+            if (!column.width) {
+                column.width = new_column_width+"px";
             }
-            width += 'px';
-            th.css('width', width);
-            th.css('max-width', width);
-            column.width = width;
+        }
+
+        for (i=0; i<columns.length; i++) {
+            column = columns[i];
+
+            th = $('<th/>').appendTo(tr);
+
+            th.css('width', column.width);
+            th.css('max-width', column.width);
 
             var label = column.label;
 
@@ -1159,6 +1178,8 @@ IPA.table_widget = function (spec) {
             }
         }
 
+        var width;
+
         for (/* var */ i=0; i<columns.length; i++) {
             /* var */ column = columns[i];