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-content">Content</a></li>
        <li><a href="#custom-tabular-exporter-tabs-download">Download</a></li>
        <li bind="uploadTabHeader"><a href="#custom-tabular-exporter-tabs-upload">Upload</a></li>
        <li><a href="#custom-tabular-exporter-tabs-code">Option Code</a></li>
      </ul>
      
      <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" id="$custom-exporter-recon-entity-name" /></td>
                <td><label for="$custom-exporter-recon-entity-name">Matched entity's name</label></td>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-recon" value="cell-content" id="$custom-exporter-recon-cell-content" /></td>
                <td><label for="$custom-exporter-recon-cell-content">Cell's content</label></td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-recon" value="entity-id" id="$custom-exporter-recon-entity-id" /></td>
                <td><label for="$custom-exporter-recon-entity-id">Matched entity's ID</label></td>
              </tr>
              <tr>
                <td width="1%"><input type="checkbox" bind="reconLinkCheckbox" id="$custom-exporter-recon-link" /></td>
                <td width="50%"><label for="$custom-exporter-recon-link">Link to matched entity's page</label></td>
                <td width="1%"><input type="checkbox" bind="reconBlankUnmatchedCheckbox" id="$custom-exporter-recon-blank-unmatched" /></td>
                <td width="50%"><label for="$custom-exporter-recon-blank-unmatched">Output nothing for unmatched cells</label></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" id="$custom-exporter-date-iso" /></td>
                <td colspan="3"><label for="$custom-exporter-date-iso">ISO 8601, e.g., 2011-08-24T18:36:10+08:00</label></td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-short" id="$custom-exporter-date-locale-short" /></td>
                <td width="50%"><label for="$custom-exporter-date-locale-short">Short locale format</label></td>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-medium" id="$custom-exporter-date-locale-medium" /></td>
                <td width="50%"><label for="$custom-exporter-date-locale-medium">Medium locale format</label></td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-long" id="$custom-exporter-date-locale-long" /></td>
                <td width="50%"><label for="$custom-exporter-date-locale-long">Long locale format</label></td>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="locale-full" id="$custom-exporter-date-locale-full" /></td>
                <td width="50%"><label for="$custom-exporter-date-locale-full">Full locale format</label></td>
              </tr>
              <tr>
                <td width="1%"><input type="radio" name="custom-tabular-exporter-date" value="custom" id="$custom-exporter-date-custom" /></td>
                <td colspan="3">
                  <label for="$custom-exporter-date-custom">Custom</label> <input size="35" class="lightweight" bind="dateCustomInput" />
                  <a href="" target="_blank">Help</a>
                </td>
              </tr>
              <tr>
                <td width="1%"><input type="checkbox" bind="dateLocalTimeZoneCheckbox" id="$custom-exporter-date-local-timezone" /></td>
                <td width="50%"><label for="$custom-exporter-date-local-timezone">Use local time zone</label></td>
                <td width="1%"><input type="checkbox" bind="omitTimeCheckbox" id="$custom-exporter-date-omit-time" /></td>
                <td width="50%"><label for="$custom-exporter-date-omit-time">Omit time</label></td>
              </tr>
            </table></td></tr>
          </table></div></div></td>
        </tr>
        <tr>
          <td colspan="2">
            <button class="button" bind="selectAllButton">Select All</button>
            <button class="button" bind="deselectAllButton">De-select All</button>
          </td>
        </tr>
        <tr>
          <td colspan="2"><div class="grid-layout layout-tighter layout-full"><table>
            <tr>
              <td width="1%"><input type="checkbox" bind="outputColumnHeadersCheckbox" checked id="$custom-exporter-output-column-headers" /></td>
              <td width="25%"><label for="$custom-exporter-output-column-headers">Output column headers</label></td>
              <td width="1%"><input type="checkbox" bind="outputBlankRowsCheckbox" id="$custom-exporter-output-blank-rows" /></td>
              <td width="25%"><label for="$custom-exporter-output-blank-rows">Output blank rows</label></td>
              <td width="1%"><input type="checkbox" bind="exportAllRowsCheckbox" id="$custom-exporter-output-all-rows" /></td>
              <td width="50%"><label for="$custom-exporter-output-all-rows">Ignore facets and filters and export all rows</label></td>
            </tr>
          </table></div></td>
        </tr>
      </table></div></div>
      
      
      <div id="custom-tabular-exporter-tabs-download" 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-download-format" value="tsv" checked id="$custom-exporter-download-tsv" /></td>
              <td><label for="$custom-exporter-download-tsv">Tab-separated values (TSV)</label></td></tr>
            <tr><td width="1%"><input type="radio" name="custom-tabular-exporter-download-format" value="csv" id="$custom-exporter-download-csv" /></td>
              <td><label for="$custom-exporter-download-csv">Comma-separated values (CSV)</label></td></tr>
            <tr><td width="1%"><input type="radio" name="custom-tabular-exporter-download-format" value="*sv" id="$custom-exporter-download-sv" /></td>
              <td><label for="$custom-exporter-download-sv">Custom separator</label>
                <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-download-format" value="xls" id="$custom-exporter-download-xls" /></td>
              <td><label for="$custom-exporter-download-xls">Excel (.xls)</label></td>
            </tr>
            <tr>
              <td width="1%"><input type="radio" name="custom-tabular-exporter-download-format" value="xlsx" id="$custom-exporter-download-xlsx" /></td>
              <td><label for="$custom-exporter-download-xlsx">Excel in XML (.xlsx)</label></td>
            </tr>
            <tr>
              <td width="1%"><input type="radio" name="custom-tabular-exporter-download-format" value="html" id="$custom-exporter-download-html" /></td>
              <td><label for="$custom-exporter-download-html">HTML table</label></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>
        
        <tr>
          <td colspan="2"><div class="grid-layout grid-layout-for-text layout-tightest layout-full"><table><tr>
            <td width="100%"> </td>
            <td width="1%"><button class="button" bind="downloadPreviewButton">Preview</button></td>
            <td width="1%"><button class="button button-primary" bind="downloadButton">Download</button></td>
          </tr></table></div></td>
        </tr>
      </table></div></div>
      
      
      <div bind="uploadTabBody" id="custom-tabular-exporter-tabs-upload" style="display: none;"><div class="grid-layout grid-layout-for-ui layout-loose layout-full"><table>
        <tr>
          <th>Upload to</th>
        </tr>
        <tr>
          <td><div class="grid-layout grid-layout-for-text layout-tightest"><table bind="uploadTargetTable"></table></div></td>
        </tr>
        <tr>
          <td><button class="button button-primary" bind="uploadButton">Upload</button></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>
  </tr></table></div></div>
</div>