Commit 476035e993c7e96a228f6897caefef83316f8bc4
1 parent
a3bd6efa
UI: Add entity autocomplete output EntityChange
Showing
1 changed file
with
24 additions
and
5 deletions
@@ -14,7 +14,17 @@ | @@ -14,7 +14,17 @@ | ||
14 | /// limitations under the License. | 14 | /// limitations under the License. |
15 | /// | 15 | /// |
16 | 16 | ||
17 | -import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core'; | 17 | +import { |
18 | + AfterViewInit, | ||
19 | + Component, | ||
20 | + ElementRef, | ||
21 | + EventEmitter, | ||
22 | + forwardRef, | ||
23 | + Input, | ||
24 | + OnInit, | ||
25 | + Output, | ||
26 | + ViewChild | ||
27 | +} from '@angular/core'; | ||
18 | import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; | 28 | import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
19 | import { Observable } from 'rxjs'; | 29 | import { Observable } from 'rxjs'; |
20 | import { map, mergeMap, share, tap } from 'rxjs/operators'; | 30 | import { map, mergeMap, share, tap } from 'rxjs/operators'; |
@@ -28,6 +38,7 @@ import { EntityService } from '@core/http/entity.service'; | @@ -28,6 +38,7 @@ import { EntityService } from '@core/http/entity.service'; | ||
28 | import { coerceBooleanProperty } from '@angular/cdk/coercion'; | 38 | import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
29 | import { getCurrentAuthUser } from '@core/auth/auth.selectors'; | 39 | import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
30 | import { Authority } from '@shared/models/authority.enum'; | 40 | import { Authority } from '@shared/models/authority.enum'; |
41 | +import { isEqual } from '@core/utils'; | ||
31 | 42 | ||
32 | @Component({ | 43 | @Component({ |
33 | selector: 'tb-entity-autocomplete', | 44 | selector: 'tb-entity-autocomplete', |
@@ -43,7 +54,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | @@ -43,7 +54,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | ||
43 | 54 | ||
44 | selectEntityFormGroup: FormGroup; | 55 | selectEntityFormGroup: FormGroup; |
45 | 56 | ||
46 | - modelValue: string | null; | 57 | + modelValue: string | EntityId | null; |
47 | 58 | ||
48 | entityTypeValue: EntityType | AliasEntityType; | 59 | entityTypeValue: EntityType | AliasEntityType; |
49 | 60 | ||
@@ -95,6 +106,9 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | @@ -95,6 +106,9 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | ||
95 | @Input() | 106 | @Input() |
96 | disabled: boolean; | 107 | disabled: boolean; |
97 | 108 | ||
109 | + @Output() | ||
110 | + entityChanged = new EventEmitter<BaseData<EntityId>>(); | ||
111 | + | ||
98 | @ViewChild('entityInput', {static: true}) entityInput: ElementRef; | 112 | @ViewChild('entityInput', {static: true}) entityInput: ElementRef; |
99 | 113 | ||
100 | entityText: string; | 114 | entityText: string; |
@@ -135,7 +149,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | @@ -135,7 +149,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | ||
135 | } else { | 149 | } else { |
136 | modelValue = value.id.id; | 150 | modelValue = value.id.id; |
137 | } | 151 | } |
138 | - this.updateView(modelValue); | 152 | + this.updateView(modelValue, value); |
139 | if (value === null) { | 153 | if (value === null) { |
140 | this.clear(); | 154 | this.clear(); |
141 | } | 155 | } |
@@ -265,10 +279,12 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | @@ -265,10 +279,12 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | ||
265 | (entity) => { | 279 | (entity) => { |
266 | this.modelValue = entity.id.id; | 280 | this.modelValue = entity.id.id; |
267 | this.selectEntityFormGroup.get('entity').patchValue(entity, {emitEvent: false}); | 281 | this.selectEntityFormGroup.get('entity').patchValue(entity, {emitEvent: false}); |
282 | + this.entityChanged.emit(entity); | ||
268 | }, | 283 | }, |
269 | () => { | 284 | () => { |
270 | this.modelValue = null; | 285 | this.modelValue = null; |
271 | this.selectEntityFormGroup.get('entity').patchValue('', {emitEvent: false}); | 286 | this.selectEntityFormGroup.get('entity').patchValue('', {emitEvent: false}); |
287 | + this.entityChanged.emit(null); | ||
272 | if (value !== null) { | 288 | if (value !== null) { |
273 | this.propagateChange(this.modelValue); | 289 | this.propagateChange(this.modelValue); |
274 | } | 290 | } |
@@ -280,10 +296,12 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | @@ -280,10 +296,12 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | ||
280 | (entity) => { | 296 | (entity) => { |
281 | this.modelValue = entity.id.id; | 297 | this.modelValue = entity.id.id; |
282 | this.selectEntityFormGroup.get('entity').patchValue(entity, {emitEvent: false}); | 298 | this.selectEntityFormGroup.get('entity').patchValue(entity, {emitEvent: false}); |
299 | + this.entityChanged.emit(entity); | ||
283 | }, | 300 | }, |
284 | () => { | 301 | () => { |
285 | this.modelValue = null; | 302 | this.modelValue = null; |
286 | this.selectEntityFormGroup.get('entity').patchValue('', {emitEvent: false}); | 303 | this.selectEntityFormGroup.get('entity').patchValue('', {emitEvent: false}); |
304 | + this.entityChanged.emit(null); | ||
287 | if (value !== null) { | 305 | if (value !== null) { |
288 | this.propagateChange(this.modelValue); | 306 | this.propagateChange(this.modelValue); |
289 | } | 307 | } |
@@ -311,10 +329,11 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | @@ -311,10 +329,11 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit | ||
311 | this.selectEntityFormGroup.get('entity').patchValue('', {emitEvent: false}); | 329 | this.selectEntityFormGroup.get('entity').patchValue('', {emitEvent: false}); |
312 | } | 330 | } |
313 | 331 | ||
314 | - updateView(value: string | null) { | ||
315 | - if (this.modelValue !== value) { | 332 | + updateView(value: string | EntityId | null, entity: BaseData<EntityId> | null) { |
333 | + if (!isEqual(this.modelValue, value)) { | ||
316 | this.modelValue = value; | 334 | this.modelValue = value; |
317 | this.propagateChange(this.modelValue); | 335 | this.propagateChange(this.modelValue); |
336 | + this.entityChanged.emit(entity); | ||
318 | } | 337 | } |
319 | } | 338 | } |
320 | 339 |