openaire-library/sharedComponents/input/input.component.ts

134 lines
5.2 KiB
TypeScript

import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from "@angular/core";
import {AbstractControl} from "@angular/forms";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Subscription} from "rxjs";
import {MatSelect} from "@angular/material/select";
export interface Option {
icon?: string,
iconClass?: string,
value: any,
label: string
}
@Component({
selector: '[dashboard-input]',
template: `
<div *ngIf="label && type != 'checkbox'" class="uk-text-bold uk-form-label uk-margin-small-bottom">{{label + (required ? ' *' : '')}}</div>
<div *ngIf="hint" class="uk-margin-bottom uk-text-small uk-form-hint">{{hint}}</div>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<ng-content></ng-content>
<div [class.uk-hidden]="hideControl" class="uk-width-expand@m uk-position-relative" [class.uk-flex-first]="!extraLeft">
<ng-template [ngIf]="icon && formControl.enabled">
<span class="uk-text-muted" [ngClass]="iconLeft?('left'):'right'">
<icon [name]="icon"></icon>
</span>
</ng-template>
<ng-template [ngIf]="formControl.disabled">
<span class="uk-text-muted left">
<icon [name]="'lock'"></icon>
</span>
</ng-template>
<ng-template [ngIf]="type === 'text'">
<input class="uk-input input-box uk-text-small" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''" [placeholder]="placeholder" [formControl]="formControl"
[class.uk-form-danger]="formControl.invalid && formControl.touched">
</ng-template>
<ng-template [ngIf]="type === 'textarea'">
<textarea class="uk-textarea input-box uk-text-small" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''" [rows]="rows" [placeholder]="placeholder"
[formControl]="formControl" [class.uk-form-danger]="formControl.invalid && formControl.touched">
</textarea>
</ng-template>
<ng-template [ngIf]="type === 'select'">
<div class="input-box" [attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''" [class.clickable]="formControl.enabled" [class.uk-form-danger]="formControl.invalid && formControl.touched" (click)="openSelect()">
<mat-form-field class="uk-width-1-1">
<mat-select #select *ngIf="type === 'select'" [required]="required" [value]="null"
(openedChange)="stopPropagation()" [formControl]="formControl" [disableOptionCentering]="true">
<mat-option *ngIf="placeholder" class="uk-hidden" [value]="''">{{placeholder}}</mat-option>
<mat-option *ngFor="let option of options" [value]="option.value">
{{option.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-template>
<span *ngIf="formControl.invalid && formControl.errors.error" class="uk-text-small uk-text-danger">{{formControl.errors.error}}</span>
<span *ngIf="warning" class="uk-text-small uk-text-warning">{{warning}}</span>
</div>
</div>
<mat-checkbox *ngIf="type === 'checkbox'" [formControl]="formControl">{{label}}</mat-checkbox>
`,
styleUrls: ['input.component.css']
})
export class InputComponent implements OnInit, OnDestroy, OnChanges {
@Input('formInput') formControl: AbstractControl;
@Input('type') type: 'text' | 'textarea' | 'select' | 'checkbox' = 'text';
@Input('label') label: string;
@Input('rows') rows: number = 3;
@Input('options') options: Option[];
@Input('hint') hint = null;
@Input('placeholder') placeholder = '';
@ViewChild('select') select: MatSelect;
@Input() extraLeft: boolean = true;
@Input() hideControl: boolean = false;
@Input() icon: string = null;
@Input() iconLeft: boolean = false;
@Input() warning: string = null;
public required: boolean = false;
private initValue: any;
private subscriptions: any[] = [];
constructor() {
}
ngOnInit(): void {
this.reset();
}
ngOnChanges(changes: SimpleChanges) {
if(changes.formControl) {
this.reset();
}
}
reset() {
this.unsubscribe();
this.initValue = HelperFunctions.copy(this.formControl.value);
if (this.formControl && this.formControl.validator) {
let validator = this.formControl.validator({} as AbstractControl);
this.required = (validator && validator.required);
}
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
value = (value === '')?null:value;
if(this.initValue === value || (this.initValue === '' && value === null)) {
this.formControl.markAsPristine();
}
}));
if (!this.formControl.value) {
this.formControl.setValue('');
}
}
unsubscribe() {
this.subscriptions.forEach(subscription => {
if(subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
openSelect() {
if(this.select) {
this.select.open();
}
}
ngOnDestroy(): void {
this.unsubscribe();
}
stopPropagation() {
event.stopPropagation();
}
}