Feature/add close holding button to holding detail dialog (#5832)

* Add close holding button to holding detail dialog

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a close holding button to the holding detail dialog
 - Extended the user detail dialog in the users section of the admin control panel
 
 ### Fixed

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

@@ -1,3 +1,4 @@
+import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
 import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
@@ -57,6 +58,7 @@ import { isUUID } from 'class-validator';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
 import { addIcons } from 'ionicons';
 import {
+  arrowDownCircleOutline,
   createOutline,
   flagOutline,
   readerOutline,
@@ -167,6 +169,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
     private userService: UserService
   ) {
     addIcons({
+      arrowDownCircleOutline,
       createOutline,
       flagOutline,
       readerOutline,
@@ -557,6 +560,37 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
     this.dialogRef.close();
   }
 
+  public onCloseHolding() {
+    const today = new Date();
+
+    const activity: CreateOrderDto = {
+      accountId: this.accounts.length === 1 ? this.accounts[0].id : null,
+      comment: null,
+      currency: this.SymbolProfile.currency,
+      dataSource: this.SymbolProfile.dataSource,
+      date: today.toISOString(),
+      fee: 0,
+      quantity: this.quantity,
+      symbol: this.SymbolProfile.symbol,
+      tags: this.tags.map(({ id }) => {
+        return id;
+      }),
+      type: 'SELL',
+      unitPrice: this.marketPrice
+    };
+
+    this.dataService
+      .postOrder(activity)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.router.navigate(
+          internalRoutes.portfolio.subRoutes.activities.routerLink
+        );
+
+        this.dialogRef.close();
+      });
+  }
+
   public onExport() {
     const activityIds = this.dataSource.data.map(({ id }) => {
       return id;

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

@@ -428,6 +428,29 @@
       <div class="row">
         <div class="col">
           <div class="button-container d-flex flex-wrap">
+            @if (data.hasPermissionToCreateActivity && quantity > 0) {
+              <button
+                color="warn"
+                mat-stroked-button
+                (click)="onCloseHolding()"
+              >
+                <ion-icon
+                  class="mr-1"
+                  name="arrow-down-circle-outline"
+                ></ion-icon
+                ><span i18n>Close Holding</span>
+              </button>
+            }
+            @if (
+              dataSource?.data.length > 0 &&
+              data.hasPermissionToReportDataGlitch === true
+            ) {
+              <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
+                ><ion-icon class="mr-1" name="flag-outline" /><span i18n
+                  >Report Data Glitch</span
+                >...</a
+              >
+            }
             @if (data.hasPermissionToAccessAdminControl) {
               <a
                 mat-stroked-button
@@ -443,16 +466,6 @@
                 >...</a
               >
             }
-            @if (
-              dataSource?.data.length > 0 &&
-              data.hasPermissionToReportDataGlitch === true
-            ) {
-              <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
-                ><ion-icon class="mr-1" name="flag-outline" /><span i18n
-                  >Report Data Glitch</span
-                >...</a
-              >
-            }
           </div>
         </div>
       </div>