diff --git a/src/main/webapp/src/app/app.component.html b/src/main/webapp/src/app/app.component.html
index 28aa1df..19d1fa9 100644
--- a/src/main/webapp/src/app/app.component.html
+++ b/src/main/webapp/src/app/app.component.html
@@ -1,2 +1,4 @@
+Osoby:
+Grupy:
diff --git a/src/main/webapp/src/app/component/form/group-form/group-form.component.html b/src/main/webapp/src/app/component/form/group-form/group-form.component.html
new file mode 100644
index 0000000..82d7a0a
--- /dev/null
+++ b/src/main/webapp/src/app/component/form/group-form/group-form.component.html
@@ -0,0 +1,19 @@
+
diff --git a/src/main/webapp/src/app/component/form/group-form/group-form.component.sass b/src/main/webapp/src/app/component/form/group-form/group-form.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/src/app/component/form/group-form/group-form.component.spec.ts b/src/main/webapp/src/app/component/form/group-form/group-form.component.spec.ts
new file mode 100644
index 0000000..8461b6b
--- /dev/null
+++ b/src/main/webapp/src/app/component/form/group-form/group-form.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupFormComponent } from './group-form.component';
+
+describe('GroupFormComponent', () => {
+ let component: GroupFormComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ GroupFormComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(GroupFormComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/main/webapp/src/app/component/form/group-form/group-form.component.ts b/src/main/webapp/src/app/component/form/group-form/group-form.component.ts
new file mode 100644
index 0000000..5bf8788
--- /dev/null
+++ b/src/main/webapp/src/app/component/form/group-form/group-form.component.ts
@@ -0,0 +1,66 @@
+import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core';
+import {FormControl, FormGroup} from "@angular/forms";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {GroupService} from "../../../service/group.service";
+import {Group} from "../../../model/group";
+import {GroupMember} from "../../../model/groupMember";
+import {GroupLeader} from "../../../model/groupLeader";
+import {forkJoin, Observable} from "rxjs";
+import {Person} from "../../../model/person";
+import {PersonService} from "../../../service/person.service";
+
+@Component({
+ selector: 'app-group-form',
+ templateUrl: './group-form.component.html',
+ styleUrls: ['./group-form.component.sass']
+})
+export class GroupFormComponent implements OnInit {
+
+ @Output()
+ onCreate: EventEmitter = new EventEmitter()
+
+ formGroup: FormGroup<{
+ groupMembers: FormControl;
+ grupLeaders: FormControl
+ }>
+
+ groupMembers: Observable[];
+ groupLeaders: Observable[];
+
+ constructor(
+ private groupService: GroupService,
+ private personService: PersonService,
+ public dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: { group: Group | null }
+ ) {
+ this.groupMembers = this.data.group?.groupMembers.map(groupMember => this.personService.findById(groupMember.personId)) ?? []
+ this.groupLeaders = this.data.group?.groupLeaders.map(groupLeaders => this.personService.findById(groupLeaders.personId)) ?? []
+ this.formGroup = new FormGroup({
+ grupLeaders: new FormControl([]),
+ groupMembers: new FormControl([])
+ });
+ }
+
+ ngOnInit(): void {
+ forkJoin(this.groupMembers).subscribe(people => this.formGroup.controls.groupMembers.patchValue(people));
+ forkJoin(this.groupLeaders).subscribe(people => this.formGroup.controls.grupLeaders.patchValue(people));
+ }
+
+ onSubmit() {
+ const group = this.data.group ?? new Group(null, [], []);
+ if (this.formGroup.controls.groupMembers.value != null) {
+ group.groupMembers = this.formGroup.controls.groupMembers.value?.map(person => new GroupMember(null, person.student?.id ?? -1, group.id, person.id ?? -1));
+ }
+ if (this.formGroup.controls.grupLeaders.value != null) {
+ group.groupLeaders = this.formGroup.controls.grupLeaders.value?.map(person => new GroupLeader(null, person.id ?? -1, group.id));
+ }
+ let action: Observable;
+ if (group.id != null) {
+ action = this.groupService.update(group);
+ } else {
+ action = this.groupService.create(group);
+ }
+ this.onCreate.next(group);
+ action.subscribe(() => this.dialogRef.close());
+ }
+}
diff --git a/src/main/webapp/src/app/component/group-list/group-list.component.ts b/src/main/webapp/src/app/component/group-list/group-list.component.ts
index a4aa682..168ad59 100644
--- a/src/main/webapp/src/app/component/group-list/group-list.component.ts
+++ b/src/main/webapp/src/app/component/group-list/group-list.component.ts
@@ -32,7 +32,8 @@ export class GroupListComponent extends AbstractListComponent{
openFormDialog(group: Group | null = null) {
const dialogRef = this.dialog.open(GroupFormComponent, {
- data: { group: group }
+ data: { group: group },
+ width: '500px'
});
dialogRef.afterClosed().pipe(
tap(() => this.getPage())