vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Merge pull request #14935 from shariquerik/editable-grid-pagination

Browse source 
feat: Editable grid/table pagination
This commit is contained in:
mergify[bot] 2021-11-17 04:42:00 +00:00 • committed by GitHub
commit 5652483176
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
cypress/integration/grid_pagination.js
View file

@ -13,7 +13,7 @@ context('Grid Pagination', () => {
it('creates pages for child table', () => {
cy.visit('/app/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('.current-page-number').should('have.value', '1');
cy.get('@table').find('.total-page-number').should('contain', '20');
cy.get('@table').find('.grid-body .grid-row').should('have.length', 50);
});
@ -21,10 +21,10 @@ context('Grid Pagination', () => {
cy.visit('/app/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('.current-page-number').should('have.value', '2');
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('.current-page-number').should('have.value', '1');
cy.get('@table').find('.grid-body .grid-row').first().should('have.attr', 'data-idx', '1');
});
it('adds and deletes rows and changes page', () => {
@ -32,14 +32,35 @@ context('Grid Pagination', () => {
cy.get('.frappe-control[data-fieldname="phone_nos"]').as('table');
cy.get('@table').findByRole('button', {name: 'Add Row'}).click();
cy.get('@table').find('.grid-body .row-index').should('contain', 1001);
cy.get('@table').find('.current-page-number').should('contain', '21');
cy.get('@table').find('.current-page-number').should('have.value', '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').findByRole('button', {name: 'Delete'}).click();
cy.get('@table').find('.grid-body .row-index').last().should('contain', 1000);
cy.get('@table').find('.current-page-number').should('contain', '20');
cy.get('@table').find('.current-page-number').should('have.value', '20');
cy.get('@table').find('.total-page-number').should('contain', '20');
});
it('go to specific page, use up and down arrow, type characters, 0 page and more than existing page', () => {
cy.visit('/app/contact/Test Contact');
cy.get('.frappe-control[data-fieldname="phone_nos"]').as('table');
cy.get('@table').find('.current-page-number').focus().clear().type('17').blur();
cy.get('@table').find('.grid-body .row-index').should('contain', 801);
cy.get('@table').find('.current-page-number').focus().type('{uparrow}{uparrow}');
cy.get('@table').find('.current-page-number').should('have.value', '19');
cy.get('@table').find('.current-page-number').focus().type('{downarrow}{downarrow}');
cy.get('@table').find('.current-page-number').should('have.value', '17');
cy.get('@table').find('.current-page-number').focus().clear().type('700').blur();
cy.get('@table').find('.current-page-number').should('have.value', '20');
cy.get('@table').find('.current-page-number').focus().clear().type('0').blur();
cy.get('@table').find('.current-page-number').should('have.value', '1');
cy.get('@table').find('.current-page-number').focus().clear().type('abc').blur();
cy.get('@table').find('.current-page-number').should('have.value', '1');
});
// it('deletes all rows', ()=> {
// cy.visit('/app/contact/Test Contact');
// cy.get('.frappe-control[data-fieldname="phone_nos"]').as('table');

52
frappe/public/js/frappe/form/grid_pagination.js
View file

@ -46,8 +46,55 @@ export default class GridPagination {
this.last_page_button.on('click', () => {
this.go_to_page(this.total_pages);
});
this.$page_number.on('keyup', (e) => {
e.currentTarget.style.width = ((e.currentTarget.value.length + 1) * 8) + 'px';
});
this.$page_number.on('keydown', (e) => {
e = (e) ? e : window.event;
var charCode = (e.which) ? e.which : e.keyCode;
let arrow = { up: 38, down: 40 };
switch (charCode) {
case arrow.up:
this.inc_dec_number(true);
break;
case arrow.down:
this.inc_dec_number(false);
break;
}
// only allow numbers from 0-9 and up, down, left, right arrow keys
if (charCode > 31 && (charCode < 48 || charCode > 57) &&
![37, 38, 39, 40].includes(charCode)) {
return false;
}
return true;
});
this.$page_number.on('focusout', (e) => {
if (this.page_index == e.currentTarget.value) return;
this.page_index = e.currentTarget.value;
if (this.page_index < 1) {
this.page_index = 1;
} else if (this.page_index > this.total_pages) {
this.page_index = this.total_pages;
}
this.go_to_page();
});
}
inc_dec_number(increment) {
let new_value = parseInt(this.$page_number.val());
increment ? new_value++ : new_value--;
if (new_value < 1 || new_value > this.total_pages) return;
this.$page_number.val(new_value);
}
update_page_numbers() {
let total_pages = Math.ceil(this.grid.data.length/this.page_length);
@ -65,7 +112,7 @@ export default class GridPagination {
get_pagination_html() {
let page_text_html = `<div class="page-text">
<span class="current-page-number page-number">${__(this.page_index)}</span>
<input class="current-page-number page-number" type="text" value="${__(this.page_index)}"/>
<span>${__('of')}</span>
<span class="total-page-number page-number"> ${__(this.total_pages)} </span>
</div>`;
@ -104,7 +151,8 @@ export default class GridPagination {
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.$page_number.val(index);
this.$page_number.css('width', ((index.toString().length + 1) * 8) + 'px');
}
this.update_page_numbers();

12
frappe/public/scss/common/grid.scss
View file

@ -373,6 +373,18 @@
.page-text {
display: inline-block;
cursor: default;
}
.current-page-number {
width: 16px;
text-align: center;
border: none;
cursor: text;
&:focus {
outline: none;
}
}
.prev-page,