diff --git a/CHANGELOG.md b/CHANGELOG.md index 4cae16ca..295158c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Extended the tags selector component by a `readonly` attribute +- Extended the tags selector component to support creating custom tags - Added global styles to the _Storybook_ setup ## 2.138.0 - 2025-02-08 diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.html b/libs/ui/src/lib/tags-selector/tags-selector.component.html index 1b681772..4f392942 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.html +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.html @@ -42,6 +42,17 @@ {{ tag.name }} } + + @if (hasPermissionToCreateTags && tagInputControl.value) { + + + + Create "{{ + tagInputControl.value.trim() + }}" + + + } } diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts index 4fd0f7e7..8d1431b4 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts @@ -47,6 +47,20 @@ export const Default: Story = { } }; +export const CreateCustomTags: Story = { + args: { + hasPermissionToCreateTags: true, + tags: [ + { + id: 'EMERGENCY_FUND', + name: 'Emergency Fund', + userId: null + } + ], + tagsAvailable: OPTIONS + } +}; + export const Readonly: Story = { args: { readonly: true, 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 6b59d53f..611c1e93 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts @@ -42,6 +42,7 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs'; templateUrl: 'tags-selector.component.html' }) export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { + @Input() hasPermissionToCreateTags = false; @Input() readonly = false; @Input() tags: Tag[]; @Input() tagsAvailable: Tag[]; @@ -76,10 +77,18 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { } public onAddTag(event: MatAutocompleteSelectedEvent) { - const tag = this.tagsAvailable.find(({ id }) => { + let tag = this.tagsAvailable.find(({ id }) => { return id === event.option.value; }); + if (!tag && this.hasPermissionToCreateTags) { + tag = { + id: undefined, + name: event.option.value as string, + userId: null + }; + } + this.tagsSelected.update((tags) => { return [...(tags ?? []), tag]; });