mirror of
https://github.com/nasa/openmct.git
synced 2025-06-18 23:28:14 +00:00
* fix(#7791): tc form shouldn't submit bounds changes on dismiss * test(e2e): add tests for validating time conductor popup - update appAction for setting time conductor in fixed mode - add a11y to time conductor in fixed mode - update tests using `setTimeConductorBounds` * fix(#7791): actually fix the problem. Also, add a test. * test: add annotation to regression test * docs: comments * test: fix the reset image button flake ONCE AND FOR ALL - wait for the rightmost image thumbnail to be in the viewport :D * test: add tests for `setTimeConductorMode` and `setTimeConductorBounds`
This commit is contained in:
Jesse Mazzella
GitHub
@ -32,7 +32,7 @@
|
||||
<div
|
||||
class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
|
||||
:title="`Start bounds: ${formattedBounds.start}`"
|
||||
aria-label="Start bounds"
|
||||
:aria-label="`Start bounds: ${formattedBounds.start}`"
|
||||
>
|
||||
{{ formattedBounds.start }}
|
||||
</div>
|
||||
@ -40,7 +40,7 @@
|
||||
<div
|
||||
class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
|
||||
:title="`End bounds: ${formattedBounds.end}`"
|
||||
aria-label="End bounds"
|
||||
:aria-label="`End bounds: ${formattedBounds.end}`"
|
||||
>
|
||||
{{ formattedBounds.end }}
|
||||
</div>
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
<button
|
||||
class="c-button icon-x"
|
||||
aria-label="Discard changes and close time popup"
|
||||
@click.prevent="handleFormSubmission(true)"
|
||||
@click.prevent="hide"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,25 +119,21 @@ export default {
|
||||
},
|
||||
emits: ['update', 'dismiss'],
|
||||
data() {
|
||||
let timeSystem = this.openmct.time.getTimeSystem();
|
||||
let durationFormatter = this.getFormatter(
|
||||
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
|
||||
);
|
||||
let timeFormatter = this.getFormatter(timeSystem.timeFormat);
|
||||
let bounds = this.bounds || this.openmct.time.getBounds();
|
||||
const timeSystem = this.openmct.time.getTimeSystem();
|
||||
const bounds = this.openmct.time.getBounds();
|
||||
|
||||
return {
|
||||
timeFormatter,
|
||||
durationFormatter,
|
||||
timeFormatter: this.getFormatter(timeSystem.timeFormat),
|
||||
durationFormatter: this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER),
|
||||
bounds: {
|
||||
start: bounds.start,
|
||||
end: bounds.end
|
||||
},
|
||||
formattedBounds: {
|
||||
start: timeFormatter.format(bounds.start).split(' ')[0],
|
||||
end: timeFormatter.format(bounds.end).split(' ')[0],
|
||||
startTime: durationFormatter.format(Math.abs(bounds.start)),
|
||||
endTime: durationFormatter.format(Math.abs(bounds.end))
|
||||
start: '',
|
||||
end: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
isUTCBased: timeSystem.isUTCBased,
|
||||
isDisabled: false
|
||||
@ -157,9 +153,12 @@ export default {
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
created() {
|
||||
this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
|
||||
},
|
||||
mounted() {
|
||||
this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
|
||||
this.setViewFromBounds(this.bounds);
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clearAllValidation();
|
||||
@ -173,8 +172,10 @@ export default {
|
||||
[this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
|
||||
},
|
||||
clearValidationForInput(input) {
|
||||
input.setCustomValidity('');
|
||||
input.title = '';
|
||||
if (input) {
|
||||
input.setCustomValidity('');
|
||||
input.title = '';
|
||||
}
|
||||
},
|
||||
setBounds(bounds) {
|
||||
this.bounds = bounds;
|
||||
@ -186,7 +187,6 @@ export default {
|
||||
this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
|
||||
},
|
||||
setTimeSystem(timeSystem) {
|
||||
this.timeSystem = timeSystem;
|
||||
this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
|
||||
this.durationFormatter = this.getFormatter(
|
||||
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
|
||||
@ -207,39 +207,31 @@ export default {
|
||||
`${this.formattedBounds.end} ${this.formattedBounds.endTime}`
|
||||
);
|
||||
|
||||
this.$emit('update', {
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
this.$emit('update', { start, end });
|
||||
}
|
||||
|
||||
if (dismiss) {
|
||||
this.$emit('dismiss');
|
||||
|
||||
return false;
|
||||
}
|
||||
},
|
||||
handleFormSubmission(shouldDismiss) {
|
||||
// Validate bounds before submission
|
||||
this.validateAllBounds('startDate');
|
||||
this.validateAllBounds('endDate');
|
||||
|
||||
// Submit the form if it's valid
|
||||
if (!this.isDisabled) {
|
||||
this.setBoundsFromView(shouldDismiss);
|
||||
}
|
||||
},
|
||||
validateAllBounds(ref) {
|
||||
this.isDisabled = false; // Reset isDisabled at the start of validation
|
||||
this.isDisabled = false;
|
||||
|
||||
if (!this.areBoundsFormatsValid()) {
|
||||
this.isDisabled = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
let validationResult = {
|
||||
valid: true
|
||||
};
|
||||
let validationResult = { valid: true };
|
||||
const currentInput = this.$refs[ref];
|
||||
|
||||
return [this.$refs.startDate, this.$refs.endDate].every((input) => {
|
||||
@ -255,38 +247,30 @@ export default {
|
||||
// const limit = this.getBoundsLimit();
|
||||
const limit = false;
|
||||
|
||||
if (this.timeSystem.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
|
||||
if (this.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
|
||||
if (input === currentInput) {
|
||||
validationResult = {
|
||||
valid: false,
|
||||
message: 'Start and end difference exceeds allowable limit'
|
||||
};
|
||||
}
|
||||
} else {
|
||||
if (input === currentInput) {
|
||||
validationResult = this.openmct.time.validateBounds(boundsValues);
|
||||
}
|
||||
} else if (input === currentInput) {
|
||||
validationResult = this.openmct.time.validateBounds(boundsValues);
|
||||
}
|
||||
|
||||
return this.handleValidationResults(input, validationResult);
|
||||
});
|
||||
},
|
||||
areBoundsFormatsValid() {
|
||||
let validationResult = {
|
||||
valid: true
|
||||
};
|
||||
|
||||
return [this.$refs.startDate, this.$refs.endDate].every((input) => {
|
||||
const formattedDate =
|
||||
input === this.$refs.startDate
|
||||
? `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
|
||||
: `${this.formattedBounds.end} ${this.formattedBounds.endTime}`;
|
||||
if (!this.timeFormatter.validate(formattedDate)) {
|
||||
validationResult = {
|
||||
valid: false,
|
||||
message: 'Invalid date'
|
||||
};
|
||||
}
|
||||
|
||||
const validationResult = this.timeFormatter.validate(formattedDate)
|
||||
? { valid: true }
|
||||
: { valid: false, message: 'Invalid date' };
|
||||
|
||||
return this.handleValidationResults(input, validationResult);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user