działa zapisywanie i edycja wydatków

src/main/frontend/src/app/component/expense/add-expense/add-expense.component.html

@@ -24,17 +24,17 @@ <h3 mat-dialog-title>{{ editMode ? 'Edytowanie wydatku' : 'Dodawanie wydatku' }}
           </div>
           <div class="expense-amount">
             <mat-form-field appearance="outline" class="col-12">
-              <mat-label>Ile {{ defaultCurrency }}</mat-label>
+              <mat-label>Ile {{ currentCurrency }}</mat-label>
               <input #amountField (keyup)="updateValue(amountField.value)"
                      class="form-control"
                      formControlName="amount"
                      id="amount"
                      matInput
                      (blur)="sanitizeInput(amountField.value)"
                      type="text">
-              <span *ngIf="form.controls['amount'].errors?.['invalidAmount']">
-                  Kwota w formacie xxx.xx
-              </span>
+              @if (form.controls['amount'].errors?.['invalidAmount']) {
+                <span class="warning-text">Kwota w formacie xxx.xx</span>
+              }
               <mat-chip (click)="openCurrencyDialog(currencies, defaultCurrency)" matSuffix
                         style="margin-right:10px">{{ currentCurrency }}
               </mat-chip>
@@ -69,9 +69,10 @@ <h3 mat-dialog-title>{{ editMode ? 'Edytowanie wydatku' : 'Dodawanie wydatku' }}
     }
   </div>
   <div mat-dialog-actions>
-    <div>
-      <button (click)="onSubmit()" [disabled]="this.form.invalid" mat-raised-button type="button">Zapisz</button>
-      <button (click)="onCancel()" mat-raised-button type="reset">Anuluj</button>
-    </div>
+    <button (click)="onSubmit()" [disabled]="this.form.invalid" mat-raised-button type="button">Zapisz</button>
+    <button (click)="onCancel()" mat-raised-button type="reset">Anuluj</button>
+    @if (editMode) {
+      <button class="float-end" (click)="onDelete()" mat-raised-button type="button">Skasuj</button>
+    }
   </div>
 }

src/main/frontend/src/app/component/expense/add-expense/add-expense.component.scss

@@ -70,4 +70,9 @@
 .slide-in-from-right {
   animation: slideInFromRight 0.5s ease-out;
   background-color: #0a58ca;
+}
+
+.warning-text {
+  color: red;
+  font-size: 11px;
 }

src/main/frontend/src/app/component/expense/add-expense/add-expense.component.ts

@@ -36,6 +36,7 @@ import {MatIcon} from '@angular/material/icon';
 import {AsyncPipe, NgIf} from '@angular/common';
 import {LoadingService} from "../../../service/loading.service";
 import {SpinnerComponent} from "../../common/spinner/spinner.component";
+import {ConfirmationComponent} from "../../common/confirmation/confirmation.component";
 
 
 @Component({
@@ -110,8 +111,9 @@ export class AddExpenseComponent implements OnInit, OnDestroy {
       this.currentGroupName$ = of(this.currentGroup.groupName);
       this.isUserInGroup = this.currentGroup.users.map(user => user.id).includes(this.currentUser.id);
       this.users = group.users;
-      if (this.editMode) {
+      if (!this.editMode) {
         this.currentCurrency = this.defaultCurrency;
+        this.form.get('currency')?.patchValue(this.currentCurrency);
       }
     });
 
@@ -218,17 +220,18 @@ export class AddExpenseComponent implements OnInit, OnDestroy {
     });
   }
 
-  private calculateAmount(expense: Expense): number {
-    if (!expense?.debt) {
-      return 0;
-    }
-    let total = 0;
-    expense.debt.map((debt) => {
-      if (debt.amount < 0) {
-        total = -(debt.amount * expense.debt.length / (expense.debt.length - 1)).toFixed(2);
+  onDelete() {
+    this.dialog.open(ConfirmationComponent, {data: {category: "wydatek", content: this.currentExpense.description}})
+      .afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.expenseService.deleteExpense(this.currentExpense.id!).subscribe(
+          () => {
+            this.snackbarService.displayMessage(`Wydatek ${this.currentExpense.description} został skasowany`, 3000);
+            this.dialog.closeAll();
+          }
+        );
       }
-    })
-    return total;
+    });
   }
 
   openCurrencyDialog(currencies: string[], defaultCurrency: string) {
@@ -348,4 +351,17 @@ export class AddExpenseComponent implements OnInit, OnDestroy {
       }
     });
   }
+
+  private calculateAmount(expense: Expense): number | string {
+    if (!expense?.debt) {
+      return "";
+    }
+    let total = 0;
+    expense.debt.map((debt) => {
+      if (debt.amount < 0) {
+        total = -(debt.amount * expense.debt.length / (expense.debt.length - 1)).toFixed(2);
+      }
+    })
+    return total;
+  }
 }

src/main/frontend/src/app/component/expense/all-expenses/all-expenses.component.html

@@ -27,11 +27,10 @@
     <ng-container matColumnDef="actions">
       <th *matHeaderCellDef mat-header-cell>Akcje</th>
       <td *matCellDef="let expense" mat-cell>
-        <mat-icon (click)="editExpense(expense)" class="pointer">edit</mat-icon>&nbsp;
-        <mat-icon (click)="deleteExpense(expense)" class="pointer">delete</mat-icon>
+        <mat-icon (click)="editExpense(expense.id); $event.stopPropagation()" class="pointer">edit</mat-icon>&nbsp;
+        <mat-icon (click)="deleteExpense(expense); $event.stopPropagation()" class="pointer">delete</mat-icon>
       </td>
     </ng-container>
-
     <ng-container matColumnDef="szczegóły">
       <th *matHeaderCellDef aria-label="row actions" mat-header-cell>&nbsp;</th>
       <td *matCellDef="let expense" mat-cell>

src/main/frontend/src/app/component/expense/all-expenses/all-expenses.component.ts

@@ -21,6 +21,7 @@ import {
   MatRowDef,
   MatTable
 } from '@angular/material/table';
+import {AddExpenseComponent} from "../add-expense/add-expense.component";
 
 @Component({
   selector: 'all-expenses',
@@ -66,15 +67,14 @@ export class AllExpensesComponent implements OnInit {
   @Input() groupId: number;
 
   ngOnInit(): void {
-    if (!!this.groupId) {
       this.fetchExpensesForGroup(this.groupId);
-    } else {
-      this.fetchAllExpenses();
-    }
   }
 
-  editExpense(expense: Expense) {
-    this.router.navigate(['expense/details', expense.id]);
+  editExpense(id?: number) {
+    this.dialog.open(AddExpenseComponent, {data: {expenseId: id, groupId: this.groupId}, width: '600px'})
+      .afterClosed().subscribe(() => {
+      this.ngOnInit();
+    });
   }
 
   deleteExpense(expense: Expense) {
@@ -114,13 +114,4 @@ export class AllExpensesComponent implements OnInit {
     this.expenseService.findAllByGroupId(groupId).subscribe(value => this.expenses = value);
   }
 
-  private fetchAllExpenses() {
-    this.expenseService.findAll()
-      .subscribe(value => {
-        value.map(ex => {
-          ex.date = new Date(ex.date);
-        });
-        this.expenses = value;
-      });
-  }
 }