diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue index f3174e54b..9ba9511bc 100644 --- a/src/components/renderer/form-record-list.vue +++ b/src/components/renderer/form-record-list.vue @@ -20,6 +20,7 @@ :data-manager="dataManager" :fields="tableFields" :items="tableData.data" + :sort-compare-options="{ numeric: false }" sort-icon-left :css="css" :empty-text="$t('No Data Available')" @@ -274,19 +275,26 @@ export default { handler(total) { let totalPages = Math.ceil(total / this.perPage); this.currentPage = (this.currentPage > totalPages ? totalPages : this.currentPage); + this.currentPage = (this.currentPage == 0 ? 1 : this.currentPage); }, }, }, methods: { sortChanged(payload) { this.lastSortConfig = payload; - this.tableData.data = _.orderBy(this.tableData.data, [payload.sortBy], [(payload.sortDesc ? 'desc' : 'asc')]); + this.tableData.data = this.sort(this.tableData.data, payload); }, onInput() { if (this.lastSortConfig) { - this.tableData.data = _.orderBy(this.tableData.data, [this.lastSortConfig.sortBy], [(this.lastSortConfig.sortDesc ? 'desc' : 'asc')]); + this.tableData.data = this.sort(this.tableData.data, this.lastSortConfig); } }, + sort(data, options) { + if (options.sortDesc) { + return data.sort((b,a) => a[options.sortBy].localeCompare(b[options.sortBy], 0, {numeric: false})); + } + return data.sort((a,b) => a[options.sortBy].localeCompare(b[options.sortBy], 0, {numeric: false})); + }, emitShownEvent() { window.ProcessMaker.EventBus.$emit('modal-shown'); }, @@ -368,7 +376,7 @@ export default { } }, showEditForm(index) { - let pageIndex = ((this.paginatorPage-1) * this.perPage) + index; + let pageIndex = ((this.currentPage-1) * this.perPage) + index; // Reset edit to be a copy of our data model item this.editItem = JSON.parse(JSON.stringify(this.tableData.data[pageIndex])); this.editIndex = pageIndex; @@ -436,7 +444,7 @@ export default { }); }, showDeleteConfirmation(index) { - let pageIndex = ((this.paginatorPage-1) * this.perPage) + index; + let pageIndex = ((this.currentPage-1) * this.perPage) + index; this.deleteIndex = pageIndex; this.$refs.deleteModal.show(); }, diff --git a/tests/e2e/specs/RecordList.spec.js b/tests/e2e/specs/RecordList.spec.js index 4a0d62b7e..6eb0d3bda 100644 --- a/tests/e2e/specs/RecordList.spec.js +++ b/tests/e2e/specs/RecordList.spec.js @@ -287,4 +287,37 @@ describe('Record list', () => { cy.get('[aria-rowindex="4"] > .table-column').should('contain.text', 'C'); cy.get('[aria-rowindex="5"] > .table-column').should('contain.text', 'A'); }); + + it('Check editing after remove all records from second page', () => { + cy.loadFromJson('record_list_single_input.json', 0); + cy.get('[data-cy=mode-preview]').click(); + + let data = ['A', 'B', 'C', 'D', 'E', 'F']; + + //Add 7 rows + for (let i = 0; i < 6; i++) { + cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=add-row]').click(); + cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] [name=name]').type(data[i]); + cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] button.btn-primary').click(); + } + + // Go to pagination page 2 + cy.get(':nth-child(4) > .page-link').click(); + + // Delete F + cy.get('[data-cy=remove-row]').click(); + cy.get('[data-cy=modal-remove] .btn-primary').click(); + + //Get record "B" and replace to "BB" + cy.get('[aria-rowindex="2"] > .text-right > .actions > .btn-group > [data-cy=edit-row]').click(); + cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [name=name]').should('have.value', 'B').type('B'); + cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] button.btn-primary').click(); + + //Check the data is correct after edit + cy.get('[aria-rowindex="1"] > .table-column').should('contain.text', 'A'); + cy.get('[aria-rowindex="2"] > .table-column').should('contain.text', 'BB'); + cy.get('[aria-rowindex="3"] > .table-column').should('contain.text', 'C'); + cy.get('[aria-rowindex="4"] > .table-column').should('contain.text', 'D'); + cy.get('[aria-rowindex="5"] > .table-column').should('contain.text', 'E'); + }); });