diff --git a/cypress/integration/grid_pagination.js b/cypress/integration/grid_pagination.js new file mode 100644 index 0000000000..cf41e31ee6 --- /dev/null +++ b/cypress/integration/grid_pagination.js @@ -0,0 +1,50 @@ +context('Grid Pagination', () => { + beforeEach(() => { + cy.login(); + cy.visit('/desk'); + }); + before(() => { + cy.login(); + cy.visit('/desk'); + cy.window().its('frappe').then(frappe => { + frappe.call("frappe.tests.ui_test_helpers.create_contact_phone_nos_records"); + }); + }); + it('creates pages for child table', () => { + cy.visit('/desk#Form/Contact/Test Contact'); + cy.get('.frappe-control[data-fieldname="phone_nos"]').as('table'); + cy.get('@table').find('.current-page-number').should('contain', '1'); + cy.get('@table').find('.total-page-number').should('contain', '50'); + cy.get('@table').find('.grid-body .grid-row').should('have.length', 20); + }); + it('goes to the next and previous page', () => { + cy.visit('/desk#Form/Contact/Test Contact'); + cy.get('.frappe-control[data-fieldname="phone_nos"]').as('table'); + cy.get('@table').find('.next-page').click(); + cy.get('@table').find('.current-page-number').should('contain', '2'); + cy.get('@table').find('.grid-body .grid-row').first().should('have.attr', 'data-idx', '21'); + cy.get('@table').find('.prev-page').click(); + cy.get('@table').find('.current-page-number').should('contain', '1'); + cy.get('@table').find('.grid-body .grid-row').first().should('have.attr', 'data-idx', '1'); + }); + it('adds and deletes rows and changes page', ()=> { + cy.visit('/desk#Form/Contact/Test Contact'); + cy.get('.frappe-control[data-fieldname="phone_nos"]').as('table'); + cy.get('@table').find('button.grid-add-row').click(); + cy.get('@table').find('.grid-body .row-index').should('contain', 1001); + cy.get('@table').find('.current-page-number').should('contain', '51'); + cy.get('@table').find('.total-page-number').should('contain', '51'); + cy.get('@table').find('.grid-body .grid-row .grid-row-check').click({force: true}); + cy.get('@table').find('button.grid-remove-rows').click(); + cy.get('@table').find('.grid-body .row-index').last().should('contain', 1000); + cy.get('@table').find('.current-page-number').should('contain', '50'); + cy.get('@table').find('.total-page-number').should('contain', '50'); + }); + it('deletes all rows', ()=> { + cy.visit('/desk#Form/Contact/Test Contact'); + cy.get('.frappe-control[data-fieldname="phone_nos"]').as('table'); + cy.get('@table').find('.grid-heading-row .grid-row-check').click({force: true}); + cy.get('@table').find('button.grid-remove-all-rows').click(); + cy.get('@table').find('.grid-body .grid-row').should('have.length', 0); + }); +}); \ No newline at end of file diff --git a/frappe/public/js/frappe/form/form.js b/frappe/public/js/frappe/form/form.js index 0c28b22f35..2f30228aff 100644 --- a/frappe/public/js/frappe/form/form.js +++ b/frappe/public/js/frappe/form/form.js @@ -352,7 +352,11 @@ frappe.ui.form.Form = class FrappeForm { } } // reset visible columns, since column headings can change in different docs - this.grids.forEach(grid_obj => grid_obj.grid.visible_columns = null); + this.grids.forEach(grid_obj => { + grid_obj.grid.visible_columns = null + // reset page number to 1 + grid_obj.grid.grid_pagination.go_to_page(1); + }); frappe.ui.form.close_grid_form(); this.docname = docname; } diff --git a/frappe/public/js/frappe/form/grid.js b/frappe/public/js/frappe/form/grid.js index 3de62daf64..38818b18aa 100644 --- a/frappe/public/js/frappe/form/grid.js +++ b/frappe/public/js/frappe/form/grid.js @@ -2,6 +2,7 @@ // MIT License. See license.txt import GridRow from "./grid_row"; +import GridPagination from './grid_pagination'; frappe.ui.form.get_open_grid_form = function() { return $(".grid-row-open").data("grid_row"); @@ -47,8 +48,8 @@ export default class Grid { return false; } } + make() { - var me = this; let template = `
@@ -63,25 +64,38 @@ export default class Grid {
-
+
+ style="margin-right: 4px;" + data-action="delete_rows"> + ${__("Delete")} + + - +
-
+
+
+
@@ -90,20 +104,20 @@ export default class Grid { this.wrapper = $(template) .appendTo(this.parent) - .attr("data-fieldname", this.df.fieldname); + .attr('data-fieldname', this.df.fieldname); + + frappe.utils.bind_actions_with_object(this.wrapper, this); this.form_grid = this.wrapper.find('.form-grid'); - this.wrapper.find(".grid-add-row").click(function() { - me.add_new_row(null, null, true); - me.set_focus_on_row(); + this.setup_add_row(); - return false; - }); + this.setup_grid_pagination(); this.custom_buttons = {}; this.grid_buttons = this.wrapper.find('.grid-buttons'); - this.remove_rows_button = this.grid_buttons.find('.grid-remove-rows') + this.remove_rows_button = this.grid_buttons.find('.grid-remove-rows'); + this.remove_all_rows_button = this.grid_buttons.find('.grid-remove-all-rows'); this.setup_allow_bulk_edit(); this.setup_check(); @@ -112,79 +126,118 @@ export default class Grid { } } - setup_check() { - var me = this; + setup_grid_pagination() { + this.grid_pagination = new GridPagination({ + grid: this, + wrapper: this.wrapper, + }); + } - this.wrapper.on('click', '.grid-row-check', function(e) { - var $check = $(this); - if($check.parents('.grid-heading-row:first').length!==0) { + setup_check() { + + this.wrapper.on('click', '.grid-row-check', (e) => { + var $check = $(e.currentTarget); + if ($check.parents('.grid-heading-row:first').length !== 0) { // select all? var checked = $check.prop('checked'); $check.parents('.form-grid:first') .find('.grid-row-check').prop('checked', checked); // set all - (me.grid_rows || []).forEach(function(row) { row.doc.__checked = checked ? 1 : 0; }); + let result_length = this.grid_pagination.get_result_length(); + let page_index = this.grid_pagination.page_index; + let page_length = this.grid_pagination.page_length; + for (var ri = (page_index-1)*page_length; ri < result_length; ri++) { + this.grid_rows[ri].doc.__checked = checked ? 1: 0; + } } else { var docname = $check.parents('.grid-row:first').attr('data-name'); - me.grid_rows_by_docname[docname].select($check.prop('checked')); + this.grid_rows_by_docname[docname].select($check.prop('checked')); } - me.refresh_remove_rows_button(); + this.refresh_remove_rows_button(); }); - this.remove_rows_button.on('click', function() { - var dirty = false; - - let tasks = []; - me.get_selected_children().forEach((doc) => { - tasks.push(() => { - if (!me.frm) { - me.df.data = me.get_data(); - me.df.data = me.df.data.filter((row)=> row.idx != doc.idx); - } - me.grid_rows_by_docname[doc.name].remove(); - dirty = true; - }); - tasks.push(() => frappe.timeout(0.1)); - }); - - if (!me.frm) { - tasks.push(() => { - // reorder idx of df.data - me.df.data.forEach((row, index) => row.idx = index + 1); - }); - } - - tasks.push(() => { - if (dirty) me.refresh(); - }); - - frappe.run_serially(tasks); - }); } + + delete_rows() { + var dirty = false; + + let tasks = []; + let selected_children = this.get_selected_children(); + selected_children.forEach(doc => { + tasks.push(() => { + if (!this.frm) { + this.df.data = this.get_data(); + this.df.data = this.df.data.filter(row => row.idx != doc.idx); + } + this.grid_rows_by_docname[doc.name].remove(); + dirty = true; + }); + tasks.push(() => frappe.timeout(0.1)); + }); + + if (!this.frm) { + tasks.push(() => { + // reorder idx of df.data + this.df.data.forEach((row, index) => row.idx = index + 1); + }); + } + + tasks.push(() => { + if (dirty) this.refresh(); + }); + + frappe.run_serially(tasks); + + if (selected_children.length == this.grid_pagination.page_length) { + frappe.utils.scroll_to(this.wrapper); + } + } + + delete_all_rows() { + this.frm.doc[this.df.fieldname] = []; + $(this.parent).find('.rows').empty(); + this.grid_rows = []; + this.refresh(); + frappe.utils.scroll_to(this.wrapper); + } + select_row(name) { this.grid_rows_by_docname[name].select(); } + remove_all() { this.grid_rows.forEach(row => { row.remove(); }); } + refresh_remove_rows_button() { this.remove_rows_button.toggleClass('hidden', this.wrapper.find('.grid-body .grid-row-check:checked:first').length ? false : true); + this.remove_all_rows_button.toggleClass('hidden', + this.wrapper.find('.grid-body .grid-row-check:checked:first').length ? false : true); } + get_selected() { - return (this.grid_rows || []).map(function(row) { return row.doc.__checked ? row.doc.name : null; }) - .filter(function(d) { return d; }); + return (this.grid_rows || []).map(row => { + return row.doc.__checked ? row.doc.name : null; + }).filter(d => { + return d; + }); } + get_selected_children() { - return (this.grid_rows || []).map(function(row) { return row.doc.__checked ? row.doc : null; }) - .filter(function(d) { return d; }); + return (this.grid_rows || []).map(row => { + return row.doc.__checked ? row.doc : null; + }).filter(d => { + return d; + }); } + make_head() { // labels - if(!this.header_row) { + if (!this.header_row) { this.header_row = new GridRow({ parent: $(this.parent).find(".grid-heading-row"), parent_df: this.df, @@ -194,15 +247,16 @@ export default class Grid { }); } } + refresh(force) { + this.data = this.get_data(); + !this.wrapper && this.make(); - var me = this, - $rows = $(me.parent).find(".rows"), - data = this.get_data(); + let $rows = $(this.parent).find('.rows'); this.setup_fields(); - if(this.frm) { + if (this.frm) { this.display_status = frappe.perm.get_field_display_status(this.df, this.frm.doc, this.perm); } else { @@ -213,24 +267,57 @@ export default class Grid { if(this.display_status === "None") return; // redraw - var _scroll_y = $(document).scrollTop(); this.make_head(); - if(!this.grid_rows) { + if (!this.grid_rows) { this.grid_rows = []; } - this.truncate_rows(data); + this.truncate_rows(); this.grid_rows_by_docname = {}; - for(var ri=0; ri < data.length; ri++) { - var d = data[ri]; + this.grid_pagination.update_page_numbers(); + this.render_result_rows($rows, false); + this.grid_pagination.check_page_number(); + this.wrapper.find('.grid-empty').toggleClass('hidden', Boolean(this.data.length)); - if(d.idx===undefined) { + // toolbar + this.setup_toolbar(); + this.toggle_checkboxes(this.display_status !== 'Read'); + + // sortable + if (this.frm && this.is_sortable() && !this.sortable_setup_done) { + this.make_sortable($rows); + this.sortable_setup_done = true; + } + + this.last_display_status = this.display_status; + this.last_docname = this.frm && this.frm.docname; + + // red if mandatory + this.form_grid.toggleClass('error', !!(this.df.reqd && !(this.data && this.data.length))); + + this.refresh_remove_rows_button(); + + this.wrapper.trigger('change'); + } + + + render_result_rows($rows, append_row) { + + let result_length = this.grid_pagination.get_result_length(); + let page_index = this.grid_pagination.page_index; + let page_length = this.grid_pagination.page_length; + + for (var ri = (page_index-1)*page_length; ri < result_length; ri++) { + var d = this.data[ri]; + if (!d) { + return; + } + if (d.idx===undefined) { d.idx = ri + 1; } - - if(this.grid_rows[ri]) { + if (this.grid_rows[ri] && !append_row) { var grid_row = this.grid_rows[ri]; grid_row.doc = d; grid_row.refresh(); @@ -243,71 +330,49 @@ export default class Grid { frm: this.frm, grid: this }); - this.grid_rows.push(grid_row); + this.grid_rows[ri] = grid_row; } this.grid_rows_by_docname[d.name] = grid_row; } - - this.wrapper.find(".grid-empty").toggleClass("hidden", Boolean(data.length)); - - // toolbar - this.setup_toolbar(); - this.toggle_checkboxes(this.display_status !== 'Read'); - - // sortable - if(this.frm && this.is_sortable() && !this.sortable_setup_done) { - this.make_sortable($rows); - this.sortable_setup_done = true; - } - - this.last_display_status = this.display_status; - this.last_docname = this.frm && this.frm.docname; - - // frappe.utils.scroll_to(_scroll_y); - - // red if mandatory - this.form_grid.toggleClass('error', !!(this.df.reqd && !(data && data.length))); - - this.refresh_remove_rows_button(); - - this.wrapper.trigger('change'); } + setup_toolbar() { - if(this.is_editable()) { - this.wrapper.find(".grid-footer").toggle(true); + + if (this.is_editable()) { + this.wrapper.find('.grid-footer').toggle(true); // show, hide buttons to add rows - if(this.cannot_add_rows || (this.df && this.df.cannot_add_rows)) { + if (this.cannot_add_rows || (this.df && this.df.cannot_add_rows)) { // add 'hidden' to buttons - this.wrapper.find(".grid-add-row, .grid-add-multiple-rows") + this.wrapper.find('.grid-add-row, .grid-add-multiple-rows') .addClass('hidden'); } else { // show buttons - this.wrapper.find(".grid-add-row").removeClass('hidden'); + this.wrapper.find('.grid-add-row').removeClass('hidden'); - if(this.multiple_set) { - this.wrapper.find(".grid-add-multiple-rows").removeClass('hidden'); + if (this.multiple_set) { + this.wrapper.find('.grid-add-multiple-rows').removeClass('hidden'); } } - - } else { - this.wrapper.find(".grid-footer").toggle(false); + } else if (this.grid_rows.length < this.grid_pagination.page_length ) { + this.wrapper.find('.grid-footer').toggle(false); } } - truncate_rows(data) { - if(this.grid_rows.length > data.length) { + + truncate_rows() { + if (this.grid_rows.length > this.data.length) { // remove extra rows - for(var i=data.length; i < this.grid_rows.length; i++) { + for (var i=this.data.length; i < this.grid_rows.length; i++) { var grid_row = this.grid_rows[i]; grid_row.wrapper.remove(); } - this.grid_rows.splice(data.length); + this.grid_rows.splice(this.data.length); } } + setup_fields() { - var me = this; // reset docfield if (this.frm && this.frm.docname) { // use doc specific docfield object @@ -320,21 +385,23 @@ export default class Grid { } } - if(this.doctype && this.frm) { + if (this.doctype && this.frm) { this.docfields = frappe.meta.get_docfields(this.doctype, this.frm.docname); } else { // fields given in docfield this.docfields = this.df.fields; } - this.docfields.forEach(function(df) { - me.fields_map[df.fieldname] = df; + this.docfields.forEach(df => { + this.fields_map[df.fieldname] = df; }); } + refresh_row(docname) { this.grid_rows_by_docname[docname] && this.grid_rows_by_docname[docname].refresh(); } + make_sortable($rows) { new Sortable($rows.get(0), { group: {name: this.df.fieldname}, @@ -349,14 +416,14 @@ export default class Grid { } // prevent drag behaviour if _sortable property is "false" let idx = $(event.dragged).closest('.grid-row').attr('data-idx'); - let doc = this.get_data()[idx - 1]; + let doc = this.data[idx%this.grid_pagination.page_length]; if (doc && doc._sortable === false) { return false; } }, onUpdate: (event) => { let idx = $(event.item).closest('.grid-row').attr('data-idx'); - let doc = this.get_data()[idx - 1]; + let doc = this.data[idx%this.grid_pagination.page_length]; this.renumber_based_on_dom(); this.frm.script_manager.trigger(this.df.fieldname + "_move", this.df.options, doc.name); this.refresh(); @@ -366,13 +433,15 @@ export default class Grid { $(this.frm.wrapper).trigger("grid-make-sortable", [this.frm]); } + get_data() { var data = this.frm ? this.frm.doc[this.df.fieldname] || [] : this.df.data || this.get_modal_data(); - data.sort(function(a, b) { return a.idx - b.idx}); + // data.sort(function(a, b) { return a.idx - b.idx}); return data; } + get_modal_data() { return this.df.get_data() ? this.df.get_data().filter(data => { if (!this.deleted_docs || !in_list(this.deleted_docs, data.name)) { @@ -380,12 +449,12 @@ export default class Grid { } }) : []; } + set_column_disp(fieldname, show) { if($.isArray(fieldname)) { - var me = this; for(var i=0, l=fieldname.length; i { + row.columns_list.forEach( column => { //Hide the column specified if (column.df.fieldname == fieldname) { if (show) { @@ -433,27 +503,33 @@ export default class Grid { this.refresh(); } + toggle_reqd(fieldname, reqd) { this.get_docfield(fieldname).reqd = reqd; this.refresh(); } + toggle_enable(fieldname, enable) { this.get_docfield(fieldname).read_only = enable ? 0 : 1; this.refresh(); } + toggle_display(fieldname, show) { this.get_docfield(fieldname).hidden = show ? 0 : 1; this.refresh(); } + toggle_checkboxes(enable) { this.wrapper.find(".grid-row-check").prop('disabled', !enable) } + get_docfield(fieldname) { return frappe.meta.get_docfield(this.doctype, fieldname, this.frm ? this.frm.docname : null); } + get_row(key) { - if(typeof key == 'number') { - if(key < 0) { + if (typeof key == 'number') { + if (key < 0) { return this.grid_rows[this.grid_rows.length + key]; } else { return this.grid_rows[key]; @@ -462,9 +538,11 @@ export default class Grid { return this.grid_rows_by_docname[key]; } } + get_grid_row(key) { return this.get_row(key); } + get_field(fieldname) { // Note: workaround for get_query if(!this.fieldinfo[fieldname]) @@ -472,16 +550,30 @@ export default class Grid { } return this.fieldinfo[fieldname]; } + set_value(fieldname, value, doc) { if(this.display_status!=="None" && this.grid_rows_by_docname[doc.name]) { this.grid_rows_by_docname[doc.name].refresh_field(fieldname, value); } } - add_new_row(idx, callback, show, copy_doc) { - if(this.is_editable()) { - if(this.frm) { + + setup_add_row() { + this.wrapper.find(".grid-add-row").click(() => { + this.add_new_row(null, null, true, null, true); + this.set_focus_on_row(); + + return false; + }); + } + + add_new_row(idx, callback, show, copy_doc, go_to_last_page=false) { + if (this.is_editable()) { + if (go_to_last_page) { + this.grid_pagination.go_to_last_page_to_add_row(); + } + if (this.frm) { var d = frappe.model.add_child(this.frm.doc, this.df.options, this.df.fieldname, idx); - if(copy_doc) { + if (copy_doc) { d = this.duplicate_row(d, copy_doc); } d.__unedited = true; @@ -495,13 +587,13 @@ export default class Grid { this.refresh(); } - if(show) { - if(idx) { + if (show) { + if (idx) { // always open inserted rows this.wrapper.find("[data-idx='"+idx+"']").data("grid_row") .toggle_view(true, callback); } else { - if(!this.allow_on_grid_editing()) { + if (!this.allow_on_grid_editing()) { // open last row only if on-grid-editing is disabled this.wrapper.find(".grid-row:last").data("grid_row") .toggle_view(true, callback); @@ -515,21 +607,18 @@ export default class Grid { renumber_based_on_dom() { // renumber based on dom - let me = this; - let $rows = $(me.parent).find(".rows"); - - me.grid_rows = []; - me.frm.doc[me.df.fieldname] = []; - - $rows.find(".grid-row").each(function(i, item) { + let $rows = $(this.parent).find(".rows"); + $rows.find(".grid-row").each( (i, item) => { let $item = $(item); - let d = locals[me.doctype][$item.attr('data-name')]; - d.idx = i + 1; + let index = (this.grid_pagination.page_index-1)*this.grid_pagination.page_length+i; + let d = locals[this.doctype][$item.attr('data-name')]; + d.idx = index + 1; $item.attr('data-idx', d.idx); - me.frm.doc[me.df.fieldname].push(d); - me.grid_rows.push(me.grid_rows_by_docname[d.name]); + this.frm.doc[this.df.fieldname][index] = (d); + this.data[index] = d; + this.grid_rows[index]=(this.grid_rows_by_docname[d.name]); }); } @@ -545,12 +634,11 @@ export default class Grid { } set_focus_on_row(idx) { - var me = this; if(!idx) { - idx = me.grid_rows.length - 1; + idx = this.grid_rows.length - 1; } - setTimeout(function() { - me.grid_rows[idx].row + setTimeout(() => { + this.grid_rows[idx].row .find('input[type="Text"],textarea,select').filter(':visible:first').focus(); }, 100); } @@ -563,23 +651,22 @@ export default class Grid { this.visible_columns = []; - for(var ci in fields) { + for (var ci in fields) { var _df = fields[ci]; // get docfield if from fieldname df = this.fields_map[_df.fieldname]; - if(!df.hidden + if (!df.hidden && (this.editable_fields || df.in_list_view) && (this.frm && this.frm.get_perm(df.permlevel, "read") || !this.frm) && !in_list(frappe.model.layout_fields, df.fieldtype)) { - if(df.columns) { + if (df.columns) { df.colsize=df.columns; - } - else { + } else { var colsize = 2; - switch(df.fieldtype) { + switch (df.fieldtype) { case "Text": case "Small Text": colsize = 3; break; case "Check": colsize = 1; @@ -596,7 +683,7 @@ export default class Grid { } total_colsize += df.colsize; - if(total_colsize > 11) + if (total_colsize > 11) return false; this.visible_columns.push([df, df.colsize]); } @@ -604,11 +691,11 @@ export default class Grid { // redistribute if total-col size is less than 12 var passes = 0; - while(total_colsize < 11 && passes < 12) { - for(var i in this.visible_columns) { + while (total_colsize < 11 && passes < 12) { + for (var i in this.visible_columns) { var df = this.visible_columns[i][0]; var colsize = this.visible_columns[i][1]; - if(colsize > 1 && colsize < 11 + if (colsize > 1 && colsize < 11 && !in_list(frappe.model.std_fields_list, df.fieldname)) { if (passes < 3 && ["Int", "Currency", "Float", "Check", "Percent"].indexOf(df.fieldtype)!==-1) { @@ -620,7 +707,7 @@ export default class Grid { total_colsize++; } - if(total_colsize > 10) + if (total_colsize > 10) break; } passes++; @@ -631,18 +718,21 @@ export default class Grid { is_editable() { return this.display_status=="Write" && !this.static_rows; } + is_sortable() { return this.sortable_status || this.is_editable(); } + only_sortable(status) { - if(status===undefined ? true : status) { + if (status===undefined ? true : status) { this.sortable_status = true; this.static_rows = true; } } + set_multiple_add(link, qty) { - if(this.multiple_set) return; - var me = this; + if (this.multiple_set) return; + var link_field = frappe.meta.get_docfield(this.df.options, link); var btn = $(this.wrapper).find(".grid-add-multiple-rows"); @@ -650,27 +740,28 @@ export default class Grid { btn.removeClass('hidden'); // open link selector on click - btn.on("click", function() { + btn.on("click", () => { new frappe.ui.form.LinkSelector({ doctype: link_field.options, fieldname: link, qty_fieldname: qty, - target: me, + target: this, txt: "" }); + this.grid_pagination.go_to_last_page_to_add_row(); return false; }); this.multiple_set = true; } + setup_allow_bulk_edit() { - var me = this; - if(this.frm && this.frm.get_docfield(this.df.fieldname).allow_bulk_edit) { + if (this.frm && this.frm.get_docfield(this.df.fieldname).allow_bulk_edit) { // download - me.setup_download(); + this.setup_download(); // upload frappe.flags.no_socketio = true; - $(this.wrapper).find(".grid-upload").removeClass('hidden').on("click", function() { + $(this.wrapper).find(".grid-upload").removeClass('hidden').on("click", () => { new frappe.ui.FileUploader({ as_dataurl: true, allow_multiple: false, @@ -679,29 +770,29 @@ export default class Grid { // row #2 contains fieldnames; var fieldnames = data[2]; - me.frm.clear_table(me.df.fieldname); - $.each(data, function(i, row) { - if(i > 6) { + this.frm.clear_table(this.df.fieldname); + $.each(data, (i, row) => { + if (i > 6) { var blank_row = true; $.each(row, function(ci, value) { - if(value) { + if (value) { blank_row = false; return false; } }); - if(!blank_row) { - var d = me.frm.add_child(me.df.fieldname); - $.each(row, function(ci, value) { + if (!blank_row) { + var d = this.frm.add_child(this.df.fieldname); + $.each(row, (ci, value) => { var fieldname = fieldnames[ci]; - var df = frappe.meta.get_docfield(me.df.options, fieldname); + var df = frappe.meta.get_docfield(this.df.options, fieldname); // convert date formatting - if(df.fieldtype==="Date" && value) { + if (df.fieldtype==="Date" && value) { value = frappe.datetime.user_to_str(value); } - if(df.fieldtype==="Int" || df.fieldtype==="Check") { + if (df.fieldtype==="Int" || df.fieldtype==="Check") { value = cint(value); } @@ -711,18 +802,18 @@ export default class Grid { } }); - me.frm.refresh_field(me.df.fieldname); - frappe.msgprint({message:__('Table updated'), title:__('Success'), indicator:'green'}) + this.frm.refresh_field(this.df.fieldname); + frappe.msgprint({message: __('Table updated'), title: __('Success'), indicator: 'green'}); } }); return false; }); } } + setup_download() { - var me = this; - let title = me.df.label || frappe.model.unscrub(me.df.fieldname); - $(this.wrapper).find(".grid-download").removeClass('hidden').on("click", function() { + let title = this.df.label || frappe.model.unscrub(this.df.fieldname); + $(this.wrapper).find(".grid-download").removeClass('hidden').on("click", () => { var data = []; var docfields = []; data.push([__("Bulk Edit {0}", [title])]); @@ -732,9 +823,9 @@ export default class Grid { data.push([__("The CSV format is case sensitive")]); data.push([__("Do not edit headers which are preset in the template")]); data.push(["------"]); - $.each(frappe.get_meta(me.df.options).fields, function(i, df) { + $.each(frappe.get_meta(this.df.options).fields, (i, df) => { // don't include the read-only field in the template - if(frappe.model.is_value_type(df.fieldtype)) { + if (frappe.model.is_value_type(df.fieldtype)) { data[1].push(df.label); data[2].push(df.fieldname); let description = (df.description || "") + ' '; @@ -747,13 +838,13 @@ export default class Grid { }); // add data - $.each(me.frm.doc[me.df.fieldname] || [], function(i, d) { + $.each(this.frm.doc[this.df.fieldname] || [], (i, d) => { var row = []; - $.each(data[2], function(i, fieldname) { + $.each(data[2], (i, fieldname) => { var value = d[fieldname]; // format date - if(docfields[i].fieldtype==="Date" && value) { + if (docfields[i].fieldtype==="Date" && value) { value = frappe.datetime.str_to_user(value); } @@ -766,10 +857,11 @@ export default class Grid { return false; }); } + add_custom_button(label, click) { // add / unhide a custom button var btn = this.custom_buttons[label]; - if(!btn) { + if (!btn) { btn = $('') .css('margin-right', '4px') .prependTo(this.grid_buttons) @@ -779,6 +871,7 @@ export default class Grid { btn.removeClass('hidden'); } } + clear_custom_buttons() { // hide all custom buttons this.grid_buttons.find('.btn-custom').addClass('hidden'); diff --git a/frappe/public/js/frappe/form/grid_pagination.js b/frappe/public/js/frappe/form/grid_pagination.js new file mode 100644 index 0000000000..8884c772ab --- /dev/null +++ b/frappe/public/js/frappe/form/grid_pagination.js @@ -0,0 +1,132 @@ +export default class GridPagination { + + constructor(opts) { + $.extend(this, opts); + this.setup_pagination(); + } + + setup_pagination() { + this.page_length = 20; + this.page_index = 1; + this.total_pages = Math.ceil(this.grid.data.length/this.page_length); + + this.render_pagination(); + } + + render_pagination() { + if (this.grid.data.length <= this.page_length) { + this.wrapper.find('.grid-pagination').html(''); + } else { + let $pagination_template = this.get_pagination_html(); + this.wrapper.find('.grid-pagination').html($pagination_template); + this.prev_page_button = this.wrapper.find('.prev-page'); + this.next_page_button = this.wrapper.find('.next-page'); + this.$page_number = this.wrapper.find('.current-page-number'); + this.$total_pages = this.wrapper.find('.total-page-number'); + this.first_page_button = this.wrapper.find('.first-page'); + this.last_page_button = this.wrapper.find('.last-page'); + + this.bind_pagination_events(); + } + } + + bind_pagination_events() { + this.prev_page_button.on('click', () => { + this.render_prev_page(); + }); + + this.next_page_button.on('click', () => { + this.render_next_page(); + }); + + this.first_page_button.on('click', () => { + this.go_to_page(1); + }); + + this.last_page_button.on('click', () => { + this.go_to_page(this.total_pages); + }); + } + + + update_page_numbers() { + let total_pages = Math.ceil(this.grid.data.length/this.page_length); + if (this.total_pages !== total_pages) { + this.total_pages = total_pages; + this.render_pagination(); + } + } + + check_page_number() { + if (this.page_index > this.total_pages && this.page_index > 1) { + this.go_to_page(this.page_index-1); + } + } + + get_pagination_html() { + let page_text_html = `
+ ${__(this.page_index)} + ${__('of')} + ${__(this.total_pages)} +
`; + + return $(` + ‹ + ${page_text_html} + › + `); + } + + render_next_page() { + if (this.page_index*this.page_length < this.grid.data.length) { + this.page_index++; + this.go_to_page(); + } + } + + render_prev_page() { + if (this.page_index > 1) { + this.page_index--; + this.go_to_page(); + } + } + + go_to_page(index) { + if (!index) { + index = this.page_index; + } else { + this.page_index = index; + } + let $rows = $(this.grid.parent).find(".rows").empty(); + this.grid.render_result_rows($rows, true); + if (this.$page_number) { + this.$page_number.text(index); + } + + this.update_page_numbers(); + } + + go_to_last_page_to_add_row() { + let total_pages = this.total_pages; + let page_length = this.page_length; + if (this.grid.data.length == page_length*total_pages) { + this.go_to_page(total_pages + 1); + } else { + this.go_to_page(total_pages); + } + frappe.utils.scroll_to(this.wrapper); + } + + get_result_length() { + return this.grid.data.length < this.page_index*this.page_length + ? this.grid.data.length + : this.page_index*this.page_length; + } + +} \ No newline at end of file diff --git a/frappe/public/less/form_grid.less b/frappe/public/less/form_grid.less index 7b498c1e26..f41b60d4cb 100644 --- a/frappe/public/less/form_grid.less +++ b/frappe/public/less/form_grid.less @@ -268,6 +268,32 @@ border-top: 0px; } +.grid-pagination { + padding: 0; +} + +.page-text { + display: inline-block; +} + +.prev-page, .next-page { + font-size: 14px; +} + +a.prev-page { + padding-left: 15px; + text-decoration: none; +} + +a.next-page { + padding-right: 15px; + text-decoration: none; +} + +.page-number { + padding: 0 3px; +} + .grid-footer-toolbar { padding: 10px 15px; border-top: 1px solid @border-color; diff --git a/frappe/tests/ui_test_helpers.py b/frappe/tests/ui_test_helpers.py index 3747eaa75b..8eec644115 100644 --- a/frappe/tests/ui_test_helpers.py +++ b/frappe/tests/ui_test_helpers.py @@ -63,3 +63,14 @@ def setup_workflow(): create_todo_workflow() create_todo_records() frappe.clear_cache() + +@frappe.whitelist() +def create_contact_phone_nos_records(): + if frappe.db.get_all('Contact', {'first_name': 'Test Contact'}): + return + + doc = frappe.new_doc('Contact') + doc.first_name = 'Test Contact' + for index in range(1000): + doc.append('phone_nos', {'phone': '123456{}'.format(index)}) + doc.insert() \ No newline at end of file