diff --git a/cypress/e2e/column-number-progress.cy.js b/cypress/e2e/column-number-progress.cy.js index 9664a7ab8..73cf21e04 100644 --- a/cypress/e2e/column-number-progress.cy.js +++ b/cypress/e2e/column-number-progress.cy.js @@ -27,16 +27,17 @@ describe('Test column progress', () => { it('Insert and test rows - default values', () => { cy.loadTable(tableTitle) cy.createNumberProgressColumn(columnTitle, 23, true) + cy.createNumberProgressColumn(columnTitle, null, false) // insert default value row cy.get('button').contains('Create row').click() - cy.get('.modal__content input').first().should('contain.value', '23') + cy.get('[data-cy="createRowModal"] input[type="number"]').first().should('contain.value', '23') cy.get('button').contains('Save').click() cy.get('.custom-table table tr td div progress').first().should('have.value', 23) // insert row cy.get('button').contains('Create row').click() - cy.get('.modal__content input').first().clear().type('89') + cy.get('[data-cy="createRowModal"] input[type="number"]').last().clear().type('89') cy.get('button').contains('Save').click() cy.get('.custom-table table tr td div progress').last().should('have.value', 89) }) diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberProgressForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberProgressForm.vue index cf4631a53..54a1c5ab7 100644 --- a/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberProgressForm.vue +++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/NumberProgressForm.vue @@ -13,7 +13,8 @@ + max="100" + @input="enforceBounds"> @@ -47,6 +48,14 @@ export default { }, methods: { t, + enforceBounds(event) { + const value = parseInt(event.target.value) + if (isNaN(value)) { + this.mutableColumn.numberDefault = null + return + } + this.mutableColumn.numberDefault = Math.min(Math.max(0, value), 100) + }, }, } diff --git a/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue index 8e9c94dd6..99910e471 100644 --- a/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue +++ b/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue @@ -6,8 +6,9 @@ + min="0" + max="100" + @input="enforceBounds"> @@ -41,12 +42,28 @@ export default { if (this.column.numberDefault !== undefined) { this.$emit('update:value', this.column.numberDefault) return this.column.numberDefault - } else { - return null } + return null } }, - set(v) { this.$emit('update:value', parseInt(v)) }, + set(v) { + const parsedValue = parseInt(v) + const clampedValue = Math.min(Math.max(0, v), 100) + this.$emit('update:value', isNaN(parsedValue) ? null : parseInt(clampedValue)) + }, + }, + }, + methods: { + enforceBounds(event) { + const value = parseInt(event.target.value) + if (isNaN(value)) { + this.$emit('update:value', null) + event.target.value = null + return + } + const clampedValue = Math.min(Math.max(0, value), 100) + this.$emit('update:value', clampedValue) + event.target.value = clampedValue }, }, }