Feature/support creating custom tags in create or update activity dialog (#4801)

* Support creating custom tags in create or update activity dialog

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added support to create custom tags in the create or update activity dialog (experimental)
+
 ### Changed
 
 - Improved the language localization for German (`de`)

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -452,10 +452,9 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.hasPermissionToCreateOwnTag = hasPermission(
+          this.hasPermissionToCreateOwnTag =
-            this.user.permissions,
+            hasPermission(this.user.permissions, permissions.createOwnTag) &&
-            permissions.createOwnTag
+            this.user?.settings?.isExperimentalFeatures;
-          );
 
           this.tagsAvailable =
             this.user?.tags?.map((tag) => {

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

@@ -388,9 +388,7 @@
     </mat-tab-group>
 
     <gf-tags-selector
-      [hasPermissionToCreateTag]="
+      [hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
-        hasPermissionToCreateOwnTag && user?.settings?.isExperimentalFeatures
-      "
       [readonly]="!data.hasPermissionToUpdateOrder"
       [tags]="activityForm.get('tags')?.value"
       [tagsAvailable]="tagsAvailable"

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,15 @@ 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 =
+      this.data.user?.settings?.isExperimentalFeatures &&
+      hasPermission(this.data.user?.permissions, permissions.createOwnTag);
     this.locale = this.data.user?.settings?.locale;
     this.mode = this.data.activity?.id ? 'update' : 'create';
 
@@ -219,6 +226,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

@@ -313,8 +313,9 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div class="mb-3" [ngClass]="{ 'd-none': tagsAvailable?.length < 1 }">
+    <div class="mb-3">
       <gf-tags-selector
+        [hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
         [tags]="activityForm.get('tags')?.value"
         [tagsAvailable]="tagsAvailable"
         (tagsChanged)="onTagsChanged($event)"