|
|
|
@ -14,8 +14,8 @@ import cloneDeep from 'lodash/cloneDeep';
|
|
|
|
|
import {ArrayInputHelperService} from './array-input-helper.service';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Directive({ // directive for template and input values
|
|
|
|
|
// tslint:disable-next-line:directive-selector
|
|
|
|
|
@Directive({ // Directive for template and input values
|
|
|
|
|
// Tslint:disable-next-line:directive-selector
|
|
|
|
|
selector: '[rbArrayInputItem]'
|
|
|
|
|
})
|
|
|
|
|
export class RbArrayInputItemDirective {
|
|
|
|
@ -23,8 +23,8 @@ export class RbArrayInputItemDirective {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@Directive({ // directive for change detection
|
|
|
|
|
// tslint:disable-next-line:directive-selector
|
|
|
|
|
@Directive({ // Directive for change detection
|
|
|
|
|
// Tslint:disable-next-line:directive-selector
|
|
|
|
|
selector: '[rbArrayInputListener]'
|
|
|
|
|
})
|
|
|
|
|
export class RbArrayInputListenerDirective {
|
|
|
|
@ -37,14 +37,14 @@ export class RbArrayInputListenerDirective {
|
|
|
|
|
) { }
|
|
|
|
|
|
|
|
|
|
@HostListener('ngModelChange', ['$event'])
|
|
|
|
|
onChange(event) { // emit new value
|
|
|
|
|
onChange(event) { // Emit new value
|
|
|
|
|
this.helperService.newValue(this.rbArrayInputListener, this.index, event);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
// tslint:disable-next-line:component-selector
|
|
|
|
|
// Tslint:disable-next-line:component-selector
|
|
|
|
|
selector: 'rb-array-input',
|
|
|
|
|
templateUrl: './rb-array-input.component.html',
|
|
|
|
|
styleUrls: ['./rb-array-input.component.scss'],
|
|
|
|
@ -52,7 +52,7 @@ export class RbArrayInputListenerDirective {
|
|
|
|
|
})
|
|
|
|
|
export class RbArrayInputComponent implements ControlValueAccessor, OnInit, AfterViewInit {
|
|
|
|
|
|
|
|
|
|
pushTemplate: any = ''; // array element template
|
|
|
|
|
pushTemplate: any = ''; // Array element template
|
|
|
|
|
@Input('pushTemplate') set _pushTemplate(value) {
|
|
|
|
|
this.pushTemplate = value;
|
|
|
|
|
if (this.values.length) {
|
|
|
|
@ -64,7 +64,7 @@ export class RbArrayInputComponent implements ControlValueAccessor, OnInit, Afte
|
|
|
|
|
@ContentChild(RbArrayInputItemDirective) item: RbArrayInputItemDirective;
|
|
|
|
|
@ContentChild(RbArrayInputListenerDirective) item2: RbArrayInputListenerDirective;
|
|
|
|
|
|
|
|
|
|
values = []; // main array to display
|
|
|
|
|
values = []; // Main array to display
|
|
|
|
|
|
|
|
|
|
onChange = (ignore?: any): void => {};
|
|
|
|
|
onTouched = (ignore?: any): void => {};
|
|
|
|
@ -78,9 +78,9 @@ export class RbArrayInputComponent implements ControlValueAccessor, OnInit, Afte
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ngAfterViewInit() {
|
|
|
|
|
setTimeout(() => { // needed to find reference
|
|
|
|
|
this.helperService.values(this.item2.rbArrayInputListener).subscribe(data => { // action on value change
|
|
|
|
|
// assign value
|
|
|
|
|
setTimeout(() => { // Needed to find reference
|
|
|
|
|
this.helperService.values(this.item2.rbArrayInputListener).subscribe(data => { // Action on value change
|
|
|
|
|
// Assign value
|
|
|
|
|
if (this.pushPath) {
|
|
|
|
|
this.values[data.index][this.pushPath] = data.value;
|
|
|
|
|
}
|
|
|
|
@ -94,26 +94,26 @@ export class RbArrayInputComponent implements ControlValueAccessor, OnInit, Afte
|
|
|
|
|
|
|
|
|
|
updateArray() {
|
|
|
|
|
let res;
|
|
|
|
|
// adjust fields if pushTemplate is specified
|
|
|
|
|
// Adjust fields if pushTemplate is specified
|
|
|
|
|
if (this.pushTemplate !== null) {
|
|
|
|
|
if (this.pushPath) {
|
|
|
|
|
// remove last element if last two are empty
|
|
|
|
|
// Remove last element if last two are empty
|
|
|
|
|
if (this.values[this.values.length - 1][this.pushPath] === '' &&
|
|
|
|
|
this.values[this.values.length - 2][this.pushPath] === '') {
|
|
|
|
|
this.values.pop();
|
|
|
|
|
}
|
|
|
|
|
// add element if last all are filled
|
|
|
|
|
// Add element if last all are filled
|
|
|
|
|
else if (this.values.filter(e => e[this.pushPath] !== '').length === this.values.length) {
|
|
|
|
|
this.values.push(cloneDeep(this.pushTemplate));
|
|
|
|
|
}
|
|
|
|
|
res = this.values.filter(e => e[this.pushPath] !== '');
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
// remove last element if last two are empty
|
|
|
|
|
// Remove last element if last two are empty
|
|
|
|
|
if (this.values[this.values.length - 1] === '' && this.values[this.values.length - 2] === '') {
|
|
|
|
|
this.values.pop();
|
|
|
|
|
}
|
|
|
|
|
else if (this.values.filter(e => e !== '').length === this.values.length) { // add element if all are is filled
|
|
|
|
|
else if (this.values.filter(e => e !== '').length === this.values.length) { // Add element if all are is filled
|
|
|
|
|
this.values.push(cloneDeep(this.pushTemplate));
|
|
|
|
|
}
|
|
|
|
|
res = this.values.filter(e => e !== '');
|
|
|
|
@ -126,13 +126,13 @@ export class RbArrayInputComponent implements ControlValueAccessor, OnInit, Afte
|
|
|
|
|
if (!res.length) {
|
|
|
|
|
res = [''];
|
|
|
|
|
}
|
|
|
|
|
this.onChange(res); // trigger ngModel with filled elements
|
|
|
|
|
this.onChange(res); // Trigger ngModel with filled elements
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
writeValue(obj: any) { // add empty value on init
|
|
|
|
|
writeValue(obj: any) { // Add empty value on init
|
|
|
|
|
if (obj) {
|
|
|
|
|
if (this.pushTemplate !== null) {
|
|
|
|
|
// filter out empty values
|
|
|
|
|
// Filter out empty values
|
|
|
|
|
if (this.pushPath) {
|
|
|
|
|
this.values = [...obj.filter(e => e[this.pushPath] !== ''), cloneDeep(this.pushTemplate)];
|
|
|
|
|
}
|
|
|
|
|