|
@@ -9,7 +9,7 @@
|
|
| 9 |
@if (b.subtitle) {
|
| 10 |
<p role="doc-subtitle">{{ b.subtitle }}</p>
|
| 11 |
}
|
| 12 |
-
ISBN: {{ b.isbn }}
|
| 13 |
</div>
|
| 14 |
<footer>
|
| 15 |
<a [routerLink]="['details', b.isbn]">Details</a>
|
|
|
|
| 9 |
@if (b.subtitle) {
|
| 10 |
<p role="doc-subtitle">{{ b.subtitle }}</p>
|
| 11 |
}
|
| 12 |
+
ISBN: {{ b.isbn | isbnFormat }}
|
| 13 |
</div>
|
| 14 |
<footer>
|
| 15 |
<a [routerLink]="['details', b.isbn]">Details</a>
|
|
@@ -2,10 +2,11 @@ import { Component, input, output } from '@angular/core';
|
|
| 2 |
import { RouterLink } from '@angular/router';
|
| 3 |
|
| 4 |
import { Book } from '../../shared/book';
|
|
|
|
| 5 |
|
| 6 |
@Component({
|
| 7 |
selector: 'app-book-card',
|
| 8 |
-
imports: [RouterLink],
|
| 9 |
templateUrl: './book-card.html',
|
| 10 |
styleUrl: './book-card.scss'
|
| 11 |
})
|
|
|
|
| 2 |
import { RouterLink } from '@angular/router';
|
| 3 |
|
| 4 |
import { Book } from '../../shared/book';
|
| 5 |
+
import { IsbnFormatPipe } from '../../shared/isbn-format.pipe';
|
| 6 |
|
| 7 |
@Component({
|
| 8 |
selector: 'app-book-card',
|
| 9 |
+
imports: [RouterLink, IsbnFormatPipe],
|
| 10 |
templateUrl: './book-card.html',
|
| 11 |
styleUrl: './book-card.scss'
|
| 12 |
})
|
|
@@ -26,11 +26,11 @@
|
|
| 26 |
</div>
|
| 27 |
<div>
|
| 28 |
<h2>ISBN</h2>
|
| 29 |
-
{{ b.isbn }}
|
| 30 |
</div>
|
| 31 |
<div>
|
| 32 |
<h2>Created at</h2>
|
| 33 |
-
{{ b.createdAt }}
|
| 34 |
</div>
|
| 35 |
</div>
|
| 36 |
</header>
|
|
|
|
| 26 |
</div>
|
| 27 |
<div>
|
| 28 |
<h2>ISBN</h2>
|
| 29 |
+
{{ b.isbn | isbnFormat }}
|
| 30 |
</div>
|
| 31 |
<div>
|
| 32 |
<h2>Created at</h2>
|
| 33 |
+
{{ b.createdAt | date:'medium' }}
|
| 34 |
</div>
|
| 35 |
</div>
|
| 36 |
</header>
|
|
@@ -1,11 +1,13 @@
|
|
| 1 |
import { Component, inject, input } from '@angular/core';
|
|
|
|
| 2 |
import { Router, RouterLink } from '@angular/router';
|
| 3 |
|
| 4 |
import { BookStore } from '../../shared/book-store';
|
|
|
|
| 5 |
|
| 6 |
@Component({
|
| 7 |
selector: 'app-book-details-page',
|
| 8 |
-
imports: [RouterLink],
|
| 9 |
templateUrl: './book-details-page.html',
|
| 10 |
styleUrl: './book-details-page.scss'
|
| 11 |
})
|
|
|
|
| 1 |
import { Component, inject, input } from '@angular/core';
|
| 2 |
+
import { DatePipe } from '@angular/common';
|
| 3 |
import { Router, RouterLink } from '@angular/router';
|
| 4 |
|
| 5 |
import { BookStore } from '../../shared/book-store';
|
| 6 |
+
import { IsbnFormatPipe } from '../../shared/isbn-format.pipe';
|
| 7 |
|
| 8 |
@Component({
|
| 9 |
selector: 'app-book-details-page',
|
| 10 |
+
imports: [RouterLink, DatePipe, IsbnFormatPipe],
|
| 11 |
templateUrl: './book-details-page.html',
|
| 12 |
styleUrl: './book-details-page.scss'
|
| 13 |
})
|
|
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { Pipe, PipeTransform } from '@angular/core';
|
| 2 |
+
|
| 3 |
+
@Pipe({
|
| 4 |
+
name: 'isbnFormat'
|
| 5 |
+
})
|
| 6 |
+
export class IsbnFormatPipe implements PipeTransform {
|
| 7 |
+
transform(value: string): string {
|
| 8 |
+
if (value.length !== 13) {
|
| 9 |
+
return value;
|
| 10 |
+
}
|
| 11 |
+
|
| 12 |
+
// Beispiel: 978-1-2345-6789-0
|
| 13 |
+
const parts = [
|
| 14 |
+
value.slice(0, 3), // Präfix (978 oder 979)
|
| 15 |
+
value.slice(3, 4), // Gruppe (Sprache/Region)
|
| 16 |
+
value.slice(4, 8), // Herausgeber
|
| 17 |
+
value.slice(8, 12), // Titel
|
| 18 |
+
value.slice(12) // Prüfziffer
|
| 19 |
+
];
|
| 20 |
+
|
| 21 |
+
return parts.join('-');
|
| 22 |
+
}
|
| 23 |
+
}
|