RandomSec/main/webapp/modules/core/scripts/dialogs/custom-tabular-exporter-dialog.html

<div class="dialog-frame" style="width: 800px;">
  <div class="dialog-header" bind="dialogHeader">Custom Tabular Exporter</div>
  <div class="dialog-body" bind="dialogBody">
    <div id="custom-tabular-exporter-tabs" class="refine-tabs">
      <ul>
        <li><a href="#custom-tabular-exporter-tabs-format">File Format</a></li>
        <li><a href="#custom-tabular-exporter-tabs-content">Content</a></li>
        <li><a href="#custom-tabular-exporter-tabs-code">Option Code</a></li>
      </ul>
      
      <div id="custom-tabular-exporter-tabs-format" style="display: none;"><div class="grid-layout grid-layout-for-ui layout-loose layout-full"><table>
        <tr>
          <th>Line-based text formats</th>
          <th>Other formats</th>
        </tr>
        <tr>
          <td width="60%"><div class="grid-layout grid-layout-for-text layout-tightest"><table>
            <tr><td width="1%"><input type="radio" name="custom-tabular-exporter-format" value="tsv" /></td><td>Tab-separated values (TSV)</td></tr>
            <tr><td width="1%"><input type="radio" name="custom-tabular-exporter-format" value="csv" /></td><td>Comma-separated values (CSV)</td></tr>
            <tr><td width="1%"><input type="radio" name="custom-tabular-exporter-format" value="*sv" /></td><td>Custom separator
              <input type="text" class="lightweight" size="5" bind="separatorInput" />
            </td></tr>
          </table></div></td>
          
          <td><div class="grid-layout grid-layout-for-text layout-tightest"><table>
            <tr>
              <td width="1%"><input type="radio" name="custom-tabular-exporter-format" value="xls" /></td>
              <td>Excel (.xls)</td>
            </tr>
            <tr>
              <td width="1%"><input type="radio" name="custom-tabular-exporter-format" value="xlsx" /></td>
              <td>Excel in XML (.xlsx)</td>
            </tr>
            <tr>
              <td width="1%"><input type="radio" name="custom-tabular-exporter-format" value="html" /></td>
              <td>HTML table</td>
            </tr>
          </table></div></td>
        </tr>
        
        <tr>
          <td><div class="grid-layout grid-layout-for-text layout-tightest"><table>
            <tr><td>Line separator</td><td><input type="text" size="5" class="lightweight" bind="lineSeparatorInput" /></td></tr>
            <tr><td>Character encoding</td><td><input type="text" size="10" class="lightweight" bind="encodingInput" /></td></tr>
          </table></div></td>
        </tr>
      </table></div></div>
      
      <div id="custom-tabular-exporter-tabs-content"><div class="grid-layout grid-layout-for-ui layout-normal layout-full"><table>
        <tr>
          <td>Select and Order Columns to Export</td>
          <td>Options for <span bind="columnNameSpan" class="custom-tabular-exporter-selected-column"></span></td>
        </tr>
        <tr>
          <td width="40%"><div bind="columnList" class="custom-tabular-exporter-columns"></div></td>
          <td><div bind="columnOptionPane" class="custom-tabular-exporter-column-options"><div class="grid-layout layout-normal"><table>
            <tr><td colspan="2">For reconciled cells, output</td></tr>
            <tr><td><div class="grid-layout layout-tightest"><table>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-recon" value="entity-name" /></td>
                <td>Matched entity's name</td>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-recon" value="cell-content" /></td>
                <td>Cell's content</td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-recon" value="entity-id" /></td>
                <td>Matched entity's ID</td>
              </tr>
              <tr>
                <td width="1%"><input type="checkbox" bind="reconLinkCheckbox" /></td>
                <td width="50%">Link to matched entity's page</td>
                <td width="1%"><input type="checkbox" bind="reconBlankUnmatchedCheckbox" /></td>
                <td width="50%">Output nothing for unmatched cells</td>
              </tr>
            </table></td></tr>
            
            <tr><td colspan="2">For date/time values, use format</td></tr>
            <tr><td><div class="grid-layout layout-tightest"><table>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="iso-8601" /></td>
                <td colspan="3">ISO 8601, e.g., 2011-08-24T18:36:10+08:00</td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-short" /></td>
                <td width="50%">Short locale format</td>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-medium" /></td>
                <td width="50%">Medium locale format</td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-long" /></td>
                <td width="50%">Long locale format</td>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-full" /></td>
                <td width="50%">Full locale format</td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="custom" /></td>
                <td colspan="3">
                  Custom <input size="35" class="lightweight" bind="dateCustomInput" />
                  <a href="" target="_blank">Help</a>
                </td>
              </tr>
              <tr>
                <td width="1%"><input type="checkbox" bind="dateLocalTimeZoneCheckbox" /></td>
                <td width="50%">Use local time zone</td>
                <td width="1%"><input type="checkbox" bind="omitTimeCheckbox" /></td>
                <td width="50%">Omit time</td>
              </tr>
            </table></td></tr>
          </table></div></div></td>
        </tr>
        <tr>
          <td>
            <button class="button" bind="selectAllButton">Select All</button>
            <button class="button" bind="deselectAllButton">De-select All</button>
          </td>
          <td><div class="grid-layout layout-tighter"><table>
            <tr>
              <td width="1%"><input type="checkbox" bind="outputColumnHeadersCheckbox" checked /></td>
              <td width="50%">Output column headers</td>
              <td width="1%"><input type="checkbox" bind="outputBlankRowsCheckbox" /></td>
              <td width="50%">Output blank rows</td>
            </tr>
          </table></div></td>
        </tr>
      </table></div></div>
      
      
      <div id="custom-tabular-exporter-tabs-code" style="display: none;"><div class="grid-layout grid-layout-for-ui layout-loose layout-full"><table>
        <tr>
          <td>The following JSON text encodes the options you have set in the other tabs.
            You can copy it out and save it for later, and paste it back in and click Apply
            to re-use the same options.
          </td>
          <td width="30%" style="text-align: right;"><button class="button" bind="applyOptionCodeButton">Apply</button></td>
        </tr>
        <tr><td colspan="2"><textarea class="custom-tabular-exporter-code" bind="optionCodeInput"></textarea></td></tr>
      </table></div></div>
    </div>
  </div>
  <div class="dialog-footer" bind="dialogFooter"><div class="grid-layout layout-tightest layout-full"><table><tr>
    <td><button class="button" bind="cancelButton">Cancel</button></td>
    
    <td width="1%"><input type="checkbox" bind="exportAllRowsCheckbox" /></td>
    <td>Ignore facets and filters and export all rows</td>
    
    <td width="1%"><button class="button" bind="previewButton">Preview</button></td>
    <td width="1%"><button class="button button-primary" bind="exportButton">Export</button></td>
  </tr></table></div></div>
</div>