2023-04-18 21:20:02 +00:00
|
|
|
import {Component} from './component';
|
2022-11-16 13:04:22 +00:00
|
|
|
|
|
|
|
export class TagManager extends Component {
|
2023-04-18 21:20:02 +00:00
|
|
|
|
2020-06-29 21:11:03 +00:00
|
|
|
setup() {
|
|
|
|
this.addRemoveComponentEl = this.$refs.addRemove;
|
|
|
|
this.container = this.$el;
|
|
|
|
this.rowSelector = this.$opts.rowSelector;
|
|
|
|
|
|
|
|
this.setupListeners();
|
|
|
|
}
|
|
|
|
|
|
|
|
setupListeners() {
|
2023-01-26 16:10:47 +00:00
|
|
|
this.container.addEventListener('input', event => {
|
2023-04-18 21:20:02 +00:00
|
|
|
/** @var {AddRemoveRows} * */
|
2022-11-16 15:46:41 +00:00
|
|
|
const addRemoveComponent = window.$components.firstOnElement(this.addRemoveComponentEl, 'add-remove-rows');
|
2023-01-26 16:10:47 +00:00
|
|
|
if (!this.hasEmptyRows() && event.target.value) {
|
2020-06-29 21:11:03 +00:00
|
|
|
addRemoveComponent.add();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
hasEmptyRows() {
|
|
|
|
const rows = this.container.querySelectorAll(this.rowSelector);
|
2023-04-18 21:20:02 +00:00
|
|
|
const firstEmpty = [...rows].find(row => [...row.querySelectorAll('input')].filter(input => input.value).length === 0);
|
2020-06-29 21:11:03 +00:00
|
|
|
return firstEmpty !== undefined;
|
|
|
|
}
|
2023-04-18 21:20:02 +00:00
|
|
|
|
|
|
|
}
|