From 1f7e4c34f42a8bc19500829571b7d1e3e65e7e59 Mon Sep 17 00:00:00 2001 From: ymanfroy Date: Fri, 31 May 2024 10:16:27 +0200 Subject: [PATCH 1/4] Exercise 1 - Currency --- itenium-socks/src/app/app.component.ts | 12 ++++++++++-- itenium-socks/src/app/socks/shop.component.html | 2 +- itenium-socks/src/app/socks/shop.component.ts | 6 +++--- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/itenium-socks/src/app/app.component.ts b/itenium-socks/src/app/app.component.ts index 8ad7283..d440cc3 100644 --- a/itenium-socks/src/app/app.component.ts +++ b/itenium-socks/src/app/app.component.ts @@ -1,5 +1,7 @@ -import { Component } from '@angular/core'; +import {Component, LOCALE_ID} from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { registerLocaleData } from '@angular/common'; +import localeNlBe from '@angular/common/locales/nl-BE'; @Component({ selector: 'app-root', @@ -7,6 +9,12 @@ import { RouterOutlet } from '@angular/router'; imports: [ RouterOutlet, ], + providers: [{ provide: LOCALE_ID, useValue: 'nl-BE' }], templateUrl: './app.component.html', }) -export class AppComponent {} +export class AppComponent { + + constructor() { + registerLocaleData(localeNlBe, 'nl-BE'); + } +} diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html index a0139e2..2e9e5c8 100644 --- a/itenium-socks/src/app/socks/shop.component.html +++ b/itenium-socks/src/app/socks/shop.component.html @@ -14,7 +14,7 @@

