formhandler.template.html

<!--
Each "var ..." template is embedded into formhandler.js as a minified HTML string variable.
This uses rollup-plugin-htmlparts.js: our custom rollup plugin.

Each template receives these variables:

- data: JSON data from FormHandler
- meta: Meta HTTP headers from FormHandler
- options: Options passed to $().formhandler() (including defaults)
- args: URL query parameters used to retrieve data
-->

<!-- This is the root template that renders all other components on this page -->
<!-- var template_ -->
<div class="position-relative">
  <div class="formhandler">
    <div class="note"></div>
    <div class="formhandler-table-header d-flex justify-content-between mb-2">
      <div class="d-flex flex-wrap">
        <div class="edit"></div>
        <div class="add"></div>
        <div class="count"></div>
        <div class="page"></div>
        <div class="size"></div>
      </div>
      <div class="d-flex">
        <div class="filters"></div>
        <div class="export"></div>
      </div>
    </div>
      <div class="<%- (options.table == 'grid') ? 'table_grid' : 'table' %>"></div>
  </div>
  <div class="loader pos-cc d-none">
    <div class="fa fa-spinner fa-spin fa-3x fa-fw"></div>
    <span class="sr-only">Loading...</span>
  </div>
</div>
<div class="modal formhandler-table-modal" id="fh-modal-<%- idcount %>" tabindex="-1" role="dialog" aria-labelledby="fh-label-<%- idcount %>"
  aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <form class="formhandler-table-modal-form modal-body">
        <label id="fh-label-<%- idcount %>" for="formhandler-table-modal-value">Value</label>
        <p>
          <input class="form-control" name="filter_input">
        </p>
        <div>
          <button type="button" class="btn btn-sm btn-secondary mr-1" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-sm btn-primary mr-1">Apply filter</button>
          <a class="btn btn-sm btn-danger remove-action urlfilter" data-dismiss="modal" data-target="#" href="#">Remove filter</button>
        </div>
      </form>
    </div><!-- .modal-content -->
  </div><!-- .modal-dialog -->
</div><!-- .modal -->
<!-- end -->

<!-- var template_table -->
<%
  var filtered_cols = args['_c'] && args['_c'].length != options.columns.length ?
                      options.columns.filter(function(col) { return args['_c'].indexOf('-' + col.name) < 0 }) :
                      options.columns
  var cols = options.columns.length ? filtered_cols : meta.columns;
  cols = cols.filter(function(col) { return col.hide !== true})
  var form_id = idcount
  var namespace = options.namespace ? options.namespace + ':' : ''
%>

