From 609c7e37c1a42b51d68839df7e98d8983abcccc1 Mon Sep 17 00:00:00 2001
From: Iga Bartosz Collins <igabar@st.amu.edu.pl>
Date: Tue, 31 Jan 2023 10:42:04 +0100
Subject: [PATCH] Added group list component in webapp.

---
 .../group-list/group-list.component.html      | 44 +++++++++++++++++
 .../group-list/group-list.component.sass      |  0
 .../group-list/group-list.component.spec.ts   | 23 +++++++++
 .../group-list/group-list.component.ts        | 47 +++++++++++++++++++
 4 files changed, 114 insertions(+)
 create mode 100644 src/main/webapp/src/app/component/group-list/group-list.component.html
 create mode 100644 src/main/webapp/src/app/component/group-list/group-list.component.sass
 create mode 100644 src/main/webapp/src/app/component/group-list/group-list.component.spec.ts
 create mode 100644 src/main/webapp/src/app/component/group-list/group-list.component.ts

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 @@
+<div class="loadingWrapper">
+  <div class="loadingOverlay" *ngIf="dataSource.loading$ | async">
+    <mat-spinner class="loadingSpinner"></mat-spinner>
+  </div>
+  <button mat-button (click)="openFormDialog()">
+    <mat-icon>add</mat-icon>
+    Dodaj
+  </button>
+  <div class="mat-elevation-z2">
+    <table mat-table [dataSource]="dataSource">
+
+      <ng-container matColumnDef="lp">
+        <th mat-header-cell *matHeaderCellDef>L.p.</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">  {{getElementNumber(element)}}  </td>
+      </ng-container>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>Id</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">  {{element.id}}  </td>
+      </ng-container>
+
+      <ng-container matColumnDef="edit">
+        <th mat-header-cell *matHeaderCellDef>Edytuj</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">
+          <button mat-icon-button (click)="openFormDialog(element)">
+            <mat-icon>edit</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef>Usuń</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">
+          <button mat-icon-button (click)="deleteGroup(element.id)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="getDisplayedColumns()"></tr>
+      <tr mat-row *matRowDef="let row; columns: getDisplayedColumns();"></tr>
+    </table>
+  </div>
+</div>
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<GroupListComponent>;
+
+  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<Group, number>{
+
+  dataSource: BasicDataSource<Group, number>;
+  displayedColumns: Map<string, boolean> = new Map<string, boolean>([
+    ['lp', true],
+    ['id', true],
+    ['edit', true],
+    ['delete', true],
+  ]);
+
+  constructor(
+    private groupService: GroupService,
+    private dialog: MatDialog
+  ) {
+    super();
+    this.dataSource = new BasicDataSource<Group, number>(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()
+  }
+}