feat(TournamentGroupsTab, TournamentTab): improve input normalization and event handling
All checks were successful
Deploy tt-tagebuch / deploy (push) Successful in 42s
All checks were successful
Deploy tt-tagebuch / deploy (push) Successful in 42s
- Enhanced input fields in TournamentGroupsTab to utilize a normalization function for numeric inputs, allowing for empty values and enforcing minimum constraints. - Added blur event handlers to trigger updates on input loss of focus, improving user experience. - Updated TournamentTab to remove redundant modus change handling on advancingPerGroup update, streamlining the event flow.
This commit is contained in:
@@ -20,11 +20,25 @@
|
||||
<div class="groups-settings">
|
||||
<label>
|
||||
{{ $t('tournaments.advancersPerGroup') }}:
|
||||
<input type="number" :value="advancingPerGroup" @input="$emit('update:advancingPerGroup', parseInt($event.target.value))" min="1" @change="$emit('modus-change')" />
|
||||
<input
|
||||
type="number"
|
||||
:value="advancingPerGroup"
|
||||
min="1"
|
||||
@input="$emit('update:advancingPerGroup', normalizeNumberInput($event.target.value, { min: 1, allowEmpty: true }))"
|
||||
@keydown.enter.prevent="$event.target.blur()"
|
||||
@blur="onAdvancingPerGroupBlur($event.target.value)"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
{{ $t('tournaments.maxGroupSize') }}:
|
||||
<input type="number" :value="maxGroupSize" @input="$emit('update:maxGroupSize', parseInt($event.target.value))" min="1" />
|
||||
<input
|
||||
type="number"
|
||||
:value="maxGroupSize"
|
||||
min="1"
|
||||
@input="$emit('update:maxGroupSize', normalizeNumberInput($event.target.value, { min: 1, allowEmpty: true }))"
|
||||
@keydown.enter.prevent="$event.target.blur()"
|
||||
@blur="onMaxGroupSizeBlur($event.target.value)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -43,7 +57,7 @@
|
||||
type="number"
|
||||
:value="groupsPerClassInput"
|
||||
@input="$emit('update:groupsPerClassInput', normalizeNumberInput($event.target.value, { min: 0, allowEmpty: true }))"
|
||||
@keydown.enter.prevent="onGroupsPerClassBlur($event.target.value)"
|
||||
@keydown.enter.prevent="$event.target.blur()"
|
||||
min="0"
|
||||
@blur="onGroupsPerClassBlur($event.target.value)"
|
||||
class="class-group-input"
|
||||
@@ -61,7 +75,7 @@
|
||||
:value="numberOfGroups"
|
||||
min="1"
|
||||
@input="$emit('update:numberOfGroups', normalizeNumberInput($event.target.value, { min: 1, allowEmpty: true }))"
|
||||
@keydown.enter.prevent="onNumberOfGroupsBlur($event.target.value)"
|
||||
@keydown.enter.prevent="$event.target.blur()"
|
||||
@blur="onNumberOfGroupsBlur($event.target.value)"
|
||||
/>
|
||||
</label>
|
||||
@@ -220,11 +234,11 @@ export default {
|
||||
required: true
|
||||
},
|
||||
advancingPerGroup: {
|
||||
type: Number,
|
||||
type: [Number, String],
|
||||
required: true
|
||||
},
|
||||
maxGroupSize: {
|
||||
type: Number,
|
||||
type: [Number, String],
|
||||
default: null
|
||||
},
|
||||
groupsPerClassInput: {
|
||||
@@ -328,6 +342,15 @@ export default {
|
||||
this.$emit('update:numberOfGroups', normalized);
|
||||
this.$emit('group-count-change');
|
||||
},
|
||||
onAdvancingPerGroupBlur(rawValue) {
|
||||
const normalized = this.normalizeNumberInput(rawValue, { min: 1, allowEmpty: false });
|
||||
this.$emit('update:advancingPerGroup', normalized);
|
||||
this.$emit('modus-change');
|
||||
},
|
||||
onMaxGroupSizeBlur(rawValue) {
|
||||
const normalized = this.normalizeNumberInput(rawValue, { min: 1, allowEmpty: false });
|
||||
this.$emit('update:maxGroupSize', normalized);
|
||||
},
|
||||
groupRankingsForGroup(group) {
|
||||
const key = `${group.groupId}-${group.classId ?? 'null'}`;
|
||||
return this.groupRankings[key] || [];
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
:active-group-cells="activeGroupCells"
|
||||
:matches="matches"
|
||||
@update:selectedViewClass="selectedViewClass = $event"
|
||||
@update:advancingPerGroup="advancingPerGroup = $event; onModusChange()"
|
||||
@update:advancingPerGroup="advancingPerGroup = $event"
|
||||
@update:maxGroupSize="maxGroupSize = $event"
|
||||
@update:groupsPerClassInput="groupsPerClassInput = $event"
|
||||
@update:numberOfGroups="numberOfGroups = $event"
|
||||
|
||||
Reference in New Issue
Block a user