diff --git a/CHANGELOG.md b/CHANGELOG.md index 62a8ace5..4cae16ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,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 - Added global styles to the _Storybook_ setup ## 2.138.0 - 2025-02-08 diff --git a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html index a20c9af7..d820ddf7 100644 --- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html +++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html @@ -366,33 +366,12 @@ -
-
- -
-
- - @if (!data.hasPermissionToUpdateOrder && tagsAvailable?.length > 0) { -
-
-
Tags
- - @for (tag of tags; track tag) { - {{ tag.name }} - } - -
-
- } + @if ( dataSource?.data.length > 0 && 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 55f8a39f..1b681772 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.html +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.html @@ -1,32 +1,49 @@ - - Tags - - @for (tag of tagsSelected(); track tag.id) { - - {{ tag.name }} - - +
+
+ @if (readonly) { +
Tags
+ @if (tags?.length > 0) { + + @for (tag of tags; track tag) { + {{ tag.name }} + } + + } @else { +
-
+ } + } @else { + + Tags + + @for (tag of tagsSelected(); track tag.id) { + + {{ tag.name }} + + + } + + + + @for (tag of filteredOptions | async; track tag.id) { + + {{ tag.name }} + + } + + } - - - - @for (tag of filteredOptions | async; track tag.id) { - - {{ tag.name }} - - } - - +
+
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 c1adf128..4fd0f7e7 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,25 @@ export const Default: Story = { } }; +export const Readonly: Story = { + args: { + readonly: true, + tags: [ + { + id: 'EMERGENCY_FUND', + name: 'Emergency Fund', + userId: null + }, + { + id: 'RETIREMENT_FUND', + name: 'Retirement Fund', + userId: null + } + ], + tagsAvailable: OPTIONS + } +}; + export const WithoutValue: Story = { args: { tags: [], 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 77c776ec..6b59d53f 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() readonly = false; @Input() tags: Tag[]; @Input() tagsAvailable: Tag[];