{{ sock.name }}
-
{{ sock.price }}
+
{{ sock.price | currency: 'EUR':'symbol':'1.2-2'}}
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts index 33c897b..ab8ba17 100644 --- a/itenium-socks/src/app/socks/shop.component.ts +++ b/itenium-socks/src/app/socks/shop.component.ts @@ -1,13 +1,13 @@ -import { Component } from '@angular/core'; +import {Component, LOCALE_ID} from '@angular/core'; import { SocksService } from './socks.service'; import { Observable } from 'rxjs'; import { Sock } from './sock.model'; -import { AsyncPipe, NgFor } from '@angular/common'; +import {AsyncPipe, CurrencyPipe, NgFor} from '@angular/common'; @Component({ selector: 'app-shop', standalone: true, - imports: [NgFor, AsyncPipe], + imports: [NgFor, AsyncPipe, CurrencyPipe], templateUrl: './shop.component.html' }) export class ShopComponent { From 727bf8e2d3da59ab10537931e17b49f4b90939ce Mon Sep 17 00:00:00 2001 From: ymanfroy Date: Fri, 31 May 2024 10:54:51 +0200 Subject: [PATCH 2/4] Revert "Exercise 1 - Currency" This reverts commit 1f7e4c34f42a8bc19500829571b7d1e3e65e7e59. --- itenium-socks/src/app/app.component.ts | 12 ++---------- itenium-socks/src/app/socks/shop.component.html | 2 +- itenium-socks/src/app/socks/shop.component.ts | 6 +++--- 3 files changed, 6 insertions(+), 14 deletions(-) diff --git a/itenium-socks/src/app/app.component.ts b/itenium-socks/src/app/app.component.ts index d440cc3..8ad7283 100644 --- a/itenium-socks/src/app/app.component.ts +++ b/itenium-socks/src/app/app.component.ts @@ -1,7 +1,5 @@ -import {Component, LOCALE_ID} from '@angular/core'; +import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { registerLocaleData } from '@angular/common'; -import localeNlBe from '@angular/common/locales/nl-BE'; @Component({ selector: 'app-root', @@ -9,12 +7,6 @@ import localeNlBe from '@angular/common/locales/nl-BE'; imports: [ RouterOutlet, ], - providers: [{ provide: LOCALE_ID, useValue: 'nl-BE' }], templateUrl: './app.component.html', }) -export class AppComponent { - - constructor() { - registerLocaleData(localeNlBe, 'nl-BE'); - } -} +export class AppComponent {} diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html index 2e9e5c8..a0139e2 100644 --- a/itenium-socks/src/app/socks/shop.component.html +++ b/itenium-socks/src/app/socks/shop.component.html @@ -14,7 +14,7 @@

{{ sock.name }}
-
{{ sock.price | currency: 'EUR':'symbol':'1.2-2'}}
+
{{ sock.price }}
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts index ab8ba17..33c897b 100644 --- a/itenium-socks/src/app/socks/shop.component.ts +++ b/itenium-socks/src/app/socks/shop.component.ts @@ -1,13 +1,13 @@ -import {Component, LOCALE_ID} from '@angular/core'; +import { Component } from '@angular/core'; import { SocksService } from './socks.service'; import { Observable } from 'rxjs'; import { Sock } from './sock.model'; -import {AsyncPipe, CurrencyPipe, NgFor} from '@angular/common'; +import { AsyncPipe, NgFor } from '@angular/common'; @Component({ selector: 'app-shop', standalone: true, - imports: [NgFor, AsyncPipe, CurrencyPipe], + imports: [NgFor, AsyncPipe], templateUrl: './shop.component.html' }) export class ShopComponent { From 32b05d8a141f6374410550bc337472813a7410a0 Mon Sep 17 00:00:00 2001 From: ymanfroy Date: Fri, 31 May 2024 15:56:46 +0200 Subject: [PATCH 3/4] Templates - add review --- .../src/app/socks/sock.component.html | 48 +++++++++++-------- itenium-socks/src/app/socks/sock.component.ts | 40 +++++++++++++--- 2 files changed, 63 insertions(+), 25 deletions(-) diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html index b40f9d2..51ed33a 100644 --- a/itenium-socks/src/app/socks/sock.component.html +++ b/itenium-socks/src/app/socks/sock.component.html @@ -68,25 +68,35 @@

-
- -
-
- - -
-
- -
+ @if (this.apiError){ +

Error adding review. Please try again later.

+ } + @if (this.apiSuccess){ +

Review succesfully added

+ } +
+
+ @if (this.formError){ +

Please enter a review.

+ } + +
+
+ + +
+
+ +
+
diff --git a/itenium-socks/src/app/socks/sock.component.ts b/itenium-socks/src/app/socks/sock.component.ts index 1618e41..f98f84f 100644 --- a/itenium-socks/src/app/socks/sock.component.ts +++ b/itenium-socks/src/app/socks/sock.component.ts @@ -3,17 +3,27 @@ import { Observable } from 'rxjs'; import { Sock } from './sock.model'; import { SocksService } from './socks.service'; import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common'; +import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; @Component({ selector: 'app-sock', standalone: true, - imports: [NgIf, AsyncPipe, TitleCasePipe], - templateUrl: './sock.component.html' + imports: [NgIf, AsyncPipe, TitleCasePipe, ReactiveFormsModule], + templateUrl: './sock.component.html', }) export class SockComponent { sock$!: Observable; + reviewForm: FormGroup; + formError: boolean = false; + apiError: boolean = false; + apiSuccess: boolean = false; - constructor(private socksService: SocksService) {} + constructor(private socksService: SocksService) { + this.reviewForm = new FormGroup({ + 'review': new FormControl(null, Validators.required), + 'rating': new FormControl('1') + }); + } ngOnInit(): void { // HACK: This is not the way to get the sockId!! @@ -27,8 +37,26 @@ export class SockComponent { } addReview(): void { - // TODO: Bind the form! - const sockId = +window.location.pathname.split('/')[2]; - this.socksService.addReview(sockId, 'my review', 5).subscribe(); + this.resetNotifications(); + if (this.reviewForm.invalid) { + this.formError = true; + } else { + const sockId = +window.location.pathname.split('/')[2]; + this.socksService.addReview(sockId, this.reviewForm.get('review')?.value, this.reviewForm.get('rating')?.value).subscribe( + () => { + this.reviewForm.reset(); + this.reviewForm.get('rating')?.setValue('1'); + this.apiSuccess = true; + }, + (error) => { + this.apiError = true; + }); + } + } + + resetNotifications(){ + this.apiError = false; + this.apiSuccess = false; + this.formError = false; } } From 0fef53ef8980bf0e30995f6d84e32ca90b3707f4 Mon Sep 17 00:00:00 2001 From: ymanfroy Date: Fri, 31 May 2024 16:01:21 +0200 Subject: [PATCH 4/4] Templates - add review 2 --- itenium-socks/src/app/socks/sock.component.html | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html index 51ed33a..be322c5 100644 --- a/itenium-socks/src/app/socks/sock.component.html +++ b/itenium-socks/src/app/socks/sock.component.html @@ -1,8 +1,8 @@ -