Feature/allow creating custom tags from holding detail dialog component (#4308)

* Allow creating custom tags from holding detail dialog component

* Extend create tag endpoint

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added a new static portfolio analysis rule: _Regional Market Cluster Risk_ (Asia-Pacific Markets)
 - Added a new static portfolio analysis rule: _Regional Market Cluster Risk_ (Japan)
+- Added support to create custom tags in the holding detail dialog
 - Extended the tags selector component by a `readonly` attribute
 - Extended the tags selector component to support creating custom tags
 - Extended the holding detail dialog by the historical market data editor (experimental)

apps/api/src/app/tag/create-tag.dto.ts

@@ -1,6 +1,10 @@
-import { IsString } from 'class-validator';
+import { IsOptional, IsString } from 'class-validator';
 
 export class CreateTagDto {
   @IsString()
   name: string;
+
+  @IsOptional()
+  @IsString()
+  userId?: string;
 }

apps/api/src/app/tag/tag.controller.ts

@@ -1,6 +1,7 @@
 import { HasPermission } from '@ghostfolio/api/decorators/has-permission.decorator';
 import { HasPermissionGuard } from '@ghostfolio/api/guards/has-permission.guard';
-import { permissions } from '@ghostfolio/common/permissions';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { RequestWithUser } from '@ghostfolio/common/types';
 
 import {
   Body,
@@ -8,11 +9,13 @@ import {
   Delete,
   Get,
   HttpException,
+  Inject,
   Param,
   Post,
   Put,
   UseGuards
 } from '@nestjs/common';
+import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
 import { Tag } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
@@ -23,7 +26,10 @@ import { UpdateTagDto } from './update-tag.dto';
 
 @Controller('tag')
 export class TagController {
-  public constructor(private readonly tagService: TagService) {}
+  public constructor(
+    @Inject(REQUEST) private readonly request: RequestWithUser,
+    private readonly tagService: TagService
+  ) {}
 
   @Get()
   @HasPermission(permissions.readTags)
@@ -33,9 +39,34 @@ export class TagController {
   }
 
   @Post()
-  @HasPermission(permissions.createTag)
+  @UseGuards(AuthGuard('jwt'))
-  @UseGuards(AuthGuard('jwt'), HasPermissionGuard)
   public async createTag(@Body() data: CreateTagDto): Promise<Tag> {
+    const canCreateOwnTag = hasPermission(
+      this.request.user.permissions,
+      permissions.createOwnTag
+    );
+
+    const canCreateTag = hasPermission(
+      this.request.user.permissions,
+      permissions.createTag
+    );
+
+    if (!canCreateOwnTag && !canCreateTag) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+
+    if (canCreateOwnTag && !canCreateTag) {
+      if (data.userId !== this.request.user.id) {
+        throw new HttpException(
+          getReasonPhrase(StatusCodes.BAD_REQUEST),
+          StatusCodes.BAD_REQUEST
+        );
+      }
+    }
+
     return this.tagService.createTag(data);
   }
 

apps/api/src/app/tag/update-tag.dto.ts

@@ -1,4 +1,4 @@
-import { IsString } from 'class-validator';
+import { IsOptional, IsString } from 'class-validator';
 
 export class UpdateTagDto {
   @IsString()
@@ -6,4 +6,8 @@ export class UpdateTagDto {
 
   @IsString()
   name: string;
+
+  @IsOptional()
+  @IsString()
+  userId?: string;
 }

apps/api/src/app/user/user.service.ts

@@ -347,6 +347,7 @@ export class UserService {
           permissions.accessHoldingsChart,
           permissions.createAccess,
           permissions.createMarketDataOfOwnAssetProfile,
+          permissions.createOwnTag,
           permissions.readAiPrompt,
           permissions.readMarketDataOfOwnAssetProfile,
           permissions.updateMarketDataOfOwnAssetProfile

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

@@ -2,6 +2,7 @@ import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interf
 import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { NUMERICAL_PRECISION_THRESHOLD } from '@ghostfolio/common/config';
@@ -50,7 +51,7 @@ import { Account, MarketData, Tag } from '@prisma/client';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { switchMap, takeUntil } from 'rxjs/operators';
 
 import { HoldingDetailDialogParams } from './interfaces/interfaces';
 
@@ -98,6 +99,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   public dividendYieldPercentWithCurrencyEffect: number;
   public feeInBaseCurrency: number;
   public firstBuyDate: string;
+  public hasPermissionToCreateOwnTag: boolean;
   public hasPermissionToReadMarketDataOfOwnAssetProfile: boolean;
   public historicalDataItems: LineChartItem[];
   public investment: number;
@@ -131,6 +133,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
+    private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     public dialogRef: MatDialogRef<GfHoldingDetailDialogComponent>,
@@ -153,7 +156,31 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
     this.activityForm
       .get('tags')
       .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((tags) => {
+      .subscribe((tags: Tag[]) => {
+        const newTag = tags.find(({ id }) => {
+          return id === undefined;
+        });
+
+        if (newTag && this.hasPermissionToCreateOwnTag) {
+          this.adminService
+            .postTag({ ...newTag, userId: this.user.id })
+            .pipe(
+              switchMap((createdTag) => {
+                return this.dataService.putHoldingTags({
+                  dataSource: this.data.dataSource,
+                  symbol: this.data.symbol,
+                  tags: [
+                    ...tags.filter(({ id }) => {
+                      return id !== undefined;
+                    }),
+                    createdTag
+                  ]
+                });
+              }),
+              takeUntil(this.unsubscribeSubject)
+            )
+            .subscribe();
+        } else {
           this.dataService
             .putHoldingTags({
               tags,
@@ -162,6 +189,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
             })
             .pipe(takeUntil(this.unsubscribeSubject))
             .subscribe();
+        }
       });
 
     this.dataService
@@ -420,6 +448,11 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToCreateOwnTag = hasPermission(
+            this.user.permissions,
+            permissions.createOwnTag
+          );
+
           this.tagsAvailable =
             this.user?.tags?.map((tag) => {
               return {

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

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

libs/common/src/lib/permissions.ts

@@ -13,6 +13,7 @@ export const permissions = {
   createMarketData: 'createMarketData',
   createMarketDataOfOwnAssetProfile: 'createMarketDataOfOwnAssetProfile',
   createOrder: 'createOrder',
+  createOwnTag: 'createOwnTag',
   createPlatform: 'createPlatform',
   createTag: 'createTag',
   createUserAccount: 'createUserAccount',
@@ -67,6 +68,7 @@ export function getPermissions(aRole: Role): string[] {
         permissions.createMarketData,
         permissions.createMarketDataOfOwnAssetProfile,
         permissions.createOrder,
+        permissions.createOwnTag,
         permissions.createPlatform,
         permissions.createTag,
         permissions.deleteAccess,
@@ -110,6 +112,7 @@ export function getPermissions(aRole: Role): string[] {
         permissions.createAccountBalance,
         permissions.createMarketDataOfOwnAssetProfile,
         permissions.createOrder,
+        permissions.createOwnTag,
         permissions.deleteAccess,
         permissions.deleteAccount,
         permissions.deleteAccountBalance,

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

@@ -43,7 +43,7 @@
             </mat-option>
           }
 
-          @if (hasPermissionToCreateTags && tagInputControl.value) {
+          @if (hasPermissionToCreateTag && tagInputControl.value) {
             <mat-option [value]="tagInputControl.value.trim()">
               <span class="align-items-center d-flex">
                 <ion-icon class="mr-2" name="add-circle-outline" />

libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts

@@ -1,4 +1,5 @@
 import { CommonModule } from '@angular/common';
+import '@angular/localize/init';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
@@ -49,7 +50,7 @@ export const Default: Story = {
 
 export const CreateCustomTags: Story = {
   args: {
-    hasPermissionToCreateTags: true,
+    hasPermissionToCreateTag: true,
     tags: [
       {
         id: 'EMERGENCY_FUND',

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

@@ -42,7 +42,7 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
   templateUrl: 'tags-selector.component.html'
 })
 export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() hasPermissionToCreateTags = false;
+  @Input() hasPermissionToCreateTag = false;
   @Input() readonly = false;
   @Input() tags: Tag[];
   @Input() tagsAvailable: Tag[];
@@ -81,7 +81,7 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
       return id === event.option.value;
     });
 
-    if (!tag && this.hasPermissionToCreateTags) {
+    if (!tag && this.hasPermissionToCreateTag) {
       tag = {
         id: undefined,
         name: event.option.value as string,