diff --git a/package-lock.json b/package-lock.json index cde5a07..5f6e05a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12388,6 +12388,11 @@ "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", "dev": true }, + "str-compare": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/str-compare/-/str-compare-0.1.2.tgz", + "integrity": "sha1-eOaGGlccGiKhnq4Q5wmWt9z9r0Y=" + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", diff --git a/package.json b/package.json index 96c6204..6c9df32 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "@angular/platform-browser-dynamic": "~9.1.7", "@angular/router": "~9.1.7", "@hapi/joi": "^17.1.1", - "@inst-iot/bosch-angular-ui-components": "file:../Bosch-UI-Components/bosch-angular-ui-components/dist-lib/inst-iot-bosch-angular-ui-components-0.6.0.tgz", + "@inst-iot/bosch-angular-ui-components": + "file:../Bosch-UI-Components/bosch-angular-ui-components/dist-lib/inst-iot-bosch-angular-ui-components-0.6.0.tgz", "angular-2-local-storage": "^3.0.2", "chart.js": "^2.9.3", "chartjs-plugin-datalabels": "^0.7.0", @@ -33,6 +34,7 @@ "ng2-charts": "^2.3.2", "quick-score": "0.0.8", "rxjs": "~6.5.5", + "str-compare": "^0.1.2", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, diff --git a/src/app/rb-custom-inputs/rb-array-input/rb-array-input.component.ts b/src/app/rb-custom-inputs/rb-array-input/rb-array-input.component.ts index e258217..82501eb 100644 --- a/src/app/rb-custom-inputs/rb-array-input/rb-array-input.component.ts +++ b/src/app/rb-custom-inputs/rb-array-input/rb-array-input.component.ts @@ -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)); + } } } diff --git a/src/app/rb-custom-inputs/rb-icon-button/rb-icon-button.component.ts b/src/app/rb-custom-inputs/rb-icon-button/rb-icon-button.component.ts index fb02b84..8896e99 100644 --- a/src/app/rb-custom-inputs/rb-icon-button/rb-icon-button.component.ts +++ b/src/app/rb-custom-inputs/rb-icon-button/rb-icon-button.component.ts @@ -1,6 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; -// TODO: apply everywhere @Component({ // tslint:disable-next-line:component-selector diff --git a/src/app/sample/sample.component.html b/src/app/sample/sample.component.html index 19306d6..5780178 100644 --- a/src/app/sample/sample.component.html +++ b/src/app/sample/sample.component.html @@ -6,28 +6,48 @@