działa edytowanie expensów i wyświetlanie aktualizacji

JanisBe · Jun 12, 2024 · 08b604f · 08b604f
1 parent 08aa7e6
commit 08b604f
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 82 deletions.
diff --git a/src/main/frontend/src/app/component/expense/add-expense/add-expense.component.ts b/src/main/frontend/src/app/component/expense/add-expense/add-expense.component.ts
@@ -93,7 +93,6 @@ export class AddExpenseComponent implements OnInit, OnDestroy {
     if (this.data.expenseId) {
       this.editMode = true;
       this.expenseService.findById(this.data.expenseId).subscribe(expense => {
-        console.log(expense);
         this.currentExpense = expense;
         this.debts = expense.debt;
         this.form.patchValue(this.currentExpense);
@@ -163,7 +162,6 @@ export class AddExpenseComponent implements OnInit, OnDestroy {
     if (this.editMode) {
       newExpense.id = this.currentExpense.id;
     }
-    console.log(newExpense);
     this.expenseService.saveExpense(newExpense).subscribe({
       next: (result) => {
         this.editMode ?
@@ -207,7 +205,6 @@ export class AddExpenseComponent implements OnInit, OnDestroy {
       this.editMode = true;
       this.expenseService.findById(this.data.expenseId).subscribe(expense => {
         this.currentExpense = expense;
-        console.log(this.currentExpense)
         this.form = new FormGroup({
           id: new FormControl(this.currentExpense.id),
           amount: new FormControl(this.currentExpense.amount, [Validators.required, Validators.pattern('^\\d*\\.?,?\\d*$')]),

diff --git a/src/main/frontend/src/app/component/expense/all-expenses/all-expenses.component.html b/src/main/frontend/src/app/component/expense/all-expenses/all-expenses.component.html
@@ -1,70 +1,74 @@
-<table [dataSource]="expenses" class="mat-elevation-z8" mat-table multiTemplateDataRows>
-  <ng-container matColumnDef="description">
-    <th *matHeaderCellDef mat-header-cell> Expense description</th>
-    <td *matCellDef="let expense" mat-cell> {{expense.description}} </td>
-  </ng-container>
-  <ng-container matColumnDef="amount">
-    <th *matHeaderCellDef mat-header-cell> Expense amount</th>
-    <td *matCellDef="let expense" mat-cell>
-      <div [innerHTML]="printAmount(expense)"></div>
-    </td>
-  </ng-container>
-  <ng-container matColumnDef="with">
-    <th *matHeaderCellDef mat-header-cell> With</th>
-    <td *matCellDef="let expense" mat-cell>
-      <div [innerHTML]="printUsers(expense)"></div>
-    </td>
-  </ng-container>
-  <ng-container matColumnDef="currency">
-    <th *matHeaderCellDef mat-header-cell> Expense currency</th>
-    <td *matCellDef="let expense" mat-cell> {{expense.currency}} </td>
-  </ng-container>
-  <ng-container matColumnDef="date">
-    <th *matHeaderCellDef mat-header-cell> Expense date</th>
-    <td *matCellDef="let expense" mat-cell> {{expense.date | date:'medium':'':'pl'}} </td>
-  </ng-container>
-  <ng-container matColumnDef="actions">
-    <th *matHeaderCellDef mat-header-cell> Actions</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>
-    </td>
-  </ng-container>
+@if (!!expenses?.length) {
+  <table [dataSource]="expenses" class="mat-elevation-z8" mat-table multiTemplateDataRows>
+    <ng-container matColumnDef="description">
+      <th *matHeaderCellDef mat-header-cell> Expense description</th>
+      <td *matCellDef="let expense" mat-cell> {{ expense.description }}</td>
+    </ng-container>
+    <ng-container matColumnDef="amount">
+      <th *matHeaderCellDef mat-header-cell> Expense amount</th>
+      <td *matCellDef="let expense" mat-cell>
+        <div [innerHTML]="printAmount(expense)"></div>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="with">
+      <th *matHeaderCellDef mat-header-cell> With</th>
+      <td *matCellDef="let expense" mat-cell>
+        <div [innerHTML]="printUsers(expense)"></div>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="currency">
+      <th *matHeaderCellDef mat-header-cell> Expense currency</th>
+      <td *matCellDef="let expense" mat-cell> {{ expense.currency }}</td>
+    </ng-container>
+    <ng-container matColumnDef="date">
+      <th *matHeaderCellDef mat-header-cell> Expense date</th>
+      <td *matCellDef="let expense" mat-cell> {{ expense.date | date:'medium':'':'pl' }}</td>
+    </ng-container>
+    <ng-container matColumnDef="actions">
+      <th *matHeaderCellDef mat-header-cell> Actions</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>
+      </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>
-      <button (click)="(expandedElement = expandedElement === expense ? null : expense); $event.stopPropagation()"
-              aria-label="expand row"
-              mat-icon-button>
-        <mat-icon *ngIf="expandedElement !== expense">keyboard_arrow_down</mat-icon>
-        <mat-icon *ngIf="expandedElement === expense">keyboard_arrow_up</mat-icon>
-      </button>
-    </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>
+        <button (click)="(expandedElement = expandedElement === expense ? null : expense); $event.stopPropagation()"
+                aria-label="expand row"
+                mat-icon-button>
+          <mat-icon *ngIf="expandedElement !== expense">keyboard_arrow_down</mat-icon>
+          <mat-icon *ngIf="expandedElement === expense">keyboard_arrow_up</mat-icon>
+        </button>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="expandedDetail">
-    <td *matCellDef="let expense" [attr.colspan]="columnsToDisplayWithExpand.length" mat-cell>
-      <div [@detailExpand]="expense == expandedElement ? 'expanded' : 'collapsed'"
-           class="example-element-detail">
-        <div class="example-element-diagram">
-          <div> {{expense.currency}} </div>
-          <div> {{expense.date | date:'medium':'':'pl'}} </div>
-          <div [innerHTML]="printAmount(expense)"></div>
-          <div [innerHTML]="printUsers(expense)"></div>
+    <ng-container matColumnDef="expandedDetail">
+      <td *matCellDef="let expense" [attr.colspan]="columnsToDisplayWithExpand.length" mat-cell>
+        <div [@detailExpand]="expense == expandedElement ? 'expanded' : 'collapsed'"
+             class="example-element-detail">
+          <div class="example-element-diagram">
+            <div> {{ expense.currency }}</div>
+            <div> {{ expense.date | date:'medium':'':'pl' }}</div>
+            <div [innerHTML]="printAmount(expense)"></div>
+            <div [innerHTML]="printUsers(expense)"></div>
+          </div>
+          <div>{{ expense.description }}</div>
         </div>
-        <div>{{expense.description}}</div>
-      </div>
-    </td>
-  </ng-container>
+      </td>
+    </ng-container>
 
-  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
 
-  <tr (click)="expandedElement = expandedElement === expense ? null : expense"
-      *matRowDef="let expense; columns: columnsToDisplayWithExpand;"
-      [class.example-expanded-row]="expandedElement === expense"
-      class="example-element-row"
-      mat-row>
-  </tr>
-  <tr *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row" mat-row></tr>
-</table>
+    <tr (click)="expandedElement = expandedElement === expense ? null : expense"
+        *matRowDef="let expense; columns: columnsToDisplayWithExpand;"
+        [class.example-expanded-row]="expandedElement === expense"
+        class="example-element-row"
+        mat-row>
+    </tr>
+    <tr *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row" mat-row></tr>
+  </table>
+} @else {
+  <h2>Jeszcze nie ma wydatków dla tej grupy</h2>
+}
diff --git a/src/main/frontend/src/app/component/expense/dialogs/split-dialog/split-dialog.component.ts b/src/main/frontend/src/app/component/expense/dialogs/split-dialog/split-dialog.component.ts
@@ -10,7 +10,6 @@ import {User} from "../../../../model/user";
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {Debt} from "../../../../model/debt";
 import {DataSharingService} from "../../../../service/data-sharing.service";
-import {SnackbarService} from "../../../../service/snackbar.service";
 import {MatButton} from '@angular/material/button';
 import {MatListOption, MatSelectionList} from '@angular/material/list';
 import {MatIcon} from '@angular/material/icon';
@@ -32,7 +31,6 @@ export class SplitDialogComponent implements OnInit, AfterViewInit {
     public dialogRef: MatDialogRef<SplitDialogComponent>,
     private fb: FormBuilder,
     private dataSharingService: DataSharingService,
-    private snackbarService: SnackbarService,
     private cd: ChangeDetectorRef) {
   }
 

diff --git a/...ain/frontend/src/app/component/expense/settlement-dialog/settlement-dialog.component.html b/...ain/frontend/src/app/component/expense/settlement-dialog/settlement-dialog.component.html
@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Rozliczenie dla grupy {{ data.group.groupName }}</h2>
 <mat-dialog-content>
-  @if (data.debts) {
+  @if (Object.keys(this.data.debts).length > 0) {
     <div>
       @for (settlement of settlement | keyvalue; track settlement.value) {
         <p> {{ settlement.key }}

diff --git a/src/main/frontend/src/app/component/expense/settlement-dialog/settlement-dialog.component.ts b/src/main/frontend/src/app/component/expense/settlement-dialog/settlement-dialog.component.ts
@@ -93,6 +93,8 @@ export class SettlementDialogComponent implements OnInit {
       this.settlement[currency] = Object.values(groupedTransactions);
     });
   }
+
+  protected readonly Object = Object;
 }
 
 export interface SettlementDialogData {

diff --git a/src/main/frontend/src/app/component/group/group-summary/group-summary.component.html b/src/main/frontend/src/app/component/group/group-summary/group-summary.component.html
@@ -1,6 +1,6 @@
 <h1>{{ groupName }}</h1>
-<button (click)="addExpense()" color="primary" mat-raised-button>Dodaj nowy wydatek</button>
-@for (expense of expenses | keyvalue: reverseKeyOrder; track expense) {
+<button (click)="editExpense()" color="primary" mat-raised-button>Dodaj nowy wydatek</button>
+@for (expense of expenses | keyvalue: reverseKeyOrder; track expense.key) {
   <div>
     <table class="table">
       <thead>
@@ -10,10 +10,10 @@ <h1>{{ groupName }}</h1>
       </thead>
       <tbody>
         @for (ex of expense.value; track ex) {
-          <tr style="border: 1px solid black">
+          <tr style="border: 1px solid black" (click)="editExpense(ex.id!)">
             <td><b>{{ ex.description }}</b></td>
             @for (debt of ex.debt; track debt) {
-              <td (click)="editExpense(ex.id!)">
+              <td>
                 {{ debt.from.name }} -> {{ debt.to.name }} = {{ debt.amount }}
               </td>
             }

diff --git a/src/main/frontend/src/app/component/group/group-summary/group-summary.component.ts b/src/main/frontend/src/app/component/group/group-summary/group-summary.component.ts
@@ -27,7 +27,6 @@ export class GroupSummaryComponent implements OnInit {
   @Input() groupName?: number;
 
   ngOnInit(): void {
-    console.log("refreshed")
     this.expenseService.findAllByGroupId(this.groupId!).subscribe(expenses => {
       this.expenses = this.groupByDate(expenses);
     });
@@ -54,14 +53,10 @@ export class GroupSummaryComponent implements OnInit {
     return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
   }
 
-  addExpense() {
-    this.dialog.open(AddExpenseComponent, {data: {groupId: this.groupId}, width: '600px'})
+  editExpense(id?: number) {
+    this.dialog.open(AddExpenseComponent, {data: {expenseId: id, groupId: this.groupId}, width: '600px'})
       .afterClosed().subscribe(() => {
       this.ngOnInit();
     });
   }
-
-  editExpense(id: number) {
-    this.dialog.open(AddExpenseComponent, {data: {expenseId: id, groupId: this.groupId}, width: '600px'})
-  }
 }