Complete export portable project settings and modified the unit test case

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

@@ -1,5 +1,5 @@
 <form
-  [formGroup]="export_project_form"
+  [formGroup]="export_project_form" *ngIf="export_project_form"
   (ngSubmit)="export_project_form.valid && exportPortableProject()"
 >
   <div class="row">
@@ -19,28 +19,6 @@
   <mat-divider></mat-divider>
 
   <div class="mat-data">
-    <div class="row">
-      <div class="col-md-4 col-data">
-        <div mat-title>Path:</div>
-      </div>
-      <div class="col-md-6">
-        <mat-form-field class="input-full-width">
-          <input matInput type="text" formControlName="file_path" required />
-        </mat-form-field>
-      </div>
-      <div class="col-md-2">
-        <input
-          type="file"
-          accept=".qcow2"
-          #file
-          class="non-visible"
-          (change)="uploadImageFile($event)"
-          ng2FileSelect
-          [uploader]="uploader"
-        />
-        <button type="button" mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
-      </div>
-    </div>
     <div class="row">
       <div class="col-md-4 col-data">Compression:</div>
       <div class="col-md-8">

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

@@ -2,6 +2,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
+import { Project } from '../../models/project';
 import { Server } from '../../models/server';
 import { ProjectService } from '../../services/project.service';
 import { ToasterService } from '../../services/toaster.service';
@@ -19,18 +20,22 @@ export class ExportPortableProjectComponent implements OnInit {
   compression_level: any = [];
   compression_filter_value: any = [];
   server: Server;
+  project: Project;
   index: number = 4;
+  fileName: string;
 
   constructor(
     public dialogRef: MatDialogRef<ExportPortableProjectComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
     private toasterService: ToasterService,
     private projectService: ProjectService,
-    private _fb: FormBuilder
+    private _fb: FormBuilder,
   ) {}
 
   async ngOnInit() {
-    this.server = this.data;
+    this.server = this.data.serverDetails;
+    this.project = this.data.projectDetails;
+    this.fileName = this.project.name + '.zip';
     await this.formControls();
     this.compression_methods = this.projectService.getCompression();
     this.compression_level = this.projectService.getCompressionLevel();
@@ -58,7 +63,6 @@ export class ExportPortableProjectComponent implements OnInit {
 
   formControls() {
     this.export_project_form = this._fb.group({
-      file_path: ['', Validators.required],
       compression: ['', Validators.required],
       compression_level: ['', Validators.required],
       include_base_image: [false, Validators.required],
@@ -83,9 +87,19 @@ export class ExportPortableProjectComponent implements OnInit {
 
   exportPortableProject() {
     let response;
-    this.export_project_form.value.compression = this.export_project_form.value.compression.value;
-    this.projectService.exportPortableProject(this.server, this.export_project_form.value).subscribe((res) => {
-      response = res;
-    });
+    this.export_project_form.value.compression = this.export_project_form.value.compression.value ?? 'zstd';
+    this.projectService
+      .exportPortableProject(this.server, this.project.project_id, this.export_project_form.value)
+      .subscribe((res) => {
+        response = res;
+        const url = window.URL.createObjectURL(new Blob([response]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', this.fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        this.dialogRef.close()
+      });
   }
 }

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

@@ -1004,7 +1004,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       maxHeight: '850px',
       autoFocus: false,
       disableClose: true,
-      data: this.server,
+      data: {serverDetails:this.server,projectDetails:this.project},
     });
 
     dialogRef.afterClosed().subscribe((isAddes: boolean) => {});

src/app/services/project.service.ts

@@ -135,7 +135,7 @@ export class ProjectService {
   getCompressionLevel() {
     return this.compression_level_default_value;
   };
-  exportPortableProject(server:Server,formData:any={}) {
-    return this.httpServer.get(server,`/projects/${formData.file_path}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}`)
+  exportPortableProject(server:Server, project_id: string,formData:any={}) {
+    return this.httpServer.getBlob(server,`/projects/${project_id}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}`)
   }
 }