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,40 +33,64 @@
       </p>
     </div>
   </ng-container>
-  <ng-container *ngIf="errorMessages.length > 0">
+  <ng-container *ngIf="isFileSelected">
-    <mat-accordion displayMode="flat">
+    <ng-container *ngIf="errorMessages.length === 0; else errorMessage">
-      <mat-expansion-panel
+      <gf-activities-table
-        *ngFor="let message of errorMessages; let i = index"
+        [activities]="activities"
-        [disabled]="!details[i]"
+        [baseCurrency]="data?.user?.settings?.baseCurrency"
-      >
+        [deviceType]="data.deviceType"
-        <mat-expansion-panel-header class="pl-1">
+        [hasPermissionToCreateActivity]="false"
-          <mat-panel-title>
+        [hasPermissionToExportActivities]="false"
-            <div class="d-flex">
+        [hasPermissionToFilter]="false"
-              <div class="align-items-center d-flex mr-2">
+        [hasPermissionToImportActivities]="false"
-                <ion-icon name="warning-outline"></ion-icon>
+        [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"
+          [disabled]="!details[i]"
+        >
+          <mat-expansion-panel-header class="pl-1">
+            <mat-panel-title>
+              <div class="d-flex">
+                <div class="align-items-center d-flex mr-2">
+                  <ion-icon name="warning-outline"></ion-icon>
+                </div>
+                <div>{{ message }}</div>
               </div>
-              <div>{{ message }}</div>
+            </mat-panel-title>
-            </div>
+          </mat-expansion-panel-header>
-          </mat-panel-title>
+          <pre
-        </mat-expansion-panel-header>
+            *ngIf="details[i]"
-        <pre
+            class="m-0"
-          *ngIf="details[i]"
+          ><code>{{ details[i] | json }}</code></pre>
-          class="m-0"
+        </mat-expansion-panel>
-        ><code>{{ details[i] | json }}</code></pre>
+      </mat-accordion>
-      </mat-expansion-panel>
+      <div class="mt-2">
-    </mat-accordion>
+        <button mat-button (click)="onReset()">
-    <div class="mt-2">
+          <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
-      <button mat-button (click)="onReset()">
+          <span i18n>Back</span>
-        <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
+        </button>
-        <span i18n>Back</span>
+      </div>
-      </button>
+    </ng-template>
-    </div>
   </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>