...
 
Commits (7)
......@@ -22,9 +22,12 @@ The full list of options is below. Simple options can be specified as `data-` at
- `src`: [FormHandler][formhandler] URL endpoint
- `data`: Array of objects. Dataset for formhandler table. If both `src` and `data` are provided, `data` takes priority.
- `namespace`: (Optional) If the URL has `?name:key=value`, the filter
`key=value` only applies to formhandlers with namespace as `name`.
Filters without a namespace like `?key=value` will apply to all formhandlers.
- `namespace`:
- (Optional) If `namespace` specified, the URL will append as `?name:key=value`.
- If the URL has `name:key=value`, the filter only applies to formhandlers with namespace as `name`.
- Filters without a namespace like `?key=value` will apply to all formhandlers.
- When using multiple tables use of `namespace` is necessary .
- `columns`: comma-separated column names to display, or a list of objects with these keys:
- `name`: column name. `"*"` is a special column placeholder for "all columns" (options given for `"*"` are applied for all columns)
- `title`: for header display. Defaults to the same value as `name`
......
......@@ -182,7 +182,7 @@ export function formhandler(js_options) {
else {
$.ajax(options.src, {
dataType: 'json',
data: args,
data: namespace(args, options.namespace),
traditional: true
}).done(done)
.always(function () { $('.loader', $this).addClass('d-none') })
......@@ -210,8 +210,10 @@ function modalHandler($this) {
.on('shown.bs.modal', '.formhandler-table-modal', function (e) {
var $el = $(e.relatedTarget)
var template_data = $this.data('formhandler')
var namespace = template_data.options.namespace
var op = $el.data('op')
var col = $el.closest('[data-col]').data('col')
col = namespace ? (namespace + ':' + col) : col
var val = ''
// If there is a value, show it, and allow user to remove the filter
if (template_data.args[col + op]) {
......
......@@ -63,6 +63,7 @@ Each template receives these variables:
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">
......@@ -85,7 +86,7 @@ Each template receives these variables:
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({_sort: [op + colinfo.name]}, active ? 'del': 'add').toString() %>">
<a class="dropdown-item urlfilter <%- active ? 'active': '' %>" href="<%- qsort.update({[namespace + '_sort']: [op + colinfo.name]}, active ? 'del': 'add').toString() %>">
<%- title %>
</a>
<% }) %>
......@@ -102,7 +103,7 @@ Each template receives these variables:
<div class="dropdown-divider"></div>
<% } %>
<% if (colinfo.hideable) { %>
<a class="dropdown-item urlfilter" href="?_c=-<%- encodeURIComponent(colinfo.name) %>" data-mode="add">Hide</a>
<a class="dropdown-item urlfilter" href="?<%- namespace + '_c=-' + encodeURIComponent(colinfo.name) %>" data-mode="add">Hide</a>
<% } %>
</div><!-- .dropdown-menu -->
</div><!-- .dropdown -->
......@@ -168,7 +169,7 @@ Each template receives these variables:
</td>
<% } else { %>
<td>
<a class="urlfilter" href="?<%- encodeURIComponent(colinfo.name) %>=<%- encodeURIComponent(val) %>&amp;_offset=">
<a class="urlfilter ii" href="?<%- namespace + encodeURIComponent(colinfo.name) %>=<%- encodeURIComponent(val) %>&amp;_offset=">
<%= disp %>
</a>
</td>
......@@ -333,22 +334,28 @@ Each template receives these variables:
_.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 %>
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) {
var update = {}
update[key] = col_name
qparts.update(update, 'add') %>
<a href="?<%- encodeURIComponent(key) %>=<%- encodeURIComponent(col_name) %>" data-mode="del" class="badge badge-pill badge-dark urlfilter" title="Clear <%- key %> filter">
<%- key %> = <%- col_name %>
</a>
<% })
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()
......
<!DOCTYPE html>
<html>
<head>
<title>formhandler tests</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
<style>
.position-relative {
position: relative;
}
.pos-cc {
position: absolute;
top: 45%;
left: 45%;
}
.d-none {
display: none !important;
}
</style>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../node_modules/lodash/lodash.min.js"></script>
<script src="../node_modules/moment/min/moment.min.js"></script>
<script src="../node_modules/numeral/min/numeral.min.js"></script>
<script src="../dist/formhandler.min.js"></script>
<script src="../dist/scale.min.js"></script>
<script src="../node_modules/d3/build/d3.js"></script>
<script src="../node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js"></script>
<script src="tape.js"></script>
<script src="tape-stream.js"></script>
</head>
<body>
<div class="fh-table" data-src="/formhandler-data"></div>
<div class="fh13i" data-src="/formhandler-data"></div>
</body>
<script>
$('.fh-table').formhandler({
pageSize: 5,
columns: [
{
name: 'Continent'
}
]
})
// WIP: Test for - if namespace is specified, URL should append with namespace
tape('$().formhandler() if namespace is specified, URL should append with namespace ', function (t) {
window.history.pushState({}, '', '#')
$('.fh13i').formhandler({
namespace: 'fhname13i',
pageSize: 10,
columns: [
{
name: 'Continent'
}
]
}).one('load', function () {
$('body > div.fh13i > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child(1) > td > [href="?fhname13i:Continent=Europe&_offset="]').click()
})
setTimeout(function () {
let tr_list = $('body > div.fh13i > div.position-relative > div.formhandler > div.table > table > tbody > tr > td > [href="?fhname13i:Continent=Europe&_offset="]').text().split(" ")
// Check all values has only 'Europe' for this table
t.ok(tr_list.every(v => v.trim() === 'Europe'))
// Check filters badges are created for this table
let _filters = $('body > div.fh13i > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div:nth-child(2) > div.filters > div > a.badge-dark')
t.ok(_filters.length > 0)
t.equal(_filters.text().trim(), 'Continent = Europe')
t.equal( g1.url.parse(location.href).hash ,'?fhname13i%3AContinent=Europe')
// Test if the filters are not effected to the other table
t.equal($('body > div.fh-table > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div:nth-child(2) > div.filters > div > a.badge-dark').length,
0)
t.ok($('body > div.fh13i > div.position-relative > div.formhandler > div.table > table > tbody > tr > td > [href="?fhname13i:Continent=Europe&_offset="]').text().split(" ").every(v => v.trim() === 'Europe'))
// Test filter for other functionalities - 'sort'
$('body > div.fh13i > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div:nth-child(2) > div.filters > div > a.badge.badge-danger').click()
$('body > div.fh13i > div.position-relative > div.formhandler > div.table > table > thead > tr > th > div.dropdown > div.dropdown-menu > a:nth-child(1)').click()
setTimeout(function(){
t.equal( g1.url.parse(location.href).hash ,'?fhname13i%3A_sort=Continent')
t.equal(
$('body > div.fh13i > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div:nth-child(2) > div.filters > div > a.badge-dark').text().trim(),
'_sort = Continent'
)
t.end()
}, 500)
}, 500)
})
// End
</script>
</html>
......@@ -79,7 +79,7 @@
<div class="cell_template4" data-src="/formhandler-data"></div>
<div class="cell_template5" data-src="/formhandler-data"></div>
<!-- formhandler tables for namespaces -->
<div class="fh13" data-src="/formhandler-data"></div>
<div class="fh1" data-src="formhandler_csv.json"></div>
......@@ -410,7 +410,7 @@
$('.fh13')
.formhandler({
name: 'fhname13',
namespace: 'fhname13',
columns: [
{
name: 'Continent'
......