From 36391326eab66014d9e92ac6f961827627fe0d4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= Date: Sat, 27 Jan 2024 15:25:32 +0100 Subject: [PATCH] Delete ScriptAccounts --- app/main.ts | 5 ++- src/app/app.component.ts | 29 ++++++++++++- src/app/app.module.ts | 12 ++++-- .../delete-confirmation-dialog.component.html | 12 ++++++ .../delete-confirmation-dialog.component.scss | 41 +++++++++++++++++++ ...lete-confirmation-dialog.component.spec.ts | 23 +++++++++++ .../delete-confirmation-dialog.component.ts | 25 +++++++++++ .../ModelComponentTypeUtillities.ts | 8 ++++ src/styles.css | 10 +++++ 9 files changed, 159 insertions(+), 6 deletions(-) create mode 100644 src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.html create mode 100644 src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.scss create mode 100644 src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts create mode 100644 src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.ts diff --git a/app/main.ts b/app/main.ts index d51d319..7f9f75d 100644 --- a/app/main.ts +++ b/app/main.ts @@ -76,7 +76,10 @@ function createWindow(): BrowserWindow { } }, { - label: 'Delete...' + label: 'Delete...', + click: () => { + win!.webContents.send('context-menu', "delete"); + } } ] diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e818360..325cbac 100644 --- a/src/app/app.component.ts +++ b/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"); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 95f920e..c3edf21 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.html b/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.html new file mode 100644 index 0000000..33297a2 --- /dev/null +++ b/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.html @@ -0,0 +1,12 @@ +

+ Delete + +

+
+

Delete {{ModelComponentTypeUtillities.toSingleString(deleteModelComponent.type)}}"{{deleteModelComponent.componentName}}"?

+
+
+ + +
+ diff --git a/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.scss b/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.scss new file mode 100644 index 0000000..9a8eca7 --- /dev/null +++ b/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; +} diff --git a/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts b/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.spec.ts new file mode 100644 index 0000000..74c7c4a --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DeleteConfirmationDialogComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DeleteConfirmationDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.ts b/src/app/delete-confirmation-dialog/delete-confirmation-dialog.component.ts new file mode 100644 index 0000000..8eacb90 --- /dev/null +++ b/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, + @Inject(MAT_DIALOG_DATA) public deleteModelComponent: ModelComponent) { + } + protected readonly ModelComponentTypeUtillities = ModelComponentTypeUtillities; + + cancel() { + this.dialogRef.close(false); + } + + confirmDelete() { + this.dialogRef.close(true); + } +} diff --git a/src/app/game-model/ModelComponentTypeUtillities.ts b/src/app/game-model/ModelComponentTypeUtillities.ts index 772ab30..c92fce9 100644 --- a/src/app/game-model/ModelComponentTypeUtillities.ts +++ b/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"; + } + } } diff --git a/src/styles.css b/src/styles.css index c310536..2fd855a 100644 --- a/src/styles.css +++ b/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; +}