Support creating custom tags in holding detail dialog

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts

@@ -1,6 +1,8 @@
 import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { getDateFormatString } from '@ghostfolio/common/helper';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import {
@@ -42,6 +44,7 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
   public currencyOfAssetProfile: string;
   public currentMarketPrice = null;
   public defaultDateFormat: string;
+  public hasPermissionToCreateOwnTag: boolean;
   public isLoading = false;
   public isToday = isToday;
   public mode: 'create' | 'update';
@@ -60,11 +63,16 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
     private dateAdapter: DateAdapter<any>,
     public dialogRef: MatDialogRef<CreateOrUpdateActivityDialog>,
     private formBuilder: FormBuilder,
-    @Inject(MAT_DATE_LOCALE) private locale: string
+    @Inject(MAT_DATE_LOCALE) private locale: string,
+    private userService: UserService
   ) {}
 
   public ngOnInit() {
     this.currencyOfAssetProfile = this.data.activity?.SymbolProfile?.currency;
+    this.hasPermissionToCreateOwnTag = hasPermission(
+      this.data.user?.permissions,
+      permissions.createOwnTag
+    );
     this.locale = this.data.user?.settings?.locale;
     this.mode = this.data.activity?.id ? 'update' : 'create';
 
@@ -219,6 +227,34 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
       this.changeDetectorRef.markForCheck();
     });
 
+    this.activityForm.get('tags').valueChanges.subscribe((tags: Tag[]) => {
+      const newTag = tags.find(({ id }) => {
+        return id === undefined;
+      });
+
+      if (newTag && this.hasPermissionToCreateOwnTag) {
+        this.dataService
+          .postTag({ ...newTag, userId: this.data.user.id })
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((tag) => {
+            this.activityForm.get('tags').setValue(
+              tags.map((currentTag) => {
+                if (currentTag.id === undefined) {
+                  return tag;
+                }
+
+                return currentTag;
+              })
+            );
+
+            this.userService
+              .get(true)
+              .pipe(takeUntil(this.unsubscribeSubject))
+              .subscribe();
+          });
+      }
+    });
+
     this.activityForm
       .get('type')
       .valueChanges.pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -315,6 +315,10 @@
     </div>
     <div class="mb-3" [ngClass]="{ 'd-none': tagsAvailable?.length < 1 }">
       <gf-tags-selector
+        [hasPermissionToCreateTag]="
+          hasPermissionToCreateOwnTag &&
+          data.user?.settings?.isExperimentalFeatures
+        "
         [tags]="activityForm.get('tags')?.value"
         [tagsAvailable]="tagsAvailable"
         (tagsChanged)="onTagsChanged($event)"