import { Component, Input, forwardRef, ViewChild } from '@angular/core';
import { LayoutItemType } from '../../models/layout-item-type.enum';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { SelectItem } from '../../models/select-item.model';
import { FileHelper } from '../../utils/file.helper';
import { InputFileComponent } from 'ngx-input-file';
import { environment } from '../../../../environments/environment';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styles: [],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true
}
]
})
export class InputComponent implements ControlValueAccessor {
prod = environment.production;
@Input()
editable = true;
lastRteItemsDev = ['|', 'ClearFormat', 'Print', 'SourceCode'];
lastRteItemsProd = ['|', 'ClearFormat', 'Print'];
public tools = {
items: [
'Undo', 'Redo', '|',
'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
'SubScript', 'SuperScript', '|',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
'Indent', 'Outdent', '|', 'CreateLink',
...(this.prod ? this.lastRteItemsProd : this.lastRteItemsDev)
]
};
public quickTools = {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', '-', 'Display', 'AltText', 'Dimension'
]
};
@Input()
placeholder: string;
@Input()
label: string;
@Input()
readOnly = false;
@Input()
itemId: string;
@Input()
type: string;
// Dropdowns
@Input()
dataSource: SelectItem[];
// Dates
@Input()
start = 'Month';
@Input()
max = new Date(2099, 11, 31);
@Input()
min = new Date(1900, 0, 1);
fields = { text: 'text', value: 'value' };
// Value accesor
value: string;
isDisabled: boolean;
@ViewChild('inputFile', { static: false })
inputFile: InputFileComponent;
onChange = (_: any) => { };
onTouch = () => { };
isDropDown = () => this.type === LayoutItemType.DROP_DOWN;
isSelect = () => this.type === LayoutItemType.SELECT;
isTextBox = () => this.type === LayoutItemType.STRING;
isTextArea = () => this.type === LayoutItemType.LARGE_STRING;
isNumericTextBox = () => this.type === LayoutItemType.NUMBER;
isDate = () => this.type === LayoutItemType.DATE;
isOnlyDate = () => this.type === LayoutItemType.ONLY_DATE;
isBoolean = () => this.type === LayoutItemType.BOOLEAN;
isImage = () => this.type === LayoutItemType.IMAGE;
isRichTextEditor = () => this.type === LayoutItemType.HTML;
isAny = () => this.type === LayoutItemType.ANY;
constructor() { }
async onInput(value: any) {
if (this.isImage() && value)
value = await FileHelper.toBase64(value.file);
this.value = value;
this.onTouch();
this.onChange(this.value);
}
async writeValue(value: any) {
if (this.isImage() && value) {
const file = await FileHelper.fromBase64(value);
const filePreview = [{
file,
preview: value.split('::')[1],
}];
this.inputFile.files = filePreview;
}
this.value = value;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
setDisabledState(isDisabled: boolean): void {
this.isDisabled = true;
}
}
