diff --git a/libs/ui/src/lib/tags-selector/interfaces/interfaces.ts b/libs/ui/src/lib/tags-selector/interfaces/interfaces.ts new file mode 100644 index 000000000..34f9a453f --- /dev/null +++ b/libs/ui/src/lib/tags-selector/interfaces/interfaces.ts @@ -0,0 +1,7 @@ +import { Tag } from '@prisma/client'; + +export interface NewTag extends Omit { + id: undefined; +} + +export type SelectedTag = Tag | NewTag; 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 ee33697b9..36e17f9c1 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts @@ -32,6 +32,8 @@ import { addIcons } from 'ionicons'; import { addCircleOutline, closeOutline } from 'ionicons/icons'; import { BehaviorSubject, Subject } from 'rxjs'; +import { SelectedTag } from './interfaces/interfaces'; + @Component({ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ @@ -61,13 +63,15 @@ export class GfTagsSelectorComponent { @Input() hasPermissionToCreateTag = false; @Input() readonly = false; - @Input() tags: Tag[]; - @Input() tagsAvailable: Tag[]; + @Input() tags: SelectedTag[]; + @Input() tagsAvailable: SelectedTag[]; - public readonly filteredOptions: Subject = new BehaviorSubject([]); + public readonly filteredOptions: Subject = new BehaviorSubject( + [] + ); public readonly separatorKeysCodes: number[] = [COMMA, ENTER]; public readonly tagInputControl = new FormControl(''); - public readonly tagsSelected = signal([]); + public readonly tagsSelected = signal([]); private readonly tagInput = viewChild.required>('tagInput'); @@ -99,7 +103,7 @@ export class GfTagsSelectorComponent if (!tag && this.hasPermissionToCreateTag) { tag = { - id: '', + id: undefined, name: event.option.value as string, userId: null }; @@ -132,7 +136,7 @@ export class GfTagsSelectorComponent this.updateFilters(); } - public registerOnChange(fn: (value: Tag[]) => void) { + public registerOnChange(fn: (value: SelectedTag[]) => void) { this.onChange = fn; } @@ -148,12 +152,12 @@ export class GfTagsSelectorComponent } } - public writeValue(value: Tag[]) { + public writeValue(value: SelectedTag[]) { this.tagsSelected.set(value || []); this.updateFilters(); } - private filterTags(query: string = ''): Tag[] { + private filterTags(query: string = ''): SelectedTag[] { const tags = this.tagsSelected() ?? []; const tagIds = tags.map(({ id }) => { return id; @@ -167,7 +171,7 @@ export class GfTagsSelectorComponent } // eslint-disable-next-line @typescript-eslint/no-unused-vars - private onChange = (_value: Tag[]): void => { + private onChange = (_value: SelectedTag[]): void => { // ControlValueAccessor onChange callback };