Feature/introduce readonly attribute in tags selector component (#4301)

* feat(ui): introduce readonly attribute

* Update changelog

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

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -366,33 +366,12 @@
       </mat-tab>
     </mat-tab-group>
 
-    <div
-      class="row"
-      [ngClass]="{
-        'd-none': !data.hasPermissionToUpdateOrder
-      }"
-    >
-      <div class="col">
     <gf-tags-selector
+      [readonly]="!data.hasPermissionToUpdateOrder"
       [tags]="activityForm.get('tags')?.value"
       [tagsAvailable]="tagsAvailable"
       (tagsChanged)="onTagsChanged($event)"
     />
-      </div>
-    </div>
-
-    @if (!data.hasPermissionToUpdateOrder && tagsAvailable?.length > 0) {
-      <div class="row">
-        <div class="col">
-          <div class="h5" i18n>Tags</div>
-          <mat-chip-listbox>
-            @for (tag of tags; track tag) {
-              <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>
-            }
-          </mat-chip-listbox>
-        </div>
-      </div>
-    }
 
     @if (
       dataSource?.data.length > 0 &&

libs/ui/src/lib/tags-selector/tags-selector.component.html

@@ -1,3 +1,17 @@
+<div class="row">
+  <div class="col">
+    @if (readonly) {
+      <div class="h5" i18n>Tags</div>
+      @if (tags?.length > 0) {
+        <mat-chip-listbox>
+          @for (tag of tags; track tag) {
+            <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>
+          }
+        </mat-chip-listbox>
+      } @else {
+        <div>-</div>
+      }
+    } @else {
       <mat-form-field appearance="outline" class="w-100 without-hint">
         <mat-label i18n>Tags</mat-label>
         <mat-chip-grid #tagsChipList>
@@ -30,3 +44,6 @@
           }
         </mat-autocomplete>
       </mat-form-field>
+    }
+  </div>
+</div>

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: [],

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[];