banana/definma-ui
2
Fork 0
Code Releases Activity

implemented icon buttons, array input, reformatting, minor sample component improvements

Browse Source
This commit is contained in:
VLE2FE
2020-07-30 11:33:56 +02:00
parent 4876ba3c0c
commit a4ed8888e6
12 changed files with 326 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/rb-custom-inputs/rb-array-input/rb-array-input.component.ts
View File

@ -13,7 +13,6 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import _ from 'lodash';
import {ArrayInputHelperService} from './array-input-helper.service';
// TODO: implement everywhere
@Directive({ // directive for template and input values
// tslint:disable-next-line:directive-selector
@ -31,7 +30,7 @@ export class RbArrayInputItemDirective {
export class RbArrayInputListenerDirective {
@Input() rbArrayInputListener: string;
@Input() index: number;
@Input() index;
constructor(
private helperService: ArrayInputHelperService
@ -39,7 +38,6 @@ export class RbArrayInputListenerDirective {
@HostListener('ngModelChange', ['$event'])
onChange(event) {
console.log(event);
this.helperService.newValue(this.rbArrayInputListener, this.index, event);
}
}
@ -54,8 +52,14 @@ export class RbArrayInputListenerDirective {
})
export class RbArrayInputComponent implements ControlValueAccessor, OnInit, AfterViewInit {
@Input() pushTemplate: any;
@Input() pushPath: string;
pushTemplate: any = '';
@Input('pushTemplate') set _pushTemplate(value) {
this.pushTemplate = value;
if (this.values.length) {
this.updateArray();
}
}
@Input() pushPath: string = null;
@ContentChild(RbArrayInputItemDirective) item: RbArrayInputItemDirective;
@ContentChild(RbArrayInputListenerDirective) item2: RbArrayInputListenerDirective;
@ -76,24 +80,62 @@ 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
this.values[data.index][this.pushPath] = data.value;
console.log(this.values);
if (this.values[this.values.length - 1][this.pushPath] === '' && this.values[this.values.length - 2][this.pushPath] === '') { // remove last element if last two are empty
this.values.pop();
// assign value
if (this.pushPath) {
this.values[data.index][this.pushPath] = data.value;
}
else if (this.values[this.values.length - 1][this.pushPath] !== '') { // add element if last one is filled
this.values.push(_.cloneDeep(this.pushTemplate));
else {
this.values[data.index] = data.value;
}
this.onChange(this.values.filter(e => e !== '')); // trigger ngModel with filled elements
console.log(111, this.values);
this.updateArray();
});
}, 0);
}
updateArray() {
let res;
// adjust fields if pushTemplate is specified
if (this.pushTemplate !== null) {
if (this.pushPath) {
// 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
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
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
this.values.push(_.cloneDeep(this.pushTemplate));
}
res = this.values.filter(e => e !== '');
}
}
else {
this.values = [this.values[0]];
res = this.values;
}
if (!res.length) {
res = [''];
}
this.onChange(res); // trigger ngModel with filled elements
}
writeValue(obj: any) { // add empty value on init
this.values = obj ? obj : [];
if (this.values.length === 0 || this.values[0] !== '') {
console.log(this.values);
this.values.push(_.cloneDeep(this.pushTemplate));
// add empty last field if pushTemplate is specified
if (this.pushTemplate !== null) {
this.values.push(_.cloneDeep(this.pushTemplate));
}
}
}

1
src/app/rb-custom-inputs/rb-icon-button/rb-icon-button.component.ts
View File

@ -1,6 +1,5 @@
import {Component, Input, OnInit} from '@angular/core';
// TODO: apply everywhere
@Component({
// tslint:disable-next-line:component-selector