Changeset 8132

Timestamp:

Mar 24, 2023, 1:31:56 PM (2 months ago)

Author:

Nicklas Nordborg

Message:

Fixes #2297: Improve the "File columns" selection in the "Test with file" function

Location:

branches/3.19-stable/www

Files:

• common/plugin/parse_file.js (modified) (3 diffs)
• common/plugin/parse_file.jsp (modified) (6 diffs)
• include/styles/main.css (modified) (1 diff)

branches/3.19-stable/www/common/plugin/parse_file.js

@@ -30 +30 @@
   var columnHeaders;
   var fuzzyMatches;
+  var currentMappingName;
 
   /**
@@ -70 +71 @@
       Events.addEventHandler(element, 'click', parse.clearColumnMapping);
     }
-    else if (autoInit == 'column-mapping-preset')
-    {
-      Events.addEventHandler(element, 'change', parse.setPresetColumnMapping);
+    else if (autoInit == 'column-mapping-preset-menu')
+    {
+      Buttons.addClickHandler(element, parse.showColumnMappingPresets);
+    }
+    else if (autoInit == 'preset-column-mapping')
+    {
+      Events.addEventHandler(element, 'click', parse.setPresetColumnMapping);
     }
     else if (autoInit == 'column-mapping')
@@ -173 +178 @@
   }
   
+  parse.showColumnMappingPresets = function(event)
+  {
+    currentMappingName = Data.get(event.currentTarget, 'mapping');
+    var frm = document.forms['mappings'];
+    frm['mapping.'+currentMappingName+'.expression'].focus();
+    
+    var offsetLeft = event.clientX;
+    var offsetTop = event.clientY;
+    var offsetBottom = null;
+    // Open the menu at the mouse position
+    Menu.showTopMenu('predefinedColumnMappings', offsetLeft, offsetTop); 
+    event.stopPropagation();
+
+    // We may have to adjust depending on size of window
+    var winPos = App.getWindowPosition();
+    var pcm = Doc.element('predefinedColumnMappings');
+    pcm.style.bottom = 'auto'; // To ensure that the height is auto-calculated
+    
+    // If the right side overflows we move the menu to the left
+    if (offsetLeft+pcm.offsetWidth+10 > winPos.width)
+    {
+      offsetLeft = winPos.width-pcm.offsetWidth-10;
+    }
+    // If the bottom side overflows we move up...
+    if (offsetTop+pcm.offsetHeight+10 > winPos.height)
+    {
+      offsetTop = winPos.height-pcm.offsetHeight-10;
+      // ... but then we may overflow the top so we need to
+      // limit the height
+      if (offsetTop < 5)
+      {
+        offsetTop = 5;
+        offsetBottom = 5;
+        offsetLeft -= 10; // make room for the scrollbar
+      }
+    }
+    pcm.style.left = (offsetLeft)+'px';
+    pcm.style.top = (offsetTop)+'px';
+    if (offsetBottom) pcm.style.bottom = (offsetBottom)+'px';   
+  }
+
   parse.setPresetColumnMapping = function(event)
   {
     var target = event.currentTarget;
-    var mappingName = Data.get(target, 'mapping');
-  
-    var columnIndex = target.value;
-    target.selectedIndex = 0;
+    var columnIndex = Data.int(target, 'index');
     var expression = parse.getMappingExpressionForHeader(columnIndex);
-
-    parse.setColumnMapping(mappingName, expression, true);
+    parse.setColumnMapping(currentMappingName, expression, true);
   }
   

branches/3.19-stable/www/common/plugin/parse_file.jsp

@@ -33 +33 @@
   import="net.sf.basedb.core.Path"
   import="net.sf.basedb.core.Location"
+  import="net.sf.basedb.core.StringUtil"
   import="net.sf.basedb.core.PluginConfigurationRequest"
   import="net.sf.basedb.core.plugin.Plugin"
@@ -78 +79 @@
   FlatFileParser parser = null;
   FlatFileParser.LineType lastLine = null;
+  FlatFileParser.Data firstDataLine = null;
   Pattern splitter = null;
   boolean dataIsFound = false;
@@ -231 +233 @@
     {
       color: #0000D0;
+    }
+    
+    #predefinedColumnMappings
+    {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    
+    .file-column
+    {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      width: 32em;
+      padding: 0 !important;
+    }
+    
+    .file-column > div
+    {
+      overflow: hidden;
+      padding: 3px 4px;
+    }
+
+    .file-column > div.example
+    {
+      background-color: #F8F8F8;
+      border-left-width: 1px;
+      border-left-style: dotted;
+      font-style: italic;
+    }
+
+    .interactable.file-column:hover > div:first-child
+    {
+      padding: 1px 4px 1px 2px;
+    }
+    .interactable.file-column:hover > div.example
+    {
+      padding: 1px 2px 1px 4px;
+    }
+
+    .index-only .file-column
+    {
+      width: 20em;
+      grid-template-columns: 5em 1fr;
+    }
+    
+    .index-only .interactable.file-column:hover
+    {
+      grid-template-columns: calc(5em - 2px) 1fr;
     }
     </style>
@@ -360 +410 @@
         if (currentLine < maxLines)
         {
-          if (lastLine == FlatFileParser.LineType.DATA) parser.nextData();
+          if (lastLine == FlatFileParser.LineType.DATA) 
+          {
+            firstDataLine = parser.nextData();
+          }
           while (currentLine < maxLines && parser.hasMoreData())
           {
             FlatFileParser.Data data = parser.nextData();
+            if (firstDataLine == null) firstDataLine = data;
             linePatterns.add(Pattern.quote(data.line()));
             if (parser.getNumSkippedLines() > 0)
@@ -439 +493 @@
       >
       <%
-      StringBuilder sb = new StringBuilder();
       List<String> headers = parser.getColumnHeaders();
+      //headers = null;
       int index = 0;
-      if (headers != null)
-      {
-        for (String header : headers)
+      int maxDataColumns = headers != null ? headers.size() : firstDataLine.columns();
+      %>
+      <div id="predefinedColumnMappings" class="menu vertical bg-filled-100 <%=headers==null?"index-only":"" %>" style="display: none;">
+        <div class="menuitem file-column" style="font-weight: bold;">
+          <div>Column</div>
+          <div class="example">Example</div>
+        </div>
+        <%
+        while (index < maxDataColumns)
         {
-          sb.append("<option value=\"" + index + "\">" + HTML.encodeTags(header));
+          String headerText = headers != null ? HTML.encodeTags(headers.get(index)) : "";
+          String exampleText = HTML.encodeTags(firstDataLine.getString(index));
+          %>
+          <div class="menuitem interactable file-column auto-init" 
+            data-auto-init="preset-column-mapping" data-index="<%=index%>"
+            title="<%=headerText%> – <%=exampleText%>"
+            >
+            <div><%=Integer.toString(index+1)%>: <%=headerText%></div>
+            <div class="example"><%=exampleText%></div>
+          </div>
+          <%
           index++;
         }
-      }
-      else
-      {
-        int maxDataColumns = Values.getInt(request.getParameter("maxDataColumns"), -1);
-        while (index < maxDataColumns)
-        {
-          sb.append("<option value=\"" + index + "\">" + index);
-          index++;
-        }
-      }
-      String mappings = sb.toString();
+        %>
+      </div>
+      <%
       String[] mappingParameters = request.getParameter("mappingParameterNames").split(",");
       if (headers != null)
@@ -568 +630 @@
                 
                 <tbl:cell column="columns">
-                  <select name="list.<%=name%>" class="auto-init"
-                    data-auto-init="column-mapping-preset" data-mapping="<%=name%>">
-                  <option value="">
-                  <%=mappings%>
-                  </select>
+                  <base:button 
+                    title="- select -" image="mini_scroll_down.png" 
+                    subclass="icon-to-right auto-init" style="font-style: italic;" 
+                    data-auto-init="column-mapping-preset-menu"
+                    data-mapping="<%=name%>"
+                  />
                 </tbl:cell>
               

branches/3.19-stable/www/include/styles/main.css

@@ -283 +283 @@
 {
   padding-right: 2px;
+}
+
+.basicbutton.icon-to-right > img
+{
+  float: right;
+  padding-left: 2px;
 }