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
+    <gf-tags-selector
-      class="row"
+      [readonly]="!data.hasPermissionToUpdateOrder"
-      [ngClass]="{
+      [tags]="activityForm.get('tags')?.value"
-        'd-none': !data.hasPermissionToUpdateOrder
+      [tagsAvailable]="tagsAvailable"
-      }"
+      (tagsChanged)="onTagsChanged($event)"
-    >
+    />
-      <div class="col">
-        <gf-tags-selector
-          [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,32 +1,49 @@
-<mat-form-field appearance="outline" class="w-100 without-hint">
+<div class="row">
-  <mat-label i18n>Tags</mat-label>
+  <div class="col">
-  <mat-chip-grid #tagsChipList>
+    @if (readonly) {
-    @for (tag of tagsSelected(); track tag.id) {
+      <div class="h5" i18n>Tags</div>
-      <mat-chip-row
+      @if (tags?.length > 0) {
-        matChipRemove
+        <mat-chip-listbox>
-        [removable]="true"
+          @for (tag of tags; track tag) {
-        (removed)="onRemoveTag(tag)"
+            <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>
-      >
+          }
-        {{ tag.name }}
+        </mat-chip-listbox>
-        <ion-icon matChipTrailingIcon name="close-outline" />
+      } @else {
-      </mat-chip-row>
+        <div>-</div>
+      }
+    } @else {
+      <mat-form-field appearance="outline" class="w-100 without-hint">
+        <mat-label i18n>Tags</mat-label>
+        <mat-chip-grid #tagsChipList>
+          @for (tag of tagsSelected(); track tag.id) {
+            <mat-chip-row
+              matChipRemove
+              [removable]="true"
+              (removed)="onRemoveTag(tag)"
+            >
+              {{ tag.name }}
+              <ion-icon matChipTrailingIcon name="close-outline" />
+            </mat-chip-row>
+          }
+          <input
+            #tagInput
+            [formControl]="tagInputControl"
+            [matAutocomplete]="autocompleteTags"
+            [matChipInputFor]="tagsChipList"
+            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          />
+        </mat-chip-grid>
+        <mat-autocomplete
+          #autocompleteTags="matAutocomplete"
+          (optionSelected)="onAddTag($event)"
+        >
+          @for (tag of filteredOptions | async; track tag.id) {
+            <mat-option [value]="tag.id">
+              {{ tag.name }}
+            </mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
     }
-    <input
+  </div>
-      #tagInput
+</div>
-      [formControl]="tagInputControl"
-      [matAutocomplete]="autocompleteTags"
-      [matChipInputFor]="tagsChipList"
-      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-    />
-  </mat-chip-grid>
-  <mat-autocomplete
-    #autocompleteTags="matAutocomplete"
-    (optionSelected)="onAddTag($event)"
-  >
-    @for (tag of filteredOptions | async; track tag.id) {
-      <mat-option [value]="tag.id">
-        {{ tag.name }}
-      </mat-option>
-    }
-  </mat-autocomplete>
-</mat-form-field>

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