I added export portable project dialog box

src/app/app.module.ts

@@ -278,6 +278,7 @@ import { ImageManagerComponent } from './components/image-manager/image-manager.
 import { AddImageDialogComponent } from './components/image-manager/add-image-dialog/add-image-dialog.component';
 import { DeleteAllImageFilesDialogComponent } from './components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component';
 import { UploadingProcessbarComponent } from './common/uploading-processbar/uploading-processbar.component';
+import { ExportPortableProjectComponent } from './components/export-portable-project/export-portable-project.component';
 
 @NgModule({
   declarations: [
@@ -472,6 +473,7 @@ import { UploadingProcessbarComponent } from './common/uploading-processbar/uplo
     AddImageDialogComponent,
     DeleteAllImageFilesDialogComponent,
     UploadingProcessbarComponent,
+    ExportPortableProjectComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/export-portable-project/export-portable-project.component.html

@@ -0,0 +1,58 @@
+<div class="row">
+  <div class="col-md-10">
+    <h1 mat-dialog-title>Export Project</h1>
+  </div>
+  <div class="col-md-2 txt-align">
+    <button mat-button (click)="dialogRef.close()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+</div>
+
+<p mat-dialog-subtitle>Please select the location, whether to include base images or not and the compression type.</p>
+<mat-divider></mat-divider>
+<div mat-dialog-content>
+  <div class="row">
+    <div class="col-md-4">Path:</div>
+    <div class="col-md-6"></div>
+    <div class="col-md-2"></div>
+  </div>
+  <div class="row">
+    <div class="col-md-4">Compression:</div>
+    <div class="col-md-6"></div>
+    <div class="col-md-2"></div>
+  </div>
+  <div class="row">
+    <div class="col-md-4">Compression level:</div>
+    <div class="col-md-6"></div>
+    <div class="col-md-2"></div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <section class="checkBox-section">
+        <mat-checkbox class="checkBox-margin"> Include base images </mat-checkbox>
+      </section>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <section class="checkBox-section">
+        <mat-checkbox class="checkBox-margin"> Include snapshots </mat-checkbox>
+      </section>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <section class="checkBox-section">
+        <mat-checkbox class="checkBox-margin"> Reset MAC addresses </mat-checkbox>
+      </section>
+    </div>
+  </div>
+</div>
+<mat-divider></mat-divider>
+<div mat-dialog-actions>
+  <button mat-button>Help</button>
+  <button mat-button cdkFocusInitial>Back</button>
+  <button mat-button cdkFocusInitial>Next</button>
+  <button mat-button cdkFocusInitial>Cancel</button>
+</div>

src/app/components/export-portable-project/export-portable-project.component.scss

@@ -0,0 +1,17 @@
+.mat-dialog-title {
+    margin: 0 0 0px;
+    display: block;
+}
+.mat-dialog-container {
+    padding: 14px 14px 5px 14px !important;
+}
+.checkBox-section {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    height: 35px;
+  }
+  
+  .checkBox-margin {
+    margin: 0 10px;
+  }

src/app/components/export-portable-project/export-portable-project.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExportPortableProjectComponent } from './export-portable-project.component';
+
+describe('ExportPortableProjectComponent', () => {
+  let component: ExportPortableProjectComponent;
+  let fixture: ComponentFixture<ExportPortableProjectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExportPortableProjectComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExportPortableProjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/export-portable-project/export-portable-project.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-export-portable-project',
+  templateUrl: './export-portable-project.component.html',
+  styleUrls: ['./export-portable-project.component.scss']
+})
+export class ExportPortableProjectComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<ExportPortableProjectComponent>,
+
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/project-map/project-map.component.ts

@@ -1,12 +1,22 @@
-import { ChangeDetectorRef, Component, ComponentFactoryResolver, ComponentRef, Injector, OnDestroy, OnInit, SimpleChange, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+} from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ExportPortableProjectComponent } from '@components/export-portable-project/export-portable-project.component';
 import { environment } from 'environments/environment';
 import * as Mousetrap from 'mousetrap';
 import { from, Observable, Subscription } from 'rxjs';
-import { map, mergeMap, takeUntil } from 'rxjs/operators';
+import { map, mergeMap } from 'rxjs/operators';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
 import { MapDrawingToDrawingConverter } from '../../cartography/converters/map/map-drawing-to-drawing-converter';
 import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
@@ -126,7 +136,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   @ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent;
   @ViewChild(D3MapComponent) mapChild: D3MapComponent;
   @ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent;
-  @ViewChild('topologySummaryContainer', {read: ViewContainerRef}) topologySummaryContainer: ViewContainerRef;
+  @ViewChild('topologySummaryContainer', { read: ViewContainerRef }) topologySummaryContainer: ViewContainerRef;
 
   private projectMapSubscription: Subscription = new Subscription();
 
@@ -177,13 +187,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private nodeConsoleService: NodeConsoleService,
     private symbolService: SymbolService,
     private cd: ChangeDetectorRef,
-    // private cfr: ComponentFactoryResolver, 
+    // private cfr: ComponentFactoryResolver,
     // private injector: Injector,
     private viewContainerRef: ViewContainerRef
   ) {}
 
-
-
   // constructor(private viewContainerRef: ViewContainerRef) {}
   // createMyComponent() {this.viewContainerRef.createComponent(MyComponent);}
 
@@ -228,19 +236,19 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   async lazyLoadTopologySummary() {
     if (this.isTopologySummaryVisible) {
-      const {TopologySummaryComponent} = await import('../topology-summary/topology-summary.component');
-      this.instance =   this.viewContainerRef.createComponent(TopologySummaryComponent)
+      const { TopologySummaryComponent } = await import('../topology-summary/topology-summary.component');
+      this.instance = this.viewContainerRef.createComponent(TopologySummaryComponent);
 
       // const componentFactory = this.cfr.resolveComponentFactory(TopologySummaryComponent);
       // this.instance = this.topologySummaryContainer.createComponent(componentFactory, null, this.injector);
       this.instance.instance.server = this.server;
       this.instance.instance.project = this.project;
     } else if (this.instance) {
-      if (this.instance.instance)  {
+      if (this.instance.instance) {
         this.instance.instance.ngOnDestroy();
         this.instance.destroy();
       }
-    } 
+    }
   }
 
   addSubscriptions() {
@@ -339,7 +347,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
             if (!project) this.router.navigate(['/servers']);
 
             this.projectService.open(this.server, this.project.project_id);
-            this.title.setTitle(this.project.name); 
+            this.title.setTitle(this.project.name);
             this.isInterfaceLabelVisible = this.mapSettingsService.showInterfaceLabels;
             this.toggleShowTopologySummary(this.mapSettingsService.isTopologySummaryVisible);
 
@@ -986,9 +994,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     ) {
       this.toasterService.error('Project with running nodes cannot be exported.');
     } else {
-      location.assign(this.projectService.getExportPath(this.server, this.project));
+      // location.assign(this.projectService.getExportPath(this.server, this.project));
+      this.exportPortableProjectDialog();
     }
   }
+  exportPortableProjectDialog() {
+    const dialogRef = this.dialog.open(ExportPortableProjectComponent, {
+      width: '700px',
+      maxHeight: '850px',
+      autoFocus: false,
+      disableClose: true,
+      data: this.server,
+    });
+
+    dialogRef.afterClosed().subscribe((isAddes: boolean) => {});
+  }
 
   public uploadImageFile(event) {
     this.readImageFile(event.target);
@@ -1058,7 +1078,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       width: '600px',
       height: '650px',
       autoFocus: false,
-      disableClose: true
+      disableClose: true,
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;