Import/export buttons added

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

@@ -40,11 +40,19 @@
       <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
         <button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
           <mat-icon>work</mat-icon>
-          <span>Projects</span>
+          <span>Go to projects</span>
         </button>
         <button mat-menu-item [routerLink]="['/servers']">
           <mat-icon>developer_board</mat-icon>
-          <span>Servers</span>
+          <span>Go to servers</span>
+        </button>
+        <button mat-menu-item (click)="exportProject()">
+          <mat-icon>call_made</mat-icon>
+          <span>Export portable project</span>
+        </button>
+        <button mat-menu-item (click)="importProject()">
+          <mat-icon>call_received</mat-icon>
+          <span>Import portable project</span>
         </button>
       </mat-menu>
 

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 
 import { Observable, Subject, Subscription, from } from 'rxjs';
 import { webSocket } from 'rxjs/webSocket';
@@ -51,6 +51,8 @@ import { LabelWidget } from '../../cartography/widgets/label';
 import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
+import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component';
+import { MatDialog } from '@angular/material';
 
 
 @Component({
@@ -115,7 +117,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private movingEventSource: MovingEventSource,
     private mapScaleService: MapScaleService,
     private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer,
-    private toasterService: ToasterService
+    private toasterService: ToasterService,
+    private dialog: MatDialog,
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -386,6 +390,30 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   resetZoom() {
     this.mapScaleService.resetToDefault();
   }
+
+  importProject() {
+    let uuid: string = '';
+    const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
+      width: '400px',
+      autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    const subscription = dialogRef.componentInstance.onImportProject.subscribe((projectId: string) => {
+      uuid = projectId;
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      subscription.unsubscribe();
+      this.projectService.open(this.server, uuid).subscribe(() => {
+        this.router.navigate(['/server', this.server.id, 'project', uuid]);
+      });
+    });
+  }
+
+  exportProject() {
+    window.location.href = `http://${this.server.host}:${this.server.port}/v2/projects/${this.project.project_id}/export`;
+  }
   
   public uploadImageFile(event) {
     this.readImageFile(event.target);

src/app/components/projects/import-project-dialog/import-project-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, EventEmitter } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material';
 import { FileUploader, ParsedResponseHeaders, FileItem } from 'ng2-file-upload';
 import { Server } from '../../../models/server';
@@ -26,6 +26,8 @@ export class ImportProjectDialogComponent implements OnInit {
   projectNameForm: FormGroup;
   submitted: boolean = false;
   isFirstStepCompleted: boolean = false;
+  uuid: string;
+  onImportProject = new EventEmitter<string>();
 
   constructor(
     private dialog: MatDialog,
@@ -58,6 +60,7 @@ export class ImportProjectDialogComponent implements OnInit {
       status: number,
       headers: ParsedResponseHeaders
     ) => {
+      this.onImportProject.emit(this.uuid);
       this.resultMessage = 'Project was imported succesfully!';
       this.isFinishEnabled = true;
     };
@@ -138,7 +141,8 @@ export class ImportProjectDialogComponent implements OnInit {
   }
 
   prepareUploadPath(): string {
+    this.uuid = uuid();
     const projectName = this.projectNameForm.controls['projectName'].value;
-    return `http://${this.server.host}:${this.server.port}/v2/projects/${uuid()}/import?name=${projectName}`;
+    return `http://${this.server.host}:${this.server.port}/v2/projects/${this.uuid}/import?name=${projectName}`;
   }
 }

src/app/services/project.service.ts

@@ -49,6 +49,10 @@ export class ProjectService {
     return this.httpServer.delete(server, `/projects/${project_id}`);
   }
 
+  export(server: Server, project_id: string): Observable<any> {
+    return this.httpServer.get(server, `/projects/${project_id}/export`)
+  }
+
   notificationsPath(server: Server, project_id: string): string {
     return `ws://${server.host}:${server.port}/v2/projects/${project_id}/notifications/ws`;
   }