From abdb76a36c30f4c97d967f951474bbf0904e3fff Mon Sep 17 00:00:00 2001 From: "Nina.van.hoof" Date: Fri, 31 May 2024 14:04:22 +0200 Subject: [PATCH] added sockcard, currencyPipe & @for --- itenium-socks/package-lock.json | 119 ++++++++++++++++++ itenium-socks/package.json | 1 + .../src/app/admin/socks-admin.component.html | 2 +- .../src/app/home/latest-socks.component.html | 21 +--- .../src/app/home/latest-socks.component.ts | 11 +- .../src/app/socks/shop.component.html | 21 +--- itenium-socks/src/app/socks/shop.component.ts | 11 +- .../socks/sock-card/sock-card.component.html | 14 +++ .../socks/sock-card/sock-card.component.ts | 14 +++ .../src/app/socks/sock.component.html | 13 +- itenium-socks/src/app/socks/sock.component.ts | 9 +- itenium-socks/src/main.ts | 3 + itenium-socks/tsconfig.app.json | 4 +- itenium-socks/tsconfig.spec.json | 3 +- 14 files changed, 185 insertions(+), 61 deletions(-) create mode 100644 itenium-socks/src/app/socks/sock-card/sock-card.component.html create mode 100644 itenium-socks/src/app/socks/sock-card/sock-card.component.ts diff --git a/itenium-socks/package-lock.json b/itenium-socks/package-lock.json index 295c374..98a0b86 100644 --- a/itenium-socks/package-lock.json +++ b/itenium-socks/package-lock.json @@ -26,6 +26,7 @@ "@angular-devkit/build-angular": "^18.0.1", "@angular/cli": "^18.0.1", "@angular/compiler-cli": "^18.0.0", + "@angular/localize": "^18.0.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", @@ -512,6 +513,79 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/localize": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.0.0.tgz", + "integrity": "sha512-DW3wB5Cj0a+Ph5SppddRcXTH6igX+W5x7wK+VDsLefiAC2cHRG4DjEL2mpoVYrkDUPNQRaf+X4GTEKHtTzjvNw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "7.24.4", + "@types/babel__core": "7.20.5", + "fast-glob": "3.3.2", + "yargs": "^17.2.1" + }, + "bin": { + "localize-extract": "tools/bundles/src/extract/cli.js", + "localize-migrate": "tools/bundles/src/migrate/cli.js", + "localize-translate": "tools/bundles/src/translate/cli.js" + }, + "engines": { + "node": "^18.13.0 || >=20.9.0" + }, + "peerDependencies": { + "@angular/compiler": "18.0.0", + "@angular/compiler-cli": "18.0.0" + } + }, + "node_modules/@angular/localize/node_modules/@babel/core": { + "version": "7.24.4", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz", + "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.24.2", + "@babel/generator": "^7.24.4", + "@babel/helper-compilation-targets": "^7.23.6", + "@babel/helper-module-transforms": "^7.23.3", + "@babel/helpers": "^7.24.4", + "@babel/parser": "^7.24.4", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.1", + "@babel/types": "^7.24.0", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@angular/localize/node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@angular/localize/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, "node_modules/@angular/platform-browser": { "version": "18.0.0", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.0.0.tgz", @@ -3959,6 +4033,51 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.6.8", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", + "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.20.6", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz", + "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.20.7" + } + }, "node_modules/@types/body-parser": { "version": "1.19.5", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", diff --git a/itenium-socks/package.json b/itenium-socks/package.json index 6b3a9d6..b020135 100644 --- a/itenium-socks/package.json +++ b/itenium-socks/package.json @@ -28,6 +28,7 @@ "@angular-devkit/build-angular": "^18.0.1", "@angular/cli": "^18.0.1", "@angular/compiler-cli": "^18.0.0", + "@angular/localize": "^18.0.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", diff --git a/itenium-socks/src/app/admin/socks-admin.component.html b/itenium-socks/src/app/admin/socks-admin.component.html index 53e0d8b..f674364 100644 --- a/itenium-socks/src/app/admin/socks-admin.component.html +++ b/itenium-socks/src/app/admin/socks-admin.component.html @@ -22,7 +22,7 @@

{{ sock.name }} {{ sock.variant | titlecase }} {{ sock.color }} - {{ sock.price | currency }} + {{ sock.price | currency:'EUR':'symbol':'.2':'nl-BE' }} {{ sock.inventory }} diff --git a/itenium-socks/src/app/home/latest-socks.component.html b/itenium-socks/src/app/home/latest-socks.component.html index 9cd2eb7..c2458bc 100644 --- a/itenium-socks/src/app/home/latest-socks.component.html +++ b/itenium-socks/src/app/home/latest-socks.component.html @@ -6,22 +6,11 @@

