Feature/improve usability of no activities info (#4382)

* Improve usability

* Update changelog

CHANGELOG.md

@@ -16,6 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Optimized the asynchronous operations using `Promise.all()` in the portfolio service (`getPerformance`)
 - Improved the symbol lookup in the _Trackinsight_ data enhancer for asset profile data
+- Removed the no transactions info component from the holdings table on the home page
+- Refactored the show condition of the step by step introduction for new users using the activities count
 - Upgraded `color` from version `4.2.3` to `5.0.0`
 - Upgraded `prisma` from version `6.3.0` to `6.4.1`
 

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -48,7 +48,6 @@
         <gf-holdings-table
           [baseCurrency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
-          [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
           [holdings]="holdings"
           [locale]="user?.settings?.locale"
           (holdingClicked)="onHoldingClicked($event)"

apps/client/src/app/components/home-overview/home-overview.html

@@ -1,7 +1,7 @@
 <div
   class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
 >
-  @if (hasPermissionToCreateOrder && historicalDataItems?.length === 0) {
+  @if (hasPermissionToCreateOrder && user?.activitiesCount === 0) {
     <div class="justify-content-center row w-100">
       <div class="col introduction">
         <h4 i18n>Welcome to Ghostfolio</h4>

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -125,7 +125,10 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
         this.dataSource = new MatTableDataSource(activities);
         this.totalItems = count;
 
-        if (this.hasPermissionToCreateActivity && this.totalItems <= 0) {
+        if (
+          this.hasPermissionToCreateActivity &&
+          this.user?.activitiesCount === 0
+        ) {
           this.router.navigate([], { queryParams: { createDialog: true } });
         }
 
@@ -160,6 +163,11 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
       })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
+        this.userService
+          .get(true)
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe();
+
         this.fetchActivities();
       });
   }
@@ -169,6 +177,11 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
       .deleteActivity(aId)
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
+        this.userService
+          .get(true)
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe();
+
         this.fetchActivities();
       });
   }
@@ -230,6 +243,11 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
+        this.userService
+          .get(true)
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe();
+
         this.fetchActivities();
       });
   }
@@ -248,6 +266,11 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
+        this.userService
+          .get(true)
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe();
+
         this.fetchActivities();
       });
   }
@@ -333,6 +356,11 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
             if (transaction) {
               this.dataService.postOrder(transaction).subscribe({
                 next: () => {
+                  this.userService
+                    .get(true)
+                    .pipe(takeUntil(this.unsubscribeSubject))
+                    .subscribe();
+
                   this.fetchActivities();
                 }
               });

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -6,7 +6,9 @@
         [baseCurrency]="user?.settings?.baseCurrency"
         [dataSource]="dataSource"
         [deviceType]="deviceType"
-        [hasPermissionToCreateActivity]="hasPermissionToCreateActivity"
+        [hasPermissionToCreateActivity]="
+          hasPermissionToCreateActivity && user?.activitiesCount === 0
+        "
         [hasPermissionToDeleteActivity]="hasPermissionToDeleteActivity"
         [hasPermissionToExportActivities]="!hasImpersonationId"
         [locale]="user?.settings?.locale"

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -198,11 +198,3 @@
     </button>
   </div>
 }
-
-@if (
-  dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
-) {
-  <div class="p-3 text-center">
-    <gf-no-transactions-info-indicator [hasBorder]="false" />
-  </div>
-}

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -5,7 +5,6 @@ import {
   AssetProfileIdentifier,
   PortfolioPosition
 } from '@ghostfolio/common/interfaces';
-import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
@@ -34,7 +33,6 @@ import { Subject, Subscription } from 'rxjs';
   imports: [
     CommonModule,
     GfAssetProfileIconComponent,
-    GfNoTransactionsInfoComponent,
     GfSymbolModule,
     GfValueComponent,
     MatButtonModule,
@@ -52,7 +50,6 @@ import { Subject, Subscription } from 'rxjs';
 export class GfHoldingsTableComponent implements OnChanges, OnDestroy {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
-  @Input() hasPermissionToCreateActivity: boolean;
   @Input() hasPermissionToOpenDetails = true;
   @Input() hasPermissionToShowValues = true;
   @Input() holdings: PortfolioPosition[];