Delete ScriptAccounts
All checks were successful
E2E Testing / test (push) Successful in 1m22s

This commit is contained in:
Sebastian Böckelmann 2024-01-27 15:25:32 +01:00
parent 388fcb044c
commit 36391326ea
9 changed files with 159 additions and 6 deletions

View File

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

View File

@ -10,6 +10,9 @@ import {ModelComponent} from "./game-model/ModelComponent";
import { import {
ScriptAccountOverviewComponent ScriptAccountOverviewComponent
} from "./side-overviews/script-account-overview/script-account-overview.component"; } 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({ @Component({
selector: 'app-root', selector: 'app-root',
@ -26,7 +29,8 @@ export class AppComponent implements OnInit{
gameModel: GameModel | undefined gameModel: GameModel | undefined
constructor(private electronService: ElectronService, constructor(private electronService: ElectronService,
private zone: NgZone private zone: NgZone,
private dialog: MatDialog
) { ) {
console.log('APP_CONFIG', APP_CONFIG); console.log('APP_CONFIG', APP_CONFIG);
@ -39,10 +43,20 @@ export class AppComponent implements OnInit{
electronService.ipcRenderer.on('context-menu', (event: any, message: string) => { electronService.ipcRenderer.on('context-menu', (event: any, message: string) => {
this.zone.run(() => { this.zone.run(() => {
if(message == "edit") { if(message == "edit") {
console.log("Edit!")
if(this.openContent == ModelComponentType.SCRIPTACCOUNT && this.scriptAccountOverview != undefined && this.scriptAccountOverview.selectedScriptAccount != undefined) { if(this.openContent == ModelComponentType.SCRIPTACCOUNT && this.scriptAccountOverview != undefined && this.scriptAccountOverview.selectedScriptAccount != undefined) {
this.editor!.openGameModelComponent(this.scriptAccountOverview.selectedScriptAccount!); 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() { ngOnInit() {
this.gameModel = new GameModel("No More"); this.gameModel = new GameModel("No More");
this.gameModel.addScriptAccount("Temperature"); this.gameModel.addScriptAccount("Temperature");

View File

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

View File

@ -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>

View File

@ -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;
}

View File

@ -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();
});
});

View File

@ -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);
}
}

View File

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

View File

@ -7,3 +7,13 @@ body {
html, body { height: 100%; margin: 0 } html, body { height: 100%; margin: 0 }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 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;
}