Revision 57697
Added by Konstantinos Triantafyllou over 4 years ago
| input.component.ts | ||
|---|---|---|
| 1 | 1 |
import {Component, Input, OnDestroy, OnInit} from "@angular/core";
|
| 2 | 2 |
import {Option} from "../../../utils/indicator-utils";
|
| 3 |
import {AbstractControl, FormControl} from "@angular/forms";
|
|
| 3 | 4 |
|
| 4 | 5 |
@Component({
|
| 5 | 6 |
selector: '[dashboard-input]', |
| 6 | 7 |
template: ` |
| 7 |
<div class="md-input-wrapper" |
|
| 8 |
[class.md-input-filled]="formControl.value !== ''" |
|
| 9 |
[class.md-input-focus]="formControl.touched" |
|
| 10 |
[class.md-input-wrapper-danger]="formControl.invalid && formControl.dirty"> |
|
| 11 |
<label>{{label}}</label>
|
|
| 12 |
<input *ngIf="type === 'text' || type === 'number'" [type]="type" class="md-input" |
|
| 13 |
focus-directive [formInput]="formControl" |
|
| 14 |
[formControl]="formControl" |
|
| 15 |
[class.md-input-danger]="formControl.invalid && formControl.dirty"> |
|
| 16 |
<textarea *ngIf="type === 'textarea'" type="text" class="md-input no_autosize" |
|
| 17 |
focus-directive [formInput]="formControl" |
|
| 18 |
[rows]="rows" [formControl]="formControl"></textarea> |
|
| 19 |
<span class="md-input-bar"></span> |
|
| 20 |
<select *ngIf="type === 'select'" class="md-input uk-select" |
|
| 21 |
focus-directive [formInput]="formControl" |
|
| 22 |
[formControl]="formControl" |
|
| 23 |
[class.md-input-danger]="formControl.invalid && formControl.dirty"> |
|
| 24 |
<option [value]="option.value" *ngFor="let option of options"> |
|
| 8 |
<mat-form-field class="uk-width-1-1 uk-padding-remove"> |
|
| 9 |
<input *ngIf="type === 'text'" matInput [placeholder]="label" |
|
| 10 |
[formControl]="formControl" [required]="required"> |
|
| 11 |
<textarea *ngIf="type === 'textarea'" [rows]="rows" matInput [placeholder]="label" [formControl]="formControl"></textarea> |
|
| 12 |
<mat-select *ngIf="type === 'select'" [placeholder]="label" [formControl]="formControl" [disableOptionCentering]="true"> |
|
| 13 |
<mat-option *ngFor="let option of options" [value]="option.value"> |
|
| 25 | 14 |
{{option.label}}
|
| 26 |
</option> |
|
| 27 |
</select> |
|
| 28 |
</div>` |
|
| 15 |
</mat-option> |
|
| 16 |
</mat-select> |
|
| 17 |
</mat-form-field> |
|
| 18 |
` |
|
| 29 | 19 |
}) |
| 30 | 20 |
export class InputComponent implements OnInit, OnDestroy {
|
| 31 |
@Input('formInput') formControl: any;
|
|
| 21 |
@Input('formInput') formControl: FormControl;
|
|
| 32 | 22 |
@Input('type') type: string = 'text';
|
| 33 | 23 |
@Input('label') label: string;
|
| 34 | 24 |
@Input('rows') rows: number = 3;
|
| ... | ... | |
| 42 | 32 |
|
| 43 | 33 |
ngOnDestroy(): void {
|
| 44 | 34 |
} |
| 35 |
|
|
| 36 |
public get required(): boolean {
|
|
| 37 |
return this.formControl && this.formControl.validator |
|
| 38 |
&& this.formControl.validator(this.formControl) |
|
| 39 |
&& this.formControl.validator(this.formControl).required; |
|
| 40 |
} |
|
| 45 | 41 |
} |
Also available in: Unified diff
[Monitor Dashboard]: 1. Change inputs to materials. 2. Add fonts. 3. Add uikit.js on index 4. Add reorder functionality on indicators. 5. Fix height of header to 70px