Skip to content

fix: improve number input validation and update handling #2182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
enjeck wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve number input validation and update handling #2182

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 85 additions & 20 deletions src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,22 @@
<div v-if="column.numberPrefix" class="prefix">
{{ column.numberPrefix }}
</div>
<input v-model="localValue"
type="number"
:min="column.numberMin"
:max="column.numberMax"
:readonly="column.viewColumnInformation?.readonly"
:step="getStep">
<div class="number-input">
<input v-model="localValue"
type="number"
class="number-input__field"
:class="{ 'number-input__field--error': hasRangeError }"
:min="column.numberMin"
:max="column.numberMax"
:readonly="column.viewColumnInformation?.readonly"
:step="getStep"
:aria-invalid="hasRangeError"
@blur="formatValue"
@keyup.enter="formatValue">
<p v-if="hasRangeError" class="number-input__hint" role="alert">
{{ rangeHintText }}
</p>
</div>
<div v-if="column.numberSuffix" class="suffix">
{{ column.numberSuffix }}
</div>
Expand All @@ -21,6 +31,7 @@

<script>
import RowFormWrapper from './RowFormWrapper.vue'
import { translate as t } from '@nextcloud/l10n'
import rowHelper from '../../../../components/ncTable/mixins/rowHelper.js'
export default {

Expand Down Expand Up @@ -49,6 +60,37 @@ export default {
return 'any'
}
},
hasMin() {
return this.column?.numberMin !== null && this.column?.numberMin !== undefined
},
hasMax() {
return this.column?.numberMax !== null && this.column?.numberMax !== undefined
},
hasRangeError() {
const value = this.parseValue(this.localValue)
if (value === null) {
return false
}
if (this.hasMin && value < this.column.numberMin) {
return true
}
if (this.hasMax && value > this.column.numberMax) {
return true
}
return false
},
rangeHintText() {
const min = this.column?.numberMin
const max = this.column?.numberMax
if (this.hasMin && this.hasMax) {
return t('tables', 'Enter a value between {min} and {max}.', { min, max })
} else if (this.hasMin) {
return t('tables', 'Enter a value of {min} or more.', { min })
} else if (this.hasMax) {
return t('tables', 'Enter a value of {max} or less.', { max })
}
return ''
},
localValue: {
get() {
if (this.value !== null) {
Expand All @@ -62,16 +104,13 @@ export default {
}
}
},
set(v) { this.$emit('update:value', this.parseValue(v)) },
set(v) {
this.$emit('update:value', v === '' ? null : v)
},
},
},

watch: {
localValue() {
const value = this.parseValue(this.localValue)
this.localValue = value
this.$emit('update:value', value)
},
value() {
this.localValue = this.value
},
Expand All @@ -82,6 +121,15 @@ export default {
},

methods: {
t,
// Normalise the input (decimal separator + rounding) without clamping.
// Out-of-range values are surfaced via hasRangeError instead of being
// silently replaced by the min/max value.
formatValue() {
const parsedValue = this.parseValue(this.localValue)
this.localValue = parsedValue
this.$emit('update:value', parsedValue)
},
parseValue(inputValue) {
if (inputValue === null || inputValue === '') {
return null
Expand All @@ -92,15 +140,11 @@ export default {
} else {
parsedValue = inputValue
}
const roundedValue = parsedValue.toFixed(this.column?.numberDecimals)
let value = parseFloat(roundedValue)
if ((this.column?.numberMin !== null && this.column?.numberMin !== undefined) && value < this.column?.numberMin) {
value = this.column.numberMin
}
if ((this.column?.numberMax !== null && this.column?.numberMax !== undefined) && value > this.column?.numberMax) {
value = this.column.numberMax
if (isNaN(parsedValue)) {
return null
}
return value
const roundedValue = parsedValue.toFixed(this.column?.numberDecimals)
return parseFloat(roundedValue)
},
},
}
Expand All @@ -115,4 +159,25 @@ export default {
padding-inline-start: calc(var(--default-grid-baseline) * 2);
}

.number-input {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;

&__field {
width: 100%;

&--error {
border-color: var(--color-error) !important;
}
}

&__hint {
margin-block-start: calc(var(--default-grid-baseline) * 1);
color: var(--color-error);
font-size: 0.9em;
}
}

</style>
Loading