Delete ScriptAccounts

app/main.ts

@@ -76,7 +76,10 @@ function createWindow(): BrowserWindow {
       }
     },
     {
-      label: 'Delete...'
+      label: 'Delete...',
+      click: () => {
+        win!.webContents.send('context-menu', "delete");
+      }
     }
   ]
 

src/app/app.component.ts

@@ -10,6 +10,9 @@ import {ModelComponent} from "./game-model/ModelComponent";
 import {
   ScriptAccountOverviewComponent
 } from "./side-overviews/script-account-overview/script-account-overview.component";
+import {MatDialog} from "@angular/material/dialog";
+import {DeleteConfirmationDialogComponent} from "./delete-confirmation-dialog/delete-confirmation-dialog.component";
+import {ScriptAccount} from "./game-model/scriptAccounts/ScriptAccount";
 
 @Component({
   selector: 'app-root',
@@ -26,7 +29,8 @@ export class AppComponent implements OnInit{
   gameModel: GameModel | undefined
 
   constructor(private electronService: ElectronService,
-              private zone: NgZone
+              private zone: NgZone,
+              private dialog: MatDialog
   ) {
     console.log('APP_CONFIG', APP_CONFIG);
 
@@ -39,10 +43,20 @@ export class AppComponent implements OnInit{
       electronService.ipcRenderer.on('context-menu', (event: any, message: string) => {
         this.zone.run(() => {
           if(message == "edit") {
-            console.log("Edit!")
             if(this.openContent == ModelComponentType.SCRIPTACCOUNT && this.scriptAccountOverview != undefined && this.scriptAccountOverview.selectedScriptAccount != undefined) {
               this.editor!.openGameModelComponent(this.scriptAccountOverview.selectedScriptAccount!);
             }
+          } else if(message == "delete") {
+            const affectedModelComponent = this.getSelectedModelComponent();
+            const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent, {data: affectedModelComponent, minWidth: "400px"});
+
+            dialogRef.afterClosed().subscribe(res => {
+              if(res != undefined && res) {
+                if(affectedModelComponent instanceof ScriptAccount) {
+                  this.gameModel!.removeScriptAccount(affectedModelComponent);
+                }
+              }
+            })
           }
         })
       })
@@ -51,6 +65,17 @@ export class AppComponent implements OnInit{
     }
   }
 
+  private getSelectedModelComponent(): ModelComponent | undefined {
+    if(this.openContent == ModelComponentType.SCRIPTACCOUNT) {
+      if(this.scriptAccountOverview != undefined) {
+        return this.scriptAccountOverview!.selectedScriptAccount;
+      } else {
+        console.log("[WARN] [App.component] ScriptAccountOverview is undefined")
+      }
+    }
+    return undefined;
+  }
+
   ngOnInit() {
     this.gameModel = new GameModel("No More");
     this.gameModel.addScriptAccount("Temperature");

src/app/app.module.ts

@@ -13,7 +13,7 @@ import {SharedModule} from "./shared/shared.module";
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatIcon} from "@angular/material/icon";
 import {MatToolbar} from "@angular/material/toolbar";
-import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatButton, MatIconButton, MatMiniFabButton} from "@angular/material/button";
 import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatDrawer, MatDrawerContainer} from "@angular/material/sidenav";
@@ -26,6 +26,8 @@ import {EditorComponent} from "./editor/editor.component";
 import {MatTab, MatTabGroup, MatTabLabel} from "@angular/material/tabs";
 import {ScriptAccountEditorComponent} from "./editor/script-account-editor/script-account-editor.component";
 import {ModelComponentEditorComponent} from "./editor/model-component-editor/model-component-editor.component";
+import {DeleteConfirmationDialogComponent} from "./delete-confirmation-dialog/delete-confirmation-dialog.component";
+import {MatDialogActions, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -36,7 +38,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ScriptAccountOverviewComponent,
     EditorComponent,
     ScriptAccountEditorComponent,
-    ModelComponentEditorComponent
+    ModelComponentEditorComponent,
+    DeleteConfirmationDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -72,7 +75,10 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatFormField,
     ReactiveFormsModule,
     MatError,
-
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatMiniFabButton,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.html

@@ -0,0 +1,12 @@
+<h3 mat-dialog-title class="dialog-title">
+  <span style="margin-top: 10px">Delete</span>
+  <button style="margin-top: 10px" mat-mini-fab class="small-icon-button" (click)="cancel()"><mat-icon>close</mat-icon></button>
+</h3>
+<div mat-dialog-content>
+  <p>Delete {{ModelComponentTypeUtillities.toSingleString(deleteModelComponent.type)}}"{{deleteModelComponent.componentName}}"?</p>
+</div>
+<div mat-dialog-actions align="end">
+  <button mat-raised-button class="btn-primary" (click)="confirmDelete()">Ok</button>
+  <button mat-raised-button class="btn-secondary" (click)="cancel()">Cancel</button>
+</div>
+

src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.scss

@@ -0,0 +1,41 @@
+.dialog-title {
+  background-color: #272727;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  height: 50px !important;
+  padding-right: 10px;
+}
+
+.small-icon-button {
+  width: 28px !important;
+  height: 28px !important;
+  padding: 0px !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  margin-bottom: 5px;
+  background-color: black;
+
+  & > *[role=img] {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .mat-mdc-button-touch-target {
+    width: 24px !important;
+    height: 24px !important;
+  }
+}
+
+.small-icon-button mat-icon {
+  color: whitesmoke;
+}

src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteConfirmationDialogComponent } from './delete-confirmation-dialog.component';
+
+describe('DeleteConfirmationDialogComponent', () => {
+  let component: DeleteConfirmationDialogComponent;
+  let fixture: ComponentFixture<DeleteConfirmationDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeleteConfirmationDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DeleteConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.ts

@@ -0,0 +1,25 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ModelComponentTypeUtillities} from "../game-model/ModelComponentTypeUtillities";
+import {ModelComponent} from "../game-model/ModelComponent";
+
+@Component({
+  selector: 'app-delete-confirmation-dialog',
+  templateUrl: './delete-confirmation-dialog.component.html',
+  styleUrl: './delete-confirmation-dialog.component.scss'
+})
+export class DeleteConfirmationDialogComponent {
+
+  constructor(private dialogRef: MatDialogRef<DeleteConfirmationDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public deleteModelComponent: ModelComponent) {
+  }
+  protected readonly ModelComponentTypeUtillities = ModelComponentTypeUtillities;
+
+  cancel() {
+    this.dialogRef.close(false);
+  }
+
+  confirmDelete() {
+    this.dialogRef.close(true);
+  }
+}

src/app/game-model/ModelComponentTypeUtillities.ts

@@ -1,4 +1,5 @@
 import {ModelComponentType} from "./ModelComponentType";
+import {ModelComponent} from "./ModelComponent";
 
 export class ModelComponentTypeUtillities {
   static toString(modelComponentType: ModelComponentType | undefined): string {
@@ -7,4 +8,11 @@ export class ModelComponentTypeUtillities {
       default: return "Undefined";
     }
   }
+
+  static toSingleString(modelComponentType: ModelComponentType | undefined): string {
+    switch (modelComponentType) {
+      case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccount";
+      default: return "Undefined";
+    }
+  }
 }

src/styles.css

@@ -7,3 +7,13 @@ body {
 
 html, body { height: 100%; margin: 0 }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.btn-primary {
+  background-color: #3c95f8 !important;
+  color: white;
+}
+
+.btn-secondary {
+  background-color: #4f5459 !important;
+  color: white;
+}