Added person form component in webapp.

This commit is contained in:
Iga Bartosz Collins 2023-01-31 10:42:26 +01:00
parent 609c7e37c1
commit 73af3b354f
4 changed files with 103 additions and 0 deletions

View File

@ -0,0 +1,22 @@
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<mat-form-field class="form-field">
<mat-label>Imię</mat-label>
<input matInput formControlName="name">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Nazwisko</mat-label>
<input matInput formControlName="surname">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Indeks</mat-label>
<input matInput formControlName="index">
</mat-form-field>
<button mat-button type="submit" [disabled]="!formGroup.valid">Zapisz</button>
<button mat-button type="button" (click)="dialogRef.close()">Anuluj</button>
</form>

View File

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

View File

@ -0,0 +1,58 @@
import {Component, EventEmitter, Inject, Output} from '@angular/core';
import {FormControl, FormGroup} from "@angular/forms";
import {PersonService} from "../../../service/person.service";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {Person} from "../../../model/person";
import {Observable} from "rxjs";
import {Student} from "../../../model/student";
@Component({
selector: 'app-person-from',
templateUrl: './person-from.component.html',
styleUrls: ['./person-from.component.sass']
})
export class PersonFromComponent {
@Output()
onCreate: EventEmitter<Person> = new EventEmitter()
formGroup: FormGroup<{
name: FormControl<string | null>;
surname: FormControl<string | null>;
index: FormControl<string | null>;
}>
constructor(
private personService: PersonService,
public dialogRef: MatDialogRef<PersonFromComponent>,
@Inject(MAT_DIALOG_DATA) public data: { person: Person | null }
) {
this.formGroup = new FormGroup({
name: new FormControl<string | null>(this.data.person?.name ?? null),
surname: new FormControl<string | null>(this.data.person?.surname ?? null),
index: new FormControl<string | null>(this.data.person?.student?.index ?? null)
});
}
onSubmit() {
const person = this.data.person ?? new Person(null, "?", "?", null);
person.name = this.formGroup.controls.name.value ?? "?";
person.surname = this.formGroup.controls.surname.value ?? "?";
if (this.formGroup.controls.index.value != null) {
if (person.student != null) {
person.student.index = this.formGroup.controls.index.value;
} else {
person.student = new Student(null, person.id, this.formGroup.controls.index.value);
}
}
let action: Observable<Person>;
if (person.id != null) {
action = this.personService.update(person);
} else {
action = this.personService.create(person);
}
this.onCreate.next(person);
action.subscribe(() => this.dialogRef.close());
}
}