formhandler.template.html 12.4 KB
Newer Older
S Anand's avatar
S Anand committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--
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_ -->
15
16
17
18
19
20
21
22
23
24
25
26
  <div class="position-relative">
    <div class="formhandler">
      <div class="formhandler-table-header d-flex justify-content-between mb-2">
        <div class="d-flex flex-wrap">
          <div class="count mr-2"></div>
          <div class="page mr-2"></div>
          <div class="size mr-2"></div>
        </div>
        <div class="d-flex">
          <div class="filters"></div>
          <div class="export"></div>
        </div>
S Anand's avatar
S Anand committed
27
      </div>
S Anand's avatar
S Anand committed
28
      <div class="<%- (options.table == 'grid') ? 'table_grid' : 'table' %>"></div>
29
30
31
32
    </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>
S Anand's avatar
S Anand committed
33
34
    </div>
  </div>
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
  <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 -->
S Anand's avatar
S Anand committed
52
53
54
<!-- end -->

<!-- var template_table -->
55
56
57
58
<%
  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
59
60
  var cols = options.columns.length ? filtered_cols : meta.columns;
  cols = cols.filter(function(col) { return col.hide !== true})
61
62
  var form_id = idcount
%>
S Anand's avatar
S Anand committed
63
64
65
66
67
<% if(options.rowTemplate) { %>
  <% _.each(data, function(row) { %>
    <%= typeof options.rowTemplate == 'function' ? options.rowTemplate(row, data) : options.rowTemplate %>
  <% }) %>
<% } else {%>
S Anand's avatar
S Anand committed
68
69
<table class="table table-sm table-striped">
  <thead>
70
71
72
73
74
75
    <% _.each(cols, function(colinfo) {
          col_defaults(colinfo, data)
          var menu_item = false
          var col_id = idcount++
      %>
      <th class="<%- args['_sort'] == colinfo.name ? 'table-primary' : args['_sort'] == '-' + colinfo.name ? 'table-danger' : '' %>" data-col="<%- colinfo.name %>">
S Anand's avatar
S Anand committed
76
        <div class="dropdown">
77
          <a href="#" class="dropdown-toggle text-nowrap" id="fh-dd-<%- col_id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
S Anand's avatar
S Anand committed
78
79
            <%- colinfo.title || colinfo.name %>
          </a>
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
          <div class="dropdown-menu" aria-labelledby="fh-dd-<%- col_id %>">
            <% _.each(colinfo.sort, function(title, op) { menu_item = true
                var active = args['_sort'] == op + colinfo.name %>
              <a class="dropdown-item urlfilter <%- active ? 'active': '' %>" href="?_sort=<%- active ? '' : op + colinfo.name %>">
                <%- 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) { %><div class="dropdown-divider"></div><% menu_item = false } %>
            <% if (colinfo.hideable) { %>
              <a class="dropdown-item urlfilter" href="?_c=-<%- colinfo.name %>" data-mode="add">Hide</a>
            <% } %>
S Anand's avatar
S Anand committed
97
98
99
100
101
102
103
104
105
          </div>
        </div>
      </th>
    <% }) %>
  </thead>
  <tbody>
    <% _.each(data, function(row) { %>
      <tr>
        <% _.each(cols, function(colinfo) { %>
S Anand's avatar
S Anand committed
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
          <% var fmt = typeof(colinfo.format),
                         val = row[colinfo.name],
                         disp = fmt == "function" ?
                                  colinfo.format(row, data) :
                                fmt === "string" && colinfo.type === "number" ?
                                  numeral(val).format(colinfo.format) :
                                fmt === "string" && colinfo.type === "date" ?
                                  moment(val).format(colinfo.format):
                                  val,
                         col_link %>
            <% if('link' in colinfo) col_link = typeof colinfo.link == 'function' ? colinfo.link(row) : _.template(colinfo.link)(row) %>
            <% if(colinfo.template) { %>
              <%= typeof colinfo.template == 'function' ? colinfo.template(val, disp, col_link, data) : colinfo.template %>
            <% } else if (col_link) { %>
              <td><a href="<%- col_link %>" target="_blank"><%= disp %></a></td>
121
            <% } else { %>
S Anand's avatar
S Anand committed
122
123
124
              <td><a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
                <%= disp %>
              </a></td>
125
            <% } %>
S Anand's avatar
S Anand committed
126
127
128
129
130
        <% }) %>
      </tr>
    <% }) %>
  </tbody>
</table>
S Anand's avatar
S Anand committed
131
<% } %>
S Anand's avatar
S Anand committed
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!-- 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">
  <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 -->
179
180
181
182
183
184
185
186
187
188
189
190
191
<% if (meta.limit) { %>
  <div class="btn-group btn-group-sm" 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>
S Anand's avatar
S Anand committed
192
  </div>
193
194
195
196
197
198
199
<% } %>
<!-- end -->

<!-- var template_count -->
<% if ('count' in meta) { %>
  <span class="btn btn-sm btn-light"><%- meta.count %> rows</span>
<% } %>
S Anand's avatar
S Anand committed
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!-- 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" 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 %>
    <a href="?_c=<%- 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) { %>
    <% if (key.charAt(0) !== '_' && key !== 'c') { %>
      <% _.each(args[key], function(col_name) { %>
        <% var update = {}; update[key] = col_name; qparts.update(update) %>
        <a href="?<%- key %>=<%- col_name %>" data-mode="del" class="badge badge-pill badge-dark urlfilter"
          title="Clear <%- key %> filter">
          <%- key %> = <%- col_name %>
        </a>
      <% }) %>
    <% } %>
  <% }) %>
  <% qparts = qparts.toString() %>
