przycisk w group-summary.component.html

DEPLOY

src/main/frontend/angular.json

@@ -23,6 +23,9 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "../resources/frontend",
+            "allowedCommonJsDependencies": [
+              "ts-md5"
+            ],
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [

src/main/frontend/src/app/component/group/group-summary/group-summary.component.html

@@ -1,3 +1,4 @@
+<button (click)="addExpense()" color="primary" mat-raised-button>Dodaj nowy wydatek</button>
 <div *ngFor="let expense of expenses | keyvalue: reverseKeyOrder">
   <div>
     <table>

src/main/frontend/src/app/component/group/group-summary/group-summary.component.ts

@@ -3,6 +3,8 @@ import {ActivatedRoute} from "@angular/router";
 import {ExpenseService} from "../../../service/expense.service";
 import {Expense} from "../../../model/expense";
 import {KeyValue} from "@angular/common";
+import {MatDialog} from "@angular/material/dialog";
+import {AddExpenseComponent} from "../../expense/add-expense/add-expense.component";
 
 @Component({
   selector: 'group-summary',
@@ -14,7 +16,8 @@ export class GroupSummaryComponent implements OnInit {
   expenses: Map<string, Expense[]> = new Map<string, Expense[]>();
 
   constructor(private expenseService: ExpenseService,
-              private route: ActivatedRoute
+              private route: ActivatedRoute,
+              private dialog: MatDialog
   ) {
   }
 
@@ -48,4 +51,8 @@ export class GroupSummaryComponent implements OnInit {
   reverseKeyOrder = (a: KeyValue<string, Expense[]>, b: KeyValue<string, Expense[]>): number => {
     return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
   }
+
+  addExpense() {
+    this.dialog.open(AddExpenseComponent, {data: {groupId: this.groupId}, width: '600px'});
+  }
 }