Properly indent all source files
This commit is contained in:
@ -2,25 +2,25 @@ import { Injectable } from '@angular/core';
|
||||
import {Observable, Subject} from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ArrayInputHelperService {
|
||||
|
||||
com: Subject<{ id: string, index: number, value: any }> = new Subject();
|
||||
com: Subject<{ id: string, index: number, value: any }> = new Subject();
|
||||
|
||||
constructor() { }
|
||||
constructor() { }
|
||||
|
||||
values(id: string) { // Observable which returns new values as they come for subscribed id
|
||||
return new Observable<{index: number, value: any}>(observer => {
|
||||
this.com.subscribe(data => {
|
||||
if (data.id === id) {
|
||||
observer.next({index: data.index, value: data.value});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
values(id: string) { // Observable which returns new values as they come for subscribed id
|
||||
return new Observable<{index: number, value: any}>(observer => {
|
||||
this.com.subscribe(data => {
|
||||
if (data.id === id) {
|
||||
observer.next({index: data.index, value: data.value});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
newValue(id: string, index: number, value: any) { // Set new value
|
||||
this.com.next({id, index, value});
|
||||
}
|
||||
newValue(id: string, index: number, value: any) { // Set new value
|
||||
this.com.next({id, index, value});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<ng-container *ngFor="let ignore of [].constructor(values.length); index as i">
|
||||
<ng-container *ngTemplateOutlet="item.templateRef; context: {$implicit: {i: i, value: values[i]}}"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="item.templateRef; context: {$implicit: {i: i, value: values[i]}}"></ng-container>
|
||||
</ng-container>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import {
|
||||
AfterViewInit,
|
||||
Component,
|
||||
ContentChild,
|
||||
Directive,
|
||||
forwardRef,
|
||||
HostListener,
|
||||
Input,
|
||||
OnInit,
|
||||
TemplateRef
|
||||
AfterViewInit,
|
||||
Component,
|
||||
ContentChild,
|
||||
Directive,
|
||||
forwardRef,
|
||||
HostListener,
|
||||
Input,
|
||||
OnInit,
|
||||
TemplateRef
|
||||
} from '@angular/core';
|
||||
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
@ -15,150 +15,150 @@ import {ArrayInputHelperService} from './array-input-helper.service';
|
||||
|
||||
|
||||
@Directive({ // Directive for template and input values
|
||||
// tslint:disable-next-line:directive-selector
|
||||
selector: '[rbArrayInputItem]'
|
||||
// tslint:disable-next-line:directive-selector
|
||||
selector: '[rbArrayInputItem]'
|
||||
})
|
||||
export class RbArrayInputItemDirective {
|
||||
constructor(public templateRef: TemplateRef<any>) {
|
||||
}
|
||||
constructor(public templateRef: TemplateRef<any>) {
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({ // Directive for change detection
|
||||
// tslint:disable-next-line:directive-selector
|
||||
selector: '[rbArrayInputListener]'
|
||||
// tslint:disable-next-line:directive-selector
|
||||
selector: '[rbArrayInputListener]'
|
||||
})
|
||||
export class RbArrayInputListenerDirective {
|
||||
|
||||
@Input() rbArrayInputListener: string;
|
||||
@Input() index;
|
||||
@Input() rbArrayInputListener: string;
|
||||
@Input() index;
|
||||
|
||||
constructor(
|
||||
private helperService: ArrayInputHelperService
|
||||
) { }
|
||||
constructor(
|
||||
private helperService: ArrayInputHelperService
|
||||
) { }
|
||||
|
||||
@HostListener('ngModelChange', ['$event'])
|
||||
onChange(event) { // Emit new value
|
||||
this.helperService.newValue(this.rbArrayInputListener, this.index, event);
|
||||
}
|
||||
@HostListener('ngModelChange', ['$event'])
|
||||
onChange(event) { // Emit new value
|
||||
this.helperService.newValue(this.rbArrayInputListener, this.index, event);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'rb-array-input',
|
||||
templateUrl: './rb-array-input.component.html',
|
||||
styleUrls: ['./rb-array-input.component.scss'],
|
||||
providers: [{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RbArrayInputComponent), multi: true}]
|
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'rb-array-input',
|
||||
templateUrl: './rb-array-input.component.html',
|
||||
styleUrls: ['./rb-array-input.component.scss'],
|
||||
providers: [{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RbArrayInputComponent), multi: true}]
|
||||
})
|
||||
export class RbArrayInputComponent implements ControlValueAccessor, OnInit, AfterViewInit {
|
||||
|
||||
pushTemplate: any = ''; // Array element template
|
||||
@Input('pushTemplate') set _pushTemplate(value) {
|
||||
this.pushTemplate = value;
|
||||
if (this.values.length) {
|
||||
this.updateArray();
|
||||
}
|
||||
}
|
||||
@Input() pushPath: string = null;
|
||||
pushTemplate: any = ''; // Array element template
|
||||
@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;
|
||||
@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 => {};
|
||||
onChange = (ignore?: any): void => {};
|
||||
onTouched = (ignore?: any): void => {};
|
||||
|
||||
|
||||
constructor(
|
||||
private helperService: ArrayInputHelperService
|
||||
) { }
|
||||
constructor(
|
||||
private helperService: ArrayInputHelperService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
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;
|
||||
}
|
||||
else {
|
||||
this.values[data.index] = data.value;
|
||||
}
|
||||
this.updateArray();
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
ngAfterViewInit() {
|
||||
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;
|
||||
}
|
||||
else {
|
||||
this.values[data.index] = data.value;
|
||||
}
|
||||
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
|
||||
}
|
||||
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
|
||||
if (obj) {
|
||||
if (this.pushTemplate !== null) {
|
||||
// Filter out empty values
|
||||
if (this.pushPath) {
|
||||
this.values = [...obj.filter(e => e[this.pushPath] !== ''), cloneDeep(this.pushTemplate)];
|
||||
}
|
||||
else {
|
||||
this.values = [...obj.filter(e => e !== ''), cloneDeep(this.pushTemplate)];
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.values = obj;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.pushTemplate !== null) {
|
||||
this.values = [cloneDeep(this.pushTemplate)];
|
||||
}
|
||||
else {
|
||||
this.values = [''];
|
||||
}
|
||||
}
|
||||
}
|
||||
writeValue(obj: any) { // Add empty value on init
|
||||
if (obj) {
|
||||
if (this.pushTemplate !== null) {
|
||||
// Filter out empty values
|
||||
if (this.pushPath) {
|
||||
this.values = [...obj.filter(e => e[this.pushPath] !== ''), cloneDeep(this.pushTemplate)];
|
||||
}
|
||||
else {
|
||||
this.values = [...obj.filter(e => e !== ''), cloneDeep(this.pushTemplate)];
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.values = obj;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.pushTemplate !== null) {
|
||||
this.values = [cloneDeep(this.pushTemplate)];
|
||||
}
|
||||
else {
|
||||
this.values = [''];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registerOnChange(fn: any) {
|
||||
this.onChange = fn;
|
||||
}
|
||||
registerOnChange(fn: any) {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: any) {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
registerOnTouched(fn: any) {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RbTableComponent } from './rb-table/rb-table.component';
|
||||
import {RbArrayInputComponent, RbArrayInputListenerDirective, RbArrayInputItemDirective} from
|
||||
'./rb-array-input/rb-array-input.component';
|
||||
'./rb-array-input/rb-array-input.component';
|
||||
import {RbUiComponentsModule} from '@inst-iot/bosch-angular-ui-components';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import { RbIconButtonComponent } from './rb-icon-button/rb-icon-button.component';
|
||||
@ -10,24 +10,24 @@ import { RbIconButtonComponent } from './rb-icon-button/rb-icon-button.component
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
RbTableComponent,
|
||||
RbArrayInputComponent,
|
||||
RbArrayInputListenerDirective,
|
||||
RbArrayInputItemDirective,
|
||||
RbIconButtonComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
RbUiComponentsModule
|
||||
],
|
||||
exports: [
|
||||
RbTableComponent,
|
||||
RbArrayInputComponent,
|
||||
RbArrayInputListenerDirective,
|
||||
RbArrayInputItemDirective,
|
||||
RbIconButtonComponent
|
||||
]
|
||||
declarations: [
|
||||
RbTableComponent,
|
||||
RbArrayInputComponent,
|
||||
RbArrayInputListenerDirective,
|
||||
RbArrayInputItemDirective,
|
||||
RbIconButtonComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
RbUiComponentsModule
|
||||
],
|
||||
exports: [
|
||||
RbTableComponent,
|
||||
RbArrayInputComponent,
|
||||
RbArrayInputListenerDirective,
|
||||
RbArrayInputItemDirective,
|
||||
RbIconButtonComponent
|
||||
]
|
||||
})
|
||||
export class RbCustomInputsModule { }
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<button class="rb-btn rb" [ngClass]="'rb-' + mode" [type]="type" [disabled]="disabled">
|
||||
<span class="rb-ic" [ngClass]="'rb-ic-' + icon" [class.icon-space]="iconOnly === undefined"></span>
|
||||
<ng-content></ng-content>
|
||||
<span class="rb-ic" [ngClass]="'rb-ic-' + icon" [class.icon-space]="iconOnly === undefined"></span>
|
||||
<ng-content></ng-content>
|
||||
</button>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.icon-space {
|
||||
margin-right: 0.1em !important;
|
||||
margin-right: 0.1em !important;
|
||||
}
|
||||
|
||||
button.rb-btn > span:not(.icon-space) {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
@ -2,22 +2,22 @@ import {Component, Input, OnInit} from '@angular/core';
|
||||
|
||||
|
||||
@Component({
|
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'rb-icon-button',
|
||||
templateUrl: './rb-icon-button.component.html',
|
||||
styleUrls: ['./rb-icon-button.component.scss']
|
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'rb-icon-button',
|
||||
templateUrl: './rb-icon-button.component.html',
|
||||
styleUrls: ['./rb-icon-button.component.scss']
|
||||
})
|
||||
export class RbIconButtonComponent implements OnInit {
|
||||
|
||||
@Input() icon: string;
|
||||
@Input() mode: string;
|
||||
@Input() iconOnly;
|
||||
@Input() disabled;
|
||||
@Input() type = 'button';
|
||||
@Input() icon: string;
|
||||
@Input() mode: string;
|
||||
@Input() iconOnly;
|
||||
@Input() disabled;
|
||||
@Input() type = 'button';
|
||||
|
||||
constructor() { }
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="table-wrapper space-below" [class.scroll-top]="scrollTop !== undefined">
|
||||
<table [class.ellipsis]="ellipsis !== undefined">
|
||||
<ng-content></ng-content>
|
||||
</table>
|
||||
<table [class.ellipsis]="ellipsis !== undefined">
|
||||
<ng-content></ng-content>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";
|
||||
|
||||
.table-wrapper.scroll-top {
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
|
||||
&, & > table { // scrollbar at the top
|
||||
transform:rotateX(180deg);
|
||||
-ms-transform:rotateX(180deg); /* IE 9 */
|
||||
-webkit-transform:rotateX(180deg); /* Safari and Chrome */
|
||||
}
|
||||
&, & > table { // scrollbar at the top
|
||||
transform:rotateX(180deg);
|
||||
-ms-transform:rotateX(180deg); /* IE 9 */
|
||||
-webkit-transform:rotateX(180deg); /* Safari and Chrome */
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
::ng-deep tr {
|
||||
border-bottom: 1px solid $color-gray-mercury;
|
||||
::ng-deep tr {
|
||||
border-bottom: 1px solid $color-gray-mercury;
|
||||
|
||||
::ng-deep td, ::ng-deep th {
|
||||
padding: 8px 5px;
|
||||
}
|
||||
::ng-deep td, ::ng-deep th {
|
||||
padding: 8px 5px;
|
||||
}
|
||||
|
||||
::ng-deep th {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
::ng-deep th {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.ellipsis {
|
||||
::ng-deep td, ::ng-deep th {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 200px;
|
||||
}
|
||||
::ng-deep td, ::ng-deep th {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'rb-table',
|
||||
templateUrl: './rb-table.component.html',
|
||||
styleUrls: ['./rb-table.component.scss']
|
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'rb-table',
|
||||
templateUrl: './rb-table.component.html',
|
||||
styleUrls: ['./rb-table.component.scss']
|
||||
})
|
||||
export class RbTableComponent implements OnInit {
|
||||
|
||||
@Input() scrollTop;
|
||||
@Input() ellipsis;
|
||||
@Input() scrollTop;
|
||||
@Input() ellipsis;
|
||||
|
||||
constructor() { }
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user