244
  <% if (qparts && qparts != '?') { %>
S Anand's avatar
S Anand committed
245
246
247
    <a href="?<%- qparts.slice(1) %>"
      class="badge badge-pill badge-danger urlfilter"
      data-mode="del"
248
      title="Clear all filters">×</a>
S Anand's avatar
S Anand committed
249
250
251
  <% } %>
</div>
<!-- end -->
252
253
254
255
256
257

<!-- var template_error -->
<div class="alert alert-warning" role="alert">
  <p class="text-center"><%- message %> </p>
</div>
<!-- end -->
S Anand's avatar
S Anand committed
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313

<!-- 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
  var img = (options.icon) ? options.icon : 'http://icons.iconarchive.com/icons/mazenl77/NX11/256/Folder-Default-icon.png'
%>
<% if(options.rowTemplate) { %>
  <% _.each(data, function(row) { %>
    <%= typeof options.rowTemplate == 'function' ? options.rowTemplate(row, data) : options.rowTemplate %>
  <% }) %>
<% } else {%>
<div class="formhandler-grid row">
  <% _.each(data, function(row) { %>
    <div class="col-sm-3 <%= options.classes || 'formhandler-grid-cell d-inline-block p-3 box-shadow' %>">
      <div class="thumbnail">
        <% 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(row, data) :
                      fmt === "string" && colinfo.type === "number" ?
                        numeral(val).format(colinfo.format) :
                      fmt === "string" && colinfo.type === "date" ?
                        moment(val).format(colinfo.format):
                        val %>
            <div>
              <strong><%= colinfo.name %></strong>:
              <% if ('link' in colinfo) {
                  var col_link = typeof colinfo.link == 'function' ? colinfo.link(val) : _.template(colinfo.link)(row)
              %>
                  <a href="<%- col_link %>" target="_blank"><%= disp %></a>
              <% } else { %>
                  <a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
                    <%= disp %>
                  </a>
              <% } %>
            </div>
          <% }) %>
        </div>
      </div>
    </div>
  <% }) %>
</div>
<% } %>
<!-- end -->