<table class="table table-sm table-striped">
  <thead>
    <% _.each(cols, function(colinfo) {
        col_defaults(colinfo, data)
        var menu_item = false
        var col_id = idcount++
        var qsort = parse('?')
        var isSorted = _.includes(args['_sort'], colinfo.name) ? {op: '', cls: 'table-primary'} : _.includes(args['_sort'], '-' + colinfo.name) ? {op: '-', cls: 'table-danger'} : {}
      %>
      <th class="<%- isSorted.cls %>" data-col="<%- colinfo.name %>">
        <div class="dropdown">
          <a href="#" class="dropdown-toggle text-nowrap" id="fh-dd-<%- col_id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <%- colinfo.title || colinfo.name %>
          </a>
          <div class="dropdown-menu" aria-labelledby="fh-dd-<%- col_id %>">
            <% _.each(colinfo.sort, function(title, op) { menu_item = true
              qsort = qsort.update({_sort: args['_sort'] || []})
              if (!_.isEmpty(isSorted))
                qsort = qsort.update({_sort: [colinfo.name, '-' + colinfo.name]}, 'del')
              var active = _.includes(args['_sort'], op + colinfo.name) %>
              <a class="dropdown-item urlfilter <%- active ? 'active': '' %>" href="<%- qsort.update({[namespace + '_sort']: [op + colinfo.name]}, active ? 'del': 'add').toString() %>">
                <%- title %>
              </a>
            <% }) %>
            <% if (menu_item) { %>
              <div class="dropdown-divider"></div>
            <% menu_item = false } %>
            <% _.each(colinfo.filters, function(title, op) { menu_item = true %>
              <a class="dropdown-item <%= colinfo.name + op in args ? 'active' : '' %>" href="#" data-op="<%- op %>" data-toggle="modal" data-target="#fh-modal-<%- form_id %>">
                <%- title %>
              </a>
            <% }) %>
            <% if (menu_item) {
              menu_item = false %>
              <div class="dropdown-divider"></div>
            <% } %>
            <% if (colinfo.hideable) { %>
              <a class="dropdown-item urlfilter" href="?<%- namespace + '_c=-' + encodeURIComponent(colinfo.name) %>" data-mode="add">Hide</a>
            <% } %>
          </div><!-- .dropdown-menu -->
        </div><!-- .dropdown -->
      </th>
    <% }) %>
  </thead>
  <tbody>
    <% if (isAdd) { %>
      <tr class="new-row">
        <% _.each(cols, function(colinfo) {
          if (!colinfo.template) { %>
            <td data-key="<%- colinfo.name %>">
              <% var isEditable = colinfo.editable === undefined ? true : colinfo.editable %>
              <%= _.template(templates['template_editable'])({isEditable: isEditable, val: undefined}) %>
            </td>
          <% } else { %>
            <td></td>
          <% } %>
        <% }) %>
      </tr>
    <% } %>
    <% if (options.rowTemplate) { %>
      <% _.each(data, function(row, rowIndex) { %>
        <%= typeof options.rowTemplate == 'function' ? options.rowTemplate({row: row, data: data, index: rowIndex}) : _.template(options.rowTemplate)({row: row, data: data, index: rowIndex}) %>
      <% }) %>
    <% } else {%>
    <% _.each(data, function(row, rowIndex) { %>
      <tr data-val="<%- JSON.stringify(row) %>" data-row="<%- rowIndex %>">
        <% _.each(cols, function(colinfo) { %>
          <% var fmt = typeof(colinfo.format),
            val = row[colinfo.name],
            isEditable = colinfo.editable === undefined ? true : colinfo.editable,
            disp = fmt == "function" ?
              colinfo.format({name: colinfo.name, value: val, index: rowIndex, row: row, data:data }) :
            fmt === "string" && colinfo.type === "number" ?
              numeral(val).format(colinfo.format) :
            fmt === "string" && colinfo.type === "date" ?
              moment.utc(val).format(colinfo.format):
              val,
            col_link
          %>
          <% if (!isEdit && colinfo.template) { %>
            <%= typeof colinfo.template == 'function' ?
              colinfo.template({name: colinfo.name, value: val, format: disp, link: col_link, index: rowIndex, row: row, data: data}) :
              _.template(colinfo.template)(({name: colinfo.name, value: val, format: disp, link: col_link, index: rowIndex, row: row, data: data})) %>
          <% } else if (!isEdit && 'link' in colinfo) { %>
            <% col_link = typeof colinfo.link == 'function' ?
              colinfo.link({name: colinfo.name, value: val, format: disp, index: rowIndex, row: row, data: data}) :
              (typeof colinfo.link == 'string' ?
                _.template(colinfo.link)({name: colinfo.name, value: val, format: disp, index: rowIndex, row: row, data: data})
                : colinfo.link)
                %>
            <% if (col_link === false) { %>
                <td><%= disp %></td>
            <% } else if (col_link && col_link[0] == '?') { %>
                <td><a class="urlfilter" href="<%- col_link %>"><%= disp %></a></td>
            <% } else { %>
                <td><a href="<%- col_link %>" target="_blank"><%= disp %></a></td>
            <% } %>
          <% } else if (isEdit && isEditable) { %>
            <td data-key="<%- colinfo.name %>">
              <%= _.template(templates['template_editable'])({isEditable: isEditable, val: val}) %>
            </td>
          <% } else { %>
            <td>
              <a class="urlfilter ii" href="?<%- namespace + encodeURIComponent(colinfo.name) %>=<%- encodeURIComponent(val) %>&amp;_offset=">
                <%= disp %>
              </a>
            </td>
          <% } %>
        <% }) %>
        </tr>
      <% }) %>
    <% } %>
  </tbody>
</table>
<!-- end -->

<!-- var template_editable -->
<% if (isEditable.input == 'select') { %>

  <select
      <% for (key in isEditable.attrs) { %>
        <%= key + '="' + isEditable.attrs[key] + '"' %>
      <% } %>
      class="form-control form-control-sm"
    >
    <option value="" disabled selected>-- select --</option>
    <% _.each(isEditable.options, function(item) { %>
      <option <%- val !== undefined && val === item ? 'selected': null %> value="<%- item %>">
        <%- item %>
      </option>
    <% }) %>
  </select>


<% } else if (isEditable.input == 'radio') { %>

  <% _.each(isEditable.options, function(item) { %>
    <input type="radio" <%- val !== undefined && val === item ? 'checked': null %> value="<%- item %>"
      <% for (key in isEditable.attrs) { %>
        <%= key + '="' + isEditable.attrs[key] + '"' %>
      <% } %>
      class="form-control form-control-sm"
    />
    <%- item %> <br>
  <% }) %>

<% } else { %>
  <input type="<%- isEditable.input || 'text' %>" value="<%- val %>"
    <% for (key in isEditable.attrs) { %>
      <%= key + '="' + isEditable.attrs[key] + '"' %>
    <% } %>
    class="form-control form-control-sm"
  />

<% } %>
<% if (isEditable.validationMessage) { %>
  <div class="invalid-feedback">
    <%- isEditable.validationMessage %>
  </div>
<% } %>
<!-- end -->

