diff --git a/src/main/webapp/src/app/component/group-list/group-list.component.html b/src/main/webapp/src/app/component/group-list/group-list.component.html
new file mode 100644
index 0000000..b28ea29
--- /dev/null
+++ b/src/main/webapp/src/app/component/group-list/group-list.component.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+ L.p. |
+ {{getElementNumber(element)}} |
+
+
+
+ Id |
+ {{element.id}} |
+
+
+
+ Edytuj |
+
+
+ |
+
+
+
+ UsuĊ |
+
+
+ |
+
+
+
+
+
+
+
diff --git a/src/main/webapp/src/app/component/group-list/group-list.component.sass b/src/main/webapp/src/app/component/group-list/group-list.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/src/app/component/group-list/group-list.component.spec.ts b/src/main/webapp/src/app/component/group-list/group-list.component.spec.ts
new file mode 100644
index 0000000..a2d4946
--- /dev/null
+++ b/src/main/webapp/src/app/component/group-list/group-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupListComponent } from './group-list.component';
+
+describe('GroupListComponent', () => {
+ let component: GroupListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ GroupListComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(GroupListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
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
new file mode 100644
index 0000000..a4aa682
--- /dev/null
+++ b/src/main/webapp/src/app/component/group-list/group-list.component.ts
@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import {AbstractListComponent} from "../abstract-list.component";
+import {Group} from "../../model/group";
+import {BasicDataSource} from "../../dataSource/basic-data-source";
+import {GroupService} from "../../service/group.service";
+import {tap} from "rxjs";
+import {MatDialog} from "@angular/material/dialog";
+import {GroupFormComponent} from "../form/group-form/group-form.component";
+
+@Component({
+ selector: 'app-group-list',
+ templateUrl: './group-list.component.html',
+ styleUrls: ['./group-list.component.sass']
+})
+export class GroupListComponent extends AbstractListComponent{
+
+ dataSource: BasicDataSource;
+ displayedColumns: Map = new Map([
+ ['lp', true],
+ ['id', true],
+ ['edit', true],
+ ['delete', true],
+ ]);
+
+ constructor(
+ private groupService: GroupService,
+ private dialog: MatDialog
+ ) {
+ super();
+ this.dataSource = new BasicDataSource(groupService);
+ }
+
+ openFormDialog(group: Group | null = null) {
+ const dialogRef = this.dialog.open(GroupFormComponent, {
+ data: { group: group }
+ });
+ dialogRef.afterClosed().pipe(
+ tap(() => this.getPage())
+ ).subscribe()
+ }
+
+ deleteGroup(id: number) {
+ this.groupService.delete(id).pipe(
+ tap(() => this.getPage())
+ ).subscribe()
+ }
+}