fix: ensure keyboard-entered values are between 1-10

Signed-off-by: Cleopatra Enjeck M. <[email protected]>

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)
 	})

src/shared/components/ncTable/partials/columnTypePartials/forms/NumberProgressForm.vue

@@ -13,7 +13,8 @@
 				<input v-model="mutableColumn.numberDefault"
 					type="number"
 					min="0"
-					max="100">
+					max="100"
+					@input="enforceBounds">
 			</div>
 		</div>
 	</div>
@@ -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)
+		},
 	},
 }
 </script>

src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue

@@ -6,8 +6,9 @@
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
 		<input v-model="localValue"
 			type="number"
-			:min="0"
-			:max="100">
+			min="0"
+			max="100"
+			@input="enforceBounds">
 	</RowFormWrapper>
 </template>
 
@@ -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
 		},
 	},
 }