-
-
- -
- -
-
-
{{ sock.name }}
-
{{ sock.price }}
-
-
- -
- -
+ @for (sock of socks$ | async; track sock.id) { +
+
+ }
@@ -29,4 +18,4 @@
{{ sock.price }}
- + \ No newline at end of file diff --git a/itenium-socks/src/app/home/latest-socks.component.ts b/itenium-socks/src/app/home/latest-socks.component.ts index 9b03950..6297b4d 100644 --- a/itenium-socks/src/app/home/latest-socks.component.ts +++ b/itenium-socks/src/app/home/latest-socks.component.ts @@ -2,14 +2,15 @@ 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 { SockCardComponent } from "../socks/sock-card/sock-card.component"; @Component({ - selector: 'app-latest-socks', - standalone: true, - imports: [NgFor, AsyncPipe, RouterLink], - templateUrl: './latest-socks.component.html' + selector: 'app-latest-socks', + standalone: true, + imports: [AsyncPipe, RouterLink, SockCardComponent], + templateUrl: './latest-socks.component.html' }) export class LatestSocksComponent implements OnInit { socks$!: Observable; diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html index a0139e2..d78b310 100644 --- a/itenium-socks/src/app/socks/shop.component.html +++ b/itenium-socks/src/app/socks/shop.component.html @@ -6,22 +6,11 @@

-
-
- -
- -
-
-
{{ sock.name }}
-
{{ sock.price }}
-
-
- -
- -
+ @for (sock of socks$ | async; track sock.id) { +
+
+ }
- + \ No newline at end of file diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts index 33c897b..aad31d2 100644 --- a/itenium-socks/src/app/socks/shop.component.ts +++ b/itenium-socks/src/app/socks/shop.component.ts @@ -2,13 +2,14 @@ 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 { SockCardComponent } from "./sock-card/sock-card.component"; @Component({ - selector: 'app-shop', - standalone: true, - imports: [NgFor, AsyncPipe], - templateUrl: './shop.component.html' + selector: 'app-shop', + standalone: true, + imports: [AsyncPipe, SockCardComponent], + templateUrl: './shop.component.html' }) export class ShopComponent { socks$!: Observable; diff --git a/itenium-socks/src/app/socks/sock-card/sock-card.component.html b/itenium-socks/src/app/socks/sock-card/sock-card.component.html new file mode 100644 index 0000000..cb6e2f4 --- /dev/null +++ b/itenium-socks/src/app/socks/sock-card/sock-card.component.html @@ -0,0 +1,14 @@ +
+ +
+ +
+
+
{{ sock.name }}
+
{{ sock.price | currency:'EUR':'symbol':'.2':'nl-BE' }}
+
+
+ +
+ +
diff --git a/itenium-socks/src/app/socks/sock-card/sock-card.component.ts b/itenium-socks/src/app/socks/sock-card/sock-card.component.ts new file mode 100644 index 0000000..42710cd --- /dev/null +++ b/itenium-socks/src/app/socks/sock-card/sock-card.component.ts @@ -0,0 +1,14 @@ +import { Component, Input} from '@angular/core'; +import {Sock} from '../sock.model'; +import {CurrencyPipe} from '@angular/common'; + +@Component({ + selector: 'app-sock-card', + standalone: true, + imports: [CurrencyPipe], + templateUrl: './sock-card.component.html' +}) +export class SockCardComponent { + @Input({required:true}) sock!: Sock; + +} diff --git a/itenium-socks/src/app/socks/sock.component.html b/itenium-socks/src/app/socks/sock.component.html index b40f9d2..3b638c0 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..0d2ffde 100644 --- a/itenium-socks/src/app/socks/sock.component.ts +++ b/itenium-socks/src/app/socks/sock.component.ts @@ -3,12 +3,13 @@ import { Observable } from 'rxjs'; import { Sock } from './sock.model'; import { SocksService } from './socks.service'; import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common'; +import { SockCardComponent } from "./sock-card/sock-card.component"; @Component({ - selector: 'app-sock', - standalone: true, - imports: [NgIf, AsyncPipe, TitleCasePipe], - templateUrl: './sock.component.html' + selector: 'app-sock', + standalone: true, + imports: [NgIf, AsyncPipe, TitleCasePipe, SockCardComponent], + templateUrl: './sock.component.html' }) export class SockComponent { sock$!: Observable; diff --git a/itenium-socks/src/main.ts b/itenium-socks/src/main.ts index 35b00f3..7d8d45a 100644 --- a/itenium-socks/src/main.ts +++ b/itenium-socks/src/main.ts @@ -1,6 +1,9 @@ +/// + import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; +import '@angular/common/locales/global/nl'; bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err)); diff --git a/itenium-socks/tsconfig.app.json b/itenium-socks/tsconfig.app.json index 374cc9d..ec26f70 100644 --- a/itenium-socks/tsconfig.app.json +++ b/itenium-socks/tsconfig.app.json @@ -3,7 +3,9 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": [ + "@angular/localize" + ] }, "files": [ "src/main.ts" diff --git a/itenium-socks/tsconfig.spec.json b/itenium-socks/tsconfig.spec.json index be7e9da..c63b698 100644 --- a/itenium-socks/tsconfig.spec.json +++ b/itenium-socks/tsconfig.spec.json @@ -4,7 +4,8 @@ "compilerOptions": { "outDir": "./out-tsc/spec", "types": [ - "jasmine" + "jasmine", + "@angular/localize" ] }, "include": [