fix(Grid): Child table pagination fixes (#9034)

* fix: don't render result if grid_rows is undefined and fix truncate_rows

* fix: change page length to 50

* fix: grid pagination ui test

* fix: confirm before deleting all child table rows

cypress/integration/grid_pagination.js

@@ -14,15 +14,15 @@ context('Grid Pagination', () => {
 		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);
+		cy.get('@table').find('.total-page-number').should('contain', '20');
+		cy.get('@table').find('.grid-body .grid-row').should('have.length', 50);
 	});
 	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('.grid-body .grid-row').first().should('have.attr', 'data-idx', '51');
 		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');
@@ -32,19 +32,20 @@ context('Grid Pagination', () => {
 		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('.current-page-number').should('contain', '21');
+		cy.get('@table').find('.total-page-number').should('contain', '21');
 		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');
+		cy.get('@table').find('.current-page-number').should('contain', '20');
+		cy.get('@table').find('.total-page-number').should('contain', '20');
 	});
 	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('.modal-dialog .btn-primary').contains('Yes').click();
 		cy.get('@table').find('.grid-body .grid-row').should('have.length', 0);
 	});
 });

frappe/public/js/frappe/form/grid.js

@@ -195,11 +195,14 @@ export default class Grid {
 	}
 
 	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);
+		frappe.confirm(__("Are you sure you want to 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) {
@@ -304,11 +307,12 @@ export default class Grid {
 
 
 	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;
-
+		if (!this.grid_rows) {
+			return;
+		}
 		for (var ri = (page_index-1)*page_length; ri < result_length; ri++) {
 			var d = this.data[ri];
 			if (!d) {
@@ -364,9 +368,9 @@ export default class Grid {
 	truncate_rows() {
 		if (this.grid_rows.length > this.data.length) {
 			// remove extra rows
-			for (var i=this.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();
+				if (grid_row) grid_row.wrapper.remove();
 			}
 			this.grid_rows.splice(this.data.length);
 		}

frappe/public/js/frappe/form/grid_pagination.js

@@ -6,7 +6,7 @@ export default class GridPagination {
 	}
 
 	setup_pagination() {
-		this.page_length = 20;
+		this.page_length = 50;
 		this.page_index = 1;
 		this.total_pages = Math.ceil(this.grid.data.length/this.page_length);