Skip to content

GitLab

Commit 7c744647 authored by S Anand's avatar S Anand
Browse files

BUG: FormHandler add shows dropdowns. Fixes #131 @tejesh.p

parent 551f224a
Pipeline #74349 passed with stage
in 2 minutes and 17 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 256 additions and 51 deletions
src/formhandler.js
View file @ 7c744647
......@@ -121,7 +121,8 @@ export function formhandler(js_options) {
parse: parse,
col_defaults: col_defaults,
isEdit: false,
isAdd: false
isAdd: false,
templates: default_templates
}
// Store template_data in $this
$this.data('formhandler', template_data)
......@@ -259,7 +260,7 @@ function addHandler($this, template_data, options, template) {
if (add_btn.html().toLowerCase() == 'save') {
add_btn.html('Add')
edit_btn.prop('disabled', false)
var columns_data = $('.new-row input[data-key]')
var columns_data = $('.new-row td[data-key]')
$('.loader', $this).removeClass('d-none')
var data = {}
......
src/formhandler.template.html
View file @ 7c744647
......@@ -109,8 +109,9 @@ Each template receives these variables:
<tr class="new-row">
<% _.each(cols, function(colinfo) {
if (!colinfo.template) { %>
<td>
<input class="form-control form-control-sm" data-key="<%- colinfo.name %>" value="" />
<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>
......@@ -150,54 +151,15 @@ Each template receives these variables:
</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>
<td data-key="<%- colinfo.name %>">
<%= _.template(templates['template_editable'])({isEditable: isEditable, val: val}) %>
</td>
<% } else { %>
<td>
<a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
<%= disp %>
</a>
</td>
<td>
<a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
<%= disp %>
</a>
</td>
<% } %>
<% }) %>
</tr>
......@@ -207,6 +169,46 @@ Each template receives these variables:
</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"
>
<% _.each(isEditable.options, function(item) { %>
<option <%- val && val === item ? 'selected': null %> value="<%- item %>">
<%- item %>
</option>
<% }) %>
</select>
<% } else if (isEditable.input == 'radio') { %>
<% _.each(isEditable.options, function(item) { %>
<input type="radio" <%- val && 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"
/>
<% } %>
<!-- 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,
......
test/test-formhandler-editable.html 0 → 100644
View file @ 7c744647
<!DOCTYPE html>
<html>
<head>
<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;
}
.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="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>
<body>
<script>
tape.onFinish(function () { window.renderComplete = true })
</script>
<div class="edit-fh"></div>
<script>
tape('$().formhandler() test edit to save rows triggered on "input" event rather "click: event', function (test) {
$('.edit-fh').formhandler({
src: '/formhandler-data',
columns: [
{
name: 'ID',
editable: false
},
{
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')
}
},
add: true
})
.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(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(2) > input").val().trim(), init_cell_value)
// modify cell value inside <input>
$(".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()
$('.add button').click()
test.equals($('div.edit-fh tr.new-row td:nth-child(4) select').length, 1)
// all other columns must be input textbox and editable, overriding isEditable: false option also
test.equals($('div.edit-fh tr.new-row td:nth-child(1) input').length, 1)
test.end()
/*
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(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(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>
</body>
</html>
test/test-formhandler-unit.html
View file @ 7c744647
......@@ -53,6 +53,21 @@
{
name: '*'
},
{
name: 'ID',
editable: false
},
{
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: 'DELETE Action',
template: function() {
......@@ -70,6 +85,10 @@
$('.edit-btn').click()
$('.add-btn').click()
t.ok($('.edit-btn').prop('disabled'))
// stripes column is dropdown select HTML element and not input textbox
t.equals($('div.formhandler tr.new-row td:nth-child(6) select').length, 1)
// all other columns must be input textbox and editable, overriding isEditable: false option also
t.equals($('div.formhandler tr.new-row td:nth-child(1) input').length, 1)
$('.add-btn').click()
// on empty row click, .new-row element does not exist
t.equals($('.new-row', $('.delete_btn')).length, 0)
......
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