From e043b017ac2e31866452c9b99ace14152dcb2475 Mon Sep 17 00:00:00 2001 From: Pierre Bosse Date: Fri, 31 May 2024 11:49:22 +0200 Subject: [PATCH 1/5] Exercise 1: Add sock layout component --- itenium-socks/angular.json | 3 +++ .../src/app/home/latest-socks.component.html | 15 +-------------- .../src/app/home/latest-socks.component.ts | 3 ++- .../app/sock-layout/sock-layout.component.html | 14 ++++++++++++++ .../app/sock-layout/sock-layout.component.scss | 0 .../src/app/sock-layout/sock-layout.component.ts | 13 +++++++++++++ itenium-socks/src/app/socks/shop.component.html | 15 +-------------- itenium-socks/src/app/socks/shop.component.ts | 3 ++- itenium-socks/src/app/socks/sock.component.html | 13 +------------ itenium-socks/src/app/socks/sock.component.ts | 3 ++- 10 files changed, 39 insertions(+), 43 deletions(-) create mode 100644 itenium-socks/src/app/sock-layout/sock-layout.component.html create mode 100644 itenium-socks/src/app/sock-layout/sock-layout.component.scss create mode 100644 itenium-socks/src/app/sock-layout/sock-layout.component.ts diff --git a/itenium-socks/angular.json b/itenium-socks/angular.json index e7cfa50..f61caf2 100644 --- a/itenium-socks/angular.json +++ b/itenium-socks/angular.json @@ -100,5 +100,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/itenium-socks/src/app/home/latest-socks.component.html b/itenium-socks/src/app/home/latest-socks.component.html index 9cd2eb7..fb2b6d0 100644 --- a/itenium-socks/src/app/home/latest-socks.component.html +++ b/itenium-socks/src/app/home/latest-socks.component.html @@ -7,20 +7,7 @@

