Ability to change symbol by context menu added

src/app/app.module.ts

@@ -204,6 +204,8 @@ import { BringToFrontActionComponent } from './components/project-map/context-me
 import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component';
 import { ImportConfigActionComponent } from './components/project-map/context-menu/actions/import-config/import-config-action.component';
 import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component';
+import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component';
+import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -336,7 +338,9 @@ if (environment.production) {
     BringToFrontActionComponent,
     ExportConfigActionComponent,
     ImportConfigActionComponent,
-    ConsoleDeviceActionBrowserComponent
+    ConsoleDeviceActionBrowserComponent,
+    ChangeSymbolDialogComponent,
+    ChangeSymbolActionComponent
   ],
   imports: [
     BrowserModule,
@@ -433,7 +437,8 @@ if (environment.production) {
     StartCaptureDialogComponent,
     ConfigEditorDialogComponent,
     SaveProjectDialogComponent,
-    InfoDialogComponent
+    InfoDialogComponent,
+    ChangeSymbolDialogComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/preferences/common/symbols/symbols.component.html

@@ -15,8 +15,15 @@
             <mat-icon>add</mat-icon>
             Add symbol
         </button>
-    </div><br/>
+    </div>
-    <input matInput type="text" [(ngModel)]="searchText" placeholder="Search by filename"><br/><br/>
+    <form>
+        <mat-form-field class="example-full-width">
+            <input matInput
+                placeholder="Search by filename"
+                [(ngModel)]="searchText"
+                [ngModelOptions]="{standalone: true}">
+        </mat-form-field>
+    </form>
     <div class="wrapper">
         <div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
             <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">

src/app/components/preferences/common/symbols/symbols.component.scss

@@ -53,3 +53,7 @@
 .non-visible {
     display: none;
 }
+
+.example-full-width {
+    width: 100%;
+}

src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>Change symbol for node: {{node.name}}</h1>
+
+<div class="modal-form-container">
+    <div class="symbolsWrapper">
+        <app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+    <button mat-button (click)="onCloseClick()" color="accent">Cancel</button>
+    <button mat-button (click)="onSelectClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.scss

@@ -0,0 +1,19 @@
+.symbolsWrapper {
+    height: 350px;
+    overflow-y: scroll;
+    scrollbar-color: darkgrey #263238;
+    scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+}
+ 
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+ 
+::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid #263238;
+}

src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Message } from '../../../models/message';
+import { Server } from '../../../models/server';
+import { Node } from '../../../cartography/models/node';
+import { Symbol } from '../../../models/symbol';
+import { NodeService } from '../../../services/node.service';
+
+@Component({
+    selector: 'app-change-symbol-dialog',
+    templateUrl: './change-symbol-dialog.component.html',
+    styleUrls: ['./change-symbol-dialog.component.scss']
+})
+export class ChangeSymbolDialogComponent implements OnInit {
+    @Input() server: Server;
+    @Input() node: Node;
+    symbol: string;
+
+    constructor(
+        public dialogRef: MatDialogRef<ChangeSymbolDialogComponent>,
+        private nodeService: NodeService
+    ) {}
+
+    ngOnInit() {
+        this.symbol = this.node.symbol;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.symbol = chosenSymbol;
+    }
+
+    onCloseClick() {
+        this.dialogRef.close();
+    }
+
+    onSelectClick() {
+        this.nodeService.updateSymbol(this.server, this.node, this.symbol).subscribe(() => {
+            this.onCloseClick()
+        });
+    }
+}

src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="changeSymbol()">
+    <mat-icon>edit</mat-icon>
+    <span>Change symbol</span>
+</button>

src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { MatDialog } from '@angular/material';
+import { ChangeSymbolDialogComponent } from '../../../change-symbol-dialog/change-symbol-dialog.component';
+
+@Component({
+  selector: 'app-change-symbol-action',
+  templateUrl: './change-symbol-action.component.html'
+})
+export class ChangeSymbolActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() node: Node;
+
+  constructor(private dialog: MatDialog) {}
+
+  ngOnInit() {}
+
+  changeSymbol() {
+    const dialogRef = this.dialog.open(ChangeSymbolDialogComponent, {
+        width: '1000px',
+        height: '500px',
+        autoFocus: false
+      });
+      let instance = dialogRef.componentInstance;
+      instance.server = this.server;
+      instance.node = this.node;
+  }
+}

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

@@ -16,6 +16,11 @@
       *ngIf="!projectService.isReadOnly(project) && nodes.length===1 && !isElectronApp && nodes[0].console_type!=='none'"
       [node]="nodes[0]"
     ></app-console-device-action-browser>
+    <app-change-symbol-action
+      *ngIf="!projectService.isReadOnly(project) && nodes.length===1"
+      [server]="server"
+      [node]="nodes[0]"
+    ></app-change-symbol-action>
     <app-duplicate-action *ngIf="drawings.length>0 || nodes.length>0"
       [server]="server"
       [project]="project"

src/app/services/node.service.ts

@@ -72,6 +72,12 @@ export class NodeService {
     });
   }
 
+  updateSymbol(server: Server, node: Node, changedSymbol: string): Observable<Node> {
+    return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
+      symbol: changedSymbol
+    });
+  }
+
   update(server: Server, node: Node): Observable<Node> {
     return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
       x: Math.round(node.x),