Merge pull request #488 from GNS3/Action-'bring-to-front'-should-be-available-from-context-menu

Action 'bring to front' should be available from context menu

src/app/app.module.ts

@@ -191,6 +191,7 @@ import { DuplicateActionComponent } from './components/project-map/context-menu/
 import { MapSettingService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { HelpComponent } from './components/help/help.component';
+import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -312,7 +313,8 @@ if (environment.production) {
     ConsoleComponent,
     NodesMenuComponent,
     ProjectMapMenuComponent,
-    HelpComponent
+    HelpComponent,
+    BringToFrontActionComponent
   ],
   imports: [
     BrowserModule,

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="bringToFront()">
+    <mat-icon>vertical_align_top</mat-icon>
+    <span>Bring to front</span>
+</button>

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.spec.ts

@@ -0,0 +1,66 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BringToFrontActionComponent } from './bring-to-front-action.component';
+import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MockedDrawingService, MockedDrawingsDataSource, MockedNodesDataSource, MockedNodeService } from '../../../project-map.component.spec';
+import { DrawingService } from '../../../../../services/drawing.service';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Node } from '../../../../../cartography/models/node';
+import { of } from 'rxjs';
+import { ComponentFactoryResolver } from '@angular/core';
+import { Drawing } from '../../../../../cartography/models/drawing';
+
+describe('BringToFrontActionComponent', () => {
+  let component: BringToFrontActionComponent;
+  let fixture: ComponentFixture<BringToFrontActionComponent>;
+  let drawingService = new MockedDrawingService();
+  let drawingsDataSource = new MockedDrawingsDataSource();
+  let nodeService  = new MockedNodeService();
+  let nodesDataSource = new MockedNodesDataSource();
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+        imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
+        providers: [
+            { provide: DrawingService, useValue: drawingService },
+            { provide: DrawingsDataSource, useValue: drawingsDataSource },
+            { provide: NodeService, useValue: nodeService },
+            { provide: NodesDataSource, useValue: nodesDataSource },
+          ],
+        declarations: [BringToFrontActionComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BringToFrontActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call node service when bring to front action called', () => {
+    spyOn(nodeService, 'update').and.returnValue(of());
+    component.nodes = [{z: 0} as Node];
+    component.drawings = [];
+
+    component.bringToFront();
+
+    expect(nodeService.update).toHaveBeenCalled();
+  });
+
+  it('should call drawing service when bring to front action called', () => {
+    spyOn(drawingService, 'update').and.returnValue(of());
+    component.nodes = [];
+    component.drawings = [{z: 0} as Drawing];
+
+    component.bringToFront();
+
+    expect(drawingService.update).toHaveBeenCalled();
+  });
+});

src/app/components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
+import { NodeService } from '../../../../../services/node.service';
+import { Drawing } from '../../../../../cartography/models/drawing';
+import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
+import { DrawingService } from '../../../../../services/drawing.service';
+
+@Component({
+  selector: 'app-bring-to-front-action',
+  templateUrl: './bring-to-front-action.component.html'
+})
+export class BringToFrontActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() nodes: Node[];
+  @Input() drawings: Drawing[];
+
+  constructor(
+    private nodesDataSource: NodesDataSource,
+    private drawingsDataSource: DrawingsDataSource,
+    private nodeService: NodeService,
+    private drawingService: DrawingService
+  ) {}
+
+  ngOnInit() {}
+
+  bringToFront() {
+    this.nodes.forEach((node) => {
+      node.z = 100;
+      this.nodesDataSource.update(node);
+
+      this.nodeService.update(this.server, node).subscribe((node: Node) => {});
+    });
+
+    this.drawings.forEach((drawing) => {
+      drawing.z = 100;
+      this.drawingsDataSource.update(drawing);
+
+      this.drawingService.update(this.server, drawing).subscribe((drawing: Drawing) => {});
+    });
+  }
+}

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

@@ -44,6 +44,12 @@
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-move-layer-down-action>
+    <app-bring-to-front-action
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
+      [server]="server"
+      [nodes]="nodes"
+      [drawings]="drawings"
+    ></app-bring-to-front-action>
     <app-start-capture-action
       *ngIf="!projectService.isReadOnly(project) && isBundledServer 
       && drawings.length===0 && nodes.length===0 && links.length===1"

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

@@ -94,6 +94,10 @@ export class MockedNodeService {
   duplicate(server: Server, node: Node) {
     return of(node);
   }
+  
+  update(server: Server, node: Node) {
+    return of(node);
+  }
 }
 
 export class MockedDrawingService {