diff --git a/src/main/webapp/src/app/component/form/person-from/person-from.component.html b/src/main/webapp/src/app/component/form/person-from/person-from.component.html
new file mode 100644
index 0000000..c036dff
--- /dev/null
+++ b/src/main/webapp/src/app/component/form/person-from/person-from.component.html
@@ -0,0 +1,22 @@
+
diff --git a/src/main/webapp/src/app/component/form/person-from/person-from.component.sass b/src/main/webapp/src/app/component/form/person-from/person-from.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/src/app/component/form/person-from/person-from.component.spec.ts b/src/main/webapp/src/app/component/form/person-from/person-from.component.spec.ts
new file mode 100644
index 0000000..82b84b0
--- /dev/null
+++ b/src/main/webapp/src/app/component/form/person-from/person-from.component.spec.ts
@@ -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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ PersonFromComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(PersonFromComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/main/webapp/src/app/component/form/person-from/person-from.component.ts b/src/main/webapp/src/app/component/form/person-from/person-from.component.ts
new file mode 100644
index 0000000..7e521ea
--- /dev/null
+++ b/src/main/webapp/src/app/component/form/person-from/person-from.component.ts
@@ -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 = new EventEmitter()
+
+ formGroup: FormGroup<{
+ name: FormControl;
+ surname: FormControl;
+ index: FormControl;
+ }>
+
+
+ constructor(
+ private personService: PersonService,
+ public dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: { person: Person | null }
+ ) {
+ this.formGroup = new FormGroup({
+ name: new FormControl(this.data.person?.name ?? null),
+ surname: new FormControl(this.data.person?.surname ?? null),
+ index: new FormControl(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;
+ if (person.id != null) {
+ action = this.personService.update(person);
+ } else {
+ action = this.personService.create(person);
+ }
+ this.onCreate.next(person);
+ action.subscribe(() => this.dialogRef.close());
+ }
+}