Răsfoiți Sursa

HUE-1155 [catalog] Vertical column layout in create table

The layout is now vertical
Simple autodetect of the column types
Text size of column preview limited to 25 chars (with tooltip for its real value)
Enrico Berti 12 ani în urmă
părinte
comite
6dbc6099fa

+ 8 - 0
apps/beeswax/src/beeswax/templates/beeswax_components.mako

@@ -18,6 +18,14 @@
   from django.utils.translation import ugettext as _
 %>
 
+<%def name="getEllipsifiedCell(val, placement='bottom', klass='')">
+  % if len(val) > 25:
+    <td class="${ klass }" rel="tooltip" title="${ val[:300] }" data-placement="${ placement }" >${ (val[:25]) }&hellip;</td>
+  % else:
+    <td class="${ klass }">${ val }</td>
+  % endif
+</%def>
+
 <%def name="fieldName(field)">
 </%def>
 

+ 44 - 42
apps/beeswax/src/beeswax/templates/choose_delimiter.mako

@@ -71,19 +71,19 @@ ${layout.menubar(section='tables')}
                                 <table class="table table-striped table-condensed">
                                     <thead>
                                     <tr>
-                                            % for i in range(n_cols):
-                                                <th>col_${i+1}</th>
-                                            % endfor
+                                      % for i in range(n_cols):
+                                          <th>col_${i+1}</th>
+                                      % endfor
                                     </tr>
                                     </thead>
                                     <tbody>
-                                            % for row in fields_list:
-                                            <tr>
-                                                % for val in row:
-                                                    <td>${val}</td>
-                                                % endfor
-                                            </tr>
-                                            % endfor
+                                      % for row in fields_list:
+                                      <tr>
+                                        % for val in row:
+                                          ${ comps.getEllipsifiedCell(val, "left")}
+                                        % endfor
+                                      </tr>
+                                      % endfor
                                     </tbody>
                                 </table>
                             </div>
@@ -100,45 +100,47 @@ ${layout.menubar(section='tables')}
     </div>
 </div>
 
-<style>
-    .scrollable {
-        width: 100%;
-        overflow-x: auto;
-    }
+<style type="text/css">
+  .scrollable {
+    width: 100%;
+    overflow-x: auto;
+  }
 </style>
 
 <script type="text/javascript" charset="utf-8">