<!-- var template_page -->
<% var page = 1 + Math.floor(meta.offset / meta.limit),
      last_page = 'count' in meta ? Math.floor((meta.count + meta.limit - 1) / meta.limit) : meta.rows < meta.limit ? page : null,
      lo = Math.max(page - 2, 1),
      hi = last_page !== null ? Math.min(last_page, page + 2) : page + 2 %>
<ul class="pagination pagination-sm mr-2">
  <li class="page-item <%- page <= 1 ? 'disabled' : '' %>">
    <a class="page-link" href="?_offset=<%- meta.offset - meta.limit %>">Previous</a>
  </li>
  <% if (lo > 1) { %>
    <li class="page-item">
      <a class="page-link" href="?_offset=">1</a>
    </li>
    <% if (lo > 2) { %>
      <li class="page-item disabled">
        <a class="page-link" href="#">...</a>
      </li>
    <% } %>
  <% } %>
  <% _.each(_.range(lo, hi + 1), function(pg) { %>
    <li class="page-item <%- pg == page ? 'active' : '' %>">
      <a class="page-link" href="?_offset=<%- meta.limit * (pg - 1) || '' %>">
        <%- pg %>
      </a>
    </li>
  <% }) %>
  <% if ('count' in meta) { %>
    <% if (hi + 1 < last_page) { %>
      <li class="page-item disabled">
        <a class="page-link" href="#">...</a>
      </li>
    <% } %>
    <% if (hi < last_page || lo > hi) { %>
      <li class="page-item">
        <a class="page-link" href="?_offset=<%- meta.limit * (last_page - 1) %>">
          <%- last_page %>
        </a>
      </li>
    <% } %>
  <% } %>
  <li class="page-item <%- (last_page === null) || (page < last_page) ? '' : 'disabled' %>">
    <a class="page-link" href="?_offset=<%- meta.offset + meta.limit %>">Next</a>
  </li>
</ul>
<!-- end -->

<!-- var template_size -->
<% if (meta.limit) { %>
  <div class="btn-group btn-group-sm mr-2" role="group">
    <button id="formhandler-size-<%- idcount++ %>" type="button" class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      <%- meta.limit %> rows
    </button>
    <div class="dropdown-menu" aria-labelledby="formhandler-size-<%- idcount %>">
      <% _.each(options.sizeValues, function(size) { %>
        <a class="dropdown-item <%- meta.limit == size ? 'active' : '' %> urlfilter" href="?_limit=<%- size %>">
          <%- size %>
        </a>
      <% }) %>
    </div>
  </div>
<% } %>
<!-- end -->

<!-- var template_count -->
<% if ('count' in meta) { %>
  <span class="btn btn-sm btn-light mr-2">
    <%- meta.count %> rows
  </span>
<% } %>
<!-- end -->

<!-- var template_edit -->
<button type="submit" class="btn btn-success mr-2 btn-sm edit-btn">
  Edit
</button>
<!-- end -->

<!-- var template_add -->
<button type="button" class="btn btn-success mr-2 btn-sm add-btn">
  Add
</button>
<!-- end -->

<!-- var template_export -->
<div class="btn-group btn-group-sm" role="group">
  <button id="formhandler-export-<%- idcount++ %>" type="button" class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">
    Export as
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="formhandler-export-<%- idcount %>">
    <% _.each(options.exportFormats, function(label, key) { %>
      <a class="dropdown-item" href="<%- parse(options.src).update(args).update({_format: key}) %>">
        <%- label %>
      </a>
    <% }) %>
  </div>
</div>
<!-- end -->

