Commit 68e488f6 authored by Tejesh P's avatar Tejesh P

ENH: formhandler table to not allow add and edit happen at same time, fixes #123 by @sindhura.ch

also refactor existing tests to use formhandler_csv.json over formhandler.json
parent 3c9c35b8
Pipeline #71276 passed with stage
in 2 minutes and 4 seconds
......@@ -255,8 +255,10 @@ function addHandler($this, template_data, options, template) {
$('.add button', $this)
.on('click', function () {
var add_btn = $('.add button', $this)
var edit_btn = $('.edit button', $this)
if (add_btn.html().toLowerCase() == 'save') {
add_btn.html('Add')
edit_btn.prop('disabled', false)
var columns_data = $('.new-row input[data-key]')
$('.loader', $this).removeClass('d-none')
......@@ -265,6 +267,13 @@ function addHandler($this, template_data, options, template) {
$.each(columns_data, function (key, column) {
data[column.getAttribute('data-key')] = column.value
})
// if no changes made to new empty celled row, rerender the table.
if (!_.some(data)) {
$('.loader', $this).addClass('d-none')
template_data.isAdd = false
render_template('table', template_data, options, $this, template)
return
}
$.ajax(options.src, {
method: 'POST',
......@@ -279,6 +288,7 @@ function addHandler($this, template_data, options, template) {
.fail(failHandler.bind(this, $this, template))
} else if (add_btn.html().toLowerCase() == 'add') {
add_btn.html('Save')
edit_btn.prop('disabled', true)
template_data.isAdd = true
render_template('table', template_data, options, $this, template)
add_edit_events($this, add_btn)
......@@ -290,8 +300,10 @@ function editHandler($this, template_data, options, template) {
$('.edit button', $this)
.on('click', function () {
var edit_btn = $('.edit button', $this)
var add_btn = $('.add button', $this)
if (edit_btn.html().toLowerCase() == 'save') {
edit_btn.html('Edit') // TODO: remove hardcoding of name Edit
add_btn.prop('disabled', false)
var edited_rows = $('.edited-row')
if (edited_rows.length > 0)
$('.loader', $this).removeClass('d-none')
......@@ -327,6 +339,7 @@ function editHandler($this, template_data, options, template) {
render_template('table', template_data, options, $this, template)
} else if (edit_btn.html().toLowerCase() == 'edit') {
edit_btn.html('Save') // TODO: remove hardcoding of name Save
add_btn.prop('disabled', true)
template_data.isEdit = true
render_template('table', template_data, options, $this, template)
add_edit_events($this, edit_btn)
......
Continent,Cross,ID,Name,Shapes,Stripes,Symbols,Text,Union-Flag,c1,c2,c3,c4,c5,c6,c7,c8,date_col
E,,AND,Andorra,,Horizontal,,,,35,1,26,0,32,0,0,4,16-01-2013
Europe,,AND,Andorra,,Horizontal,,,,35,1,26,0,32,0,0,4,16-01-2013
Asia,,ARE,United Arab Emirates,,Horizontal,,,,24.0,0.0,0.0,25.0,0.0,0.0,25.0,24.0,17-02-2013
Asia,,AFG,Afghanistan,,Vertical,,Country,,28.0,1.0,0.0,33.0,0.0,0.0,33.0,3.0,06-02-2013
North America,,ATG,Antigua Barbuda,,,,,,50.0,0.0,5.0,0.0,0.0,10.0,25.0,7.0,11-02-2013
......
This diff is collapsed.
This diff is collapsed.
......@@ -26,7 +26,7 @@
var filter = g1.url.parse(window.location.href).searchList
$('#filter').text(JSON.stringify(filter))
$.getJSON("/test/formhandler.json", function(data) {
$.getJSON("/test/formhandler_csv.json", function(data) {
$('#result_ds1').text(JSON.stringify(g1.datafilter(data, filter, 'ds1')))
})
......
const test = require('tape')
const g1 = require('../dist/datafilter.min')
const continent_data = require('./formhandler.json')
const continent_data = require('./formhandler_csv.json')
const continent_data_small = require('./formhandler-continent.json')
const sales_data = require('./sales-edit.json')
const sales_data_with_date = require('./sales.json')
......@@ -279,9 +279,9 @@ test('g1.datafilter test', function(t) {
})
t.test('g1.datafilter([data], filter) with limit when the limit values are out of bound works', function (t) {
var result = g1.datafilter(continent_data, {"_limit": ["100"]})
var result = g1.datafilter(continent_data, {"_limit": ["20000"]})
t.deepEquals(result[0], continent_data[0])
t.notEqual(result.length, 100)
t.notEqual(result.length, 20000)
t.end()
})
......
......@@ -45,7 +45,7 @@
tape('$().formhandler() datafilter external api test', function(test) {
$('.external-api')
.on('load', function () {
test.equal($('.external-api .count').text().trim(), '200 rows')
test.equal($('.external-api .count').text().trim(), '196 rows')
test.ok($('.external-api ul.pagination .page-item:nth-of-type(2)').has("disabled"))
test.ok($('.external-api ul.pagination .page-item:nth-of-type(2)').hasClass("active"))
......@@ -81,7 +81,7 @@
tape('$().formhandler() datafilter external api test with options & data overrides src', function (test) {
$('.external-api2')
.on('load', function () {
test.equal($('.external-api2 .count').text().trim(), '200 rows')
test.equal($('.external-api2 .count').text().trim(), '196 rows')
test.ok($('.external-api2 ul.pagination .page-item:nth-of-type(2)').has("disabled"))
test.ok($('.external-api2 ul.pagination .page-item:nth-of-type(2)').hasClass("active"))
test.equal($('.external-api2 ul.pagination').children().length, 7)
......@@ -92,7 +92,7 @@
})
.formhandler({
data: response,
src: './formhandler.json',
src: './formhandler_csv.json',
edit: true,
pageSize: 10
})
......
......@@ -51,7 +51,7 @@
<script>
tape('$() test delete action for empty data case', function(t) {
tape('$() test delete action for empty data case and test for edit and add button', function(t) {
$('.delete_btn').formhandler({
columns: [
{
......@@ -68,7 +68,17 @@
add: true,
edit: true
})
t.end()
.on('load', function () {
$('.edit-btn').click()
t.ok($('.add-btn').prop('disabled'))
$('.edit-btn').click()
$('.add-btn').click()
t.ok($('.edit-btn').prop('disabled'))
$('.add-btn').click()
// on empty row click, .new-row element does not exist
t.equals($('.new-row', $('.delete_btn')).length, 0)
t.end()
})
})
tape('$().formhandler() renders rowTemplate as function', function (t) {
......@@ -311,27 +321,6 @@
})
})
tape('$().formhandler() test the star column with out title option', function (t) {
$('.test-star-without-title').formhandler({
columns: [
{
name: '*'
},
{
name: 'ID'
},
{
name: 'c1'
}
],
pageSize: 3
})
.on('load', function () {
t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 17)
t.end()
})
})
</script>
</body>
......
......@@ -37,16 +37,16 @@
<script>
tape.onFinish(function () { window.renderComplete = true })
</script>
<div class="hide_col3" data-src="/test/formhandler.json"></div>
<div class="hide_col2" data-src="/test/formhandler.json"></div>
<div class="hide_col" data-src="/test/formhandler.json"></div>
<div class="hide_col3" data-src="/test/formhandler_csv.json"></div>
<div class="hide_col2" data-src="/test/formhandler_csv.json"></div>
<div class="hide_col" data-src="/test/formhandler_csv.json"></div>
<div class="cell_template1" data-src="/test/formhandler.json"></div>
<div class="cell_template2" data-src="/test/formhandler.json"></div>
<div class="cell_template1" data-src="/test/formhandler_csv.json"></div>
<div class="cell_template2" data-src="/test/formhandler_csv.json"></div>
<div class="test_star_overrride" data-src="/test/formhandler.json"></div>
<div class="test-star-without-title" data-src="/test/formhandler.json"></div>
<div class="test-star-with-title" data-src="/test/formhandler.json"></div>
<div class="test_star_overrride" data-src="/test/formhandler_csv.json"></div>
<div class="test-star-without-title" data-src="/test/formhandler_csv.json"></div>
<div class="test-star-with-title" data-src="/test/formhandler_csv.json"></div>
<div class="test_star_overrride" data-src="/formhandler-data"></div>
......@@ -85,24 +85,24 @@
<div class="fh13" data-src="/formhandler-data"></div>
<div class="fh1" data-src="formhandler.json"></div>
<div class="fh1" data-src="formhandler_csv.json"></div>
<div class="fh2"></div>
<div class="fh3"></div>
<div class="fh4" data-table="false" data-count="false" data-page="false" data-size="false" data-export="false" data-filters="false"></div>
<div class="fh5" data-src="formhandler.json"></div>
<div class="fh6" data-src="formhandler.json"></div>
<div class="fh7" data-src="formhandler.json"></div>
<div class="fh8" data-src="formhandler.json"></div>
<div class="fh9" data-src="formhandler.json"></div>
<div class="fh5" data-src="formhandler_csv.json"></div>
<div class="fh6" data-src="formhandler_csv.json"></div>
<div class="fh7" data-src="formhandler_csv.json"></div>
<div class="fh8" data-src="formhandler_csv.json"></div>
<div class="fh9" data-src="formhandler_csv.json"></div>
<div class="fh10"></div>
<div class="fh11" data-src="formhandler.json"></div>
<div class="fh12" data-src="formhandler.json"></div>
<div class="formhandler" data-src="formhandler.json" data-page-size="10"></div>
<div class="fhgrid1" data-table="grid" data-src="formhandler.json"></div>
<div class="fhgrid2" data-table="grid" data-src="formhandler.json" data-icon="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ1bqTcxkaGSSIl5meU4JYO1dvUVbqP71z0hH8M6f6Yh9JpZg8"></div>
<div class="fhgrid3" data-table="grid" data-src="formhandler.json" data-classes="formhandler-grid"></div>
<div class="fhgrid4" data-table="grid" data-src="formhandler.json"></div>
<div class="fhgrid5" data-table="grid" data-src="formhandler.json"></div>
<div class="fh11" data-src="formhandler_csv.json"></div>
<div class="fh12" data-src="formhandler_csv.json"></div>
<div class="formhandler" data-src="formhandler_csv.json" data-page-size="10"></div>
<div class="fhgrid1" data-table="grid" data-src="formhandler_csv.json"></div>
<div class="fhgrid2" data-table="grid" data-src="formhandler_csv.json" data-icon="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ1bqTcxkaGSSIl5meU4JYO1dvUVbqP71z0hH8M6f6Yh9JpZg8"></div>
<div class="fhgrid3" data-table="grid" data-src="formhandler_csv.json" data-classes="formhandler-grid"></div>
<div class="fhgrid4" data-table="grid" data-src="formhandler_csv.json"></div>
<div class="fhgrid5" data-table="grid" data-src="formhandler_csv.json"></div>
<script>
tape('$().formhandler() basic example works', function (t) {
$('.formhandler').formhandler({
......@@ -119,8 +119,9 @@
tape('$().formhandler() renders data from data-src, overriding options.src', function (t) {
$('.fh1')
.formhandler({ src: 'formhandler-small.json' })
.on('load', function () {
t.equals($('.fh1 tbody tr').length, 50)
.on('load', function (args) {
// formhandler-small.json contains only two rows
t.notEqual($('.fh1 tbody tr').length, 2)
t.end()
})
})
......@@ -272,7 +273,7 @@
})
.on('load', function () {
// no. of columns in meta data must be same as rendered columns
t.equal($('.fh6 thead tr th').length, 17)
t.equal($('.fh6 thead tr th').length, 18)
// there should not be a column with name 'Continent'
t.notOk($('.fh6 thead tr').text().match(/Continent/))
// there shoudl be a column with name 'CustomTitle'
......@@ -296,14 +297,14 @@
.on('load', function () {
current_class_count += 1
// no. of columns in meta data must be same as rendered columns
t.equal($('.test_star_overrride thead tr th').length, 17 * current_class_count)
t.equal($('.test_star_overrride thead tr th').length, 18 * current_class_count)
// there should not be a column with name 'Continent'
t.notOk($('.test_star_overrride thead tr').text().match(/Continent/))
// there shoudl be a column with name 'CustomTitle'
t.ok($('.test_star_overrride thead tr').text().match(/CustomTitle/))
t.equal($('.test_star_overrride thead tr').text().match(/CustomTitle/).length, 1)
// Rest of 16 columns must have title as 'SameName'
t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 16 * current_class_count)
t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 17 * current_class_count)
// column is hideable by default
t.equal($('.test_star_overrride [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide".repeat(current_class_count))
})
......@@ -562,7 +563,7 @@
$('.fhgrid1')
.formhandler({ src: 'formhandler-small.json' })
.on('load', function () {
t.equals($('.fhgrid1 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 50)
t.equals($('.fhgrid1 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
t.end()
})
})
......@@ -571,7 +572,7 @@
$('.fhgrid2')
.formhandler({ src: 'formhandler-small.json' })
.on('load', function () {
t.equals($('.fhgrid2 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 50)
t.equals($('.fhgrid2 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
t.equals($('.fhgrid2 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow:first-child .thumbnail img').attr('src'), 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ1bqTcxkaGSSIl5meU4JYO1dvUVbqP71z0hH8M6f6Yh9JpZg8')
t.end()
})
......@@ -582,7 +583,7 @@
.formhandler({ src: 'formhandler-small.json' })
.on('load', function () {
t.equals($('.fhgrid3 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 0)
t.equals($('.fhgrid3 .formhandler-grid .formhandler-grid .thumbnail').length, 50)
t.equals($('.fhgrid3 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
t.end()
})
})
......@@ -591,7 +592,7 @@
$('.fhgrid4')
.formhandler({ src: 'formhandler-small.json', icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD' })
.on('load', function () {
t.equals($('.fhgrid4 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 50)
t.equals($('.fhgrid4 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 100)
t.equals($('.fhgrid4 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow:first-child .thumbnail img').attr('src'), 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD')
t.end()
})
......@@ -602,7 +603,7 @@
.formhandler({ src: 'formhandler-small.json', classes: 'formhandler-grid' })
.on('load', function () {
t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid-cell.d-inline-block.p-3.box-shadow .thumbnail').length, 0)
t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid .thumbnail').length, 50)
t.equals($('.fhgrid5 .formhandler-grid .formhandler-grid .thumbnail').length, 100)
t.end()
})
})
......@@ -1062,7 +1063,7 @@
})
.on('load', function () {
init_class_count += 1
t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 17 * init_class_count)
t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 18 * init_class_count)
})
})
......
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