Skip to content

GitLab

Commit 08918dd6 authored by Tejesh's avatar Tejesh 🖖
Browse files

wip

parent ead12162
Hide whitespace changes
Inline Side-by-side
src/formhandler.js
View file @ 08918dd6
......@@ -121,8 +121,8 @@ export function formhandler(js_options) {
idcount: 0,
parse: parse,
col_defaults: col_defaults,
isEdit: false,
isAdd: false,
isEdit: options.edit,
isAdd: options.add,
templates: default_templates
}
// Store template_data in $this
......@@ -255,10 +255,10 @@ function render_template(name, data, options, $this, template) {
function addHandler($this, template_data, options, template) {
$('.add button', $this)
$('button.add-btn', $this)
.on('click', function () {
var add_btn = $('.add button', $this)
var edit_btn = $('.edit button', $this)
var add_btn = $('button.add-btn', $this)
var edit_btn = $('button.edit-btn', $this)
if (add_btn.html().toLowerCase() == 'save') {
add_btn.html('Add')
edit_btn.prop('disabled', false)
......@@ -300,14 +300,59 @@ function addHandler($this, template_data, options, template) {
}
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=true, instead of rendering onl Edit button, render Edit/Save + "Cancel" button
// TST: on cancel button click, all edit(checkbox checked) rows must reset to original values
// TST: on clicking a checkbox, 'rowselected' event is triggered
// TST: on clicking Edit button, 'editmode' event is triggered // * ANAND: Is this still relevant?
// TST: on clicking a checkbox, inside rowselected event listener, covert to fancy dropdowns/datepickers
// TST: check if dom has updated to fancy dropdowns
// TST: Ensure spec remains same
// Listen for fh-row-selector events and Do what is being done now
// Listen for
$('body')
.on('change', 'input.fh-row-selector', function(e) {
// toggle editable state
var row = $(e.target).closest('tr')
var td_cells = row.children()
if ($(e.target).prop('checked')) {
// get closest tr from target, convert from second td -
// all td's with Input HTML elements as given in spec
// above is done with iteration
$.each(td_cells, function (index, td_cell) {
if (index === 0) return
var isEditable = _.includes(options.columns, function(o) {return o.colinfo == td_cell.col_name}).isEditable
var val = td_cell.val()
// isEditable = colinfo.editable === undefined ? true : colinfo.editable,
// <% } else if (isEdit && isEditable) { %>
// <td data-key="<%- colinfo.name %>">
// <%= _.template(templates['template_editable'])({isEditable: isEditable, val: val}) %>
// </td>
$(td_cell).html(_.template(default_templates['template_editable'])({isEditable: isEditable, val: val}))
})
} else {
// take dictionary from tr element,
// data-attribute and rebuild td with divs containing the value from dictionary
td_cells
// inject below html
var temp = `<td>
<a class="urlfilter" href="?<%- colinfo.name %>=<%- val %>&amp;_offset=">
<%= disp %>
</a>
</td>`
}
})
.on('click', 'button.edit-btn', function () {
var edit_btn = $('button.edit-btn', $this)
var add_btn = $('button.add-btn', $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')
$('input.fh-all-row-selector').addClass('d-none')
$('input.fh-row-selector').addClass('d-none')
var edited_rows = $('input.fh-row-selector:checked').closest('tr') // NOW: $('input.fh-row-selector:checked').closest('tr')
if (edited_rows.length > 0)
$('.loader', $this).removeClass('d-none')
......@@ -338,13 +383,13 @@ function editHandler($this, template_data, options, template) {
$('.loader', $this).addClass('d-none')
if (options.edit.done) options.edit.done()
})
template_data.isEdit = false
render_template('table', template_data, options, $this, 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)
$('input.fh-all-row-selector').removeClass('d-none')
$('input.fh-row-selector').removeClass('d-none')
// render_template('table', template_data, options, $this, template)
add_edit_events($this, edit_btn)
$this.trigger({ type: 'editmode' })
}
......
src/formhandler.template.html
View file @ 08918dd6
......@@ -17,8 +17,8 @@ Each template receives these variables:
<div class="note"></div>
<div class="formhandler-table-header d-flex justify-content-between mb-2">
<div class="d-flex flex-wrap">
<div class="edit"></div>
<div class="add"></div>
<div class="edit"></div>
<div class="count"></div>
<div class="page"></div>
<div class="size"></div>
......@@ -67,6 +67,14 @@ Each template receives these variables:
<table class="table table-sm table-striped">
<thead>
<% if (isEdit) { %>
<th>
<%= _.template(templates['template_checkbox'])({
label: '', value: '', name: '', labelClass: 'm-0',
id: '', checked: false, inputClass: 'fh-all-row-selector d-none'
}) %>
</th>
<% } %>
<% _.each(cols, function(colinfo) {
col_defaults(colinfo, data)
var menu_item = false
......@@ -126,10 +134,19 @@ Each template receives these variables:
<% } else {%>
<% _.each(data, function(row, rowIndex) { %>
<tr data-val="<%- JSON.stringify(row) %>" data-row="<%- rowIndex %>">
<!-- Hide this by default using .d-none class, but when Edit button is clicked, show this -->
<% if (isEdit) { %>
<td>
<%= _.template(templates['template_checkbox'])({
label: '', value: '', name: '', labelClass: 'm-0',
id: '', checked: false, inputClass: 'fh-row-selector d-none'
}) %>
</td>
<% } %>
<% _.each(cols, function(colinfo) { %>
<% var fmt = typeof(colinfo.format),
val = row[colinfo.name],
isEditable = colinfo.editable === undefined ? true : colinfo.editable,
disp = fmt == "function" ?
colinfo.format({name: colinfo.name, value: val, index: rowIndex, row: row, data:data }) :
fmt === "string" && colinfo.type === "number" ?
......@@ -150,10 +167,6 @@ Each template receives these variables:
</a>
</td>
<% } else if (isEdit && isEditable) { %>
<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=">
......@@ -169,6 +182,13 @@ Each template receives these variables:
</table>
<!-- end -->
<!-- var template_checkbox -->
<label for="<%- id %>" data-label="<%= label %>" class="<%- labelClass %>">
<input type="checkbox" name="<%- name %>" id="<%- id %>" class="<%- inputClass %>" value="<%- value %>" <%- checked ? "checked": "" %>>
<%= label %>
</label>
<!-- end -->
<!-- var template_editable -->
<% if (isEditable.input == 'select') { %>
......@@ -286,6 +306,9 @@ Each template receives these variables:
<button type="submit" class="btn btn-success mr-2 btn-sm edit-btn">
Edit
</button>
<button type="submit" class="btn btn-secondary mr-2 btn-sm cancel-btn">
Cancel
</button>
<!-- end -->
<!-- var template_add -->
......
test/test-formhandler-editable.html
View file @ 08918dd6
......@@ -118,12 +118,13 @@
},
}
],
add: false,
isEdit: true,
edit: {
done: function() {
// test.ok(true, 'must call twice')
}
},
add: true
})
.on('editmode', function () {
test.equals($('.select-example-basic').length, 100)
......@@ -136,7 +137,7 @@
})
})
.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()
......@@ -157,6 +158,8 @@
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()
/*
......
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