open-consul/ui/packages/consul-ui/app/modifiers/validate.js

125 lines
3.3 KiB
JavaScript

import Modifier from 'ember-modifier';
import { action } from '@ember/object';
class ValidationError extends Error {}
export default class ValidateModifier extends Modifier {
item = null;
hash = null;
validate(value, validations = {}) {
if (Object.keys(validations).length === 0) {
return;
}
const errors = {};
Object.entries(this.hash.validations)
// filter out strings, for now these are helps, but ain't great if someone has a item.help
.filter(([key, value]) => typeof value !== 'string')
.forEach(([key, item]) => {
// optionally set things for you
if (this.item) {
this.item[key] = value;
}
(item || []).forEach((validation) => {
const re = new RegExp(validation.test);
if (!re.test(value)) {
errors[key] = new ValidationError(validation.error);
}
});
});
const state = this.hash.chart.state || {};
if (state.context == null) {
state.context = {};
}
if (Object.keys(errors).length > 0) {
state.context.errors = errors;
this.hash.chart.dispatch('ERROR', state.context);
} else {
state.context.errors = null;
this.hash.chart.dispatch('RESET', state.context);
}
}
@action
reset(e) {
if (e.target.value.length === 0) {
const state = this.hash.chart.state;
if (!state.context) {
state.context = {};
}
if (!state.context.errors) {
state.context.errors = {};
}
Object.entries(this.hash.validations)
// filter out strings, for now these are helps, but ain't great if someone has a item.help
.filter(([key, value]) => typeof value !== 'string')
.forEach(([key, item]) => {
if (typeof state.context.errors[key] !== 'undefined') {
delete state.context.errors[key];
}
});
if (Object.keys(state.context.errors).length === 0) {
state.context.errors = null;
this.hash.chart.dispatch('RESET', state.context);
}
}
}
async connect([value], _hash) {
this.element.addEventListener('input', this.listen);
this.element.addEventListener('blur', this.reset);
if (this.element.value.length > 0) {
await Promise.resolve();
if (this && this.element) {
this.validate(this.element.value, this.hash.validations);
}
}
}
@action
listen(e) {
this.validate(e.target.value, this.hash.validations);
}
disconnect() {
this.item = null;
this.hash = null;
this.element.removeEventListener('input', this.listen);
this.element.removeEventListener('blur', this.reset);
}
didReceiveArguments() {
const [value] = this.args.positional;
const _hash = this.args.named;
this.item = value;
this.hash = _hash;
if (typeof _hash.chart === 'undefined') {
this.hash.chart = {
state: {
context: {},
},
dispatch: (state) => {
switch (state) {
case 'ERROR':
_hash.onchange(this.hash.chart.state.context.errors);
break;
case 'RESET':
_hash.onchange();
break;
}
},
};
}
}
didInstall() {
this.connect(this.args.positional, this.args.named);
}
willRemove() {
this.disconnect();
}
}