From 3b8cd3ce273992e9869e647d0d78d3c994673646 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sun, 9 Feb 2025 11:59:59 +0700
Subject: [PATCH] feat(ui): allow creating custom tags

---
 .../lib/tags-selector/tags-selector.component.html    |  5 +++++
 .../src/lib/tags-selector/tags-selector.component.ts  | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

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 1b6817724..3fcb0ffcb 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,11 @@
               {{ tag.name }}
             </mat-option>
           }
+          @if ((filteredOptions | async)?.length === 0) {
+            <mat-option [value]="tagInputControl.value">
+              Create new tag "{{ tagInputControl.value }}"
+            </mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     }
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 6b59d53f4..611c1e938 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];
     });