-    $(document).ready(function(){
-        $(".scrollable").width($(".form-actions").width());
+  $(document).ready(function () {
+    $("[rel='tooltip']").tooltip();
 
-        $("#id_delimiter_1").css("margin-left","4px").attr("placeholder","${_('Please type your delimiter here')}").hide();
-        $("#id_delimiter_0").change(function(){
-            if ($(this).val() == "__other__"){
-                $("#id_delimiter_1").show();
-            }
-            else {
-                $("#id_delimiter_1").hide();
-                $("#id_delimiter_1").val('');
-            }
-        });
+    $(".scrollable").width($(".form-actions").width());
 
-        $("#id_delimiter_0").change();
+    $("#id_delimiter_1").css("margin-left", "4px").attr("placeholder", "${_('Please type your delimiter here')}").hide();
+    $("#id_delimiter_0").change(function () {
+      if ($(this).val() == "__other__") {
+        $("#id_delimiter_1").show();
+      }
+      else {
+        $("#id_delimiter_1").hide();
+        $("#id_delimiter_1").val('');
+      }
+    });
+
+    $("#id_delimiter_0").change();
 
-        $("#step1").click(function(e){
-            e.preventDefault();
-            $("input[name='cancel_delim']").click();
-        });
-        $("#step3").click(function(e){
-            e.preventDefault();
-            $("input[name='submit_delim']").click();
-        });
-        $("body").keypress(function(e){
-            if(e.which == 13){
-                e.preventDefault();
-                $("input[name='submit_delim']").click();
-            }
-        });
+    $("#step1").click(function (e) {
+      e.preventDefault();
+      $("input[name='cancel_delim']").click();
+    });
+    $("#step3").click(function (e) {
+      e.preventDefault();
+      $("input[name='submit_delim']").click();
+    });
+    $("body").keypress(function (e) {
+      if (e.which == 13) {
+        e.preventDefault();
+        $("input[name='submit_delim']").click();
+      }
     });
+  });
 </script>
 
 ${ commonfooter(messages) | n,unicode }

+ 83 - 29
apps/beeswax/src/beeswax/templates/define_columns.mako

@@ -59,33 +59,36 @@ ${layout.menubar(section='tables')}
                         <div class="controls">
                             <div class="scrollable">
                                 <table class="table table-striped">
-                                    <tr>
-                                        <td id="editColumns"><i class="icon-edit" rel="tooltip" data-placement="left" title="${ _('Bulk edit names') }"></i></td>
-                                        % for form in column_formset.forms:
-                                                <td class="cols">
-                                                ${comps.label(form["column_name"])}
-                                                ${comps.field(form["column_name"],
-                                                render_default=False,
-                                                placeholder=_("Column name")
-                                                )}
-                                                    <br/><br/>
-                                                ${comps.label(form["column_type"])}
-                                                ${comps.field(form["column_type"],
-                                                render_default=True
-                                                )}
-                                                ${unicode(form["_exists"]) | n}
-                                                </td>
-                                        %endfor
-                                    </tr>
-                                    % for i, row in enumerate(fields_list[:n_rows]):
-                                        <tr>
-                                            <td><em>${_('Row')} #${i + 1}</em></td>
-                                        % for val in row:
-                                                <td>${val}</td>
+                                    <thead>
+                                      <th id="editColumns">${ _('Column name') } &nbsp;<i class="icon-edit" rel="tooltip" data-placement="right" title="${ _('Bulk edit names') }"></i></th>
+                                      <th>${ _('Column Type') }</th>
+                                      % for i in range(0, n_rows):
+                                        <th><em>${_('Sample Row')} #${i + 1}</em></th>
+                                      % endfor
+                                    </thead>
+                                    <tbody>
+                                      % for col, form in zip(range(len(column_formset.forms)), column_formset.forms):
+                                      <tr>
+                                        <td class="cols">
+                                          ${comps.field(form["column_name"],
+                                              render_default=False,
+                                              placeholder=_("Column name")
+                                            )}
+                                        </td>
+                                        <td>
+                                          ${comps.field(form["column_type"],
+                                              render_default=True
+                                            )}
+                                          ${unicode(form["_exists"]) | n}
+                                        </td>
+                                        % for row in fields_list[:n_rows]:
+                                          ${ comps.getEllipsifiedCell(row[col], "bottom", "dataSample")}
                                         % endfor
-                                        </tr>
-                                    % endfor
+                                      </tr>
+                                      %endfor
+                                    </tbody>
                                 </table>
+
                             </div>
                         </div>
                     </div>
@@ -126,7 +129,8 @@ ${layout.menubar(section='tables')}
 </div>
 
 <link href="/static/ext/css/bootstrap-editable.css" rel="stylesheet">
-<style>
+
+<style type="text/css">
   .scrollable {
     width: 100%;
     overflow-x: auto;
@@ -134,8 +138,6 @@ ${layout.menubar(section='tables')}
 
   #editColumns {
     cursor: pointer;
-    text-align: right;
-    padding-top: 36px;
   }
 </style>
 
@@ -181,15 +183,63 @@ ${layout.menubar(section='tables')}
     });
 
     $("#columnNamesPopover .editable-submit").click(function () {
+      parseEditable();
+    });
+
+    $(".editable-input input").keypress(function (e) {
+      if (e.keyCode == 13) {
+        parseEditable();
+        return false;
+      }
+    });
+
+    function parseEditable() {
       parseJSON($(".editable-input input").val());
       $("#columnNamesPopover").hide();
       $(".editable-input input").val("");
-    });
+    }
 
     $("#columnNamesPopover .editable-cancel").click(function () {
       $("#columnNamesPopover").hide();
     });
 
+    $(".dataSample").each(function () {
+      var _val = $.trim($(this).text());
+      var _field = $(this).siblings().find("select");
+      var _foundType = "string";
+      if ($.isNumeric(_val)) {
+        _val = _val * 1;
+        if (isInt(_val)) {
+          // it's an int
+          _foundType = "int";
+        }
+        else {
+          // it's possibly a float
+          _foundType = "float";
+        }
+      }
+      else {
+        if (_val.toLowerCase().indexOf("true") > -1 || _val.toLowerCase().indexOf("false") > -1) {
+          // it's a boolean
+          _foundType = "boolean";
+        }
+        else {
+          // it's most probably a string
+          _foundType = "string";
+        }
+      }
+      if (_field.data("possibleType") != null && _field.data("possibleType") != _foundType) {
+        _field.data("possibleType", "string");
+      }
+      else {
+        _field.data("possibleType", _foundType);
+      }
+    });
+
+    $("select").each(function () {
+      $(this).val($(this).data("possibleType"));
+    });
+
     function parseJSON(val) {
       try {
         if (val.indexOf("\"") == -1 && val.indexOf("'") == -1) {
@@ -210,6 +260,10 @@ ${layout.menubar(section='tables')}
       catch (err) {
       }
     }
+
+    function isInt(n) {
+      return typeof n === 'number' && parseFloat(n) == parseInt(n, 10) && !isNaN(n);
+    }
   });
 </script>
 ${ commonfooter(messages) | n,unicode }