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>
2025-02-15 14:48:53 +07:00 · 2025-02-15 14:48:53 +07:00 · ec8fce44a6
commit ec8fce44a6
parent 58dfba8e63
11 changed files with 99 additions and 20 deletions
--- a/CHANGELOG.md
+++ b/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)
--- a/apps/api/src/app/tag/create-tag.dto.ts
+++ b/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;
 }
--- a/apps/api/src/app/tag/tag.controller.ts
+++ b/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'), HasPermissionGuard)
+  @UseGuards(AuthGuard('jwt'))
  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);
  }

--- a/apps/api/src/app/tag/update-tag.dto.ts
+++ b/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;
 }
--- a/apps/api/src/app/user/user.service.ts
+++ b/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
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts
+++ b/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,15 +156,40 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
    this.activityForm
      .get('tags')
      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((tags) => {
-        this.dataService
-          .putHoldingTags({
-            tags,
-            dataSource: this.data.dataSource,
-            symbol: this.data.symbol
-          })
-          .pipe(takeUntil(this.unsubscribeSubject))
-          .subscribe();
+      .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,
+              dataSource: this.data.dataSource,
+              symbol: this.data.symbol
+            })
+            .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 {
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/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"
--- a/libs/common/src/lib/permissions.ts
+++ b/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,
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.html
+++ b/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" />
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
+++ b/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',
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts
+++ b/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,