From 598c34dd888a58dd3398f96e794ca5384894e7fa Mon Sep 17 00:00:00 2001 From: lica200 Date: Sun, 12 May 2024 15:13:52 +0200 Subject: [PATCH 01/20] FE-#90: init components shopping --- frontend/src/app/app.module.ts | 6 ++ .../widget-container.component.html | 6 ++ .../add-auftrag-dialog.component.html | 19 +++++ .../add-auftrag-dialog.component.scss | 0 .../add-auftrag-dialog.component.spec.ts | 23 ++++++ .../add-auftrag-dialog.component.ts | 18 +++++ .../default-page/default-page.component.html | 12 +++ .../default-page/default-page.component.scss | 0 .../default-page.component.spec.ts | 23 ++++++ .../default-page/default-page.component.ts | 17 +++++ .../einkaufsliste-widget.component.html | 1 + .../einkaufsliste-widget.component.scss | 0 .../einkaufsliste-widget.component.spec.ts | 23 ++++++ .../einkaufsliste-widget.component.ts | 17 +++++ frontend/src/assets/noShoppingList.svg | 75 +++++++++++++++++++ 15 files changed, 240 insertions(+) create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.scss create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.spec.ts create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.html create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.scss create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.spec.ts create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.spec.ts create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts create mode 100644 frontend/src/assets/noShoppingList.svg diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index c1c0e36..acb94b2 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -52,6 +52,9 @@ import {WidgetsBarComponent} from './eventpage/widgets-section/widgets-bar/widge import {MatTabsModule} from "@angular/material/tabs"; import { ParticipantsSidenavComponent } from './eventpage/participants-sidenav/participants-sidenav.component'; import { ParticipantCardComponent } from './eventpage/participants-sidenav/participant-card/participant-card.component'; +import { EinkaufslisteWidgetComponent } from './widgets/einkaufsliste-widget/einkaufsliste-widget.component'; +import { DefaultPageComponent } from './widgets/einkaufsliste-widget/default-page/default-page.component'; +import { AddAuftragDialogComponent } from './widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component'; registerLocaleData(localeDe); @@ -98,6 +101,9 @@ function loadMapApi(httpClient: HttpClient) { WidgetsBarComponent, ParticipantsSidenavComponent, ParticipantCardComponent, + EinkaufslisteWidgetComponent, + DefaultPageComponent, + AddAuftragDialogComponent, ], imports: [ BrowserModule, diff --git a/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html b/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html index e65348f..8ca8d50 100644 --- a/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html +++ b/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html @@ -6,6 +6,12 @@ (onWidgetUpdated)="onWidgetUpdated.emit($event)" > } + @case (WidgetType.SHOPPING_LIST) { + + } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html new file mode 100644 index 0000000..97e618b --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html @@ -0,0 +1,19 @@ +

Einkaufsauftrag hinzufügen

