Edit ScriptAccountInformation
All checks were successful
E2E Testing / test (push) Successful in 1m21s

This commit is contained in:
Sebastian Böckelmann 2024-01-27 12:08:20 +01:00
parent 89e430c179
commit 7a490d4c88
9 changed files with 118 additions and 5 deletions

View File

@ -1,6 +1,6 @@
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http'; import { HttpClientModule, HttpClient } from '@angular/common/http';
// NG Translate // NG Translate
@ -14,7 +14,7 @@ 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} from "@angular/material/button";
import {MatFormField} 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";
import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu"; import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
@ -24,6 +24,7 @@ import {
import {MatActionList, MatListItem} from "@angular/material/list"; import {MatActionList, MatListItem} from "@angular/material/list";
import {EditorComponent} from "./editor/editor.component"; 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";
// 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');
@ -32,7 +33,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
declarations: [ declarations: [
AppComponent, AppComponent,
ScriptAccountOverviewComponent, ScriptAccountOverviewComponent,
EditorComponent EditorComponent,
ScriptAccountEditorComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
@ -64,6 +66,10 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
MatTabGroup, MatTabGroup,
MatTab, MatTab,
MatTabLabel, MatTabLabel,
MatLabel,
MatFormField,
ReactiveFormsModule,
MatError
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

View File

@ -5,5 +5,8 @@
<span>{{modelComponent.componentName}}</span> <span>{{modelComponent.componentName}}</span>
<button class="content-label" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button> <button class="content-label" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button>
</ng-template> </ng-template>
<app-script-account-editor *ngIf="modelComponent.type === ModelComponentType.SCRIPTACCOUNT"
[scriptAccount]="convertModelComponentToScriptAccount(modelComponent)"></app-script-account-editor>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>

View File

@ -50,4 +50,11 @@ describe('EditorComponent', () => {
expect(component.gameModelComponents.length).toEqual(1); expect(component.gameModelComponents.length).toEqual(1);
expect(component.gameModelComponents.includes(scriptAccount2)); expect(component.gameModelComponents.includes(scriptAccount2));
})) }))
it("Test convert ModelComponent to ScriptAccount", waitForAsync(() => {
const modelComponent = new ScriptAccount("test", "");
const scriptAccount = component.convertModelComponentToScriptAccount(modelComponent);
expect(scriptAccount).toBeInstanceOf(ScriptAccount);
}))
}); });

View File

@ -1,6 +1,8 @@
import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
import {GameModel} from "../game-model/GameModel"; import {GameModel} from "../game-model/GameModel";
import {ModelComponent} from "../game-model/ModelComponent"; import {ModelComponent} from "../game-model/ModelComponent";
import {ModelComponentType} from "../game-model/ModelComponentType";
import {ScriptAccount} from "../game-model/scriptAccounts/ScriptAccount";
@Component({ @Component({
selector: 'app-editor', selector: 'app-editor',
@ -20,4 +22,11 @@ export class EditorComponent {
this.gameModelComponents = this.gameModelComponents.filter(modelComponent => modelComponent !== gameModelComponent); this.gameModelComponents = this.gameModelComponents.filter(modelComponent => modelComponent !== gameModelComponent);
} }
convertModelComponentToScriptAccount(modelComponent: ModelComponent) {
if(modelComponent instanceof ScriptAccount) {
return modelComponent as ScriptAccount;
}
}
protected readonly ModelComponentType = ModelComponentType;
} }

View File

@ -0,0 +1,13 @@
<div *ngIf="scriptAccount != undefined">
<mat-form-field class="example-full-width">
<mat-label>MinValue</mat-label>
<input matInput [formControl]="minCtrl" type="number" (keypress)="onKeyPress($event)" (change)="onUpdateMinValue()">
<mat-error *ngIf="minCtrl.hasError('required')">Please enter a valid number!</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>MaxValue</mat-label>
<input matInput type="number" [formControl]="maxCtrl" (keypress)="onKeyPress($event)" (change)="onUpdateMaxValue()">
<mat-error *ngIf="maxCtrl.hasError('required')">Please enter a valid number!</mat-error>
</mat-form-field>
</div>

View File

@ -0,0 +1,7 @@
.example-form {
width: 100%;
}
.example-full-width {
width: 100%;
}

View File

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

View File

@ -0,0 +1,47 @@
import {Component, Input, OnInit} from '@angular/core';
import {ScriptAccount} from "../../game-model/scriptAccounts/ScriptAccount";
import {ModelComponent} from "../../game-model/ModelComponent";
import {MatFormField} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {FormControl, FormGroupDirective, FormsModule, NgForm, Validators} from "@angular/forms";
import {NgIf} from "@angular/common";
import {ErrorStateMatcher} from "@angular/material/core";
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'app-script-account-editor',
templateUrl: './script-account-editor.component.html',
styleUrl: './script-account-editor.component.scss'
})
export class ScriptAccountEditorComponent implements OnInit{
@Input("scriptAccount") scriptAccount : ScriptAccount | undefined
minCtrl: FormControl = new FormControl(0, [Validators.required, Validators.pattern('^[0-9]*$')]);
maxCtrl: FormControl = new FormControl(100, [Validators.required, Validators.pattern('^[0-9]*$')]);
matcher = new MyErrorStateMatcher();
ngOnInit() {
this.minCtrl.setValue(this.scriptAccount!.minValue);
this.maxCtrl.setValue(this.scriptAccount!.maxValue);
}
onKeyPress(event: KeyboardEvent) {
const input = event.key;
const isDigit = /^\d+$/.test(input);
if (!isDigit) {
event.preventDefault();
}
}
onUpdateMinValue() {
this.scriptAccount!.minValue = Number(this.minCtrl.value);
}
onUpdateMaxValue() {
this.scriptAccount!.maxValue = Number(this.maxCtrl.value);
}
}

View File

@ -9,6 +9,4 @@ export abstract class ModelComponent {
this.componentDescription = componentDescription; this.componentDescription = componentDescription;
this.type = type; this.type = type;
} }
} }