-
- -
- -
-
-
{{ sock.name }}
-
{{ sock.price }}
-
-
- -
- -
+
diff --git a/itenium-socks/src/app/home/latest-socks.component.ts b/itenium-socks/src/app/home/latest-socks.component.ts index 9b03950..150b49e 100644 --- a/itenium-socks/src/app/home/latest-socks.component.ts +++ b/itenium-socks/src/app/home/latest-socks.component.ts @@ -4,11 +4,12 @@ import { Observable } from 'rxjs'; import { Sock } from '../socks/sock.model'; import { AsyncPipe, NgFor } from '@angular/common'; import { RouterLink } from '@angular/router'; +import { SockLayoutComponent } from '../sock-layout/sock-layout.component'; @Component({ selector: 'app-latest-socks', standalone: true, - imports: [NgFor, AsyncPipe, RouterLink], + imports: [NgFor, AsyncPipe, RouterLink, SockLayoutComponent], templateUrl: './latest-socks.component.html' }) export class LatestSocksComponent implements OnInit { diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.html b/itenium-socks/src/app/sock-layout/sock-layout.component.html new file mode 100644 index 0000000..5a55991 --- /dev/null +++ b/itenium-socks/src/app/sock-layout/sock-layout.component.html @@ -0,0 +1,14 @@ +
+ +
+ +
+
+
{{ sockModel.name }}
+
€{{ sockModel.price }}
+
+
+ +
+ +
\ No newline at end of file diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.scss b/itenium-socks/src/app/sock-layout/sock-layout.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.ts b/itenium-socks/src/app/sock-layout/sock-layout.component.ts new file mode 100644 index 0000000..159d3c1 --- /dev/null +++ b/itenium-socks/src/app/sock-layout/sock-layout.component.ts @@ -0,0 +1,13 @@ +import { Component, Input } from '@angular/core'; +import { Sock } from '../socks/sock.model'; + +@Component({ + selector: 'app-sock-layout', + standalone: true, + imports: [], + templateUrl: './sock-layout.component.html', + styleUrl: './sock-layout.component.scss' +}) +export class SockLayoutComponent { + @Input() sockModel! : Sock; +} diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html index a0139e2..585a903 100644 --- a/itenium-socks/src/app/socks/shop.component.html +++ b/itenium-socks/src/app/socks/shop.component.html @@ -7,20 +7,7 @@

-
- -
- -
-
-
{{ sock.name }}
-
{{ sock.price }}
-
-
- -
- -
+
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts index 33c897b..a0d7bc5 100644 --- a/itenium-socks/src/app/socks/shop.component.ts +++ b/itenium-socks/src/app/socks/shop.component.ts @@ -3,11 +3,12 @@ import { SocksService } from './socks.service'; import { Observable } from 'rxjs'; import { Sock } from './sock.model'; import { AsyncPipe, NgFor } from '@angular/common'; +import { SockLayoutComponent } from '../sock-layout/sock-layout.component'; @Component({ selector: 'app-shop', standalone: true, - imports: [NgFor, AsyncPipe], + imports: [NgFor, AsyncPipe, SockLayoutComponent], templateUrl: './shop.component.html' }) export class ShopComponent { diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html index b40f9d2..008b125 100644 --- a/itenium-socks/src/app/socks/sock.component.html +++ b/itenium-socks/src/app/socks/sock.component.html @@ -17,18 +17,7 @@
-
-
- -
-
-
{{ sock.name }}
-
€{{ sock.price }}
-
-
- -
-
+

{{ sock.name }}

diff --git a/itenium-socks/src/app/socks/sock.component.ts b/itenium-socks/src/app/socks/sock.component.ts index 1618e41..88d129b 100644 --- a/itenium-socks/src/app/socks/sock.component.ts +++ b/itenium-socks/src/app/socks/sock.component.ts @@ -3,11 +3,12 @@ import { Observable } from 'rxjs'; import { Sock } from './sock.model'; import { SocksService } from './socks.service'; import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common'; +import { SockLayoutComponent } from '../sock-layout/sock-layout.component'; @Component({ selector: 'app-sock', standalone: true, - imports: [NgIf, AsyncPipe, TitleCasePipe], + imports: [NgIf, AsyncPipe, TitleCasePipe, SockLayoutComponent], templateUrl: './sock.component.html' }) export class SockComponent { From ea1a78d4c080d8c4a783234a7f4fcbd358c894f7 Mon Sep 17 00:00:00 2001 From: Pierre Bosse Date: Fri, 31 May 2024 13:41:46 +0200 Subject: [PATCH 2/5] Add currency pipe --- itenium-socks/src/app/app.config.ts | 3 ++- itenium-socks/src/app/home/latest-socks.component.html | 2 +- .../src/app/sock-layout/sock-layout.component.html | 10 +++++----- .../src/app/sock-layout/sock-layout.component.scss | 0 .../src/app/sock-layout/sock-layout.component.ts | 9 +++++---- itenium-socks/src/app/socks/shop.component.html | 2 +- itenium-socks/src/app/socks/sock.component.html | 2 +- 7 files changed, 15 insertions(+), 13 deletions(-) delete mode 100644 itenium-socks/src/app/sock-layout/sock-layout.component.scss diff --git a/itenium-socks/src/app/app.config.ts b/itenium-socks/src/app/app.config.ts index 3450030..b4ab120 100644 --- a/itenium-socks/src/app/app.config.ts +++ b/itenium-socks/src/app/app.config.ts @@ -1,4 +1,4 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { ApplicationConfig, DEFAULT_CURRENCY_CODE, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient, withFetch } from '@angular/common/http'; @@ -9,5 +9,6 @@ export const appConfig: ApplicationConfig = { provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(withFetch()), + {provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' } ] }; diff --git a/itenium-socks/src/app/home/latest-socks.component.html b/itenium-socks/src/app/home/latest-socks.component.html index fb2b6d0..b212aa6 100644 --- a/itenium-socks/src/app/home/latest-socks.component.html +++ b/itenium-socks/src/app/home/latest-socks.component.html @@ -7,7 +7,7 @@

