Commit a45f7283 authored by Tejesh's avatar Tejesh 🖖
Browse files

formhandler grid with test cases

parent 5b380927
Pipeline #46248 passed with stage
in 2 minutes and 12 seconds
......@@ -281,8 +281,11 @@ The full list of options is below. Simple options can be specified as `data-` at
- `name`: column name. `"*"` is a special column placeholder for "all columns"
- `title`: for header display. Defaults to the same value as `name`
- `type`: `text` (default) / `number` / `date`. Data type. Determines filters to be used
- `format`: string / function that renders the cell contents.
- functions takes in `row` and `data` as argument and the return value is used
- `format`:
- function accepts an object with these keys:
- `row`: row data
- `data`: the dataset from `src`
- string template can use the above variables
- strings specify a numeral.js format if the value is a number (you must include numeral.js)
- strings specify a moment.js format if the value is a date (you must include moment.js)
- `template`: string template / function that renders the cell.
......@@ -300,7 +303,7 @@ The full list of options is below. Simple options can be specified as `data-` at
- `link`: string / function that generates a link for this each cell.
- If no `link:` is specified, clicking on the cell filters by that cell.
- If `link:` is a string, opens a new window with the string URL interpolated as a lodash template with `row` as data.
Example: `"https://example.org/city/<%- city >"`
Example: `"https://example.org/city/<%- row.city >"`
- If `link:` is a function, opens a new window with the URL as `fn(row)`.
Example: `function(row) { return 'https://example.org/city/' + row.city }`
- `hideable`: `true` (default) / `false`. Hides the column
......
......@@ -61,7 +61,7 @@ Each template receives these variables:
%>
<% if(options.rowTemplate) { %>
<% _.each(data, function(row) { %>
<%= typeof options.rowTemplate == 'function' ? options.rowTemplate(row, data) : options.rowTemplate %>
<%= typeof options.rowTemplate == 'function' ? options.rowTemplate({row: row, data: data}) : _.template(options.rowTemplate)({row: row, data: data}) %>
<% }) %>
<% } else {%>
<table class="table table-sm table-striped">
......@@ -105,16 +105,16 @@ Each template receives these variables:
<% var fmt = typeof(colinfo.format),
val = row[colinfo.name],
disp = fmt == "function" ?
colinfo.format(row, data) :
colinfo.format({row: row, data: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('link' in colinfo) col_link = typeof colinfo.link == 'function' ? colinfo.link({row: row}) : _.template(colinfo.link)({row: row}) %>
<% if(colinfo.template) { %>
<%= typeof colinfo.template == 'function' ? colinfo.template(val, disp, col_link, data) : colinfo.template %>
<%= typeof colinfo.template == 'function' ? colinfo.template({value: val, format: disp, link: col_link, data: data}) : _.template(colinfo.template)(({value: val, format: disp, link: col_link, data: data})) %>
<% } else if (col_link) { %>
<td><a href="<%- col_link %>" target="_blank"><%= disp %></a></td>
<% } else { %>
......@@ -266,7 +266,7 @@ Each template receives these variables:
%>
<% if(options.rowTemplate) { %>
<% _.each(data, function(row) { %>
<%= typeof options.rowTemplate == 'function' ? options.rowTemplate(row, data) : options.rowTemplate %>
<%= typeof options.rowTemplate == 'function' ? options.rowTemplate({row: row, data: data}) : _.template(options.rowTemplate)({row: row, data: data}) %>
<% }) %>
<% } else {%>
<div class="formhandler-grid row">
......
......@@ -44,48 +44,48 @@
columns: [
{
name: 'ID',
format: function(row) {return row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
format: function(arg) {return arg.row['ID'].toLowerCase() }, // TODO: REVIEW whether to pass row number as second argument?
link: 'https://en.wikipedia.org/wiki/<%= ID %>',
template: function (value, formatted_value, link, data) {
return "<td>ID " + formatted_value + "</td>"
template: function (arg) {
return "<td>ID " + arg.format + "</td>"
}
},
{
name: 'c1',
template: function (value, formatted_value, link, data) {
template: function (arg) {
var f = d3.scaleLinear()
.domain([0, 100])
.range(['white', 'green'])
return '<td>' + value + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="'+ f(value) +'"></circle></svg></td>'
return '<td>' + arg.value + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="'+ f(arg.value) +'"></circle></svg></td>'
}
},
{
name: 'c2',
format: function (row) {
format: function (arg) {
var f = d3.scaleLinear()
.domain([0, 100])
.range(['white', 'green'])
return row['c2'] + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(row['c2']) + '"></circle></svg>'
return arg.row['c2'] + '<svg height="20" width="20"><circle r="10" cx="10" cy="10" stroke="black" stroke-width="3" fill="' + f(arg.row['c2']) + '"></circle></svg>'
}
},
{ name: 'Continent' }
],
rowTemplate: function(row) {
rowTemplate: function(arg) {
var template = `<div class="col-sm-3 formhandler-grid-cell d-inline-block p-3 box-shadow">
<div class="thumbnail">
<img class="img img-responsive" src="/default.png"/>
<div class="caption">
<div>
<strong>ID</strong>:`+row['ID']+`
<strong>ID</strong>:`+arg.row['ID']+`
</div>
<div>
<strong>c1</strong>:`+row['c1']+`
<strong>c1</strong>:`+arg.row['c1']+`
</div>
<div>
<strong>c2</strong>:`+row['c2']+`
<strong>c2</strong>:`+arg.row['c2']+`
</div>
<div>
<strong>Continent</strong>:`+row['Continent']+`
<strong>Continent</strong>:`+arg.row['Continent']+`
</div>
</div>
</div>
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment