banana/definma-ui
2
Fork 0
Code Releases Activity

Properly indent all source files

Browse Source
This commit is contained in:
Kai S. K. Engelbart
2021-01-25 12:34:23 +01:00
parent 2d3782cc82
commit 2f6231a6b5
106 changed files with 5170 additions and 5171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/rb-custom-inputs/rb-array-input/array-input-helper.service.ts
View File

@@ -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});
}
}

2
src/app/rb-custom-inputs/rb-array-input/rb-array-input.component.html
View File

@@ -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>

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

@@ -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;
}
}

40
src/app/rb-custom-inputs/rb-custom-inputs.module.ts
View File

@@ -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 { }

4
src/app/rb-custom-inputs/rb-icon-button/rb-icon-button.component.html
View File

@@ -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>

6
src/app/rb-custom-inputs/rb-icon-button/rb-icon-button.component.scss
View File

@@ -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;
}

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

@@ -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 {
}
}

6
src/app/rb-custom-inputs/rb-table/rb-table.component.html
View File

@@ -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>

48
src/app/rb-custom-inputs/rb-table/rb-table.component.scss
View File

@@ -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;
}
}

18
src/app/rb-custom-inputs/rb-table/rb-table.component.ts
View File

@@ -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 {
}
}