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) { ...@@ -255,8 +255,10 @@ function addHandler($this, template_data, options, template) {
$('.add button', $this) $('.add button', $this)
.on('click', function () { .on('click', function () {
var add_btn = $('.add button', $this) var add_btn = $('.add button', $this)
var edit_btn = $('.edit button', $this)
if (add_btn.html().toLowerCase() == 'save') { if (add_btn.html().toLowerCase() == 'save') {
add_btn.html('Add') add_btn.html('Add')
edit_btn.prop('disabled', false)
var columns_data = $('.new-row input[data-key]') var columns_data = $('.new-row input[data-key]')
$('.loader', $this).removeClass('d-none') $('.loader', $this).removeClass('d-none')
...@@ -265,6 +267,13 @@ function addHandler($this, template_data, options, template) { ...@@ -265,6 +267,13 @@ function addHandler($this, template_data, options, template) {
$.each(columns_data, function (key, column) { $.each(columns_data, function (key, column) {
data[column.getAttribute('data-key')] = column.value 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, { $.ajax(options.src, {
method: 'POST', method: 'POST',
...@@ -279,6 +288,7 @@ function addHandler($this, template_data, options, template) { ...@@ -279,6 +288,7 @@ function addHandler($this, template_data, options, template) {
.fail(failHandler.bind(this, $this, template)) .fail(failHandler.bind(this, $this, template))
} else if (add_btn.html().toLowerCase() == 'add') { } else if (add_btn.html().toLowerCase() == 'add') {
add_btn.html('Save') add_btn.html('Save')
edit_btn.prop('disabled', true)
template_data.isAdd = true template_data.isAdd = true
render_template('table', template_data, options, $this, template) render_template('table', template_data, options, $this, template)
add_edit_events($this, add_btn) add_edit_events($this, add_btn)
...@@ -290,8 +300,10 @@ function editHandler($this, template_data, options, template) { ...@@ -290,8 +300,10 @@ function editHandler($this, template_data, options, template) {
$('.edit button', $this) $('.edit button', $this)
.on('click', function () { .on('click', function () {
var edit_btn = $('.edit button', $this) var edit_btn = $('.edit button', $this)
var add_btn = $('.add button', $this)
if (edit_btn.html().toLowerCase() == 'save') { if (edit_btn.html().toLowerCase() == 'save') {
edit_btn.html('Edit') // TODO: remove hardcoding of name Edit edit_btn.html('Edit') // TODO: remove hardcoding of name Edit
add_btn.prop('disabled', false)
var edited_rows = $('.edited-row') var edited_rows = $('.edited-row')
if (edited_rows.length > 0) if (edited_rows.length > 0)
$('.loader', $this).removeClass('d-none') $('.loader', $this).removeClass('d-none')
...@@ -327,6 +339,7 @@ function editHandler($this, template_data, options, template) { ...@@ -327,6 +339,7 @@ function editHandler($this, template_data, options, template) {
render_template('table', template_data, options, $this, template) render_template('table', template_data, options, $this, template)
} else if (edit_btn.html().toLowerCase() == 'edit') { } else if (edit_btn.html().toLowerCase() == 'edit') {
edit_btn.html('Save') // TODO: remove hardcoding of name Save edit_btn.html('Save') // TODO: remove hardcoding of name Save
add_btn.prop('disabled', true)
template_data.isEdit = true template_data.isEdit = true
render_template('table', template_data, options, $this, template) render_template('table', template_data, options, $this, template)
add_edit_events($this, edit_btn) 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 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,,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 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 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 @@ ...@@ -26,7 +26,7 @@
var filter = g1.url.parse(window.location.href).searchList var filter = g1.url.parse(window.location.href).searchList
$('#filter').text(JSON.stringify(filter)) $('#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'))) $('#result_ds1').text(JSON.stringify(g1.datafilter(data, filter, 'ds1')))
}) })
......
const test = require('tape') const test = require('tape')
const g1 = require('../dist/datafilter.min') 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 continent_data_small = require('./formhandler-continent.json')
const sales_data = require('./sales-edit.json') const sales_data = require('./sales-edit.json')
const sales_data_with_date = require('./sales.json') const sales_data_with_date = require('./sales.json')
...@@ -279,9 +279,9 @@ test('g1.datafilter test', function(t) { ...@@ -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) { 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.deepEquals(result[0], continent_data[0])
t.notEqual(result.length, 100) t.notEqual(result.length, 20000)
t.end() t.end()
}) })
......
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
tape('$().formhandler() datafilter external api test', function(test) { tape('$().formhandler() datafilter external api test', function(test) {
$('.external-api') $('.external-api')
.on('load', function () { .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)').has("disabled"))
test.ok($('.external-api ul.pagination .page-item:nth-of-type(2)').hasClass("active")) test.ok($('.external-api ul.pagination .page-item:nth-of-type(2)').hasClass("active"))
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
tape('$().formhandler() datafilter external api test with options & data overrides src', function (test) { tape('$().formhandler() datafilter external api test with options & data overrides src', function (test) {
$('.external-api2') $('.external-api2')
.on('load', function () { .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)').has("disabled"))
test.ok($('.external-api2 ul.pagination .page-item:nth-of-type(2)').hasClass("active")) test.ok($('.external-api2 ul.pagination .page-item:nth-of-type(2)').hasClass("active"))
test.equal($('.external-api2 ul.pagination').children().length, 7) test.equal($('.external-api2 ul.pagination').children().length, 7)
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
}) })
.formhandler({ .formhandler({
data: response, data: response,
src: './formhandler.json', src: './formhandler_csv.json',
edit: true, edit: true,
pageSize: 10 pageSize: 10
}) })
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<script> <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({ $('.delete_btn').formhandler({
columns: [ columns: [
{ {
...@@ -68,7 +68,17 @@ ...@@ -68,7 +68,17 @@
add: true, add: true,
edit: 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) { tape('$().formhandler() renders rowTemplate as function', function (t) {
...@@ -311,27 +321,6 @@ ...@@ -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> </script>
</body> </body>
......
...@@ -37,16 +37,16 @@ ...@@ -37,16 +37,16 @@
<script> <script>
tape.onFinish(function () { window.renderComplete = true }) tape.onFinish(function () { window.renderComplete = true })
</script> </script>
<div class="hide_col3" 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.json"></div> <div class="hide_col2" data-src="/test/formhandler_csv.json"></div>
<div class="hide_col" data-src="/test/formhandler.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_template1" data-src="/test/formhandler_csv.json"></div>
<div class="cell_template2" data-src="/test/formhandler.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_overrride" data-src="/test/formhandler_csv.json"></div>
<div class="test-star-without-title" data-src="/test/formhandler.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.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> <div class="test_star_overrride" data-src="/formhandler-data"></div>
...@@ -85,24 +85,24 @@ ...@@ -85,24 +85,24 @@
<div class="fh13" data-src="/formhandler-data"></div> <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="fh2"></div>
<div class="fh3"></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="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="fh5" data-src="formhandler_csv.json"></div>
<div class="fh6" data-src="formhandler.json"></div> <div class="fh6" data-src="formhandler_csv.json"></div>
<div class="fh7" data-src="formhandler.json"></div> <div class="fh7" data-src="formhandler_csv.json"></div>
<div class="fh8" data-src="formhandler.json"></div> <div class="fh8" data-src="formhandler_csv.json"></div>
<div class="fh9" data-src="formhandler.json"></div> <div class="fh9" data-src="formhandler_csv.json"></div>
<div class="fh10"></div> <div class="fh10"></div>
<div class="fh11" data-src="formhandler.json"></div> <div class="fh11" data-src="formhandler_csv.json"></div>
<div class="fh12" data-src="formhandler.json"></div> <div class="fh12" data-src="formhandler_csv.json"></div>
<div class="formhandler" data-src="formhandler.json" data-page-size="10"></div> <div class="formhandler" data-src="formhandler_csv.json" data-page-size="10"></div>
<div class="fhgrid1" data-table="grid" data-src="formhandler.json"></div> <div class="fhgrid1" data-table="grid" data-src="formhandler_csv.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="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.json" data-classes="formhandler-grid"></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.json"></div> <div class="fhgrid4" data-table="grid" data-src="formhandler_csv.json"></div>
<div class="fhgrid5" data-table="grid" data-src="formhandler.json"></div> <div class="fhgrid5" data-table="grid" data-src="formhandler_csv.json"></div>
<script> <script>
tape('$().formhandler() basic example works', function (t) { tape('$().formhandler() basic example works', function (t) {
$('.formhandler').formhandler({ $('.formhandler').formhandler({
...@@ -119,8 +119,9 @@ ...@@ -119,8 +119,9 @@
tape('$().formhandler() renders data from data-src, overriding options.src', function (t) { tape('$().formhandler() renders data from data-src, overriding options.src', function (t) {
$('.fh1') $('.fh1')
.formhandler({ src: 'formhandler-small.json' }) .formhandler({ src: 'formhandler-small.json' })
.on('load', function () { .on('load', function (args) {
t.equals($('.fh1 tbody tr').length, 50) // formhandler-small.json contains only two rows
t.notEqual($('.fh1 tbody tr').length, 2)
t.end() t.end()
}) })
}) })
...@@ -272,7 +273,7 @@ ...@@ -272,7 +273,7 @@
}) })
.on('load', function () { .on('load', function () {
// no. of columns in meta data must be same as rendered columns // 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' // there should not be a column with name 'Continent'
t.notOk($('.fh6 thead tr').text().match(/Continent/)) t.notOk($('.fh6 thead tr').text().match(/Continent/))
// there shoudl be a column with name 'CustomTitle' // there shoudl be a column with name 'CustomTitle'
...@@ -296,14 +297,14 @@ ...@@ -296,14 +297,14 @@
.on('load', function () { .on('load', function () {
current_class_count += 1 current_class_count += 1
// no. of columns in meta data must be same as rendered columns // 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' // there should not be a column with name 'Continent'
t.notOk($('.test_star_overrride thead tr').text().match(/Continent/)) t.notOk($('.test_star_overrride thead tr').text().match(/Continent/))
// there shoudl be a column with name 'CustomTitle' // there shoudl be a column with name 'CustomTitle'
t.ok($('.test_star_overrride thead tr').text().match(/CustomTitle/)) t.ok($('.test_star_overrride thead tr').text().match(/CustomTitle/))
t.equal($('.test_star_overrride thead tr').text().match(/CustomTitle/).length, 1) t.equal($('.test_star_overrride thead tr').text().match(/CustomTitle/).length, 1)
// Rest of 16 columns must have title as 'SameName' // 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 // 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)) 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 @@ ...@@ -562,7 +563,7 @@
$('.fhgrid1') $('.fhgrid1')
.formhandler({ src: 'formhandler-small.json' }) .formhandler({ src: 'formhandler-small.json' })
.on('load', function () { .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() t.end()
}) })
}) })
...@@ -571,7 +572,7 @@ ...@@ -571,7 +572,7 @@
$('.fhgrid2') $('.fhgrid2')
.formhandler({ src: 'formhandler-small.json' }) .formhandler({ src: 'formhandler-small.json' })
.on('load', function () { .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.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() t.end()
}) })
...@@ -582,7 +583,7 @@ ...@@ -582,7 +583,7 @@
.formhandler({ src: 'formhandler-small.json' }) .formhandler({ src: 'formhandler-small.json' })
.on('load', function () { .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-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() t.end()
}) })
}) })
...@@ -591,7 +592,7 @@ ...@@ -591,7 +592,7 @@
$('.fhgrid4') $('.fhgrid4')
.formhandler({ src: 'formhandler-small.json', icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD' }) .formhandler({ src: 'formhandler-small.json', icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSck4Qkjt376rXmEUqCj1MVPsgF4ftoSg4ok2EXdansLiF9VddD' })
.on('load', function () { .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.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() t.end()
}) })
...@@ -602,7 +603,7 @@ ...@@ -602,7 +603,7 @@
.formhandler({ src: 'formhandler-small.json', classes: 'formhandler-grid' }) .formhandler({ src: 'formhandler-small.json', classes: 'formhandler-grid' })
.on('load', function () { .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-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() t.end()
}) })
}) })
...@@ -1062,7 +1063,7 @@ ...@@ -1062,7 +1063,7 @@
}) })
.on('load', function () { .on('load', function () {
init_class_count += 1 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