Commit 3e027644 authored by S Anand's avatar S Anand Committed by S Anand
Browse files

FormHandler UI bindings

parent 3331b16a
......@@ -578,6 +578,16 @@ The full list of options is below. Simple options can be specified as `data-` at
- 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)
- `editable`: `true` (default) / `false`. When `true`, edit and save buttons appears at end of each row.
- To bind UI input element such as dropdown, datepicker, radio etc., `editable` accepts an object with these keys.
- `input`: **Mandatory**. The type of input element to use. The valid values are checkbox, radio, range, select, and any other legal [HTML form input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
- `options`: An array of options to select from. **Mandatory** if `input` is either of `select` or `radio`
- `attrs`: To place common attributes such as max, min, placeholder, name etc., on the `input` element.
Example:
`input: 'number', attrs: {step: 10, placeholder: '0 - 1000', name: 'some_name'}` would render as
`<input step=10 placeholder="0 - 1000" name="some_name" />`
- `template`: string template / function that renders the cell.
- function accepts an object with these keys:
- `name`: column name
......@@ -697,6 +707,8 @@ Features to be implemented:
Note: Make sure `load` event listener is attached before calling `$.formhandler()`
- `editmode` is fired on the source when the Edit button is clicked and table changes to edit mode.
### $.formhandler examples
Render a table using the FormHandler at `./data`:
......@@ -727,6 +739,87 @@ Customize cell rendering to display a chart in a cell:
</script>
```
In edit mode, show HTML input bindings like Dropdown, Datepicker, Number fields.. :
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<div class="edit-fh" data-src="./data"></div>
<script>
$('.edit-fh').formhandler({
columns: [
{
name: 'ID',
editable: false // Disable edit for column "ID" because it is a primary key and cannot be edited.
},
{
name: 'Continent' // Defaults to editable: false
},
{
name: 'c1',
editable: {
input: 'number',
attrs: { // keys and values in `attrs` will be added as <input type="number" min=10 max=100 placeholder="0 - 100"/>
min: 10,
max: 100,
placeholder: '0 - 100'
}
}
},
{
name: 'Stripes',
editable: {
input: 'select', // renders a default select dropdown as <select class="form-control form-control-sm">...</select>
options: [ // `options` is mandatory because `input` is "select"
'Vertical',
'Horizontal',
'Diagonal'
]
}
},
{
name: 'Shapes',
editable: {
input: 'select',
options: [
'Circle',
'Crescent',
'Triangle',
'Stars'
],
attrs: {
class: 'select-example-basic', // To render the dropdown as select2 library dropdown, add class attribute as identifier
name: 'shapes'
}
}
},
{
name: 'date_col',
editable: {
input: 'text',
attrs: { // To edit column "date_col" using a date picker widget using "bootstrap-datepicker" library, add class attribute as identifier
class: 'datepicker-example form-control form-control-sm'
}
}
}
]
}).on('editmode', function () {
// turns <select class="select-example-basic">...</select> to select2 dropdown widget
$('.select-example-basic').select2()
// turns <input type="text" class="datepicker-example"/> to bootstrap-datepicker calendar widget
$('.datepicker-example').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true,
autoclose: true
})
})
</script>
```
## $.template
......
......@@ -172,7 +172,7 @@ export function formhandler(js_options) {
$this.trigger({ type: 'load', formdata: data, meta: meta, args: args, options: options })
}
if (options.data && typeof(options.data) == 'object') {
if (options.data && typeof (options.data) == 'object') {
options.edit = false
options.add = false
done(options.data)
......@@ -292,18 +292,20 @@ function editHandler($this, template_data, options, template) {
var edit_btn = $('.edit button', $this)
if (edit_btn.html().toLowerCase() == 'save') {
edit_btn.html('Edit') // TODO: remove hardcoding of name Edit
var dirty_rows = $('.dirty-row')
if (dirty_rows.length > 0)
var edited_rows = $('.edited-row')
if (edited_rows.length > 0)
$('.loader', $this).removeClass('d-none')
var all_ajax = []
$.each(dirty_rows, function (key, dirty_row) {
var data = JSON.parse(dirty_row.getAttribute('data-val'))
var rowIndex = dirty_row.getAttribute('data-row')
$.each(edited_rows, function (key, edited_row) {
var data = JSON.parse(edited_row.getAttribute('data-val'))
var rowIndex = edited_row.getAttribute('data-row')
for (key in data) {
var dirty_td = $('td input[data-key=' + (key.remove_quotes()) + ']', $(dirty_row))
data[key] = template_data['data'][rowIndex][key] = dirty_td.val()
// TODO: refactor to identify editable columns other than using data-key attrs on <td> tag
var editable_element = $('td[data-key=' + (remove_quotes(key)) + '] :input', $(edited_row))
if (editable_element.length) {
data[key] = template_data['data'][rowIndex][key] = editable_element.val()
}
}
all_ajax.push(
$.ajax(options.src, {
......@@ -328,6 +330,7 @@ function editHandler($this, template_data, options, template) {
template_data.isEdit = true
render_template('table', template_data, options, $this, template)
add_edit_events($this, edit_btn)
$this.trigger({ type: 'editmode' })
}
})
}
......@@ -362,8 +365,8 @@ function actionHandler($this, options, template) {
}
String.prototype.remove_quotes = function () {
return this.toString().replace(/["']/g, '')
function remove_quotes(str) {
return str.toString().replace(/["']/g, '')
}
function notify($this, template, message) {
......@@ -382,15 +385,15 @@ function failHandler($this, template, xhr, status, message) {
function add_edit_events($this, save_btn) {
$('tbody input', $this)
$('tbody :input', $this)
// When the user types something, mark the row as changed
.on('change', function () {
$(this).parents('tr').addClass('dirty-row')
$(this).parents('tr').addClass('edited-row')
})
// When the user presses Enter, click on the "Save" button
.on('keypress', function (e) {
if (e.keyCode == 13) {
$(this).blur() // Remove focus so that change / .dirty-row is triggered
$(this).blur() // Remove focus so that change / .edited-row is triggered
save_btn.trigger('click')
}
})
......
......@@ -28,7 +28,7 @@ Each template receives these variables:
<div class="export"></div>
</div>
</div>
<div class="<%- (options.table == 'grid') ? 'table_grid' : 'table table-responsive' %>"></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>
......@@ -86,8 +86,7 @@ Each template receives these variables:
<% }) %>
<% if (menu_item) { %>
<div class="dropdown-divider"></div>
<% menu_item = false
} %>
<% 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 %>
......@@ -139,30 +138,68 @@ Each template receives these variables:
val,
col_link
%>
<% if (!isEdit && 'link' in colinfo) var col_link = typeof colinfo.link == 'function' ? colinfo.link({name: colinfo.name, value: val, format: disp, index: rowIndex, row: row, data: data}) : _.template(colinfo.link)({name: colinfo.name, value: val, format: disp, index: rowIndex, row: row, data: data}) %>
<% if (!isEdit && 'link' in colinfo) var col_link = typeof colinfo.link == 'function' ? colinfo.link({name: colinfo.name, value: val, format: disp, index: rowIndex, row: row, data: data}) : _.template(colinfo.link)({name: colinfo.name, value: val, format: disp, index: rowIndex, row: row, data: data}) %>
<% if (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 (col_link) { %>
<td>
<a href="<%- col_link %>" target="_blank">
<%= disp %>
</a>
</td>
<% } else { %>
<% if (isEdit && isEditable) { %>
<td>
<input class="form-control form-control-sm" data-key="<%- colinfo.name %>" value="<%- val %>"
/>
</td>
<% } else { %>
<td>
<a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
<a href="<%- col_link %>" target="_blank">
<%= disp %>
</a>
</td>
<% } %>
<% } %>
<% }) %>
<% } else if (isEdit && isEditable) { %>
<td data-key="<%- colinfo.name %>">
<% if (isEditable.input == 'select') { %>
<select
<% for (key in isEditable.attrs) { %>
<%= key + '="' + isEditable.attrs[key] + '"' %>
<% } %>
class="form-control form-control-sm"
>
<% _.each(isEditable.options, function(item) { %>
<option <%- val === item ? 'selected': null %> value="<%- item %>">
<%- item %>
</option>
<% }) %>
</select>
<% } else if (isEditable.input == 'radio') { %>
<% _.each(isEditable.options, function(item) { %>
<input type="radio" <%- 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"
/>
<% } %>
</td>
<% } else { %>
<td>
<a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
<%= disp %>
</a>
</td>
<% } %>
<% }) %>
</tr>
<% }) %>
<% } %>
......@@ -243,7 +280,7 @@ Each template receives these variables:
<!-- end -->
<!-- var template_edit -->
<button type="button" class="btn btn-success mr-2 btn-sm edit-btn">
<button type="submit" class="btn btn-success mr-2 btn-sm edit-btn">
Edit
</button>
<!-- end -->
......
This diff is collapsed.
......@@ -5,6 +5,8 @@
<title>Editable 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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<style>
.position-relative {
position: relative;
......@@ -30,6 +32,8 @@
<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="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script src="tape.js"></script>
</head>
......@@ -42,51 +46,125 @@
<script>
tape('$().formhandler() test edit to save rows triggered on "input" event rather "click: event', function (test) {
test.plan(6)
test.plan(12)
$('.edit-fh').formhandler({
src: '/formhandler-data',
columns: [
{
name: "ID"
name: 'ID',
editable: false
},
{
name: "Continent"
name: 'Continent',
editable: {
input: 'text',
attrs: {
minlength: 2,
class: 'bg-warning'
}
}
},
{
name: 'c1',
editable: {
input: 'number',
attrs: {
min: 10,
max: 100,
placeholder: '0 - 100'
}
}
},
{
name: 'Stripes',
editable: {
input: 'select',
options: [
'Vertical',
'Horizontal',
'Diagonal'
]
}
},
{
name: 'Shapes',
editable: {
input: 'select',
options: [
'Circle',
'Crescent',
'Triangle',
'Stars'
],
attrs: {
class: 'select-example-basic',
name: 'shapes'
}
}
},
{
name: 'date_col',
editable: {
input: 'text',
attrs: {
class: 'datepicker-example form-control form-control-sm'
}
}
},
{
name: 'delete',
template: function(row) {
return "<td><button data-action='delete'><i class='fa fa-trash'></i></button></td>"
}
},
}
],
edit: {
done: function() {
test.ok(true, "must call twice")
test.ok(true, 'must call twice')
}
},
add: true
}).on('load', function () {
})
.on('editmode', function () {
test.equals($('.select-example-basic').length, 100)
test.equals($('.datepicker-example').length, 100)
$('.select-example-basic').select2()
$('.datepicker-example').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true,
autoclose: true
})
})
.on('load', function () {
// editing rows with no click must also update values
var init_cell_value = $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > a.urlfilter").text().trim()
var init_cell_value = $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim()
var stripe_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim()
var c1_cell_value = $('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim()
$('.edit button').click()
// make sure the initial value is Europe
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > input").val().trim(), init_cell_value)
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), init_cell_value)
// modify cell value inside <input>
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > input").val('Edited')
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > input").trigger('input')
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > input").val().trim(), 'Edited')
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val('Edited')
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").trigger('change')
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val().trim(), 'Edited')
// save row
$('.edit button').click()
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > a.urlfilter").text().trim(), 'Edited')
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), 'Edited')
// reset values
$('.edit button').click()
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > input").val(init_cell_value)
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > input").trigger('input')
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").val(init_cell_value)
$(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > input").trigger('change')
$('.edit button').click()
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(1) > a.urlfilter").text().trim(), init_cell_value)
test.equals($(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(2) > a.urlfilter").text().trim(), init_cell_value)
// make sure all other field values are restored
test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(4) a').text().trim(), stripe_cell_value)
test.equals($('.edit-fh table tbody tr:nth-child(1) td:nth-child(3) a').text().trim(), c1_cell_value)
})
})
</script>
......
......@@ -6,7 +6,7 @@ var router = express.Router()
var g1 = require('./../dist/g1.js')
var fs = require('fs')
const port = process.argv.length <= 2 ? 1112 : 1114
const port = process.argv.length <= 2 ? 1112 : 1113
const app = express()
.use(express.static(path.resolve(__dirname, '..')))
......
......@@ -115,11 +115,11 @@
.domain([0, 100])
.range(['white', 'green'])
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').attr('fill'), f(result[index]['c1']))
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').attr('fill'), f(result[index]['c1']))
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
}
t.end()
});
......@@ -174,10 +174,10 @@
.domain([0, 100])
.range(['white', 'green'])
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c1'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c1'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
}
t.end()
});
......@@ -224,8 +224,8 @@
pageSize: 3
}).on('load', function () {
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template3 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').length, 0)
t.equals($('body > div.row_template3 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3) > svg > circle').length, 0)
t.equals($('body > div.row_template3 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').length, 0)
t.equals($('body > div.row_template3 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3) > svg > circle').length, 0)
}
t.end()
})
......@@ -256,8 +256,8 @@
}).on('load', function () {
$.getJSON($(this).data('src'), function(result){
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template4 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), 'ID '+result[index]['ID'].toLowerCase(), 'Column `ID` is rendered with the formated value')
t.equals($('body > div.row_template4 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), result[index]['Continent'], 'Column `Continent` is rendered with the original value')
t.equals($('body > div.row_template4 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), 'ID '+result[index]['ID'].toLowerCase(), 'Column `ID` is rendered with the formated value')
t.equals($('body > div.row_template4 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), result[index]['Continent'], 'Column `Continent` is rendered with the original value')
}
t.end()
});
......@@ -282,7 +282,7 @@
}).on('load', function () {
$.getJSON($(this).data('src'), function(result){
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template5 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1) > a').length, 0)
t.equals($('body > div.row_template5 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1) > a').length, 0)
}
t.end()
});
......@@ -304,7 +304,7 @@
}).on('load', function () {
$.getJSON($(this).data('src'), function(result){
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template6 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1) > a').length, 1)
t.equals($('body > div.row_template6 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1) > a').length, 1)
}
t.end()
});
......
......@@ -534,8 +534,8 @@
// check if Edit Button changes to Save Button when clicked
$('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').click()
t.deepEquals($('body > div.fh17 > div.position-relative > div.formhandler > div.formhandler-table-header.d-flex.justify-content-between.mb-2 > div.d-flex.flex-wrap > div.edit > button').text(), "Save")
var td_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr > td ")
var input_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr > td > input")
var td_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table > table > tbody > tr > td ")
var input_elms = $("body > div.fh17 > div.position-relative > div.formhandler > div.table > table > tbody > tr > td > input")
t.equals(td_elms.length, input_elms.length)
t.end()
})
......@@ -820,11 +820,11 @@
.domain([0, 100])
.range(['white', 'green'])
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').attr('fill'), f(result[index]['c1']))
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2) > svg > circle').attr('fill'), f(result[index]['c1']))
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template1 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
}
t.end()
});
......@@ -879,10 +879,10 @@
.domain([0, 100])
.range(['white', 'green'])
for(var index = 0; index < 3; index++) {
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c1'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(3)').text(), ''+result[index]['c2'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table.table-responsive > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(4)').text(), ''+result[index]['Continent'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(1)').text(), result[index]['ID'])
t.equals($('body > div.row_template2 > div.position-relative > div.formhandler > div.table > table > tbody > tr:nth-child('+(index+1)+') > td:nth-child(2)').text(), ''+result[index]['c1'])