diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts index 4fe3c63ec..33698acfb 100644 --- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts +++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts @@ -573,11 +573,6 @@ export class GfCreateOrUpdateActivityDialog implements OnDestroy { } } - public onTagsChanged(tags: Tag[]) { - this.activityForm.get('tags').setValue(tags); - this.activityForm.get('tags').markAsDirty(); - } - public ngOnDestroy() { this.unsubscribeSubject.next(); this.unsubscribeSubject.complete(); diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html index d7f466743..d6c14cfdc 100644 --- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html +++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html @@ -322,10 +322,9 @@
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts index 50faab651..158dd70fd 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts @@ -14,7 +14,13 @@ import { signal, ViewChild } from '@angular/core'; -import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { + ControlValueAccessor, + FormControl, + FormsModule, + NG_VALUE_ACCESSOR, + ReactiveFormsModule +} from '@angular/forms'; import { MatAutocompleteModule, MatAutocompleteSelectedEvent @@ -40,12 +46,21 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs'; MatInputModule, ReactiveFormsModule ], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: GfTagsSelectorComponent, + multi: true + } + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], selector: 'gf-tags-selector', styleUrls: ['./tags-selector.component.scss'], templateUrl: 'tags-selector.component.html' }) -export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { +export class GfTagsSelectorComponent + implements OnInit, OnChanges, OnDestroy, ControlValueAccessor +{ @Input() hasPermissionToCreateTag = false; @Input() readonly = false; @Input() tags: Tag[]; @@ -61,6 +76,13 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { public readonly tagsSelected = signal([]); private unsubscribeSubject = new Subject(); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + private onChange = (_value: Tag[]): void => { + // ControlValueAccessor onChange callback + }; + private onTouched = (): void => { + // ControlValueAccessor onTouched callback + }; public constructor() { this.tagInputControl.valueChanges @@ -99,7 +121,10 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { return [...(tags ?? []), tag]; }); - this.tagsChanged.emit(this.tagsSelected()); + const newTags = this.tagsSelected(); + this.tagsChanged.emit(newTags); + this.onChange(newTags); + this.onTouched(); this.tagInput.nativeElement.value = ''; this.tagInputControl.setValue(undefined); } @@ -111,7 +136,10 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { }); }); - this.tagsChanged.emit(this.tagsSelected()); + const newTags = this.tagsSelected(); + this.tagsChanged.emit(newTags); + this.onChange(newTags); + this.onTouched(); this.updateFilters(); } @@ -120,6 +148,28 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { this.unsubscribeSubject.complete(); } + // ControlValueAccessor implementation + writeValue(value: Tag[]): void { + this.tagsSelected.set(value || []); + this.updateFilters(); + } + + registerOnChange(fn: (value: Tag[]) => void): void { + this.onChange = fn; + } + + registerOnTouched(fn: () => void): void { + this.onTouched = fn; + } + + setDisabledState?(isDisabled: boolean): void { + if (isDisabled) { + this.tagInputControl.disable(); + } else { + this.tagInputControl.enable(); + } + } + private filterTags(query: string = ''): Tag[] { const tags = this.tagsSelected() ?? []; const tagIds = tags.map(({ id }) => {