Rename selection variable to isFileSelected, disabled import when no activity is selected and hide options when activities table is shown in dialog

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

@@ -7,14 +7,10 @@ import {
 } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import {
+import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
-  Activities,
-  Activity
-} from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
 import { isArray } from 'lodash';
 import { Subject } from 'rxjs';
-import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 
 import { ImportActivitiesDialogParams } from './interfaces/interfaces';
 
@@ -28,7 +24,7 @@ export class ImportActivitiesDialog implements OnDestroy {
   public activities: Activity[] = [];
   public details: any[] = [];
   public errorMessages: string[] = [];
-  public importComplete = false;
+  public isFileSelected = false;
   public selectedActivities: Activity[] = [];
 
   private unsubscribeSubject = new Subject<void>();
@@ -174,6 +170,7 @@ export class ImportActivitiesDialog implements OnDestroy {
     activities: any[];
     error: any;
   }) {
+    this.isFileSelected = true;
     this.snackBar.dismiss();
 
     this.errorMessages = error?.error?.message;
@@ -194,7 +191,7 @@ export class ImportActivitiesDialog implements OnDestroy {
   }
 
   private handleImportSuccess() {
-    this.importComplete = true;
+    this.isFileSelected = true;
     this.changeDetectorRef.markForCheck();
   }
 }

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -6,24 +6,7 @@
 ></gf-dialog-header>
 
 <div class="flex-grow-1" mat-dialog-content>
-  <ng-container *ngIf="importComplete">
+  <ng-container *ngIf="!isFileSelected">
-    <gf-activities-table
-      [activities]="activities"
-      [baseCurrency]="data?.user?.settings?.baseCurrency"
-      [deviceType]="data.deviceType"
-      [hasPermissionToCreateActivity]="false"
-      [hasPermissionToExportActivities]="true"
-      [hasPermissionToFilter]="false"
-      [hasPermissionToImportActivities]="false"
-      [hasPermissionToOpenDetails]="false"
-      [locale]="data?.user?.settings?.locale"
-      [showActions]="false"
-      [showCheckbox]="true"
-      [showSymbolColumn]="false"
-      (selectedActivities)="importActivities($event)"
-    ></gf-activities-table>
-  </ng-container>
-  <ng-container *ngIf="errorMessages.length === 0 && !importComplete">
     <div class="d-flex justify-content-center flex-column">
       <button
         class="py-3"
@@ -50,7 +33,25 @@
       </p>
     </div>
   </ng-container>
-  <ng-container *ngIf="errorMessages.length > 0">
+  <ng-container *ngIf="isFileSelected">
+    <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
+      <gf-activities-table
+        [activities]="activities"
+        [baseCurrency]="data?.user?.settings?.baseCurrency"
+        [deviceType]="data.deviceType"
+        [hasPermissionToCreateActivity]="false"
+        [hasPermissionToExportActivities]="false"
+        [hasPermissionToFilter]="false"
+        [hasPermissionToImportActivities]="false"
+        [hasPermissionToOpenDetails]="false"
+        [locale]="data?.user?.settings?.locale"
+        [showActions]="false"
+        [showCheckbox]="true"
+        [showSymbolColumn]="false"
+        (selectedActivities)="importActivities($event)"
+      ></gf-activities-table>
+    </ng-container>
+    <ng-template #errorMessage>
       <mat-accordion displayMode="flat">
         <mat-expansion-panel
           *ngFor="let message of errorMessages; let i = index"
@@ -78,12 +79,18 @@
           <span i18n>Back</span>
         </button>
       </div>
+    </ng-template>
   </ng-container>
 </div>
 
-<div *ngIf="importComplete" class="justify-content-end" mat-dialog-actions>
+<div *ngIf="isFileSelected" class="justify-content-end" mat-dialog-actions>
   <button i18n mat-button (click)="onCancel()">Cancel</button>
-  <button color="primary" mat-flat-button (click)="finalImport()">
+  <button
+    color="primary"
+    mat-flat-button
+    [disabled]="!selectedActivities?.length"
+    (click)="finalImport()"
+  >
     <ng-container i18n>Import</ng-container>
   </button>
 </div>