- +
diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.html b/itenium-socks/src/app/sock-layout/sock-layout.component.html index 5a55991..42d95e5 100644 --- a/itenium-socks/src/app/sock-layout/sock-layout.component.html +++ b/itenium-socks/src/app/sock-layout/sock-layout.component.html @@ -1,14 +1,14 @@
- +
- +
-
{{ sockModel.name }}
-
€{{ sockModel.price }}
+
{{ sock.name }}
+
{{ sock.price | currency }}
- +
\ No newline at end of file diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.scss b/itenium-socks/src/app/sock-layout/sock-layout.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.ts b/itenium-socks/src/app/sock-layout/sock-layout.component.ts index 159d3c1..67edeea 100644 --- a/itenium-socks/src/app/sock-layout/sock-layout.component.ts +++ b/itenium-socks/src/app/sock-layout/sock-layout.component.ts @@ -1,13 +1,14 @@ import { Component, Input } from '@angular/core'; import { Sock } from '../socks/sock.model'; +import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-sock-layout', standalone: true, - imports: [], - templateUrl: './sock-layout.component.html', - styleUrl: './sock-layout.component.scss' + imports: [CurrencyPipe], + templateUrl: './sock-layout.component.html' }) + export class SockLayoutComponent { - @Input() sockModel! : Sock; + @Input() sock! : Sock; } diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html index 585a903..9cf500a 100644 --- a/itenium-socks/src/app/socks/shop.component.html +++ b/itenium-socks/src/app/socks/shop.component.html @@ -7,7 +7,7 @@

- +
diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html index 008b125..bb09a46 100644 --- a/itenium-socks/src/app/socks/sock.component.html +++ b/itenium-socks/src/app/socks/sock.component.html @@ -17,7 +17,7 @@
- +

{{ sock.name }}