<!-- var template_filters -->
<div class="p-1"><%
  var qparts = parse('?')
  _.each(args['_c'], function(col_name) {
    qparts.update({_c: col_name}, 'add')
    var hide_col = col_name[0] == '-'
    var display_name = hide_col ? col_name.slice(1) : col_name
    display_name = (display_name.indexOf(':') > -1)? display_name.split(':')[1].trim() : display_name %>
    <a href="?_c=<%- encodeURIComponent(col_name) %>" data-mode="del" class="badge badge-pill <%- hide_col ? 'badge-dark' : 'badge-danger' %> urlfilter"
      title="<%- hide_col ? 'Show' : 'Hide' %> column <%- display_name %>">
      <%- display_name %>
    </a>
  <% })
  _.each(args, function(list_values, key) {
    var isnamespaced_key = (key.indexOf(":") > -1)
    var has_valid_namespace = (options.namespace)? (key.indexOf(options.namespace +':') > -1) : false

    if (key.charAt(0) !== '_' && key !== 'c') {
      _.each(args[key], function(col_name) {
        if( !isnamespaced_key || (isnamespaced_key && has_valid_namespace) ){
          var update = {}
          update[key] = col_name
          qparts.update(update, 'add')
          var display_key = (key.indexOf(options.namespace +':') > -1)? key.split(":")[1].trim() : key %>
          <a href="?<%- encodeURIComponent(key) %>=<%- encodeURIComponent(col_name) %>" data-mode="del" class="badge badge-pill badge-dark urlfilter" title="Clear <%- key %> filter">
            <%- display_key %> = <%- col_name %>
          </a>
      <% } })
    }
  })
  qparts = qparts.toString()
  if (qparts && qparts != '?') { %>
    <a href="?<%- qparts.slice(1) %>" class="badge badge-pill badge-danger urlfilter" data-mode="del" title="Clear all filters">×</a>
  <% } %>
</div>
<!-- end -->

<!-- var template_error -->
<div class="alert alert-warning alert-dismissible" role="alert">
  <%- message %>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<!-- end -->

<!-- var template_table_grid -->
<%
  var filtered_cols = args['_c'] && args['_c'].length != options.columns.length ?
                      options.columns.filter(function(col) { return args['_c'].indexOf('-' + col.name) < 0 }) :
                      options.columns
  var cols = options.columns.length ? filtered_cols : meta.columns
  var form_id = idcount, img
  if (options.rowTemplate) {
    _.each(data, function(row, rowIndex) { %>
    <%= typeof options.rowTemplate == 'function' ? options.rowTemplate({row: row, index: rowIndex, data: data}) : _.template(options.rowTemplate)({row: row, data: data, index: rowIndex}) %>
  <% })
} else { %>
  <div class="formhandler-grid row">
    <% _.each(data, function(row, rowIndex) { %>
      <div class="col-sm-3 <%= options.classes || 'formhandler-grid-cell d-inline-block p-3 box-shadow' %>">
        <div class="thumbnail">
          <% img = options.icon ? ((typeof(options.icon) == 'function' ? options.icon({row: row, data: data, index: rowIndex}) : options.icon)) : 'fa fa-home' %>
          <% if (img.indexOf('fa ') >= 0) { %>
            <i class="<%= img %>"></i>
          <% } else { %>
            <img class="img img-responsive" src="<%= img %>"/>
          <% } %>
          <div class="caption">
            <% _.each(cols, function(colinfo) {
              var fmt = typeof(colinfo.format),
                  val = row[colinfo.name],
                  disp = (fmt == "function" ? colinfo.format({index: rowIndex, name: colinfo.name, value: val, row: row, data:data }) :
                          fmt === "string" && colinfo.type === "number" ? numeral(val).format(colinfo.format) :
                          fmt === "string" && colinfo.type === "date" ? moment.utc(val).format(colinfo.format) :
                          val) %>
              <div>
                <strong><%= colinfo.name %></strong>:
                <% if ('link' in colinfo) { %>
                  <% var col_link = typeof colinfo.link == 'function' ?
                      colinfo.link({row: row, value: val, index: rowIndex, name: colinfo.name, data: data, format: disp}) :
                      _.template(colinfo.link)({row: row, value: val, index: rowIndex, name: colinfo.name, data: data, format: disp}) %>
                  <% if (col_link === false) { %>
                    <%= disp %>
                  <% } else if (col_link && col_link[0] == '?') { %>
                    <a class="urlfilter" href="<%- col_link %>"><%= disp %></a>
                  <% } else { %>
                    <a href="<%- col_link %>" target="_blank"><%= disp %></a>
                  <% } %>
                <% } else { %>
                  <a class="urlfilter" href="?<%- encodeURIComponent(colinfo.name) %>=<%- encodeURIComponent(val) %>&amp;_offset=">
                    <%= disp %>
                  </a>
                <% } %>
              </div>
            <% }) %>
          </div><!-- .caption -->
        </div><!-- .thumbnail -->
      </div><!-- .col-sm-3 -->
    <% }) %>
  </div><!-- .formhandler-grid -->
<% } %>
<!-- end -->