diff --git a/notifications/notify-form/notify-form.component.ts b/notifications/notify-form/notify-form.component.ts index ed374e65..aa84fb74 100644 --- a/notifications/notify-form/notify-form.component.ts +++ b/notifications/notify-form/notify-form.component.ts @@ -42,12 +42,12 @@ declare var UIkit;
+ type="textarea" class="uk-margin-top" inputClass="flat">
diff --git a/sharedComponents/advanced-search-input/advanced-search-input.component.ts b/sharedComponents/advanced-search-input/advanced-search-input.component.ts new file mode 100644 index 00000000..542461ca --- /dev/null +++ b/sharedComponents/advanced-search-input/advanced-search-input.component.ts @@ -0,0 +1,48 @@ +import { + AfterContentInit, + Component, + ContentChildren, + EventEmitter, + Input, + OnDestroy, + Output, + QueryList +} from "@angular/core"; +import {InputComponent} from "../input/input.component"; + +@Component({ + selector: 'advanced-search-input', + template: ` +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ ` +}) +export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy { + @ContentChildren(InputComponent) inputs: QueryList + @Input() disabled: boolean = false; + @Output() searchEmitter: EventEmitter = new EventEmitter(); + + constructor() { + } + + ngAfterContentInit() { + this.inputs.forEach(input => { + input.inputClass = 'advanced'; + }); + } + + ngOnDestroy() { + } +} diff --git a/sharedComponents/advanced-search-input/advanced-search-input.module.ts b/sharedComponents/advanced-search-input/advanced-search-input.module.ts new file mode 100644 index 00000000..c926c184 --- /dev/null +++ b/sharedComponents/advanced-search-input/advanced-search-input.module.ts @@ -0,0 +1,13 @@ +import {NgModule} from "@angular/core"; +import {CommonModule} from "@angular/common"; +import {AdvancedSearchInputComponent} from "./advanced-search-input.component"; +import {IconsModule} from "../../utils/icons/icons.module"; + +@NgModule({ + imports: [CommonModule, IconsModule], + declarations: [AdvancedSearchInputComponent], + exports: [AdvancedSearchInputComponent] +}) +export class AdvancedSearchInputModule { + +} diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 8a451fc4..2042a7ec 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -1,5 +1,5 @@ import { - AfterViewInit, + AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, @@ -18,6 +18,8 @@ import {Subscription} from "rxjs"; import {EnvProperties} from "../../utils/properties/env-properties"; import {properties} from "../../../../environments/environment"; +export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'chips'; + export interface Option { icon?: string, iconClass?: string, @@ -39,12 +41,12 @@ declare var UIkit; @Component({ selector: '[dashboard-input], [input]', template: ` -
-
+
@@ -58,16 +60,14 @@ declare var UIkit; [rows]="rows" [formControl]="formAsControl"> -
{{getLabel(formControl.value)}}
+
{{getLabel(formControl.value)}}
+
{{placeholderInfo.label}}
-
-
{{getLabel(formControl.value)}}
-
- +
@@ -76,23 +76,25 @@ declare var UIkit;
{{getLabel(chip.value)}} -
+ [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint" + [formControl]="searchControl">
-
- - + +
@@ -101,10 +103,11 @@ declare var UIkit;
-
+
@@ -153,7 +156,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @Input() panelClass: string = null; /** Basic information */ @Input('formInput') formControl: AbstractControl; - @Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'chips' = 'text'; + @Input('type') type: InputType = 'text'; + @Input() validators: ValidatorFn[] | ValidatorFn; + @Input() disabled: boolean = false; @Input() value: any | any[]; @Output() valueChange = new EventEmitter(); @Input('hint') hint: string; @@ -165,6 +170,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang /** Select | Autocomplete | chips available options */ @Input('options') options: Option[] = []; @Input() tooltip: boolean = false; + @Input() selectArrow: string = 'arrow_drop_down'; /** Chips && Autocomplete*/ public filteredOptions: Option[] = []; public searchControl: FormControl; @@ -175,8 +181,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang /** Chip options */ @Input() addExtraChips: boolean = false; @Input() showOptionsOnEmpty: boolean = true; - @Input() validators: ValidatorFn[] | ValidatorFn; - @Input() disabled: boolean = false; @Output() focusEmitter: EventEmitter = new EventEmitter(); /** LogoUrl information */ public secure: boolean = true; @@ -194,10 +198,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @Input() set placeholder(placeholder: string | Placeholder) { - if(typeof placeholder === 'string') { + if (typeof placeholder === 'string') { this.placeholderInfo = {label: placeholder, static: false}; } else { - if(placeholder.static && (this.type === 'select' || this.type === 'autocomplete' || this.type === 'chips' || this.hint)) { + if (placeholder.static && (this.type === 'autocomplete' || this.type === 'chips' || this.hint)) { placeholder.static = false; console.debug('Static placeholder is not available in this type of input and if hint is available.'); } @@ -205,7 +209,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } - constructor(private elementRef: ElementRef) { + constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) { if (elementRef.nativeElement.hasAttribute('dashboard-input') && this.properties.environment === "development") { console.warn("'dashboard-input' selector is deprecated; use 'input' instead."); } @@ -213,7 +217,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @HostListener('document:click', ['$event']) click(event) { - this.focus(this.inputBox && this.inputBox.nativeElement.contains(event.target)); + this.focus(this.inputBox && this.inputBox.nativeElement.contains(event.target), event); } ngOnInit() { @@ -238,6 +242,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } ngOnChanges(changes: SimpleChanges) { + if(changes.value && this.formControl) { + this.formControl.setValue(this.value); + } if (changes.formControl || changes.validators || changes.options) { this.reset(); } @@ -274,7 +281,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.filteredOptions = this.filter(''); } if (this.type === 'chips' || this.type === 'autocomplete') { - this.searchControl = new FormControl('', this.validators); + if (!this.searchControl) { + this.searchControl = new FormControl('', this.validators); + } + this.searchControl.setValue(this.getLabel(this.formControl.value)); this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => { this.filteredOptions = this.filter(value); if (this.focused) { @@ -301,7 +311,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.formControl.markAsDirty(); } if (this.searchControl) { - this.searchControl.setValue(null); + this.searchControl.setValue(this.type === 'autocomplete' ? this.getLabel(this.formControl.value) : null); } this.value = this.formControl.value; this.valueChange.emit(this.value); @@ -323,12 +333,12 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang event.stopPropagation(); } - remove(index: number) { + remove(index: number, event) { this.formAsArray.removeAt(index); this.formAsArray.markAsDirty(); this.focus(true); this.searchControl.setValue(''); - this.stopPropagation(); + event.stopPropagation(); } private filter(value: string): Option[] { @@ -340,12 +350,15 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang return (this.showOptionsOnEmpty) ? options : []; } const filterValue = value.toString().toLowerCase(); + console.log(options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1)); return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1); } - add() { + add(event) { if (this.addExtraChips && this.searchControl.value && this.searchControl.valid) { - this.stopPropagation(); + if (event) { + event.stopPropagation(); + } this.formAsArray.push(new FormControl(this.searchControl.value, this.validators)); this.formAsArray.markAsDirty(); this.focus(true); @@ -355,11 +368,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang getLabel(value: any) { let option = this.options.find(option => HelperFunctions.equals(option.value, value)); - return (option) ? option.label : value; + return (option) ? option.label : (value); } - focus(value: boolean) { - if(this.focused) { + focus(value: boolean, event = null) { + if (this.focused) { this.formControl.markAsTouched(); } this.focused = value; @@ -379,7 +392,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } else { this.open(false); if (this.searchControl) { - this.add(); + this.searchControl.setValue(this.getLabel(this.formControl.value)); + this.add(event); } } this.focusEmitter.emit(this.focused); @@ -387,15 +401,14 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang open(value: boolean) { this.opened = value && this.formControl.enabled; - setTimeout(() => { - if(this.optionBox) { - if (this.opened) { - UIkit.dropdown(this.optionBox.nativeElement).show(); - } else { - UIkit.dropdown(this.optionBox.nativeElement).hide(); - } + this.cdr.detectChanges(); + if (this.optionBox) { + if (this.opened) { + UIkit.dropdown(this.optionBox.nativeElement).show(); + } else { + UIkit.dropdown(this.optionBox.nativeElement).hide(); } - }, 0); + } } resetSearch(event: any) { @@ -407,7 +420,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } selectOption(option: Option, event) { - if(this.formControl.enabled) { + if (this.formControl.enabled) { if (this.formAsControl) { this.formAsControl.setValue(option.value); } else if (this.formAsArray) { diff --git a/sharedComponents/search-input/search-input.module.ts b/sharedComponents/search-input/search-input.module.ts index d81f2259..6ffab892 100644 --- a/sharedComponents/search-input/search-input.module.ts +++ b/sharedComponents/search-input/search-input.module.ts @@ -3,16 +3,10 @@ import {SharedModule} from '../../shared/shared.module'; import {SearchInputComponent} from './search-input.component'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {IconsModule} from '../../utils/icons/icons.module'; -import {IconsService} from '../../utils/icons/icons.service'; -import {close, search} from '../../utils/icons/icons'; @NgModule({ imports: [SharedModule, MatAutocompleteModule, IconsModule], declarations: [SearchInputComponent], exports: [SearchInputComponent] }) -export class SearchInputModule { - constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([search, close]); - } -} +export class SearchInputModule {} diff --git a/utils/icons/icons.component.ts b/utils/icons/icons.component.ts index 8175c59a..c91b97b3 100644 --- a/utils/icons/icons.component.ts +++ b/utils/icons/icons.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core"; +import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core"; import {IconsService} from "./icons.service"; export interface StopRule {