From 65b2a425d81a927f4fecf4f85a8ca5ae20a5348c Mon Sep 17 00:00:00 2001 From: Pierre Bosse Date: Fri, 31 May 2024 14:43:37 +0200 Subject: [PATCH 3/5] Add time ago for the review date --- itenium-socks/package-lock.json | 13 +++++++++++++ itenium-socks/package.json | 1 + itenium-socks/src/app/app.config.ts | 6 ++++-- .../src/app/socks/sock-reviews.component.html | 2 +- .../src/app/socks/sock-reviews.component.ts | 3 ++- 5 files changed, 21 insertions(+), 4 deletions(-) diff --git a/itenium-socks/package-lock.json b/itenium-socks/package-lock.json index 295c374..4ea53fd 100644 --- a/itenium-socks/package-lock.json +++ b/itenium-socks/package-lock.json @@ -18,6 +18,7 @@ "@angular/router": "^18.0.0", "@fortawesome/angular-fontawesome": "^0.15.0", "@fortawesome/fontawesome-free": "^6.5.2", + "ngx-timeago": "^3.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" @@ -9054,6 +9055,18 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ngx-timeago": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ngx-timeago/-/ngx-timeago-3.0.0.tgz", + "integrity": "sha512-oz+X8qbPJD6uFHXVWUTE+scjLPskOKbrAVlUG0pUwrn8wru7woryGdK/xdjvS74n187tbo5+e8AXgLCqEvUSjw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": ">=16.0.0", + "rxjs": ">=7.0.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/itenium-socks/package.json b/itenium-socks/package.json index 6b3a9d6..ab28ffc 100644 --- a/itenium-socks/package.json +++ b/itenium-socks/package.json @@ -20,6 +20,7 @@ "@angular/router": "^18.0.0", "@fortawesome/angular-fontawesome": "^0.15.0", "@fortawesome/fontawesome-free": "^6.5.2", + "ngx-timeago": "^3.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" diff --git a/itenium-socks/src/app/app.config.ts b/itenium-socks/src/app/app.config.ts index b4ab120..49adc98 100644 --- a/itenium-socks/src/app/app.config.ts +++ b/itenium-socks/src/app/app.config.ts @@ -1,14 +1,16 @@ -import { ApplicationConfig, DEFAULT_CURRENCY_CODE, provideZoneChangeDetection } from '@angular/core'; +import { ApplicationConfig, DEFAULT_CURRENCY_CODE, importProvidersFrom, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient, withFetch } from '@angular/common/http'; import { routes } from './app.routes'; +import { TimeagoModule } from 'ngx-timeago'; export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(withFetch()), - {provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' } + {provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }, + importProvidersFrom(TimeagoModule.forRoot()) ] }; diff --git a/itenium-socks/src/app/socks/sock-reviews.component.html b/itenium-socks/src/app/socks/sock-reviews.component.html index 696aab3..b4a4066 100644 --- a/itenium-socks/src/app/socks/sock-reviews.component.html +++ b/itenium-socks/src/app/socks/sock-reviews.component.html @@ -17,7 +17,7 @@
{{ review.socksId }}
-
On {{ review.added }} by {{ review.email }}
+
On {{ review.added | timeago }} by {{ review.email }}
diff --git a/itenium-socks/src/app/socks/sock-reviews.component.ts b/itenium-socks/src/app/socks/sock-reviews.component.ts index fe89cb9..57b4a0d 100644 --- a/itenium-socks/src/app/socks/sock-reviews.component.ts +++ b/itenium-socks/src/app/socks/sock-reviews.component.ts @@ -3,11 +3,12 @@ import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { SocksService } from './socks.service'; import { Review } from './sock.model'; +import { TimeagoModule } from 'ngx-timeago'; @Component({ selector: 'app-sock-reviews', standalone: true, - imports: [NgFor, AsyncPipe], + imports: [NgFor, AsyncPipe, TimeagoModule ], templateUrl: './sock-reviews.component.html' }) export class SockReviewsComponent { From 7c57b57dd9c58e62928f468410ceb9cf9601e0b7 Mon Sep 17 00:00:00 2001 From: Pierre Bosse Date: Fri, 31 May 2024 14:55:29 +0200 Subject: [PATCH 4/5] Use @for syntax instead of NgFor --- itenium-socks/src/app/home/latest-socks.component.html | 8 +++++--- itenium-socks/src/app/home/latest-socks.component.ts | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/itenium-socks/src/app/home/latest-socks.component.html b/itenium-socks/src/app/home/latest-socks.component.html index b212aa6..359116d 100644 --- a/itenium-socks/src/app/home/latest-socks.component.html +++ b/itenium-socks/src/app/home/latest-socks.component.html @@ -6,9 +6,11 @@

-
- -
+ @for (sock of socks$ | async; track sock.id) { +
+ +
+ }
diff --git a/itenium-socks/src/app/home/latest-socks.component.ts b/itenium-socks/src/app/home/latest-socks.component.ts index 150b49e..c25a6de 100644 --- a/itenium-socks/src/app/home/latest-socks.component.ts +++ b/itenium-socks/src/app/home/latest-socks.component.ts @@ -2,14 +2,14 @@ import { Component, OnInit } from '@angular/core'; import { SocksService } from '../socks/socks.service'; import { Observable } from 'rxjs'; import { Sock } from '../socks/sock.model'; -import { AsyncPipe, NgFor } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { RouterLink } from '@angular/router'; import { SockLayoutComponent } from '../sock-layout/sock-layout.component'; @Component({ selector: 'app-latest-socks', standalone: true, - imports: [NgFor, AsyncPipe, RouterLink, SockLayoutComponent], + imports: [AsyncPipe, RouterLink, SockLayoutComponent], templateUrl: './latest-socks.component.html' }) export class LatestSocksComponent implements OnInit { From e737e1442590d9cbbbe30431fd1debbbcf1e7fd5 Mon Sep 17 00:00:00 2001 From: Pierre Bosse Date: Fri, 31 May 2024 15:09:07 +0200 Subject: [PATCH 5/5] Replace all NgFor --- itenium-socks/src/app/socks/shop.component.html | 8 +++++--- itenium-socks/src/app/socks/shop.component.ts | 4 ++-- itenium-socks/src/app/socks/sock-reviews.component.html | 8 ++++++-- itenium-socks/src/app/socks/sock-reviews.component.ts | 4 ++-- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html index 9cf500a..6adebed 100644 --- a/itenium-socks/src/app/socks/shop.component.html +++ b/itenium-socks/src/app/socks/shop.component.html @@ -6,9 +6,11 @@

-
- -
+ @for (sock of socks$ | async; track sock.id) { +
+ +
+ }
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts index a0d7bc5..9b44b71 100644 --- a/itenium-socks/src/app/socks/shop.component.ts +++ b/itenium-socks/src/app/socks/shop.component.ts @@ -2,13 +2,13 @@ import { Component } 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 } from '@angular/common'; import { SockLayoutComponent } from '../sock-layout/sock-layout.component'; @Component({ selector: 'app-shop', standalone: true, - imports: [NgFor, AsyncPipe, SockLayoutComponent], + imports: [AsyncPipe, SockLayoutComponent], templateUrl: './shop.component.html' }) export class ShopComponent { diff --git a/itenium-socks/src/app/socks/sock-reviews.component.html b/itenium-socks/src/app/socks/sock-reviews.component.html index b4a4066..57497fd 100644 --- a/itenium-socks/src/app/socks/sock-reviews.component.html +++ b/itenium-socks/src/app/socks/sock-reviews.component.html @@ -9,13 +9,16 @@