+ + + + Beschreibung + + + + + + + + diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.spec.ts new file mode 100644 index 0000000..f96d6b2 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddAuftragDialogComponent } from './add-auftrag-dialog.component'; + +describe('AddAuftragDialogComponent', () => { + let component: AddAuftragDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AddAuftragDialogComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddAuftragDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts new file mode 100644 index 0000000..098c5d8 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts @@ -0,0 +1,18 @@ +import {Component, NgZone} from '@angular/core'; +import {MatDialogRef} from "@angular/material/dialog"; +import {LocationAddCommand} from "../../../../model/map-widget"; + + +@Component({ + selector: 'app-add-auftrag-dialog', + templateUrl: './add-auftrag-dialog.component.html', + styleUrl: './add-auftrag-dialog.component.scss' +}) +export class AddAuftragDialogComponent { + constructor(private dialogRef: MatDialogRef) { + } + + closeDialog() { + this.dialogRef.close(); + } +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.html b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.html new file mode 100644 index 0000000..8f05f8c --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.html @@ -0,0 +1,12 @@ +no Shopping-List Bild +

Kein Einkaufsautrag angelegt

+

Lege einen Einkaufsantrag über dieses + + an

diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.spec.ts new file mode 100644 index 0000000..965bd89 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DefaultPageComponent } from './default-page.component'; + +describe('DefaultPageComponent', () => { + let component: DefaultPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [DefaultPageComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DefaultPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts new file mode 100644 index 0000000..d691a25 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import {AddLocationDialogComponent} from "../../maps-widget/add-location-dialog/add-location-dialog.component"; +import {AddAuftragDialogComponent} from "../add-auftrag-dialog/add-auftrag-dialog.component"; +import {MatDialog} from "@angular/material/dialog"; + +@Component({ + selector: 'app-default-page', + templateUrl: './default-page.component.html', + styleUrl: './default-page.component.scss' +}) +export class DefaultPageComponent { + constructor(private dialog: MatDialog) { + } + openAddShoppingDialog() { + const dialogRef = this.dialog.open(AddAuftragDialogComponent, {width: "400px"}); + } +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html new file mode 100644 index 0000000..ed9ac5d --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html @@ -0,0 +1 @@ +

einkaufsliste-widget works!

diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.spec.ts new file mode 100644 index 0000000..50a6120 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EinkaufslisteWidgetComponent } from './einkaufsliste-widget.component'; + +describe('EinkaufslisteWidgetComponent', () => { + let component: EinkaufslisteWidgetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EinkaufslisteWidgetComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EinkaufslisteWidgetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts new file mode 100644 index 0000000..bbfe4b5 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -0,0 +1,17 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {BaseWidget} from "../../../model/common-widget"; +import {MapWidget} from "../../../model/map-widget"; + +@Component({ + selector: 'app-einkaufsliste-widget', + templateUrl: './einkaufsliste-widget.component.html', + styleUrl: './einkaufsliste-widget.component.scss' +}) +export class EinkaufslisteWidgetComponent { + @Input() + eventId!: string; + + @Input({transform: (value: BaseWidget): MapWidget => value as MapWidget}) + widget!: MapWidget; + +} diff --git a/frontend/src/assets/noShoppingList.svg b/frontend/src/assets/noShoppingList.svg new file mode 100644 index 0000000..affe491 --- /dev/null +++ b/frontend/src/assets/noShoppingList.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From e794e05084d7a051190e848e6c354459f9305aae Mon Sep 17 00:00:00 2001 From: lica200 Date: Sun, 12 May 2024 16:30:59 +0200 Subject: [PATCH 02/20] FE-#90: default page extended --- frontend/package.json | 1 + .../add-auftrag-dialog.component.html | 6 ++++- .../add-auftrag-dialog.component.ts | 24 ++++++++++++++++--- .../default-page/default-page.component.ts | 12 +++++++++- .../einkaufsliste-widget.component.ts | 9 ++++--- frontend/src/model/shoppinglist-widget.ts | 19 +++++++++++++++ 6 files changed, 63 insertions(+), 8 deletions(-) create mode 100644 frontend/src/model/shoppinglist-widget.ts diff --git a/frontend/package.json b/frontend/package.json index 49a2787..dcb5878 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,6 +23,7 @@ "@angular/platform-browser": "^17.3.6", "@angular/platform-browser-dynamic": "^17.3.6", "@angular/router": "^17.3.6", + "@material/snackbar": "^14.0.0", "material-components-web": "^14.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html index 97e618b..7fc4187 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html @@ -2,7 +2,11 @@

Einkaufsauftrag hinzufügen

- Beschreibung + Auftrag + + Ersteller + + Menge diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts index 098c5d8..0b8d732 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts @@ -1,6 +1,8 @@ -import {Component, NgZone} from '@angular/core'; +import {Component, ElementRef, input, NgZone, ViewChild} from '@angular/core'; import {MatDialogRef} from "@angular/material/dialog"; import {LocationAddCommand} from "../../../../model/map-widget"; +import {MatSnackBar} from "@angular/material/snack-bar"; +import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; @Component({ @@ -9,10 +11,26 @@ import {LocationAddCommand} from "../../../../model/map-widget"; styleUrl: './add-auftrag-dialog.component.scss' }) export class AddAuftragDialogComponent { - constructor(private dialogRef: MatDialogRef) { + private description:string|undefined; + private amount:string|undefined; + constructor(private dialogRef: MatDialogRef, private _snackbar:MatSnackBar) { } closeDialog() { - this.dialogRef.close(); + const addCommand: EntryAddCommand = { + description: "successfullyadded", + amount: "3" + }; + + this.dialogRef.close(addCommand); + this.showMessage("snack") + } + showMessage(messageToshow:string, snackBarClass:string="successfull"){ + this._snackbar.open(messageToshow, 'close!',{ + duration: 5000, + panelClass:snackBarClass + }) + } + } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts index d691a25..112ac89 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts @@ -2,6 +2,8 @@ import { Component } from '@angular/core'; import {AddLocationDialogComponent} from "../../maps-widget/add-location-dialog/add-location-dialog.component"; import {AddAuftragDialogComponent} from "../add-auftrag-dialog/add-auftrag-dialog.component"; import {MatDialog} from "@angular/material/dialog"; +import {EinkaufslisteWidgetComponent} from "../einkaufsliste-widget.component"; +import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; @Component({ selector: 'app-default-page', @@ -9,9 +11,17 @@ import {MatDialog} from "@angular/material/dialog"; styleUrl: './default-page.component.scss' }) export class DefaultPageComponent { - constructor(private dialog: MatDialog) { + constructor(private dialog: MatDialog, private root:EinkaufslisteWidgetComponent) { } openAddShoppingDialog() { const dialogRef = this.dialog.open(AddAuftragDialogComponent, {width: "400px"}); + dialogRef.afterClosed().subscribe(addCommand => { + if (addCommand) { + this.addAuftrag(addCommand); + } + }); + } + addAuftrag(addCommand:EntryAddCommand){ + this.root.addAuftrag(addCommand); } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index bbfe4b5..59521ff 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -1,6 +1,6 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; import {BaseWidget} from "../../../model/common-widget"; -import {MapWidget} from "../../../model/map-widget"; +import {Entry, EntryAddCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; @Component({ selector: 'app-einkaufsliste-widget', @@ -11,7 +11,10 @@ export class EinkaufslisteWidgetComponent { @Input() eventId!: string; - @Input({transform: (value: BaseWidget): MapWidget => value as MapWidget}) - widget!: MapWidget; + @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) + widget!: ShoppingWidget; + addAuftrag(addCommand:EntryAddCommand){ + return null; + } } diff --git a/frontend/src/model/shoppinglist-widget.ts b/frontend/src/model/shoppinglist-widget.ts new file mode 100644 index 0000000..39ac06d --- /dev/null +++ b/frontend/src/model/shoppinglist-widget.ts @@ -0,0 +1,19 @@ +import {BaseWidget} from "./common-widget"; + +export type ShoppingWidget = BaseWidget & { + entrys: Entry[]; +} + +export type Entry = { + id: string; + checked: boolean; + creatorId: string; + description: string; + amount: string; + buyerId: string; +} + +export type EntryAddCommand = { + description: string; + amount: string; +} From cb6d153763deb51f27d915270bab5011d4d8e354 Mon Sep 17 00:00:00 2001 From: lica200 Date: Sun, 12 May 2024 16:38:01 +0200 Subject: [PATCH 03/20] FE-#90: renamed default-widget-page --- frontend/src/app/app.module.ts | 2 +- .../default-page.component.html | 0 .../default-page.component.scss | 0 .../default-page.component.spec.ts | 0 .../default-page.component.ts | 0 5 files changed, 1 insertion(+), 1 deletion(-) rename frontend/src/app/widgets/einkaufsliste-widget/{default-page => default-shopping-page}/default-page.component.html (100%) rename frontend/src/app/widgets/einkaufsliste-widget/{default-page => default-shopping-page}/default-page.component.scss (100%) rename frontend/src/app/widgets/einkaufsliste-widget/{default-page => default-shopping-page}/default-page.component.spec.ts (100%) rename frontend/src/app/widgets/einkaufsliste-widget/{default-page => default-shopping-page}/default-page.component.ts (100%) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index acb94b2..9ac2566 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -53,7 +53,7 @@ import {MatTabsModule} from "@angular/material/tabs"; import { ParticipantsSidenavComponent } from './eventpage/participants-sidenav/participants-sidenav.component'; import { ParticipantCardComponent } from './eventpage/participants-sidenav/participant-card/participant-card.component'; import { EinkaufslisteWidgetComponent } from './widgets/einkaufsliste-widget/einkaufsliste-widget.component'; -import { DefaultPageComponent } from './widgets/einkaufsliste-widget/default-page/default-page.component'; +import { DefaultPageComponent } from './widgets/einkaufsliste-widget/default-shopping-page/default-page.component'; import { AddAuftragDialogComponent } from './widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component'; registerLocaleData(localeDe); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.html b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.html similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.html rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.html diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.scss similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.scss rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.scss diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.spec.ts similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.spec.ts rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.spec.ts diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.ts similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/default-page/default-page.component.ts rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.ts From e99d3ea1b0eb6b8ec26c60cd2ad46afd31163f65 Mon Sep 17 00:00:00 2001 From: lica200 Date: Sun, 12 May 2024 16:48:06 +0200 Subject: [PATCH 04/20] FE-#90: renamed default-widget-page --- frontend/src/app/app.module.ts | 4 ++-- ...ent.html => default-shopping-page.component.html} | 0 ...ent.scss => default-shopping-page.component.scss} | 0 ...ec.ts => default-shopping-page.component.spec.ts} | 12 ++++++------ ...mponent.ts => default-shopping-page.component.ts} | 8 ++++---- 5 files changed, 12 insertions(+), 12 deletions(-) rename frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/{default-page.component.html => default-shopping-page.component.html} (100%) rename frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/{default-page.component.scss => default-shopping-page.component.scss} (100%) rename frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/{default-page.component.spec.ts => default-shopping-page.component.spec.ts} (54%) rename frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/{default-page.component.ts => default-shopping-page.component.ts} (82%) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 9ac2566..790f263 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -53,7 +53,7 @@ import {MatTabsModule} from "@angular/material/tabs"; import { ParticipantsSidenavComponent } from './eventpage/participants-sidenav/participants-sidenav.component'; import { ParticipantCardComponent } from './eventpage/participants-sidenav/participant-card/participant-card.component'; import { EinkaufslisteWidgetComponent } from './widgets/einkaufsliste-widget/einkaufsliste-widget.component'; -import { DefaultPageComponent } from './widgets/einkaufsliste-widget/default-shopping-page/default-page.component'; +import { DefaultShoppingPageComponent } from './widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component'; import { AddAuftragDialogComponent } from './widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component'; registerLocaleData(localeDe); @@ -102,7 +102,7 @@ function loadMapApi(httpClient: HttpClient) { ParticipantsSidenavComponent, ParticipantCardComponent, EinkaufslisteWidgetComponent, - DefaultPageComponent, + DefaultShoppingPageComponent, AddAuftragDialogComponent, ], imports: [ diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.html b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.html rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.scss rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.spec.ts similarity index 54% rename from frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.spec.ts rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.spec.ts index 965bd89..2faf4b4 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.spec.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DefaultPageComponent } from './default-page.component'; +import { DefaultShoppingPageComponent } from './default-shopping-page.component'; describe('DefaultPageComponent', () => { - let component: DefaultPageComponent; - let fixture: ComponentFixture; + let component: DefaultShoppingPageComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [DefaultPageComponent] + declarations: [DefaultShoppingPageComponent] }) .compileComponents(); - - fixture = TestBed.createComponent(DefaultPageComponent); + + fixture = TestBed.createComponent(DefaultShoppingPageComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts similarity index 82% rename from frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.ts rename to frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts index 112ac89..57f9724 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-page.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts @@ -6,11 +6,11 @@ import {EinkaufslisteWidgetComponent} from "../einkaufsliste-widget.component"; import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; @Component({ - selector: 'app-default-page', - templateUrl: './default-page.component.html', - styleUrl: './default-page.component.scss' + selector: 'app-default-shopping-page', + templateUrl: './default-shopping-page.component.html', + styleUrl: './default-shopping-page.component.scss' }) -export class DefaultPageComponent { +export class DefaultShoppingPageComponent { constructor(private dialog: MatDialog, private root:EinkaufslisteWidgetComponent) { } openAddShoppingDialog() { From 79e994322921656b6970073329bd372cf5210f87 Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Mon, 13 May 2024 15:45:05 +0200 Subject: [PATCH 05/20] FE-#90: refactor display of default page or einkaufsliste widget page --- frontend/package-lock.json | 268 +++++++++++++++--- frontend/src/app/app.module.ts | 4 +- .../profile-menu/profile-menu.component.html | 2 +- .../add-auftrag-dialog.component.ts | 36 --- .../add-eintrag-dialog.component.html} | 10 +- .../add-eintrag-dialog.component.scss} | 0 .../add-eintrag-dialog.component.spec.ts} | 14 +- .../add-eintrag-dialog.component.ts | 66 +++++ .../default-shopping-page.component.ts | 12 +- .../einkaufsliste-widget.component.html | 19 +- .../einkaufsliste-widget.component.ts | 20 +- frontend/src/model/shoppinglist-widget.ts | 2 +- .../widgets/einkaufsliste-widget.service.ts | 21 ++ 13 files changed, 384 insertions(+), 90 deletions(-) delete mode 100644 frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts rename frontend/src/app/widgets/einkaufsliste-widget/{add-auftrag-dialog/add-auftrag-dialog.component.html => add-eintrag-dialog/add-eintrag-dialog.component.html} (72%) rename frontend/src/app/widgets/einkaufsliste-widget/{add-auftrag-dialog/add-auftrag-dialog.component.scss => add-eintrag-dialog/add-eintrag-dialog.component.scss} (100%) rename frontend/src/app/widgets/einkaufsliste-widget/{add-auftrag-dialog/add-auftrag-dialog.component.spec.ts => add-eintrag-dialog/add-eintrag-dialog.component.spec.ts} (50%) create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts create mode 100644 frontend/src/services/widgets/einkaufsliste-widget.service.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3dcf50e..e5fcf1a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "^17.3.6", "@angular/platform-browser-dynamic": "^17.3.6", "@angular/router": "^17.3.6", + "@material/snackbar": "^14.0.0", "material-components-web": "^14.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -671,6 +672,48 @@ "@angular/platform-browser": "^17.0.0 || ^18.0.0" } }, + "node_modules/@angular/material-experimental/node_modules/@material/snackbar": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-sm7EbVKddaXpT/aXAYBdPoN0k8yeg9+dprgBUkrdqGzWJAeCkxb4fv2B3He88YiCtvkTz2KLY4CThPQBSEsMFQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@angular/material/node_modules/@material/snackbar": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-sm7EbVKddaXpT/aXAYBdPoN0k8yeg9+dprgBUkrdqGzWJAeCkxb4fv2B3He88YiCtvkTz2KLY4CThPQBSEsMFQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, "node_modules/@angular/platform-browser": { "version": "17.3.6", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.6.tgz", @@ -3610,23 +3653,196 @@ } }, "node_modules/@material/snackbar": { - "version": "15.0.0-canary.7f224ddd4.0", - "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7f224ddd4.0.tgz", - "integrity": "sha512-sm7EbVKddaXpT/aXAYBdPoN0k8yeg9+dprgBUkrdqGzWJAeCkxb4fv2B3He88YiCtvkTz2KLY4CThPQBSEsMFQ==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0.tgz", + "integrity": "sha512-28uQBj9bw7BalNarK9j8/aVW4Ys5aRaGHoWH+CeYvAjqQUJkrYoqM52aiKhBwqrjBPMJHk1aXthe3YbzMBm6vA==", "dependencies": { - "@material/animation": "15.0.0-canary.7f224ddd4.0", - "@material/base": "15.0.0-canary.7f224ddd4.0", - "@material/button": "15.0.0-canary.7f224ddd4.0", - "@material/dom": "15.0.0-canary.7f224ddd4.0", - "@material/elevation": "15.0.0-canary.7f224ddd4.0", - "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", - "@material/icon-button": "15.0.0-canary.7f224ddd4.0", - "@material/ripple": "15.0.0-canary.7f224ddd4.0", - "@material/rtl": "15.0.0-canary.7f224ddd4.0", - "@material/shape": "15.0.0-canary.7f224ddd4.0", - "@material/theme": "15.0.0-canary.7f224ddd4.0", - "@material/tokens": "15.0.0-canary.7f224ddd4.0", - "@material/typography": "15.0.0-canary.7f224ddd4.0", + "@material/animation": "^14.0.0", + "@material/base": "^14.0.0", + "@material/button": "^14.0.0", + "@material/dom": "^14.0.0", + "@material/elevation": "^14.0.0", + "@material/feature-targeting": "^14.0.0", + "@material/icon-button": "^14.0.0", + "@material/ripple": "^14.0.0", + "@material/rtl": "^14.0.0", + "@material/shape": "^14.0.0", + "@material/theme": "^14.0.0", + "@material/typography": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/animation": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-14.0.0.tgz", + "integrity": "sha512-VlYSfUaIj/BBVtRZI8Gv0VvzikFf+XgK0Zdgsok5c1v5DDnNz5tpB8mnGrveWz0rHbp1X4+CWLKrTwNmjrw3Xw==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/base": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-14.0.0.tgz", + "integrity": "sha512-Ou7vS7n1H4Y10MUZyYAbt6H0t67c6urxoCgeVT7M38aQlaNUwFMODp7KT/myjYz2YULfhu3PtfSV3Sltgac9mA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/button": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/button/-/button-14.0.0.tgz", + "integrity": "sha512-dqqHaJq0peyXBZupFzCjmvScrfljyVU66ZCS3oldsaaj5iz8sn33I/45Z4zPzdR5F5z8ExToHkRcXhakj1UEAA==", + "dependencies": { + "@material/density": "^14.0.0", + "@material/dom": "^14.0.0", + "@material/elevation": "^14.0.0", + "@material/feature-targeting": "^14.0.0", + "@material/focus-ring": "^14.0.0", + "@material/ripple": "^14.0.0", + "@material/rtl": "^14.0.0", + "@material/shape": "^14.0.0", + "@material/theme": "^14.0.0", + "@material/tokens": "^14.0.0", + "@material/touch-target": "^14.0.0", + "@material/typography": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/density": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/density/-/density-14.0.0.tgz", + "integrity": "sha512-NlxXBV5XjNsKd8UXF4K/+fOXLxoFNecKbsaQO6O2u+iG8QBfFreKRmkhEBb2hPPwC3w8nrODwXX0lHV+toICQw==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/dom": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/dom/-/dom-14.0.0.tgz", + "integrity": "sha512-8t88XyacclTj8qsIw9q0vEj4PI2KVncLoIsIMzwuMx49P2FZg6TsLjor262MI3Qs00UWAifuLMrhnOnfyrbe7Q==", + "dependencies": { + "@material/feature-targeting": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/elevation": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-14.0.0.tgz", + "integrity": "sha512-Di3tkxTpXwvf1GJUmaC8rd+zVh5dB2SWMBGagL4+kT8UmjSISif/OPRGuGnXs3QhF6nmEjkdC0ijdZLcYQkepw==", + "dependencies": { + "@material/animation": "^14.0.0", + "@material/base": "^14.0.0", + "@material/feature-targeting": "^14.0.0", + "@material/rtl": "^14.0.0", + "@material/theme": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/feature-targeting": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0.tgz", + "integrity": "sha512-a5WGgHEq5lJeeNL5yevtgoZjBjXWy6+klfVWQEh8oyix/rMJygGgO7gEc52uv8fB8uAIoYEB3iBMOv8jRq8FeA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/focus-ring": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-14.0.0.tgz", + "integrity": "sha512-fqqka6iSfQGJG3Le48RxPCtnOiaLGPDPikhktGbxlyW9srBVMgeCiONfHM7IT/1eu80O0Y67Lh/4ohu5+C+VAQ==", + "dependencies": { + "@material/dom": "^14.0.0", + "@material/feature-targeting": "^14.0.0", + "@material/rtl": "^14.0.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/icon-button": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-14.0.0.tgz", + "integrity": "sha512-wHMqzm7Q/UwbWLoWv32Li1r2iVYxadIrwTNxT0+p+7NdfI3lEwMN3NoB0CvoJnHTljjXDzce0KJ3nZloa0P0gA==", + "dependencies": { + "@material/base": "^14.0.0", + "@material/density": "^14.0.0", + "@material/dom": "^14.0.0", + "@material/elevation": "^14.0.0", + "@material/feature-targeting": "^14.0.0", + "@material/focus-ring": "^14.0.0", + "@material/ripple": "^14.0.0", + "@material/rtl": "^14.0.0", + "@material/theme": "^14.0.0", + "@material/touch-target": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/ripple": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-14.0.0.tgz", + "integrity": "sha512-9XoGBFd5JhFgELgW7pqtiLy+CnCIcV2s9cQ2BWbOQeA8faX9UZIDUx/g76nHLZ7UzKFtsULJxZTwORmsEt2zvw==", + "dependencies": { + "@material/animation": "^14.0.0", + "@material/base": "^14.0.0", + "@material/dom": "^14.0.0", + "@material/feature-targeting": "^14.0.0", + "@material/rtl": "^14.0.0", + "@material/theme": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/rtl": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-14.0.0.tgz", + "integrity": "sha512-xl6OZYyRjuiW2hmbjV2omMV8sQtfmKAjeWnD1RMiAPLCTyOW9Lh/PYYnXjxUrNa0cRwIIbOn5J7OYXokja8puA==", + "dependencies": { + "@material/theme": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/shape": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/shape/-/shape-14.0.0.tgz", + "integrity": "sha512-o0mJB0+feOv473KckI8gFnUo8IQAaEA6ynXzw3VIYFjPi48pJwrxa0mZcJP/OoTXrCbDzDeFJfDPXEmRioBb9A==", + "dependencies": { + "@material/feature-targeting": "^14.0.0", + "@material/rtl": "^14.0.0", + "@material/theme": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/theme": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0.tgz", + "integrity": "sha512-6/SENWNIFuXzeHMPHrYwbsXKgkvCtWuzzQ3cUu4UEt3KcQ5YpViazIM6h8ByYKZP8A9d8QpkJ0WGX5btGDcVoA==", + "dependencies": { + "@material/feature-targeting": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/tokens": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/tokens/-/tokens-14.0.0.tgz", + "integrity": "sha512-SXgB9VwsKW4DFkHmJfDIS0x0cGdMWC1D06m6z/WQQ5P5j6/m0pKrbHVlrLzXcRjau+mFhXGvj/KyPo9Pp/Rc8Q==", + "dependencies": { + "@material/elevation": "^14.0.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/touch-target": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-14.0.0.tgz", + "integrity": "sha512-o3kvxmS4HkmZoQTvtzLJrqSG+ezYXkyINm3Uiwio1PTg67pDgK5FRwInkz0VNaWPcw9+5jqjUQGjuZMtjQMq8w==", + "dependencies": { + "@material/base": "^14.0.0", + "@material/feature-targeting": "^14.0.0", + "@material/rtl": "^14.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar/node_modules/@material/typography": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-14.0.0.tgz", + "integrity": "sha512-/QtHBYiTR+TPMryM/CT386B2WlAQf/Ae32V324Z7P40gHLKY/YBXx7FDutAWZFeOerq/two4Nd2aAHBcMM2wMw==", + "dependencies": { + "@material/feature-targeting": "^14.0.0", + "@material/theme": "^14.0.0", "tslib": "^2.1.0" } }, @@ -9634,26 +9850,6 @@ "tslib": "^2.1.0" } }, - "node_modules/material-components-web/node_modules/@material/snackbar": { - "version": "14.0.0", - "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-14.0.0.tgz", - "integrity": "sha512-28uQBj9bw7BalNarK9j8/aVW4Ys5aRaGHoWH+CeYvAjqQUJkrYoqM52aiKhBwqrjBPMJHk1aXthe3YbzMBm6vA==", - "dependencies": { - "@material/animation": "^14.0.0", - "@material/base": "^14.0.0", - "@material/button": "^14.0.0", - "@material/dom": "^14.0.0", - "@material/elevation": "^14.0.0", - "@material/feature-targeting": "^14.0.0", - "@material/icon-button": "^14.0.0", - "@material/ripple": "^14.0.0", - "@material/rtl": "^14.0.0", - "@material/shape": "^14.0.0", - "@material/theme": "^14.0.0", - "@material/typography": "^14.0.0", - "tslib": "^2.1.0" - } - }, "node_modules/material-components-web/node_modules/@material/switch": { "version": "14.0.0", "resolved": "https://registry.npmjs.org/@material/switch/-/switch-14.0.0.tgz", diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index f38a1cb..37e67c6 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -56,7 +56,7 @@ import { ParticipantsSidenavComponent } from './eventpage/participants-sidenav/p import { ParticipantCardComponent } from './eventpage/participants-sidenav/participant-card/participant-card.component'; import { EinkaufslisteWidgetComponent } from './widgets/einkaufsliste-widget/einkaufsliste-widget.component'; import { DefaultShoppingPageComponent } from './widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component'; -import { AddAuftragDialogComponent } from './widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component'; +import { AddEintragDialogComponent } from './widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component'; import { MatDatepicker, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel, MatDatepickerToggle, @@ -114,7 +114,7 @@ function loadMapApi(httpClient: HttpClient) { ParticipantCardComponent, EinkaufslisteWidgetComponent, DefaultShoppingPageComponent, - AddAuftragDialogComponent, + AddEintragDialogComponent, ], imports: [ BrowserModule, diff --git a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html index 33337b3..a807ec4 100644 --- a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html +++ b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html @@ -34,7 +34,7 @@ color="accent" matTooltip="Event erstellen" class="event-add-button" - (click)="openCreateEventDialog()" + (click)="openDialog()" [disabled]="user.guest" > add diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts deleted file mode 100644 index 0b8d732..0000000 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {Component, ElementRef, input, NgZone, ViewChild} from '@angular/core'; -import {MatDialogRef} from "@angular/material/dialog"; -import {LocationAddCommand} from "../../../../model/map-widget"; -import {MatSnackBar} from "@angular/material/snack-bar"; -import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; - - -@Component({ - selector: 'app-add-auftrag-dialog', - templateUrl: './add-auftrag-dialog.component.html', - styleUrl: './add-auftrag-dialog.component.scss' -}) -export class AddAuftragDialogComponent { - private description:string|undefined; - private amount:string|undefined; - constructor(private dialogRef: MatDialogRef, private _snackbar:MatSnackBar) { - } - - closeDialog() { - const addCommand: EntryAddCommand = { - description: "successfullyadded", - amount: "3" - }; - - this.dialogRef.close(addCommand); - this.showMessage("snack") - - } - showMessage(messageToshow:string, snackBarClass:string="successfull"){ - this._snackbar.open(messageToshow, 'close!',{ - duration: 5000, - panelClass:snackBarClass - }) - } - -} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html similarity index 72% rename from frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html rename to frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html index 7fc4187..ea34394 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html @@ -1,7 +1,14 @@

Einkaufsauftrag hinzufügen

- +
+ + Beschreibung + + + + + Auftrag Ersteller @@ -9,6 +16,7 @@

Einkaufsauftrag hinzufügen

Menge +
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.scss rename to frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.spec.ts similarity index 50% rename from frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.spec.ts rename to frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.spec.ts index f96d6b2..af7e222 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-auftrag-dialog/add-auftrag-dialog.component.spec.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AddAuftragDialogComponent } from './add-auftrag-dialog.component'; +import { AddEintragDialogComponent } from './add-eintrag-dialog.component'; -describe('AddAuftragDialogComponent', () => { - let component: AddAuftragDialogComponent; - let fixture: ComponentFixture; +describe('AddEintragDialogComponent', () => { + let component: AddEintragDialogComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AddAuftragDialogComponent] + declarations: [AddEintragDialogComponent] }) .compileComponents(); - - fixture = TestBed.createComponent(AddAuftragDialogComponent); + + fixture = TestBed.createComponent(AddEintragDialogComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts new file mode 100644 index 0000000..14b8eda --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts @@ -0,0 +1,66 @@ +import {Component, ElementRef, Input, input, NgZone, OnInit, ViewChild} from '@angular/core'; +import {MatDialogRef} from "@angular/material/dialog"; +import {LocationAddCommand} from "../../../../model/map-widget"; +import {MatSnackBar} from "@angular/material/snack-bar"; +import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; +import {FormBuilder, FormGroup, Validators} from "@angular/forms"; +import {HttpClient} from "@angular/common/http"; +import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; +import {Router} from "@angular/router"; + + +@Component({ + selector: 'app-add-eintrag-dialog', + templateUrl: './add-eintrag-dialog.component.html', + styleUrl: './add-eintrag-dialog.component.scss' +}) +export class AddEintragDialogComponent implements OnInit{ + private form!: FormGroup; + @Input() eventId!: string; + @Input() widgetId!: string; + constructor( + private fb: FormBuilder, + private service: EinkaufslisteWidgetService, + private router: Router, + private dialogRef: MatDialogRef, + private _snackbar:MatSnackBar) { + } + + ngOnInit(): void { + this.form = this.fb.group({ + description: ['', Validators.required], + amount: [null] + }); + } + + closeDialog() { + if(this.form.valid) { + this.service.addEntry(this.eventId, this.widgetId, this.form).subscribe({ + next: response => { + //TODO: Routing zurück zur Widgetübersicht der Einkaufsliste + Snackbar anzeigen + /*this.router.navigate() + response.entrys; + this.dialogRef.close(response.entrys);*/ + + }, + error: error => { + console.error('Error:', error); + } + }); + } + /*const addCommand: EntryAddCommand = { + description: "successfullyadded", + amount: "3" + };*/ + + this.showMessage("snack") + + } + showMessage(messageToshow:string, snackBarClass:string="successfull"){ + this._snackbar.open(messageToshow, 'close!',{ + duration: 5000, + panelClass:snackBarClass + }) + } + +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts index 57f9724..36bdbc4 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts @@ -1,9 +1,10 @@ -import { Component } from '@angular/core'; +import {Component, Input} from '@angular/core'; import {AddLocationDialogComponent} from "../../maps-widget/add-location-dialog/add-location-dialog.component"; -import {AddAuftragDialogComponent} from "../add-auftrag-dialog/add-auftrag-dialog.component"; +import {AddEintragDialogComponent} from "../add-eintrag-dialog/add-eintrag-dialog.component"; import {MatDialog} from "@angular/material/dialog"; import {EinkaufslisteWidgetComponent} from "../einkaufsliste-widget.component"; -import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; +import {EntryAddCommand, ShoppingWidget} from "../../../../model/shoppinglist-widget"; +import {BaseWidget} from "../../../../model/common-widget"; @Component({ selector: 'app-default-shopping-page', @@ -11,6 +12,11 @@ import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; styleUrl: './default-shopping-page.component.scss' }) export class DefaultShoppingPageComponent { + @Input() + eventId!: string; + + @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) + widget!: ShoppingWidget; constructor(private dialog: MatDialog, private root:EinkaufslisteWidgetComponent) { } openAddShoppingDialog() { diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html index ed9ac5d..5ca682d 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html @@ -1 +1,18 @@ -

einkaufsliste-widget works!

+ +
+ + + +
+ + + + + + + diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index 59521ff..01e7e18 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -14,7 +14,23 @@ export class EinkaufslisteWidgetComponent { @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) widget!: ShoppingWidget; - addAuftrag(addCommand:EntryAddCommand){ - return null; + constructor(private dialog: MatDialog) { + } + + openAddShoppingDialog() { + const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); + dialogRef.afterClosed().subscribe(entrys => { + if (entrys) { + //load entrys + } + }); + } + addEintrag() { + console.log(this.widget.entries.length != 0); + + } + + get entries(): number { + return this.widget.entries.length; } } diff --git a/frontend/src/model/shoppinglist-widget.ts b/frontend/src/model/shoppinglist-widget.ts index 39ac06d..9b500b5 100644 --- a/frontend/src/model/shoppinglist-widget.ts +++ b/frontend/src/model/shoppinglist-widget.ts @@ -1,7 +1,7 @@ import {BaseWidget} from "./common-widget"; export type ShoppingWidget = BaseWidget & { - entrys: Entry[]; + entries: Entry[]; } export type Entry = { diff --git a/frontend/src/services/widgets/einkaufsliste-widget.service.ts b/frontend/src/services/widgets/einkaufsliste-widget.service.ts new file mode 100644 index 0000000..49e3346 --- /dev/null +++ b/frontend/src/services/widgets/einkaufsliste-widget.service.ts @@ -0,0 +1,21 @@ +import {Injectable} from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {LocationAddCommand, MapWidget} from "../../model/map-widget"; +import {Observable} from "rxjs"; +import {environment} from "../../environment/environment"; +import {FormGroup} from "@angular/forms"; +import {EinkaufslisteWidgetComponent} from "../../app/widgets/einkaufsliste-widget/einkaufsliste-widget.component"; +import {EntryAddCommand, ShoppingWidget} from "../../model/shoppinglist-widget"; + +@Injectable({ + providedIn: 'root' +}) +export class EinkaufslisteWidgetService { + + constructor(private http: HttpClient) { + } + + addEntry(eventId: string, widgetId: string, formData: FormGroup): Observable { + return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries`, formData, {withCredentials: true}); + } +} From ca4eed09ea885f2aeca068a23b1ef01e4c703ad4 Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Mon, 13 May 2024 15:47:06 +0200 Subject: [PATCH 06/20] FE-#90: changes by Service --- .../default-shopping-page.component.html | 26 ++++++++++--------- .../default-shopping-page.component.scss | 3 +++ .../default-shopping-page.component.ts | 11 +++----- .../einkaufsliste-widget.component.ts | 2 ++ 4 files changed, 23 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html index 8f05f8c..ea895b8 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html @@ -1,12 +1,14 @@ -no Shopping-List Bild -

Kein Einkaufsautrag angelegt

-

Lege einen Einkaufsantrag über dieses - - an

+
+ no Shopping-List Bild +

Kein Einkaufseintrag angelegt

+

Lege einen Einkaufseintrag über dieses + + an

+
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss index e69de29..daa0586 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss @@ -0,0 +1,3 @@ +.page-container{ + justify-content: center; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts index 36bdbc4..015576a 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts @@ -20,14 +20,11 @@ export class DefaultShoppingPageComponent { constructor(private dialog: MatDialog, private root:EinkaufslisteWidgetComponent) { } openAddShoppingDialog() { - const dialogRef = this.dialog.open(AddAuftragDialogComponent, {width: "400px"}); - dialogRef.afterClosed().subscribe(addCommand => { - if (addCommand) { - this.addAuftrag(addCommand); + const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); + dialogRef.afterClosed().subscribe(entries => { + if (entries) { + //load entries } }); } - addAuftrag(addCommand:EntryAddCommand){ - this.root.addAuftrag(addCommand); - } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index 01e7e18..2256d44 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -1,6 +1,8 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; import {BaseWidget} from "../../../model/common-widget"; import {Entry, EntryAddCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; +import {AddEintragDialogComponent} from "./add-eintrag-dialog/add-eintrag-dialog.component"; +import {MatDialog} from "@angular/material/dialog"; @Component({ selector: 'app-einkaufsliste-widget', From 4bb51d225e7551ff83cd626d0c94037fcdec8a7b Mon Sep 17 00:00:00 2001 From: lica200 Date: Mon, 13 May 2024 16:59:27 +0200 Subject: [PATCH 07/20] FE-#90: adjusted form --- .../add-eintrag-dialog.component.html | 68 +++++++++++-------- .../add-eintrag-dialog.component.scss | 12 ++++ .../add-eintrag-dialog.component.ts | 22 +++--- .../default-shopping-page.component.scss | 4 +- 4 files changed, 66 insertions(+), 40 deletions(-) diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html index ea34394..f867689 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html @@ -1,31 +1,41 @@ -

Einkaufsauftrag hinzufügen

+
+

Einkaufsauftrag hinzufügen

- -
- - Beschreibung - - + + +

Beschreibung*

+ + Beschreibung + + +

Ersteller

+ + Ersteller +
Profilbild + {{getUsername(user)}} +
+ +

Menge

+ + Menge + + + +
- - - Auftrag - - Ersteller - - Menge - - - - - - - - - + + + + +
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss index e69de29..92ee5b1 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss @@ -0,0 +1,12 @@ +.profile-icon { + border-radius: var(--size-24); +} + +.create-eintrag-container { + display: grid; + grid: auto / 1fr 2fr; + gap: 12px; +} +mat-form-field { + width: 100%; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts index 14b8eda..2aad2b8 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts @@ -7,6 +7,9 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {HttpClient} from "@angular/common/http"; import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; import {Router} from "@angular/router"; +import {UserService} from "../../../../services/user.service"; +import {User} from "../../../../model/user"; +import {ReplaySubject} from "rxjs"; @Component({ @@ -15,10 +18,11 @@ import {Router} from "@angular/router"; styleUrl: './add-eintrag-dialog.component.scss' }) export class AddEintragDialogComponent implements OnInit{ - private form!: FormGroup; + form!: FormGroup; @Input() eventId!: string; @Input() widgetId!: string; constructor( + public userService: UserService, private fb: FormBuilder, private service: EinkaufslisteWidgetService, private router: Router, @@ -32,6 +36,9 @@ export class AddEintragDialogComponent implements OnInit{ amount: [null] }); } + getUsername(user:User): string { + return [user.firstName, user.lastName].filter(x => x).join(" "); + } closeDialog() { if(this.form.valid) { @@ -41,20 +48,16 @@ export class AddEintragDialogComponent implements OnInit{ /*this.router.navigate() response.entrys; this.dialogRef.close(response.entrys);*/ - + this.showMessage("Eintrag angelegt") + this.dialogRef.close(); }, error: error => { console.error('Error:', error); + this.showMessage("Fehler beim Anlegen", "error") } }); } - /*const addCommand: EntryAddCommand = { - description: "successfullyadded", - amount: "3" - };*/ - - this.showMessage("snack") - + //was passiert, wenn keine Eingabe } showMessage(messageToshow:string, snackBarClass:string="successfull"){ this._snackbar.open(messageToshow, 'close!',{ @@ -62,5 +65,4 @@ export class AddEintragDialogComponent implements OnInit{ panelClass:snackBarClass }) } - } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss index daa0586..c2a3fde 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss @@ -1,3 +1,5 @@ .page-container{ - justify-content: center; + display: flex; + flex-direction: column; + align-items: center; } From a6515bb3258d93a986d56f5a7c09c37f75b8d9de Mon Sep 17 00:00:00 2001 From: lica200 Date: Tue, 14 May 2024 16:05:27 +0200 Subject: [PATCH 08/20] FE-#90: eventanlegen works --- .../add-eintrag-dialog.component.html | 13 ++++---- .../add-eintrag-dialog.component.ts | 30 +++++++++---------- .../default-shopping-page.component.ts | 3 +- .../widgets/einkaufsliste-widget.service.ts | 4 +-- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html index f867689..d9fb9eb 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html @@ -9,17 +9,16 @@

Einkaufsauftrag hinzufügen

Ersteller

- - Ersteller -
+ Profilbild - {{getUsername(user)}} -
- + alt="Profilbild" + > + {{getUsername(user)}} +

Menge

Menge diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts index 2aad2b8..1192418 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts @@ -1,16 +1,12 @@ -import {Component, ElementRef, Input, input, NgZone, OnInit, ViewChild} from '@angular/core'; -import {MatDialogRef} from "@angular/material/dialog"; -import {LocationAddCommand} from "../../../../model/map-widget"; +import {Component, Inject, OnInit} from '@angular/core'; +import {MatDialogRef, MAT_DIALOG_DATA} from "@angular/material/dialog"; import {MatSnackBar} from "@angular/material/snack-bar"; import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {HttpClient} from "@angular/common/http"; import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; import {Router} from "@angular/router"; import {UserService} from "../../../../services/user.service"; import {User} from "../../../../model/user"; -import {ReplaySubject} from "rxjs"; - @Component({ selector: 'app-add-eintrag-dialog', @@ -19,15 +15,17 @@ import {ReplaySubject} from "rxjs"; }) export class AddEintragDialogComponent implements OnInit{ form!: FormGroup; - @Input() eventId!: string; - @Input() widgetId!: string; + eventId: string; + widgetId: string; constructor( public userService: UserService, private fb: FormBuilder, private service: EinkaufslisteWidgetService, - private router: Router, private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: {eventId: string, widgetId: string}, private _snackbar:MatSnackBar) { + this.eventId = data.eventId + this.widgetId = data.widgetId } ngOnInit(): void { @@ -35,6 +33,7 @@ export class AddEintragDialogComponent implements OnInit{ description: ['', Validators.required], amount: [null] }); + } getUsername(user:User): string { return [user.firstName, user.lastName].filter(x => x).join(" "); @@ -42,12 +41,12 @@ export class AddEintragDialogComponent implements OnInit{ closeDialog() { if(this.form.valid) { - this.service.addEntry(this.eventId, this.widgetId, this.form).subscribe({ + const entryAddCommand: EntryAddCommand = { + description: this.form.get('descrption')?.value, + amount: this.form.get('amount')?.value || "", + } + this.service.addEntry(this.eventId, this.widgetId, entryAddCommand).subscribe({ next: response => { - //TODO: Routing zurück zur Widgetübersicht der Einkaufsliste + Snackbar anzeigen - /*this.router.navigate() - response.entrys; - this.dialogRef.close(response.entrys);*/ this.showMessage("Eintrag angelegt") this.dialogRef.close(); }, @@ -57,10 +56,11 @@ export class AddEintragDialogComponent implements OnInit{ } }); } + this.showMessage("Bitte gib eine Beschreibung an", "error") //was passiert, wenn keine Eingabe } showMessage(messageToshow:string, snackBarClass:string="successfull"){ - this._snackbar.open(messageToshow, 'close!',{ + this._snackbar.open(messageToshow, 'schließen',{ duration: 5000, panelClass:snackBarClass }) diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts index 015576a..c1a1784 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts @@ -20,7 +20,8 @@ export class DefaultShoppingPageComponent { constructor(private dialog: MatDialog, private root:EinkaufslisteWidgetComponent) { } openAddShoppingDialog() { - const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); + const dialogRef = this.dialog.open(AddEintragDialogComponent, {data: { eventId: this.eventId, widgetId: this.widget.id }, + width: "400px"}); dialogRef.afterClosed().subscribe(entries => { if (entries) { //load entries diff --git a/frontend/src/services/widgets/einkaufsliste-widget.service.ts b/frontend/src/services/widgets/einkaufsliste-widget.service.ts index 49e3346..5867717 100644 --- a/frontend/src/services/widgets/einkaufsliste-widget.service.ts +++ b/frontend/src/services/widgets/einkaufsliste-widget.service.ts @@ -15,7 +15,7 @@ export class EinkaufslisteWidgetService { constructor(private http: HttpClient) { } - addEntry(eventId: string, widgetId: string, formData: FormGroup): Observable { - return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries`, formData, {withCredentials: true}); + addEntry(eventId: string, widgetId: string, entryAddCommand: EntryAddCommand): Observable { + return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries`, entryAddCommand, {withCredentials: true}); } } From b3b8913b4d2b1c3a0401d8d30d6970ff95f8ef4e Mon Sep 17 00:00:00 2001 From: lica200 Date: Wed, 15 May 2024 09:22:49 +0200 Subject: [PATCH 09/20] =?UTF-8?q?FE-#90:=20edit=20eintrag=20hinzugef=C3=BC?= =?UTF-8?q?gt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/app.module.ts | 2 + .../profile-menu/profile-menu.component.html | 2 +- .../add-eintrag-dialog.component.ts | 1 - .../edit-eintrag-dialog.component.html | 40 +++++++++++ .../edit-eintrag-dialog.component.scss | 12 ++++ .../edit-eintrag-dialog.component.spec.ts | 23 +++++++ .../edit-eintrag-dialog.component.ts | 67 +++++++++++++++++++ .../einkaufsliste-widget.component.ts | 23 +++++-- .../widgets/einkaufsliste-widget.service.ts | 9 +-- 9 files changed, 169 insertions(+), 10 deletions(-) create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.spec.ts create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 37e67c6..08bc91a 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -64,6 +64,7 @@ import { MatEndDate, MatStartDate } from "@angular/material/datepicker"; +import { EditEintragDialogComponent } from './widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component'; registerLocaleData(localeDe); @@ -115,6 +116,7 @@ function loadMapApi(httpClient: HttpClient) { EinkaufslisteWidgetComponent, DefaultShoppingPageComponent, AddEintragDialogComponent, + EditEintragDialogComponent, ], imports: [ BrowserModule, diff --git a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html index d5dce6c..269fe28 100644 --- a/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html +++ b/frontend/src/app/dashboard/side-menu/profile-menu/profile-menu.component.html @@ -34,7 +34,7 @@ color="accent" matTooltip="Event erstellen" class="event-add-button" - (click)="openDialog()" + (click)="openCreateEventDialog()" [disabled]="user.guest" > add diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts index 1192418..4b5679d 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts @@ -4,7 +4,6 @@ import {MatSnackBar} from "@angular/material/snack-bar"; import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; -import {Router} from "@angular/router"; import {UserService} from "../../../../services/user.service"; import {User} from "../../../../model/user"; diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html new file mode 100644 index 0000000..b199ab5 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html @@ -0,0 +1,40 @@ +
+

Einkaufsauftrag hinzufügen

+ + +
+

Beschreibung*

+ + Beschreibung + + +

Ersteller

+
+ Profilbild + {{getUsername(user)}} +
+

Menge

+ + Menge + + +
+ + + + + + +
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss new file mode 100644 index 0000000..92ee5b1 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss @@ -0,0 +1,12 @@ +.profile-icon { + border-radius: var(--size-24); +} + +.create-eintrag-container { + display: grid; + grid: auto / 1fr 2fr; + gap: 12px; +} +mat-form-field { + width: 100%; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.spec.ts new file mode 100644 index 0000000..267d6c7 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditEintragDialogComponent } from './edit-eintrag-dialog.component'; + +describe('EditEintragDialogComponent', () => { + let component: EditEintragDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EditEintragDialogComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EditEintragDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts new file mode 100644 index 0000000..e288fcd --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts @@ -0,0 +1,67 @@ +import {Component, Inject} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from "@angular/forms"; +import {UserService} from "../../../../services/user.service"; +import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {MatSnackBar} from "@angular/material/snack-bar"; +import {User} from "../../../../model/user"; +import {Entry} from "../../../../model/shoppinglist-widget"; + +@Component({ + selector: 'app-edit-eintrag-dialog', + templateUrl: './edit-eintrag-dialog.component.html', + styleUrl: './edit-eintrag-dialog.component.scss' +}) +export class EditEintragDialogComponent { + form!: FormGroup; + eventId: string; + widgetId: string; + entry: Entry; + constructor( + public userService: UserService, + private fb: FormBuilder, + private service: EinkaufslisteWidgetService, + private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: {eventId: string, widgetId: string, entry:Entry}, + private _snackbar:MatSnackBar) { + this.eventId = data.eventId + this.widgetId = data.widgetId + this.entry = data.entry + } + + ngOnInit(): void { + this.form = this.fb.group({ + description: [this.entry.description, Validators.required], + amount: [this.entry.amount] + }); + + } + getUsername(user:User): string { + return [user.firstName, user.lastName].filter(x => x).join(" "); + } + + closeDialog() { + if(this.form.valid) { + this.entry.description = this.form.get('description')?.value + this.entry.amount = this.form.get('amount')?.value + this.service.editEntry(this.eventId, this.widgetId, this.entry).subscribe({ + next: response => { + this.showMessage("Eintrag angelegt") + this.dialogRef.close(); + }, + error: error => { + console.error('Error:', error); + this.showMessage("Fehler beim Anlegen", "error") + } + }); + } + this.showMessage("Bitte gib eine Beschreibung an", "error") + //was passiert, wenn keine Eingabe + } + showMessage(messageToshow:string, snackBarClass:string="successfull"){ + this._snackbar.open(messageToshow, 'schließen',{ + duration: 5000, + panelClass:snackBarClass + }) + } +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index 2256d44..fd59a60 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -1,8 +1,9 @@ -import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {Component, Input} from '@angular/core'; import {BaseWidget} from "../../../model/common-widget"; -import {Entry, EntryAddCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; +import {Entry, ShoppingWidget} from "../../../model/shoppinglist-widget"; import {AddEintragDialogComponent} from "./add-eintrag-dialog/add-eintrag-dialog.component"; import {MatDialog} from "@angular/material/dialog"; +import {EditEintragDialogComponent} from "./edit-eintrag-dialog/edit-eintrag-dialog.component"; @Component({ selector: 'app-einkaufsliste-widget', @@ -28,8 +29,22 @@ export class EinkaufslisteWidgetComponent { }); } addEintrag() { - console.log(this.widget.entries.length != 0); - + const dialogRef = this.dialog.open(AddEintragDialogComponent, {data: { eventId: this.eventId, widgetId: this.widget.id }, + width: "400px"}); + dialogRef.afterClosed().subscribe(entries => { + if (entries) { + //load entries + } + }); + } + editEntryDialog(entry:Entry){ + const dialogRef = this.dialog.open(EditEintragDialogComponent, {data: { eventId: this.eventId, widgetId: this.widget.id , entry:entry}, + width: "400px"}); + dialogRef.afterClosed().subscribe(entries => { + if (entries) { + //load entries + } + }); } get entries(): number { diff --git a/frontend/src/services/widgets/einkaufsliste-widget.service.ts b/frontend/src/services/widgets/einkaufsliste-widget.service.ts index 5867717..5b70ab1 100644 --- a/frontend/src/services/widgets/einkaufsliste-widget.service.ts +++ b/frontend/src/services/widgets/einkaufsliste-widget.service.ts @@ -1,11 +1,8 @@ import {Injectable} from '@angular/core'; import {HttpClient} from "@angular/common/http"; -import {LocationAddCommand, MapWidget} from "../../model/map-widget"; import {Observable} from "rxjs"; import {environment} from "../../environment/environment"; -import {FormGroup} from "@angular/forms"; -import {EinkaufslisteWidgetComponent} from "../../app/widgets/einkaufsliste-widget/einkaufsliste-widget.component"; -import {EntryAddCommand, ShoppingWidget} from "../../model/shoppinglist-widget"; +import {Entry, EntryAddCommand, ShoppingWidget} from "../../model/shoppinglist-widget"; @Injectable({ providedIn: 'root' @@ -18,4 +15,8 @@ export class EinkaufslisteWidgetService { addEntry(eventId: string, widgetId: string, entryAddCommand: EntryAddCommand): Observable { return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries`, entryAddCommand, {withCredentials: true}); } + + editEntry(eventId: string, widgetId: string, entry: Entry) { + return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, entry, {withCredentials: true}); + } } From bd1b0847df3f75d34111b554b9f54e36cf66376d Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Wed, 15 May 2024 09:40:40 +0200 Subject: [PATCH 10/20] FE-#128: added new Component einkaufsliste-eintrag-list-item --- frontend/src/app/app.module.ts | 2 ++ ...kaufliste-eintrag-list-item.component.html | 24 +++++++++++++++++++ ...kaufliste-eintrag-list-item.component.scss | 9 +++++++ ...fliste-eintrag-list-item.component.spec.ts | 23 ++++++++++++++++++ ...inkaufliste-eintrag-list-item.component.ts | 12 ++++++++++ .../einkaufsliste-widget.component.html | 9 ++++++- .../einkaufsliste-widget.component.ts | 5 ++++ 7 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.scss create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.spec.ts create mode 100644 frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 08bc91a..66b25b7 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -65,6 +65,7 @@ import { MatStartDate } from "@angular/material/datepicker"; import { EditEintragDialogComponent } from './widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component'; +import { EinkauflisteEintragListItemComponent } from './widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component'; registerLocaleData(localeDe); @@ -117,6 +118,7 @@ function loadMapApi(httpClient: HttpClient) { DefaultShoppingPageComponent, AddEintragDialogComponent, EditEintragDialogComponent, + EinkauflisteEintragListItemComponent, ], imports: [ BrowserModule, diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html new file mode 100644 index 0000000..b7371d0 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html @@ -0,0 +1,24 @@ + + + {{item.description}} + {{item.amount}} + + person + {{item.buyerId}} + + + + + + + + + diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.scss new file mode 100644 index 0000000..d57f05f --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.scss @@ -0,0 +1,9 @@ +.eintrag-card { + padding: 0; +} + +mat-card-content { + display: flex; + flex-direction: row; + justify-content: space-between; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.spec.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.spec.ts new file mode 100644 index 0000000..214c562 --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EinkauflisteEintragListItemComponent } from './einkaufliste-eintrag-list-item.component'; + +describe('EinkauflisteEintragListItemComponent', () => { + let component: EinkauflisteEintragListItemComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EinkauflisteEintragListItemComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EinkauflisteEintragListItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts new file mode 100644 index 0000000..c729d1e --- /dev/null +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts @@ -0,0 +1,12 @@ +import {Component, Input} from '@angular/core'; +import {Entry} from "../../../../model/shoppinglist-widget"; + +@Component({ + selector: 'app-einkaufliste-eintrag-list-item', + templateUrl: './einkaufliste-eintrag-list-item.component.html', + styleUrl: './einkaufliste-eintrag-list-item.component.scss' +}) +export class EinkauflisteEintragListItemComponent { + @Input()item!: Entry; + +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html index 5ca682d..19cd550 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html @@ -2,12 +2,19 @@
+
    + @for (item of eintraege; track $index) { +
  • + +
    • + } +
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index fd59a60..d599be0 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -50,4 +50,9 @@ export class EinkaufslisteWidgetComponent { get entries(): number { return this.widget.entries.length; } + + get eintraege() { + console.log(this.widget.entries); + return this.widget.entries; + } } From fe927382f065ec55b71480abf42843e9479bc1a9 Mon Sep 17 00:00:00 2001 From: lica200 Date: Wed, 15 May 2024 10:00:41 +0200 Subject: [PATCH 11/20] FE-#90: beautify code --- .../add-eintrag-dialog/add-eintrag-dialog.component.html | 4 ++-- .../add-eintrag-dialog/add-eintrag-dialog.component.scss | 7 +++++++ .../default-shopping-page.component.scss | 3 +++ .../edit-eintrag-dialog.component.html | 4 ++-- .../edit-eintrag-dialog.component.scss | 7 +++++++ .../einkaufsliste-widget.component.ts | 8 -------- 6 files changed, 21 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html index d9fb9eb..941a139 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html @@ -9,7 +9,7 @@

Einkaufsauftrag hinzufügen

Ersteller

-
+
Einkaufsauftrag hinzufügen [ngSrc]="user.profilePictureUrl" alt="Profilbild" > - {{getUsername(user)}} +

{{getUsername(user)}}

Menge

diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss index 92ee5b1..55b05c6 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss @@ -10,3 +10,10 @@ mat-form-field { width: 100%; } +.user{ + display: flex; + align-items: center; +} +.username{ + margin-left: 10px; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss index c2a3fde..3942853 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss @@ -3,3 +3,6 @@ flex-direction: column; align-items: center; } +img{ + margin-top: 10px; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html index b199ab5..67c791f 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html @@ -9,7 +9,7 @@

Einkaufsauftrag hinzufügen

Ersteller

-
+
Einkaufsauftrag hinzufügen [ngSrc]="user.profilePictureUrl" alt="Profilbild" > - {{getUsername(user)}} +

{{getUsername(user)}}

Menge

diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss index 92ee5b1..55b05c6 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss @@ -10,3 +10,10 @@ mat-form-field { width: 100%; } +.user{ + display: flex; + align-items: center; +} +.username{ + margin-left: 10px; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index fd59a60..70c89bf 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -20,14 +20,6 @@ export class EinkaufslisteWidgetComponent { constructor(private dialog: MatDialog) { } - openAddShoppingDialog() { - const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); - dialogRef.afterClosed().subscribe(entrys => { - if (entrys) { - //load entrys - } - }); - } addEintrag() { const dialogRef = this.dialog.open(AddEintragDialogComponent, {data: { eventId: this.eventId, widgetId: this.widget.id }, width: "400px"}); From dda3b08ae026548f8ec8aaa083526ca4d0d3f12a Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Wed, 15 May 2024 23:12:07 +0200 Subject: [PATCH 12/20] FE-#128: refactor widgetupdate after change and added checkbox before shopping entry card --- frontend/src/app/app.module.ts | 86 ++++++++++--------- .../event-creation.component.scss | 4 + .../add-eintrag-dialog.component.html | 8 +- .../add-eintrag-dialog.component.scss | 4 + .../add-eintrag-dialog.component.ts | 38 ++------ .../default-shopping-page.component.html | 2 +- .../default-shopping-page.component.ts | 27 +++--- .../edit-eintrag-dialog.component.html | 10 ++- .../edit-eintrag-dialog.component.scss | 3 + .../edit-eintrag-dialog.component.ts | 49 +++-------- ...kaufliste-eintrag-list-item.component.html | 12 +-- ...inkaufliste-eintrag-list-item.component.ts | 50 ++++++++++- .../einkaufsliste-widget.component.html | 11 +-- .../einkaufsliste-widget.component.scss | 5 ++ .../einkaufsliste-widget.component.ts | 68 +++++++++++---- frontend/src/services/user.service.ts | 4 + .../widgets/einkaufsliste-widget.service.ts | 5 ++ 17 files changed, 232 insertions(+), 154 deletions(-) diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 66b25b7..2ea0576 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -66,6 +66,7 @@ import { } from "@angular/material/datepicker"; import { EditEintragDialogComponent } from './widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component'; import { EinkauflisteEintragListItemComponent } from './widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component'; +import {MatCheckbox} from "@angular/material/checkbox"; registerLocaleData(localeDe); @@ -120,48 +121,49 @@ function loadMapApi(httpClient: HttpClient) { EditEintragDialogComponent, EinkauflisteEintragListItemComponent, ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - LayoutModule, - AppRoutingModule, - HttpClientModule, - HttpClientJsonpModule, - NgOptimizedImage, - MatSidenavModule, - MatToolbarModule, - MatIconModule, - MatButtonModule, - MatDividerModule, - MatProgressBarModule, - TooltipComponent, - MatTooltipModule, - MatFormFieldModule, - MatInputModule, - MatListModule, - MatDialogModule, - GoogleMap, - MapMarker, - MatProgressSpinnerModule, - MatCardModule, - MatExpansionModule, - MatMenuModule, - MatRippleModule, - FormsModule, - ScrollingModule, - MatTabsModule, - MatDatepicker, - MatEndDate, - MatStartDate, - MatDateRangeInput, - MatDatepickerToggle, - MatDateRangePicker, - MatDatepickerActions, - MatDatepickerCancel, - MatDatepickerApply, - ReactiveFormsModule, - MatNativeDateModule - ], + imports: [ + BrowserModule, + BrowserAnimationsModule, + LayoutModule, + AppRoutingModule, + HttpClientModule, + HttpClientJsonpModule, + NgOptimizedImage, + MatSidenavModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + MatDividerModule, + MatProgressBarModule, + TooltipComponent, + MatTooltipModule, + MatFormFieldModule, + MatInputModule, + MatListModule, + MatDialogModule, + GoogleMap, + MapMarker, + MatProgressSpinnerModule, + MatCardModule, + MatExpansionModule, + MatMenuModule, + MatRippleModule, + FormsModule, + ScrollingModule, + MatTabsModule, + MatDatepicker, + MatEndDate, + MatStartDate, + MatDateRangeInput, + MatDatepickerToggle, + MatDateRangePicker, + MatDatepickerActions, + MatDatepickerCancel, + MatDatepickerApply, + ReactiveFormsModule, + MatNativeDateModule, + MatCheckbox + ], providers: [ { provide: APP_INITIALIZER, diff --git a/frontend/src/app/eventcreation/event-creation.component.scss b/frontend/src/app/eventcreation/event-creation.component.scss index 4133887..0200274 100644 --- a/frontend/src/app/eventcreation/event-creation.component.scss +++ b/frontend/src/app/eventcreation/event-creation.component.scss @@ -12,6 +12,10 @@ p { font-weight: var(--font-weight-subtitle); } +mat-divider { + margin: 0 var(--size-24); +} + .cdk-overlay-container { padding: 25px; } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html index 941a139..416cc7f 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html @@ -8,7 +8,7 @@

Einkaufsauftrag hinzufügen

Beschreibung -

Ersteller

+

Menge

Menge @@ -27,6 +27,8 @@

Einkaufsauftrag hinzufügen

+ +
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss index 55b05c6..779d868 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss @@ -17,3 +17,7 @@ mat-form-field { .username{ margin-left: 10px; } + +mat-divider { + margin: 0 var(--size-24); +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts index 4b5679d..3721eea 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts @@ -14,17 +14,12 @@ import {User} from "../../../../model/user"; }) export class AddEintragDialogComponent implements OnInit{ form!: FormGroup; - eventId: string; - widgetId: string; + constructor( public userService: UserService, private fb: FormBuilder, - private service: EinkaufslisteWidgetService, private dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: {eventId: string, widgetId: string}, - private _snackbar:MatSnackBar) { - this.eventId = data.eventId - this.widgetId = data.widgetId + ) { } ngOnInit(): void { @@ -34,34 +29,17 @@ export class AddEintragDialogComponent implements OnInit{ }); } - getUsername(user:User): string { +/* getUsername(user:User): string { return [user.firstName, user.lastName].filter(x => x).join(" "); - } + }*/ closeDialog() { if(this.form.valid) { - const entryAddCommand: EntryAddCommand = { - description: this.form.get('descrption')?.value, - amount: this.form.get('amount')?.value || "", + const addCommand: EntryAddCommand = { + description: this.form.value.description, + amount: this.form.value.amount } - this.service.addEntry(this.eventId, this.widgetId, entryAddCommand).subscribe({ - next: response => { - this.showMessage("Eintrag angelegt") - this.dialogRef.close(); - }, - error: error => { - console.error('Error:', error); - this.showMessage("Fehler beim Anlegen", "error") - } - }); + this.dialogRef.close(addCommand); } - this.showMessage("Bitte gib eine Beschreibung an", "error") - //was passiert, wenn keine Eingabe - } - showMessage(messageToshow:string, snackBarClass:string="successfull"){ - this._snackbar.open(messageToshow, 'schließen',{ - duration: 5000, - panelClass:snackBarClass - }) } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html index ea895b8..dfb966d 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.html @@ -6,7 +6,7 @@ mat-icon-button color="accent" matTooltip="Einkaufsauftrag erstellen" - (click)="openAddShoppingDialog()" + (click)="openAddEntryDialog()" > add diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts index c1a1784..1410fea 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts @@ -1,9 +1,8 @@ -import {Component, Input} from '@angular/core'; -import {AddLocationDialogComponent} from "../../maps-widget/add-location-dialog/add-location-dialog.component"; +import {Component, EventEmitter, Input, Output} from '@angular/core'; import {AddEintragDialogComponent} from "../add-eintrag-dialog/add-eintrag-dialog.component"; import {MatDialog} from "@angular/material/dialog"; import {EinkaufslisteWidgetComponent} from "../einkaufsliste-widget.component"; -import {EntryAddCommand, ShoppingWidget} from "../../../../model/shoppinglist-widget"; +import {ShoppingWidget} from "../../../../model/shoppinglist-widget"; import {BaseWidget} from "../../../../model/common-widget"; @Component({ @@ -17,14 +16,22 @@ export class DefaultShoppingPageComponent { @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) widget!: ShoppingWidget; - constructor(private dialog: MatDialog, private root:EinkaufslisteWidgetComponent) { + + @Output() + onWidgetUpdated = new EventEmitter(); + //TODO: Output funktioniert noch nicht ganz + + constructor( + private dialog: MatDialog, + private root: EinkaufslisteWidgetComponent + ) { } - openAddShoppingDialog() { - const dialogRef = this.dialog.open(AddEintragDialogComponent, {data: { eventId: this.eventId, widgetId: this.widget.id }, - width: "400px"}); - dialogRef.afterClosed().subscribe(entries => { - if (entries) { - //load entries + + openAddEntryDialog() { + const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); + dialogRef.afterClosed().subscribe(addCommand => { + if (addCommand) { + this.root.addEntry(addCommand); } }); } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html index 67c791f..5691c73 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html @@ -1,5 +1,5 @@
-

Einkaufsauftrag hinzufügen

+

Einkaufseintrag bearbeiten

@@ -8,7 +8,7 @@

Einkaufsauftrag hinzufügen

Beschreibung -

Ersteller

+

Menge

Menge @@ -27,6 +27,8 @@

Einkaufsauftrag hinzufügen

 + +
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss index 55b05c6..1b07ae4 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss @@ -17,3 +17,6 @@ mat-form-field { .username{ margin-left: 10px; } +mat-divider { + margin: 0 var(--size-24); +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts index e288fcd..df6b4ba 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts @@ -1,31 +1,23 @@ -import {Component, Inject} from '@angular/core'; +import {Component, Inject, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {UserService} from "../../../../services/user.service"; -import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; -import {MatSnackBar} from "@angular/material/snack-bar"; -import {User} from "../../../../model/user"; -import {Entry} from "../../../../model/shoppinglist-widget"; +import {Entry, EntryAddCommand} from "../../../../model/shoppinglist-widget"; @Component({ selector: 'app-edit-eintrag-dialog', templateUrl: './edit-eintrag-dialog.component.html', styleUrl: './edit-eintrag-dialog.component.scss' }) -export class EditEintragDialogComponent { +export class EditEintragDialogComponent implements OnInit{ form!: FormGroup; - eventId: string; - widgetId: string; entry: Entry; constructor( public userService: UserService, private fb: FormBuilder, - private service: EinkaufslisteWidgetService, private dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: {eventId: string, widgetId: string, entry:Entry}, - private _snackbar:MatSnackBar) { - this.eventId = data.eventId - this.widgetId = data.widgetId + @Inject(MAT_DIALOG_DATA) public data: {eventId: string, widgetId: string, entry:Entry} + ) { this.entry = data.entry } @@ -36,32 +28,19 @@ export class EditEintragDialogComponent { }); } - getUsername(user:User): string { + /*getUsername(user:User): string { return [user.firstName, user.lastName].filter(x => x).join(" "); - } + }*/ closeDialog() { if(this.form.valid) { - this.entry.description = this.form.get('description')?.value - this.entry.amount = this.form.get('amount')?.value - this.service.editEntry(this.eventId, this.widgetId, this.entry).subscribe({ - next: response => { - this.showMessage("Eintrag angelegt") - this.dialogRef.close(); - }, - error: error => { - console.error('Error:', error); - this.showMessage("Fehler beim Anlegen", "error") - } - }); + //TODO: Type für Edit-Anfrage ändern + const updateCommand: EntryAddCommand = { + description: this.form.value.description, + amount: this.form.value.amount + } + this.dialogRef.close(updateCommand); } - this.showMessage("Bitte gib eine Beschreibung an", "error") - //was passiert, wenn keine Eingabe - } - showMessage(messageToshow:string, snackBarClass:string="successfull"){ - this._snackbar.open(messageToshow, 'schließen',{ - duration: 5000, - panelClass:snackBarClass - }) } + } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html index b7371d0..7195825 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html @@ -2,16 +2,18 @@ {{item.description}} {{item.amount}} - - person - {{item.buyerId}} - + @if(item.buyerId) { + + person + {{item.buyerId}} + + } - diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts index c729d1e..ebc119a 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts @@ -1,5 +1,10 @@ import {Component, Input} from '@angular/core'; import {Entry} from "../../../../model/shoppinglist-widget"; +import {EditEintragDialogComponent} from "../edit-eintrag-dialog/edit-eintrag-dialog.component"; +import {MatDialog} from "@angular/material/dialog"; +import {UserService} from "../../../../services/user.service"; +import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; +import {MatSnackBar} from "@angular/material/snack-bar"; @Component({ selector: 'app-einkaufliste-eintrag-list-item', @@ -7,6 +12,49 @@ import {Entry} from "../../../../model/shoppinglist-widget"; styleUrl: './einkaufliste-eintrag-list-item.component.scss' }) export class EinkauflisteEintragListItemComponent { - @Input()item!: Entry; + @Input() item!: Entry; + @Input() eventId!: string; + @Input() widgetId!: string; + + constructor( + private dialog: MatDialog, + private userService: UserService, + private service: EinkaufslisteWidgetService, + private _snackbar: MatSnackBar + ) { + } + + editEntryDialog(){ + const dialogRef = this.dialog.open(EditEintragDialogComponent, {width: "400px"}); + dialogRef.afterClosed().subscribe(addCommand => { + if (addCommand) { + //TODO: Logik zum speichern von bearbeiteten Einträgen fehlt evtl noch im Backend + //load entries + /*this.service.editEntry(this.eventId, this.widgetId, this.entry).subscribe({ + next: response => { + this.showMessage("Eintrag angelegt") + this.dialogRef.close(); + }, + error: error => { + console.error('Error:', error); + this.showMessage("Fehler beim Anlegen", "error") + } + });*/ + } + }); + } + + loadUsername() { + this.userService.fetchUserById(this.item.buyerId).subscribe({ + + }); + } + + showMessage(messageToshow:string, snackBarClass:string="successfull"){ + this._snackbar.open(messageToshow, 'schließen',{ + duration: 5000, + panelClass:snackBarClass + }) + } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html index 19cd550..ded15c0 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html @@ -1,18 +1,19 @@ -
    @for (item of eintraege; track $index) { -
  • - -
    • +
  • + + + +
    • }
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss index e69de29..5c5524e 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss @@ -0,0 +1,5 @@ +.einkaufliste-eintrag-liste{ + list-style: none; + padding: 0; + margin: 0; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index 29c696d..86a2a6e 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -1,9 +1,11 @@ -import {Component, Input} from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; import {BaseWidget} from "../../../model/common-widget"; -import {Entry, ShoppingWidget} from "../../../model/shoppinglist-widget"; +import {Entry, EntryAddCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; import {AddEintragDialogComponent} from "./add-eintrag-dialog/add-eintrag-dialog.component"; import {MatDialog} from "@angular/material/dialog"; -import {EditEintragDialogComponent} from "./edit-eintrag-dialog/edit-eintrag-dialog.component"; +import {EinkaufslisteWidgetService} from "../../../services/widgets/einkaufsliste-widget.service"; +import {MatSnackBar} from "@angular/material/snack-bar"; +import {MatCheckboxChange} from "@angular/material/checkbox"; @Component({ selector: 'app-einkaufsliste-widget', @@ -17,26 +19,38 @@ export class EinkaufslisteWidgetComponent { @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) widget!: ShoppingWidget; - constructor(private dialog: MatDialog) { + @Output() + onWidgetUpdated = new EventEmitter(); + + constructor( + private dialog: MatDialog, + private service: EinkaufslisteWidgetService, + private _snackbar: MatSnackBar + ) { } - addEintrag() { - const dialogRef = this.dialog.open(AddEintragDialogComponent, {data: { eventId: this.eventId, widgetId: this.widget.id }, - width: "400px"}); - dialogRef.afterClosed().subscribe(entries => { - if (entries) { - //load entries + openAddEntryDialog() { + const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); + dialogRef.afterClosed().subscribe(addCommand => { + if (addCommand) { + this.addEntry(addCommand); } }); } - editEntryDialog(entry:Entry){ - const dialogRef = this.dialog.open(EditEintragDialogComponent, {data: { eventId: this.eventId, widgetId: this.widget.id , entry:entry}, - width: "400px"}); - dialogRef.afterClosed().subscribe(entries => { - if (entries) { - //load entries - } - }); + + addEntry(addCommand: EntryAddCommand) { + if(addCommand) { + this.service.addEntry(this.eventId, this.widget.id, addCommand).subscribe({ + next: response => { + this.onWidgetUpdated.emit(response); + this.showMessage("Eintrag angelegt") + }, + error: error => { + console.error('Error:', error); + this.showMessage("Fehler beim Anlegen", "error") + } + }); + } } get entries(): number { @@ -47,4 +61,22 @@ export class EinkaufslisteWidgetComponent { console.log(this.widget.entries); return this.widget.entries; } + + showMessage(messageToshow:string, snackBarClass:string="successfull"){ + this._snackbar.open(messageToshow, 'schließen',{ + duration: 5000, + panelClass: snackBarClass + }) + } + + onCheckboxChange(item: Entry, event: MatCheckboxChange) { + this.service.setBuyerId(this.eventId,this.widget.id, item, event.checked).subscribe({ + next: response => { + this.onWidgetUpdated.emit(response); + }, + error: error => { + console.error('Error:', error); + } + }); + } } diff --git a/frontend/src/services/user.service.ts b/frontend/src/services/user.service.ts index 5f6eda3..ffd0e97 100644 --- a/frontend/src/services/user.service.ts +++ b/frontend/src/services/user.service.ts @@ -51,4 +51,8 @@ export class UserService { document.documentElement.setAttribute("theme", colorMode.toLowerCase()); } + fetchUserById(id: string):Observable { + return this.http.get(`${environment.api}/user/${id}`,{withCredentials: true}); + } + } diff --git a/frontend/src/services/widgets/einkaufsliste-widget.service.ts b/frontend/src/services/widgets/einkaufsliste-widget.service.ts index 5b70ab1..3927f72 100644 --- a/frontend/src/services/widgets/einkaufsliste-widget.service.ts +++ b/frontend/src/services/widgets/einkaufsliste-widget.service.ts @@ -19,4 +19,9 @@ export class EinkaufslisteWidgetService { editEntry(eventId: string, widgetId: string, entry: Entry) { return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, entry, {withCredentials: true}); } + + setBuyerId(eventId: string, widgetId: string, entry: Entry, value: boolean) { + return this.http.put(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, {checked: value}, {withCredentials: true}); + + } } From 99cce5cee6f4561001291109321f8a599f7f79e0 Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Thu, 16 May 2024 15:58:50 +0200 Subject: [PATCH 13/20] FE-#128: adjust display of entry-cards and fix reload of widget in widget-container --- .../eventcreation/event-creation.component.ts | 1 - .../widget-container.component.html | 1 + .../add-eintrag-dialog.component.html | 65 +++++++------------ .../add-eintrag-dialog.component.scss | 19 +++--- .../add-eintrag-dialog.component.ts | 12 +--- .../default-shopping-page.component.ts | 1 - .../edit-eintrag-dialog.component.html | 65 +++++++------------ .../edit-eintrag-dialog.component.scss | 20 +++--- .../edit-eintrag-dialog.component.ts | 4 -- ...kaufliste-eintrag-list-item.component.html | 14 ++-- ...kaufliste-eintrag-list-item.component.scss | 33 ++++++++-- ...inkaufliste-eintrag-list-item.component.ts | 15 +++-- .../einkaufsliste-widget.component.html | 20 +++--- .../einkaufsliste-widget.component.scss | 30 ++++++++- .../einkaufsliste-widget.component.ts | 9 ++- frontend/src/model/shoppinglist-widget.ts | 4 ++ .../widgets/einkaufsliste-widget.service.ts | 6 +- frontend/src/styles/variables/size.scss | 1 + 18 files changed, 165 insertions(+), 155 deletions(-) diff --git a/frontend/src/app/eventcreation/event-creation.component.ts b/frontend/src/app/eventcreation/event-creation.component.ts index e1efbbe..3ea105e 100644 --- a/frontend/src/app/eventcreation/event-creation.component.ts +++ b/frontend/src/app/eventcreation/event-creation.component.ts @@ -83,7 +83,6 @@ export class EventCreationComponent implements OnInit { } else { date.setUTCHours(0, 0, 0, 0); } - console.log(date) this.form.patchValue({ date: date }); diff --git a/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html b/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html index 8ca8d50..478ea7a 100644 --- a/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html +++ b/frontend/src/app/eventpage/widgets-section/widget-container/widget-container.component.html @@ -10,6 +10,7 @@ } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html index 416cc7f..ecac6d1 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html @@ -1,42 +1,25 @@ -
-

Einkaufsauftrag hinzufügen

+

Einkaufseintrag hinzufügen

+ +
+

Beschreibung*

+ + + +

Menge

+ + + +
+ + + + + + - -
-

Beschreibung*

- - Beschreibung - - - -

Menge

- - Menge - - -
- - - - - - - - -
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss index 779d868..9e06500 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss @@ -1,22 +1,19 @@ -.profile-icon { - border-radius: var(--size-24); -} - .create-eintrag-container { display: grid; grid: auto / 1fr 2fr; gap: 12px; } + +@media (max-width: 600px) { + .create-eintrag-container { + display: flex; + flex-direction: column; + } +} + mat-form-field { width: 100%; } -.user{ - display: flex; - align-items: center; -} -.username{ - margin-left: 10px; -} mat-divider { margin: 0 var(--size-24); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts index 3721eea..188b119 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts @@ -1,11 +1,7 @@ -import {Component, Inject, OnInit} from '@angular/core'; -import {MatDialogRef, MAT_DIALOG_DATA} from "@angular/material/dialog"; -import {MatSnackBar} from "@angular/material/snack-bar"; +import {Component, OnInit} from '@angular/core'; +import {MatDialogRef} from "@angular/material/dialog"; import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; -import {UserService} from "../../../../services/user.service"; -import {User} from "../../../../model/user"; @Component({ selector: 'app-add-eintrag-dialog', @@ -16,7 +12,6 @@ export class AddEintragDialogComponent implements OnInit{ form!: FormGroup; constructor( - public userService: UserService, private fb: FormBuilder, private dialogRef: MatDialogRef, ) { @@ -29,9 +24,6 @@ export class AddEintragDialogComponent implements OnInit{ }); } -/* getUsername(user:User): string { - return [user.firstName, user.lastName].filter(x => x).join(" "); - }*/ closeDialog() { if(this.form.valid) { diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts index 1410fea..a562438 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts @@ -19,7 +19,6 @@ export class DefaultShoppingPageComponent { @Output() onWidgetUpdated = new EventEmitter(); - //TODO: Output funktioniert noch nicht ganz constructor( private dialog: MatDialog, diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html index 5691c73..1bc1f32 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html @@ -1,42 +1,25 @@ -
-

Einkaufseintrag bearbeiten

+

Einkaufseintrag bearbeiten

+ +
+

Beschreibung*

+ + + +

Menge

+ + + +
+ + + + + + - -
-

Beschreibung*

- - Beschreibung - - - -

Menge

- - Menge - - -
- - - - - - - - -
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss index 1b07ae4..9e06500 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss @@ -1,22 +1,20 @@ -.profile-icon { - border-radius: var(--size-24); -} - .create-eintrag-container { display: grid; grid: auto / 1fr 2fr; gap: 12px; } + +@media (max-width: 600px) { + .create-eintrag-container { + display: flex; + flex-direction: column; + } +} + mat-form-field { width: 100%; } -.user{ - display: flex; - align-items: center; -} -.username{ - margin-left: 10px; -} + mat-divider { margin: 0 var(--size-24); } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts index df6b4ba..2f2b8a3 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts @@ -13,7 +13,6 @@ export class EditEintragDialogComponent implements OnInit{ form!: FormGroup; entry: Entry; constructor( - public userService: UserService, private fb: FormBuilder, private dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: {eventId: string, widgetId: string, entry:Entry} @@ -28,9 +27,6 @@ export class EditEintragDialogComponent implements OnInit{ }); } - /*getUsername(user:User): string { - return [user.firstName, user.lastName].filter(x => x).join(" "); - }*/ closeDialog() { if(this.form.valid) { diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html index 7195825..a4e64d8 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html @@ -1,12 +1,12 @@ - - - {{item.description}} - {{item.amount}} + + +

{{item.description}}

+

{{item.amount}}

@if(item.buyerId) { - +

person - {{item.buyerId}} - + {{loadUsername()}} +

} - +
    - @for (item of eintraege; track $index) { -
  • - - - + @for (item of eintraege; track item.id) { +
  • + +
    • }
diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss index 5c5524e..3b3f93d 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss @@ -1,5 +1,33 @@ +.einkaufliste-eintrag-addButton { + width: 100%; + margin: var(--size-10); + margin-bottom: 0; + font-size: var(--font-size-standard); +} + +button { + border-radius: 12px; +} + .einkaufliste-eintrag-liste{ + display: flex; + flex-direction: column; + gap: var(--size-10); list-style: none; padding: 0; - margin: 0; + margin-left: var(--size-10); +} + +.einkaufliste-eintrag-item { + display: flex; + flex-direction: row; + align-items: center; +} + +.entry-item { + width: 100%; +} + +.entry-check { + margin-right: 5px; } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index 86a2a6e..7c1dbe0 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -1,6 +1,6 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; import {BaseWidget} from "../../../model/common-widget"; -import {Entry, EntryAddCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; +import {Entry, EntryAddCommand, EntryCheckCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; import {AddEintragDialogComponent} from "./add-eintrag-dialog/add-eintrag-dialog.component"; import {MatDialog} from "@angular/material/dialog"; import {EinkaufslisteWidgetService} from "../../../services/widgets/einkaufsliste-widget.service"; @@ -58,7 +58,6 @@ export class EinkaufslisteWidgetComponent { } get eintraege() { - console.log(this.widget.entries); return this.widget.entries; } @@ -70,8 +69,12 @@ export class EinkaufslisteWidgetComponent { } onCheckboxChange(item: Entry, event: MatCheckboxChange) { - this.service.setBuyerId(this.eventId,this.widget.id, item, event.checked).subscribe({ + const checkCommand: EntryCheckCommand = { + checked: event.checked + } + this.service.setBuyerId(this.eventId, this.widget.id, item, checkCommand).subscribe({ next: response => { + console.log(response); this.onWidgetUpdated.emit(response); }, error: error => { diff --git a/frontend/src/model/shoppinglist-widget.ts b/frontend/src/model/shoppinglist-widget.ts index 9b500b5..0c4e141 100644 --- a/frontend/src/model/shoppinglist-widget.ts +++ b/frontend/src/model/shoppinglist-widget.ts @@ -17,3 +17,7 @@ export type EntryAddCommand = { description: string; amount: string; } + +export type EntryCheckCommand = { + checked: boolean; +} diff --git a/frontend/src/services/widgets/einkaufsliste-widget.service.ts b/frontend/src/services/widgets/einkaufsliste-widget.service.ts index 3927f72..4298027 100644 --- a/frontend/src/services/widgets/einkaufsliste-widget.service.ts +++ b/frontend/src/services/widgets/einkaufsliste-widget.service.ts @@ -2,7 +2,7 @@ import {Injectable} from '@angular/core'; import {HttpClient} from "@angular/common/http"; import {Observable} from "rxjs"; import {environment} from "../../environment/environment"; -import {Entry, EntryAddCommand, ShoppingWidget} from "../../model/shoppinglist-widget"; +import {Entry, EntryAddCommand, EntryCheckCommand, ShoppingWidget} from "../../model/shoppinglist-widget"; @Injectable({ providedIn: 'root' @@ -20,8 +20,8 @@ export class EinkaufslisteWidgetService { return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, entry, {withCredentials: true}); } - setBuyerId(eventId: string, widgetId: string, entry: Entry, value: boolean) { - return this.http.put(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, {checked: value}, {withCredentials: true}); + setBuyerId(eventId: string, widgetId: string, entry: Entry, value: EntryCheckCommand) { + return this.http.put(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, value, {withCredentials: true}); } } diff --git a/frontend/src/styles/variables/size.scss b/frontend/src/styles/variables/size.scss index 039a9a0..2e93b22 100644 --- a/frontend/src/styles/variables/size.scss +++ b/frontend/src/styles/variables/size.scss @@ -6,6 +6,7 @@ //--------------------------------------------------// :root { + --size-10: 10px; --size-12: 12px; --size-24: 24px; } From 56ceb4686d1514a93913d144ad38e81a2b23fd55 Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Fri, 17 May 2024 16:56:27 +0200 Subject: [PATCH 14/20] FE-#128: added delete functionality in frontend and added logic for entry edit --- .../widget/model/shoppinglist/Entry.java | 5 +++ .../shoppinglist/EntryUpdateCommand.java | 13 ++++++++ .../add-eintrag-dialog.component.ts | 4 +-- .../edit-eintrag-dialog.component.ts | 8 ++--- ...kaufliste-eintrag-list-item.component.html | 2 +- ...inkaufliste-eintrag-list-item.component.ts | 31 +++++++++++++------ .../einkaufsliste-widget.component.html | 2 +- .../einkaufsliste-widget.component.ts | 4 +-- .../widgets/einkaufsliste-widget.service.ts | 13 +++++--- 9 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/EntryUpdateCommand.java diff --git a/backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/Entry.java b/backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/Entry.java index 62330b2..e256d91 100644 --- a/backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/Entry.java +++ b/backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/Entry.java @@ -24,4 +24,9 @@ public void check(String buyerId, EntryCheck entryCheck) { // BuyerID soll nicht gelöscht werden, wenn der Eintrag nicht mehr gecheckt ist, aber überschrieben werden können } } + + public void update(EntryUpdateCommand updateEntry) { + this.description = updateEntry.getDescription(); + this.amount = updateEntry.getAmount(); + } } diff --git a/backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/EntryUpdateCommand.java b/backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/EntryUpdateCommand.java new file mode 100644 index 0000000..113cec7 --- /dev/null +++ b/backend/src/main/java/com/dhbw/get2gether/backend/widget/model/shoppinglist/EntryUpdateCommand.java @@ -0,0 +1,13 @@ +package com.dhbw.get2gether.backend.widget.model.shoppinglist; + +import lombok.AllArgsConstructor; +import lombok.Builder; +import lombok.Getter; + +@Builder(toBuilder = true) +@Getter +@AllArgsConstructor +public class EntryUpdateCommand { + private String description; + private String amount; +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts index 188b119..c37add0 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {MatDialogRef} from "@angular/material/dialog"; -import {EntryAddCommand} from "../../../../model/shoppinglist-widget"; +import {EntryCommand} from "../../../../model/shoppinglist-widget"; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; @Component({ @@ -27,7 +27,7 @@ export class AddEintragDialogComponent implements OnInit{ closeDialog() { if(this.form.valid) { - const addCommand: EntryAddCommand = { + const addCommand: EntryCommand = { description: this.form.value.description, amount: this.form.value.amount } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts index 2f2b8a3..b1fac98 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts @@ -2,7 +2,7 @@ import {Component, Inject, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {UserService} from "../../../../services/user.service"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; -import {Entry, EntryAddCommand} from "../../../../model/shoppinglist-widget"; +import {Entry, EntryCommand} from "../../../../model/shoppinglist-widget"; @Component({ selector: 'app-edit-eintrag-dialog', @@ -12,10 +12,11 @@ import {Entry, EntryAddCommand} from "../../../../model/shoppinglist-widget"; export class EditEintragDialogComponent implements OnInit{ form!: FormGroup; entry: Entry; + constructor( private fb: FormBuilder, private dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: {eventId: string, widgetId: string, entry:Entry} + @Inject(MAT_DIALOG_DATA) public data: { entry:Entry} ) { this.entry = data.entry } @@ -30,8 +31,7 @@ export class EditEintragDialogComponent implements OnInit{ closeDialog() { if(this.form.valid) { - //TODO: Type für Edit-Anfrage ändern - const updateCommand: EntryAddCommand = { + const updateCommand: EntryCommand = { description: this.form.value.description, amount: this.form.value.amount } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html index a4e64d8..c68ad3a 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html @@ -17,7 +17,7 @@ edit Bearbeiten - diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts index 77fb6c1..5dec920 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts @@ -26,21 +26,20 @@ export class EinkauflisteEintragListItemComponent { } editEntryDialog(){ - const dialogRef = this.dialog.open(EditEintragDialogComponent, {width: "400px"}); - dialogRef.afterClosed().subscribe(addCommand => { - if (addCommand) { - //TODO: Logik zum speichern von bearbeiteten Einträgen fehlt evtl noch im Backend - //load entries - /*this.service.editEntry(this.eventId, this.widgetId, this.entry).subscribe({ + const dialogRef = this.dialog.open(EditEintragDialogComponent, { data: { entry: this.item},width: "400px"}); + dialogRef.afterClosed().subscribe(updateCommand => { + if (updateCommand) { + console.log(this.eventId); + this.service.editEntry(this.eventId, this.widgetId, this.item.id, updateCommand).subscribe({ next: response => { - this.showMessage("Eintrag angelegt") - this.dialogRef.close(); + this.onWidgetUpdated.emit(response); + this.showMessage("Eintrag bearbeitet") }, error: error => { console.error('Error:', error); - this.showMessage("Fehler beim Anlegen", "error") + this.showMessage("Fehler beim Bearbeiten", "error") } - });*/ + }); } }); } @@ -62,4 +61,16 @@ export class EinkauflisteEintragListItemComponent { }) } + deleteEntry() { + this.service.deleteEntry(this.eventId,this.widgetId,this.item.id).subscribe({ + next: response => { + this.onWidgetUpdated.emit(response); + this.showMessage("Eintrag gelöscht") + }, + error: error => { + console.error('Error:', error); + this.showMessage("Fehler beim Löschen", "error") + } + }); + } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html index 61b1f58..9500861 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html @@ -10,7 +10,7 @@ @for (item of eintraege; track item.id) {
  • - +
    • } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts index 7c1dbe0..42a061e 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts @@ -1,6 +1,6 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; import {BaseWidget} from "../../../model/common-widget"; -import {Entry, EntryAddCommand, EntryCheckCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; +import {Entry, EntryCommand, EntryCheckCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; import {AddEintragDialogComponent} from "./add-eintrag-dialog/add-eintrag-dialog.component"; import {MatDialog} from "@angular/material/dialog"; import {EinkaufslisteWidgetService} from "../../../services/widgets/einkaufsliste-widget.service"; @@ -38,7 +38,7 @@ export class EinkaufslisteWidgetComponent { }); } - addEntry(addCommand: EntryAddCommand) { + addEntry(addCommand: EntryCommand) { if(addCommand) { this.service.addEntry(this.eventId, this.widget.id, addCommand).subscribe({ next: response => { diff --git a/frontend/src/services/widgets/einkaufsliste-widget.service.ts b/frontend/src/services/widgets/einkaufsliste-widget.service.ts index 4298027..30f724e 100644 --- a/frontend/src/services/widgets/einkaufsliste-widget.service.ts +++ b/frontend/src/services/widgets/einkaufsliste-widget.service.ts @@ -2,7 +2,7 @@ import {Injectable} from '@angular/core'; import {HttpClient} from "@angular/common/http"; import {Observable} from "rxjs"; import {environment} from "../../environment/environment"; -import {Entry, EntryAddCommand, EntryCheckCommand, ShoppingWidget} from "../../model/shoppinglist-widget"; +import {Entry, EntryCheckCommand, EntryCommand, ShoppingWidget} from "../../model/shoppinglist-widget"; @Injectable({ providedIn: 'root' @@ -12,16 +12,19 @@ export class EinkaufslisteWidgetService { constructor(private http: HttpClient) { } - addEntry(eventId: string, widgetId: string, entryAddCommand: EntryAddCommand): Observable { - return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries`, entryAddCommand, {withCredentials: true}); + addEntry(eventId: string, widgetId: string, entryCommand: EntryCommand): Observable { + return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries`, entryCommand, {withCredentials: true}); } - editEntry(eventId: string, widgetId: string, entry: Entry) { - return this.http.post(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, entry, {withCredentials: true}); + editEntry(eventId: string, widgetId: string, entryId: string, entry: EntryCommand) { + return this.http.put(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/update/${entryId}`, entry, {withCredentials: true}); } setBuyerId(eventId: string, widgetId: string, entry: Entry, value: EntryCheckCommand) { return this.http.put(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, value, {withCredentials: true}); + } + deleteEntry(eventId: string, widgetId: string, entryId: string){ + return this.http.delete(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entryId}`, {withCredentials: true}); } } From 4bd0d40564e3d320746655715183351d70a745ee Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Fri, 17 May 2024 16:57:01 +0200 Subject: [PATCH 15/20] FE-#128: fix edit functionality --- .../in/ShoppingListWidgetController.java | 16 +++++++++++---- .../ShoppingListWidgetService.java | 20 ++++++++++++++++--- frontend/src/model/shoppinglist-widget.ts | 2 +- 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/backend/src/main/java/com/dhbw/get2gether/backend/widget/adapter/in/ShoppingListWidgetController.java b/backend/src/main/java/com/dhbw/get2gether/backend/widget/adapter/in/ShoppingListWidgetController.java index ccf3acc..ce21901 100644 --- a/backend/src/main/java/com/dhbw/get2gether/backend/widget/adapter/in/ShoppingListWidgetController.java +++ b/backend/src/main/java/com/dhbw/get2gether/backend/widget/adapter/in/ShoppingListWidgetController.java @@ -2,10 +2,7 @@ import com.dhbw.get2gether.backend.event.model.Event; import com.dhbw.get2gether.backend.widget.application.ShoppingListWidgetService; -import com.dhbw.get2gether.backend.widget.model.shoppinglist.EntryAddCommand; -import com.dhbw.get2gether.backend.widget.model.shoppinglist.EntryCheckCommand; -import com.dhbw.get2gether.backend.widget.model.shoppinglist.ShoppingListCreateCommand; -import com.dhbw.get2gether.backend.widget.model.shoppinglist.ShoppingListWidget; +import com.dhbw.get2gether.backend.widget.model.shoppinglist.*; import org.springframework.security.core.annotation.AuthenticationPrincipal; import org.springframework.security.oauth2.core.user.OAuth2User; import org.springframework.web.bind.annotation.*; @@ -60,4 +57,15 @@ public ShoppingListWidget checkEntry( return service.checkEntry(principal, eventId, widgetId, entryId, checkCommand); } + @PutMapping("/{widgetId}/entries/update/{entryId}") + public ShoppingListWidget updateEntry( + @AuthenticationPrincipal OAuth2User principal, + @PathVariable String eventId, + @PathVariable String widgetId, + @PathVariable String entryId, + @RequestBody EntryUpdateCommand updateCommand + ) { + return service.updateEntry(principal, eventId, widgetId, entryId, updateCommand); + } + } diff --git a/backend/src/main/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetService.java b/backend/src/main/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetService.java index 56abca8..4a7d5a1 100644 --- a/backend/src/main/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetService.java +++ b/backend/src/main/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetService.java @@ -68,11 +68,25 @@ public ShoppingListWidget removeEntry(AuthenticatedPrincipal principal, String e public ShoppingListWidget checkEntry(AuthenticatedPrincipal principal, String eventId, String widgetId, String entryId, EntryCheckCommand checkCommand) { Event event = getEventById(principal, eventId); ShoppingListWidget widget = getWidgetFromEvent(event, widgetId); - Entry entry = widget.getEntries().stream() - .filter(l -> Objects.equals(l.getId(), entryId)).findFirst() - .orElseThrow(() -> new EntityNotFoundException("Entry not found")); + Entry entry = getEntry(widget, entryId); entry.check(userService.getUserByPrincipal(principal).getId(), mapper.mapEntryCheckCommandToEntryCheck(checkCommand)); return updateAndGetWidget(principal, event, widget); } + @PreAuthorize("hasRole('USER')") + public ShoppingListWidget updateEntry(AuthenticatedPrincipal principal, String eventId, String widgetId, String entryId, EntryUpdateCommand updateCommand) { + Event event = getEventById(principal, eventId); + ShoppingListWidget widget = getWidgetFromEvent(event, widgetId); + Entry entry = getEntry(widget, entryId); + entry.update(updateCommand); + return updateAndGetWidget(principal, event, widget); + } + + private Entry getEntry(ShoppingListWidget widget, String entryId) { + return widget.getEntries().stream() + .filter(l -> Objects.equals(l.getId(), entryId)).findFirst() + .orElseThrow(() -> new EntityNotFoundException("Entry not found")); + } + + } diff --git a/frontend/src/model/shoppinglist-widget.ts b/frontend/src/model/shoppinglist-widget.ts index 0c4e141..4fc6517 100644 --- a/frontend/src/model/shoppinglist-widget.ts +++ b/frontend/src/model/shoppinglist-widget.ts @@ -13,7 +13,7 @@ export type Entry = { buyerId: string; } -export type EntryAddCommand = { +export type EntryCommand = { description: string; amount: string; } From 2a9d5cbdb6cf0fdd6e2cdad3e9710472c8acaca0 Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Fri, 17 May 2024 17:07:16 +0200 Subject: [PATCH 16/20] FE-#128: added test for Shopping Entry edit --- .../ShoppingListWidgetServiceTest.java | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java b/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java index 862ddd6..ea1a280 100644 --- a/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java +++ b/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java @@ -336,4 +336,61 @@ void shouldUnCheckEntry() { .isEqualTo(entryAfterCheck); assertThat(returnedWidget.getEntries().get(0).getId()).isNotBlank(); } + + @Test + @WithMockOAuth2User + void shouldUpdateEntry() { + // given + AuthenticatedPrincipal principal = (AuthenticatedPrincipal) + SecurityContextHolder.getContext().getAuthentication().getPrincipal(); + Entry entry = Entry.builder() + .description("Test") + .amount("1") + .checked(false) + .creatorId("creator-id") + .id("123") + .build(); + ShoppingListWidget widget = ShoppingListWidget.builder() + .id("wi-123") + .entries(new ArrayList<>(List.of(entry))) + .build(); + Event event = Event.builder() + .id("ev-123") + .widgets(new ArrayList<>(List.of(widget))) + .build(); + EntryUpdateCommand updateCommand = EntryUpdateCommand.builder() + .description("Edited") + .amount("2") + .build(); + Entry entryAfterCheck = Entry.builder() + .description("Edited") + .amount("2") + .checked(false) + .creatorId("creator-id") + .id("123") + .build(); + + when(eventService.getSingleEvent(any(), eq(event.getId()))).thenReturn(event); + when(eventService.updateEventWidgets(any(), eq(event.getId()), any())) + .thenAnswer(i -> event.toBuilder() + .widgets( + i.getArgument(2, EventWidgetUpdateCommand.class).getWidgets() + ) + .build() + ); + when(userService.getUserByPrincipal(principal)).thenReturn(User.builder() + .id("test") + .email("test@example.com").build()); + + // when + ShoppingListWidget returnedWidget = shoppingListWidgetService.updateEntry(principal, event.getId(), widget.getId(), entry.getId(), updateCommand); + + // then + assertThat(returnedWidget).isNotNull(); + assertThat(returnedWidget.getEntries()).hasSize(1); + assertThat(returnedWidget.getEntries().get(0)).usingRecursiveComparison() + .ignoringFields("id") + .isEqualTo(entryAfterCheck); + assertThat(returnedWidget.getEntries().get(0).getId()).isNotBlank(); + } } \ No newline at end of file From 0a4ff6ac2773dd11f72c462af35dad667ba938be Mon Sep 17 00:00:00 2001 From: ebauersandoval Date: Sat, 18 May 2024 12:24:41 +0200 Subject: [PATCH 17/20] FE-#128: refactored Test and loading of buyer id in entry card --- .../ShoppingListWidgetServiceTest.java | 4 +- frontend/package-lock.json | 1 - frontend/package.json | 1 - ...kaufliste-eintrag-list-item.component.html | 6 +-- ...kaufliste-eintrag-list-item.component.scss | 19 ++++++--- ...inkaufliste-eintrag-list-item.component.ts | 40 +++++++++++++------ 6 files changed, 46 insertions(+), 25 deletions(-) diff --git a/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java b/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java index 24933e5..7e081c3 100644 --- a/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java +++ b/backend/src/test/java/com/dhbw/get2gether/backend/widget/application/ShoppingListWidgetServiceTest.java @@ -362,7 +362,7 @@ void shouldUpdateEntry() { .description("Edited") .amount("2") .build(); - Entry entryAfterCheck = Entry.builder() + Entry entryAfterUpdate = Entry.builder() .description("Edited") .amount("2") .checked(false) @@ -390,7 +390,7 @@ void shouldUpdateEntry() { assertThat(returnedWidget.getEntries()).hasSize(1); assertThat(returnedWidget.getEntries().get(0)).usingRecursiveComparison() .ignoringFields("id") - .isEqualTo(entryAfterCheck); + .isEqualTo(entryAfterUpdate); assertThat(returnedWidget.getEntries().get(0).getId()).isNotBlank(); } } \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e5fcf1a..6801680 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,7 +20,6 @@ "@angular/platform-browser": "^17.3.6", "@angular/platform-browser-dynamic": "^17.3.6", "@angular/router": "^17.3.6", - "@material/snackbar": "^14.0.0", "material-components-web": "^14.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/frontend/package.json b/frontend/package.json index dcb5878..49a2787 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,7 +23,6 @@ "@angular/platform-browser": "^17.3.6", "@angular/platform-browser-dynamic": "^17.3.6", "@angular/router": "^17.3.6", - "@material/snackbar": "^14.0.0", "material-components-web": "^14.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html index c68ad3a..d151983 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html +++ b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html @@ -1,11 +1,11 @@ -

    {{item.description}}

    +

    {{item.description}}

    {{item.amount}}

    @if(item.buyerId) { -

    +

    person - {{loadUsername()}} + {{username}}

    } - an

    -
    diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss deleted file mode 100644 index 3942853..0000000 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -.page-container{ - display: flex; - flex-direction: column; - align-items: center; -} -img{ - margin-top: 10px; -} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts deleted file mode 100644 index a562438..0000000 --- a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import {Component, EventEmitter, Input, Output} from '@angular/core'; -import {AddEintragDialogComponent} from "../add-eintrag-dialog/add-eintrag-dialog.component"; -import {MatDialog} from "@angular/material/dialog"; -import {EinkaufslisteWidgetComponent} from "../einkaufsliste-widget.component"; -import {ShoppingWidget} from "../../../../model/shoppinglist-widget"; -import {BaseWidget} from "../../../../model/common-widget"; - -@Component({ - selector: 'app-default-shopping-page', - templateUrl: './default-shopping-page.component.html', - styleUrl: './default-shopping-page.component.scss' -}) -export class DefaultShoppingPageComponent { - @Input() - eventId!: string; - - @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) - widget!: ShoppingWidget; - - @Output() - onWidgetUpdated = new EventEmitter(); - - constructor( - private dialog: MatDialog, - private root: EinkaufslisteWidgetComponent - ) { - } - - openAddEntryDialog() { - const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); - dialogRef.afterClosed().subscribe(addCommand => { - if (addCommand) { - this.root.addEntry(addCommand); - } - }); - } -} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html b/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html deleted file mode 100644 index 1bc1f32..0000000 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.html +++ /dev/null @@ -1,25 +0,0 @@ -

    Einkaufseintrag bearbeiten

    - -
    -

    Beschreibung*

    - - - -

    Menge

    - - - -
    -     - - - - - - diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts deleted file mode 100644 index 5dbefa1..0000000 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; -import {Entry, ShoppingWidget} from "../../../../model/shoppinglist-widget"; -import {EditEintragDialogComponent} from "../edit-eintrag-dialog/edit-eintrag-dialog.component"; -import {MatDialog} from "@angular/material/dialog"; -import {UserService} from "../../../../services/user.service"; -import {EinkaufslisteWidgetService} from "../../../../services/widgets/einkaufsliste-widget.service"; -import {MatSnackBar} from "@angular/material/snack-bar"; - -@Component({ - selector: 'app-einkaufliste-eintrag-list-item', - templateUrl: './einkaufliste-eintrag-list-item.component.html', - styleUrl: './einkaufliste-eintrag-list-item.component.scss' -}) -export class EinkauflisteEintragListItemComponent implements OnInit, OnChanges{ - @Input() item!: Entry; - @Input() eventId!: string; - @Input() widgetId!: string; - @Output() onWidgetUpdated = new EventEmitter(); - - username: string | null = null; - - constructor( - private dialog: MatDialog, - private userService: UserService, - private service: EinkaufslisteWidgetService, - private _snackbar: MatSnackBar - ) { - } - - ngOnInit() { - this.loadUsername(); - } - - ngOnChanges(changes: SimpleChanges) { - if (changes['item'] && !changes['item'].firstChange) { - this.loadUsername(); - } - } - - loadUsername() { - if (!this.item.buyerId) { - this.username = null; // Falls kein buyerId vorhanden ist, Username zurücksetzen - return; - } - - this.userService.fetchUserById(this.item.buyerId).subscribe({ - next: user => { - this.username = [user.firstName, user.lastName].filter(x => x).join(" "); - }, - error: error => console.error(error) - }); - } - - editEntryDialog(){ - const dialogRef = this.dialog.open(EditEintragDialogComponent, { data: { entry: this.item},width: "400px"}); - dialogRef.afterClosed().subscribe(updateCommand => { - if (updateCommand) { - console.log(this.eventId); - this.service.editEntry(this.eventId, this.widgetId, this.item.id, updateCommand).subscribe({ - next: response => { - this.onWidgetUpdated.emit(response); - this.showMessage("Eintrag bearbeitet") - }, - error: error => { - console.error('Error:', error); - this.showMessage("Fehler beim Bearbeiten", "error") - } - }); - } - }); - } - - showMessage(messageToshow:string, snackBarClass:string="successfull"){ - this._snackbar.open(messageToshow, 'schließen',{ - duration: 5000, - panelClass:snackBarClass - }) - } - - deleteEntry() { - this.service.deleteEntry(this.eventId,this.widgetId,this.item.id).subscribe({ - next: response => { - this.onWidgetUpdated.emit(response); - this.showMessage("Eintrag gelöscht") - }, - error: error => { - console.error('Error:', error); - this.showMessage("Fehler beim Löschen", "error") - } - }); - } -} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html deleted file mode 100644 index 9500861..0000000 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.html +++ /dev/null @@ -1,24 +0,0 @@ -
    - -
      - @for (item of eintraege; track item.id) { -
    • - - -
      • - } -
    -
    - - - - - - - diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts b/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts deleted file mode 100644 index 42a061e..0000000 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.ts +++ /dev/null @@ -1,85 +0,0 @@ -import {Component, EventEmitter, Input, Output} from '@angular/core'; -import {BaseWidget} from "../../../model/common-widget"; -import {Entry, EntryCommand, EntryCheckCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; -import {AddEintragDialogComponent} from "./add-eintrag-dialog/add-eintrag-dialog.component"; -import {MatDialog} from "@angular/material/dialog"; -import {EinkaufslisteWidgetService} from "../../../services/widgets/einkaufsliste-widget.service"; -import {MatSnackBar} from "@angular/material/snack-bar"; -import {MatCheckboxChange} from "@angular/material/checkbox"; - -@Component({ - selector: 'app-einkaufsliste-widget', - templateUrl: './einkaufsliste-widget.component.html', - styleUrl: './einkaufsliste-widget.component.scss' -}) -export class EinkaufslisteWidgetComponent { - @Input() - eventId!: string; - - @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) - widget!: ShoppingWidget; - - @Output() - onWidgetUpdated = new EventEmitter(); - - constructor( - private dialog: MatDialog, - private service: EinkaufslisteWidgetService, - private _snackbar: MatSnackBar - ) { - } - - openAddEntryDialog() { - const dialogRef = this.dialog.open(AddEintragDialogComponent, {width: "400px"}); - dialogRef.afterClosed().subscribe(addCommand => { - if (addCommand) { - this.addEntry(addCommand); - } - }); - } - - addEntry(addCommand: EntryCommand) { - if(addCommand) { - this.service.addEntry(this.eventId, this.widget.id, addCommand).subscribe({ - next: response => { - this.onWidgetUpdated.emit(response); - this.showMessage("Eintrag angelegt") - }, - error: error => { - console.error('Error:', error); - this.showMessage("Fehler beim Anlegen", "error") - } - }); - } - } - - get entries(): number { - return this.widget.entries.length; - } - - get eintraege() { - return this.widget.entries; - } - - showMessage(messageToshow:string, snackBarClass:string="successfull"){ - this._snackbar.open(messageToshow, 'schließen',{ - duration: 5000, - panelClass: snackBarClass - }) - } - - onCheckboxChange(item: Entry, event: MatCheckboxChange) { - const checkCommand: EntryCheckCommand = { - checked: event.checked - } - this.service.setBuyerId(this.eventId, this.widget.id, item, checkCommand).subscribe({ - next: response => { - console.log(response); - this.onWidgetUpdated.emit(response); - }, - error: error => { - console.error('Error:', error); - } - }); - } -} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.html similarity index 78% rename from frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html rename to frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.html index ecac6d1..4ed0fc6 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.html +++ b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.html @@ -6,7 +6,7 @@

    Einkaufseintrag hinzufügen

    Menge

    - + @@ -14,12 +14,13 @@

    Einkaufseintrag hinzufügen

    - + diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.scss similarity index 95% rename from frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss rename to frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.scss index 9e06500..385be78 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.scss @@ -8,6 +8,7 @@ .create-eintrag-container { display: flex; flex-direction: column; + gap: 0; } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.spec.ts b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.spec.ts similarity index 56% rename from frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.spec.ts rename to frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.spec.ts index af7e222..dd85d72 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.spec.ts +++ b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AddEintragDialogComponent } from './add-eintrag-dialog.component'; +import { AddEntryDialogComponent } from './add-entry-dialog.component'; describe('AddEintragDialogComponent', () => { - let component: AddEintragDialogComponent; - let fixture: ComponentFixture; + let component: AddEntryDialogComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [AddEintragDialogComponent] + declarations: [AddEntryDialogComponent] }) .compileComponents(); - fixture = TestBed.createComponent(AddEintragDialogComponent); + fixture = TestBed.createComponent(AddEntryDialogComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.ts similarity index 73% rename from frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts rename to frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.ts index c37add0..8df47dd 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/shopping-list-widget/add-entry-dialog/add-entry-dialog.component.ts @@ -5,15 +5,15 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms"; @Component({ selector: 'app-add-eintrag-dialog', - templateUrl: './add-eintrag-dialog.component.html', - styleUrl: './add-eintrag-dialog.component.scss' + templateUrl: './add-entry-dialog.component.html', + styleUrl: './add-entry-dialog.component.scss' }) -export class AddEintragDialogComponent implements OnInit{ +export class AddEntryDialogComponent implements OnInit { form!: FormGroup; constructor( private fb: FormBuilder, - private dialogRef: MatDialogRef, + private dialogRef: MatDialogRef, ) { } @@ -22,11 +22,10 @@ export class AddEintragDialogComponent implements OnInit{ description: ['', Validators.required], amount: [null] }); - } closeDialog() { - if(this.form.valid) { + if (this.form.valid) { const addCommand: EntryCommand = { description: this.form.value.description, amount: this.form.value.amount diff --git a/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.html b/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.html new file mode 100644 index 0000000..08cb911 --- /dev/null +++ b/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.html @@ -0,0 +1,16 @@ +
    + no Shopping-List Bild +

    Kein Einkaufseintrag angelegt

    +

    + Lege einen Einkaufseintrag über dieses + + an +

    +
    diff --git a/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.scss b/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.scss new file mode 100644 index 0000000..40df952 --- /dev/null +++ b/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.scss @@ -0,0 +1,13 @@ +.page-container { + display: flex; + flex-direction: column; + align-items: center; + + p { + margin-top: 0; + } +} + +img { + margin-top: var(--size-12); +} diff --git a/frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.spec.ts b/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.spec.ts similarity index 100% rename from frontend/src/app/widgets/einkaufsliste-widget/default-shopping-page/default-shopping-page.component.spec.ts rename to frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.spec.ts diff --git a/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.ts b/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.ts new file mode 100644 index 0000000..33d2715 --- /dev/null +++ b/frontend/src/app/widgets/shopping-list-widget/default-shopping-page/default-shopping-page.component.ts @@ -0,0 +1,13 @@ +import {Component, EventEmitter, Output} from '@angular/core'; + +@Component({ + selector: 'app-default-shopping-page', + templateUrl: './default-shopping-page.component.html', + styleUrl: './default-shopping-page.component.scss' +}) +export class DefaultShoppingPageComponent { + + @Output() + onCreateEntryClicked = new EventEmitter(); + +} diff --git a/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.html b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.html new file mode 100644 index 0000000..d037335 --- /dev/null +++ b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.html @@ -0,0 +1,26 @@ +

    Einkaufseintrag bearbeiten

    + +
    +

    Beschreibung*

    + + + +

    Menge

    + + + +
    +     + + + + + + diff --git a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.scss similarity index 95% rename from frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss rename to frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.scss index 9e06500..385be78 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/add-eintrag-dialog/add-eintrag-dialog.component.scss +++ b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.scss @@ -8,6 +8,7 @@ .create-eintrag-container { display: flex; flex-direction: column; + gap: 0; } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.spec.ts b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.spec.ts similarity index 55% rename from frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.spec.ts rename to frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.spec.ts index 267d6c7..a5b3646 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.spec.ts +++ b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { EditEintragDialogComponent } from './edit-eintrag-dialog.component'; +import { EditEntryDialogComponent } from './edit-entry-dialog.component'; describe('EditEintragDialogComponent', () => { - let component: EditEintragDialogComponent; - let fixture: ComponentFixture; + let component: EditEntryDialogComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [EditEintragDialogComponent] + declarations: [EditEntryDialogComponent] }) .compileComponents(); - - fixture = TestBed.createComponent(EditEintragDialogComponent); + + fixture = TestBed.createComponent(EditEntryDialogComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.ts similarity index 74% rename from frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts rename to frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.ts index b1fac98..48edc0f 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/edit-eintrag-dialog/edit-eintrag-dialog.component.ts +++ b/frontend/src/app/widgets/shopping-list-widget/edit-entry-dialog/edit-entry-dialog.component.ts @@ -1,21 +1,20 @@ import {Component, Inject, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; -import {UserService} from "../../../../services/user.service"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import {Entry, EntryCommand} from "../../../../model/shoppinglist-widget"; @Component({ selector: 'app-edit-eintrag-dialog', - templateUrl: './edit-eintrag-dialog.component.html', - styleUrl: './edit-eintrag-dialog.component.scss' + templateUrl: './edit-entry-dialog.component.html', + styleUrl: './edit-entry-dialog.component.scss' }) -export class EditEintragDialogComponent implements OnInit{ +export class EditEntryDialogComponent implements OnInit{ form!: FormGroup; entry: Entry; constructor( private fb: FormBuilder, - private dialogRef: MatDialogRef, + private dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: { entry:Entry} ) { this.entry = data.entry @@ -26,7 +25,6 @@ export class EditEintragDialogComponent implements OnInit{ description: [this.entry.description, Validators.required], amount: [this.entry.amount] }); - } closeDialog() { @@ -34,7 +32,7 @@ export class EditEintragDialogComponent implements OnInit{ const updateCommand: EntryCommand = { description: this.form.value.description, amount: this.form.value.amount - } + }; this.dialogRef.close(updateCommand); } } diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.html similarity index 55% rename from frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html rename to frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.html index d151983..68a1345 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.html +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.html @@ -1,23 +1,23 @@ -

    {{item.description}}

    -

    {{item.amount}}

    - @if(item.buyerId) { -

    +

    {{ item.description }}

    +

    {{ item.amount }}

    + @if (item.buyerId) { +

    person - {{username}} -

    - } + {{ buyer?.firstName }} {{ buyer?.lastName }} +

    + } - - diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.scss b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.scss similarity index 96% rename from frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.scss rename to frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.scss index 46a101e..6e05367 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.scss +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.scss @@ -1,6 +1,5 @@ .einkaufliste-eintrag-card { display: flex; - flex-grow: 1; padding: 0; margin-right: var(--size-10); @@ -17,7 +16,6 @@ p { margin: 0; - flex: 1; text-align: left; } @@ -37,6 +35,7 @@ einkaufliste-eintrag-card-content-buyerProfile { display: flex; flex-direction: column; align-items: flex-start; + p { width: 100%; } @@ -50,6 +49,7 @@ einkaufliste-eintrag-card-content-buyerProfile { .einkaufliste-eintrag-card { padding: var(--size-10) 0; + button { position: absolute; top: var(--size-10); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.spec.ts b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.spec.ts similarity index 51% rename from frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.spec.ts rename to frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.spec.ts index 214c562..022fb9c 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufliste-eintrag-list-item/einkaufliste-eintrag-list-item.component.spec.ts +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { EinkauflisteEintragListItemComponent } from './einkaufliste-eintrag-list-item.component'; +import { ShoppingListEntryListItemComponent } from './shopping-list-entry-list-item.component'; describe('EinkauflisteEintragListItemComponent', () => { - let component: EinkauflisteEintragListItemComponent; - let fixture: ComponentFixture; + let component: ShoppingListEntryListItemComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [EinkauflisteEintragListItemComponent] + declarations: [ShoppingListEntryListItemComponent] }) .compileComponents(); - - fixture = TestBed.createComponent(EinkauflisteEintragListItemComponent); + + fixture = TestBed.createComponent(ShoppingListEntryListItemComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.ts b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.ts new file mode 100644 index 0000000..5e5fab3 --- /dev/null +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-entry-list-item/shopping-list-entry-list-item.component.ts @@ -0,0 +1,24 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {Entry} from "../../../../model/shoppinglist-widget"; +import {Event} from "../../../../model/event"; +import {SimpleUser} from "../../../../model/user"; + +@Component({ + selector: 'app-einkaufliste-eintrag-list-item', + templateUrl: './shopping-list-entry-list-item.component.html', + styleUrl: './shopping-list-entry-list-item.component.scss' +}) +export class ShoppingListEntryListItemComponent { + @Input() item!: Entry; + @Input() eventData!: Event; + @Output() onEdit = new EventEmitter(); + @Output() onDelete = new EventEmitter(); + + get buyer(): SimpleUser | undefined { + if (!this.item.buyerId) { + return undefined; + } + return this.eventData.participants.find(p => p.id === this.item.buyerId); + } + +} diff --git a/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.html b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.html new file mode 100644 index 0000000..634b412 --- /dev/null +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.html @@ -0,0 +1,35 @@ +
    + +
      + @for (item of entries; track item.id) { +
    • + + +
      • + } +
    +
    + + + + + + + diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.scss similarity index 94% rename from frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss rename to frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.scss index 458c114..bdbc32d 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.scss +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.scss @@ -9,7 +9,7 @@ button { border-radius: 12px; } -.einkaufliste-eintrag-liste{ +.einkaufliste-eintrag-liste { display: flex; flex-direction: column; gap: var(--size-10); diff --git a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.spec.ts b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.spec.ts similarity index 54% rename from frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.spec.ts rename to frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.spec.ts index 50a6120..162914f 100644 --- a/frontend/src/app/widgets/einkaufsliste-widget/einkaufsliste-widget.component.spec.ts +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { EinkaufslisteWidgetComponent } from './einkaufsliste-widget.component'; +import { ShoppingListWidgetComponent } from './shopping-list-widget.component'; describe('EinkaufslisteWidgetComponent', () => { - let component: EinkaufslisteWidgetComponent; - let fixture: ComponentFixture; + let component: ShoppingListWidgetComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [EinkaufslisteWidgetComponent] + declarations: [ShoppingListWidgetComponent] }) .compileComponents(); - - fixture = TestBed.createComponent(EinkaufslisteWidgetComponent); + + fixture = TestBed.createComponent(ShoppingListWidgetComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.ts b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.ts new file mode 100644 index 0000000..03d2abe --- /dev/null +++ b/frontend/src/app/widgets/shopping-list-widget/shopping-list-widget.component.ts @@ -0,0 +1,120 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {BaseWidget} from "../../../model/common-widget"; +import {Entry, EntryCommand, EntryCheckCommand, ShoppingWidget} from "../../../model/shoppinglist-widget"; +import {AddEntryDialogComponent} from "./add-entry-dialog/add-entry-dialog.component"; +import {MatDialog} from "@angular/material/dialog"; +import {EinkaufslisteWidgetService} from "../../../services/widgets/einkaufsliste-widget.service"; +import {MatSnackBar} from "@angular/material/snack-bar"; +import {MatCheckboxChange} from "@angular/material/checkbox"; +import {Event} from "../../../model/event"; +import {EditEntryDialogComponent} from "./edit-entry-dialog/edit-entry-dialog.component"; + +@Component({ + selector: 'app-einkaufsliste-widget', + templateUrl: './shopping-list-widget.component.html', + styleUrl: './shopping-list-widget.component.scss' +}) +export class ShoppingListWidgetComponent { + @Input() + eventData!: Event; + + @Input({transform: (value: BaseWidget): ShoppingWidget => value as ShoppingWidget}) + widget!: ShoppingWidget; + + @Output() + onWidgetUpdated = new EventEmitter(); + + constructor( + private dialog: MatDialog, + private service: EinkaufslisteWidgetService, + private _snackbar: MatSnackBar + ) { + } + + openAddEntryDialog() { + const dialogRef = this.dialog.open(AddEntryDialogComponent, {width: "400px"}); + dialogRef.afterClosed().subscribe(addCommand => { + if (addCommand) { + this.addEntry(addCommand); + } + }); + } + + addEntry(addCommand: EntryCommand) { + if (addCommand) { + this.service.addEntry(this.eventData.id, this.widget.id, addCommand).subscribe({ + next: response => { + this.onWidgetUpdated.emit(response); + this.showMessage("Eintrag angelegt") + }, + error: error => { + console.error('Error:', error); + this.showMessage("Fehler beim Anlegen", "error") + } + }); + } + } + + openEditEntryDialog(entry: Entry) { + const dialogRef = this.dialog.open(EditEntryDialogComponent, { + data: {entry: entry}, + width: "400px" + }); + dialogRef.afterClosed().subscribe(updateCommand => { + if (updateCommand) { + this.service.editEntry(this.eventData.id, this.widget.id, entry.id, updateCommand).subscribe({ + next: response => { + this.onWidgetUpdated.emit(response); + this.showMessage("Eintrag bearbeitet") + }, + error: error => { + console.error('Error:', error); + this.showMessage("Fehler beim Bearbeiten", "error") + } + }); + } + }); + } + + onCheckboxChange(item: Entry, event: MatCheckboxChange) { + const checkCommand: EntryCheckCommand = { + checked: event.checked + }; + this.service.checkEntry(this.eventData.id, this.widget.id, item, checkCommand).subscribe({ + next: response => { + this.onWidgetUpdated.emit(response); + }, + error: error => { + console.error('Error:', error); + } + }); + } + + deleteEntry(entry: Entry) { + this.service.deleteEntry(this.eventData.id, this.widget.id, entry.id).subscribe({ + next: response => { + this.onWidgetUpdated.emit(response); + this.showMessage("Eintrag gelöscht") + }, + error: error => { + console.error('Error:', error); + this.showMessage("Fehler beim Löschen", "error") + } + }); + } + + get entriesCount(): number { + return this.widget.entries.length; + } + + get entries() { + return this.widget.entries; + } + + private showMessage(messageToShow: string, snackBarClass: string = "successfull") { + this._snackbar.open(messageToShow, 'schließen', { + duration: 5000, + panelClass: snackBarClass + }); + } +} diff --git a/frontend/src/services/user.service.ts b/frontend/src/services/user.service.ts index ffd0e97..5f6eda3 100644 --- a/frontend/src/services/user.service.ts +++ b/frontend/src/services/user.service.ts @@ -51,8 +51,4 @@ export class UserService { document.documentElement.setAttribute("theme", colorMode.toLowerCase()); } - fetchUserById(id: string):Observable { - return this.http.get(`${environment.api}/user/${id}`,{withCredentials: true}); - } - } diff --git a/frontend/src/services/widgets/einkaufsliste-widget.service.ts b/frontend/src/services/widgets/einkaufsliste-widget.service.ts index 30f724e..406e1d5 100644 --- a/frontend/src/services/widgets/einkaufsliste-widget.service.ts +++ b/frontend/src/services/widgets/einkaufsliste-widget.service.ts @@ -20,7 +20,7 @@ export class EinkaufslisteWidgetService { return this.http.put(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/update/${entryId}`, entry, {withCredentials: true}); } - setBuyerId(eventId: string, widgetId: string, entry: Entry, value: EntryCheckCommand) { + checkEntry(eventId: string, widgetId: string, entry: Entry, value: EntryCheckCommand) { return this.http.put(`${environment.api}/event/${eventId}/widgets/shopping-list/${widgetId}/entries/${entry.id}`, value, {withCredentials: true}); }