@@ -1,8 +1,10 @@
|
|
1 |
import { CommonModule } from '@angular/common';
|
2 |
-
import { NgModule } from '@angular/core';
|
3 |
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
4 |
import { ReactiveFormsModule } from '@angular/forms';
|
5 |
import { DateValueAccessorModule } from 'angular-date-value-accessor';
|
|
|
|
|
6 |
|
7 |
import { AppRoutingModule } from './app-routing.module.one-app';
|
8 |
import { AppComponent } from './app.component';
|
@@ -16,6 +18,7 @@
|
|
16 |
import { CreateBookComponent } from './create-book/create-book.component';
|
17 |
import { FormMessagesComponent } from './form-messages/form-messages.component';
|
18 |
import { EditBookComponent } from './edit-book/edit-book.component';
|
|
|
19 |
|
20 |
@NgModule({
|
21 |
declarations: [
|
@@ -29,6 +32,7 @@
|
|
29 |
CreateBookComponent,
|
30 |
FormMessagesComponent,
|
31 |
EditBookComponent,
|
|
|
32 |
],
|
33 |
imports: [
|
34 |
CommonModule,
|
@@ -38,8 +42,13 @@
|
|
38 |
DateValueAccessorModule
|
39 |
],
|
40 |
providers: [
|
41 |
-
{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
|
|
|
42 |
],
|
43 |
bootstrap: [AppComponent]
|
44 |
})
|
45 |
-
export class AppModule {
|
|
|
|
|
|
|
|
1 |
import { CommonModule } from '@angular/common';
|
2 |
+
import { NgModule, LOCALE_ID } from '@angular/core';
|
3 |
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
4 |
import { ReactiveFormsModule } from '@angular/forms';
|
5 |
import { DateValueAccessorModule } from 'angular-date-value-accessor';
|
6 |
+
import localeDe from '@angular/common/locales/de';
|
7 |
+
import { registerLocaleData } from '@angular/common';
|
8 |
|
9 |
import { AppRoutingModule } from './app-routing.module.one-app';
|
10 |
import { AppComponent } from './app.component';
|
18 |
import { CreateBookComponent } from './create-book/create-book.component';
|
19 |
import { FormMessagesComponent } from './form-messages/form-messages.component';
|
20 |
import { EditBookComponent } from './edit-book/edit-book.component';
|
21 |
+
import { IsbnPipe } from './shared/isbn.pipe';
|
22 |
|
23 |
@NgModule({
|
24 |
declarations: [
|
32 |
CreateBookComponent,
|
33 |
FormMessagesComponent,
|
34 |
EditBookComponent,
|
35 |
+
IsbnPipe
|
36 |
],
|
37 |
imports: [
|
38 |
CommonModule,
|
42 |
DateValueAccessorModule
|
43 |
],
|
44 |
providers: [
|
45 |
+
{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
|
46 |
+
{ provide: LOCALE_ID, useValue: 'de' }
|
47 |
],
|
48 |
bootstrap: [AppComponent]
|
49 |
})
|
50 |
+
export class AppModule {
|
51 |
+
constructor() {
|
52 |
+
registerLocaleData(localeDe);
|
53 |
+
}
|
54 |
+
}
|
@@ -11,11 +11,11 @@
|
|
11 |
</div>
|
12 |
<div class="four wide column">
|
13 |
<h4>ISBN</h4>
|
14 |
-
{{ book.isbn }}
|
15 |
</div>
|
16 |
<div class="four wide column">
|
17 |
<h4>Erschienen</h4>
|
18 |
-
{{ book.published }}
|
19 |
</div>
|
20 |
<div class="four wide column" *ngIf="book.rating">
|
21 |
<h4>Rating</h4>
|
11 |
</div>
|
12 |
<div class="four wide column">
|
13 |
<h4>ISBN</h4>
|
14 |
+
{{ book.isbn | isbn }}
|
15 |
</div>
|
16 |
<div class="four wide column">
|
17 |
<h4>Erschienen</h4>
|
18 |
+
{{ book.published | date:'longDate' }}
|
19 |
</div>
|
20 |
<div class="four wide column" *ngIf="book.rating">
|
21 |
<h4>Rating</h4>
|
@@ -15,7 +15,6 @@
|
|
15 |
bookForm: FormGroup;
|
16 |
|
17 |
@Input() book?: Book;
|
18 |
-
|
19 |
@Input() set editing(isEditing: boolean) {
|
20 |
const isbnControl = this.bookForm.get('isbn')!;
|
21 |
if (isEditing) {
|
@@ -51,7 +50,7 @@
|
|
51 |
});
|
52 |
}
|
53 |
|
54 |
-
ngOnInit(): void {
|
55 |
|
56 |
ngOnChanges() {
|
57 |
if (this.book) {
|
15 |
bookForm: FormGroup;
|
16 |
|
17 |
@Input() book?: Book;
|
|
|
18 |
@Input() set editing(isEditing: boolean) {
|
19 |
const isbnControl = this.bookForm.get('isbn')!;
|
20 |
if (isEditing) {
|
50 |
});
|
51 |
}
|
52 |
|
53 |
+
ngOnInit(): void {}
|
54 |
|
55 |
ngOnChanges() {
|
56 |
if (this.book) {
|
@@ -1,12 +1,18 @@
|
|
1 |
<div class="ui middle aligned selection divided list">
|
2 |
-
|
3 |
-
|
4 |
-
|
5 |
-
|
|
|
|
|
|
|
|
|
|
|
6 |
|
7 |
-
|
8 |
-
<div class="ui
|
9 |
-
|
|
|
|
|
10 |
|
11 |
-
<p *ngIf="books && !books.length">Es wurden noch keine Bücher eingetragen.</p>
|
12 |
</div>
|
1 |
<div class="ui middle aligned selection divided list">
|
2 |
+
|
3 |
+
|
4 |
+
<bm-book-list-item class="item"
|
5 |
+
*ngFor="let b of books"
|
6 |
+
[book]="b"
|
7 |
+
[routerLink]="b.isbn"></bm-book-list-item>
|
8 |
+
|
9 |
+
<p *ngIf="!books.length">Es wurden noch keine Bücher eingetragen.</p>
|
10 |
+
|
11 |
|
12 |
+
|
13 |
+
<div class="ui active dimmer">
|
14 |
+
<div class="ui large text loader">Daten werden geladen...</div>
|
15 |
+
</div>
|
16 |
+
|
17 |
|
|
|
18 |
</div>
|
@@ -1,4 +1,5 @@
|
|
1 |
import { Component, OnInit } from '@angular/core';
|
|
|
2 |
|
3 |
import { Book } from '../shared/book';
|
4 |
import { BookStoreService } from '../shared/book-store.service';
|
@@ -9,11 +10,11 @@
|
|
9 |
styleUrls: ['./book-list.component.css']
|
10 |
})
|
11 |
export class BookListComponent implements OnInit {
|
12 |
-
books
|
13 |
|
14 |
-
constructor(private bs: BookStoreService) {
|
15 |
-
|
16 |
-
ngOnInit(): void {
|
17 |
-
this.bs.getAll().subscribe(res => this.books = res);
|
18 |
}
|
|
|
|
|
19 |
}
|
1 |
import { Component, OnInit } from '@angular/core';
|
2 |
+
import { Observable } from 'rxjs';
|
3 |
|
4 |
import { Book } from '../shared/book';
|
5 |
import { BookStoreService } from '../shared/book-store.service';
|
10 |
styleUrls: ['./book-list.component.css']
|
11 |
})
|
12 |
export class BookListComponent implements OnInit {
|
13 |
+
books$: Observable<Book[]>;
|
14 |
|
15 |
+
constructor(private bs: BookStoreService) {
|
16 |
+
this.books$ = this.bs.getAll();
|
|
|
|
|
17 |
}
|
18 |
+
|
19 |
+
ngOnInit(): void {}
|
20 |
}
|
@@ -10,7 +10,7 @@
|
|
10 |
{{ author }}<span *ngIf="!l">, </span>
|
11 |
</span>
|
12 |
<br>
|
13 |
-
ISBN {{ book.isbn }}
|
14 |
</div>
|
15 |
</div>
|
16 |
</ng-container>
|
10 |
{{ author }}<span *ngIf="!l">, </span>
|
11 |
</span>
|
12 |
<br>
|
13 |
+
ISBN {{ book.isbn | isbn }}
|
14 |
</div>
|
15 |
</div>
|
16 |
</ng-container>
|
@@ -11,6 +11,7 @@
|
|
11 |
@Input() control?: AbstractControl | null;
|
12 |
@Input() controlName?: string;
|
13 |
|
|
|
14 |
private allMessages: { [key: string]: { [key: string]: string } } = {
|
15 |
title: {
|
16 |
required: 'Ein Buchtitel muss angegeben werden.'
|
11 |
@Input() control?: AbstractControl | null;
|
12 |
@Input() controlName?: string;
|
13 |
|
14 |
+
|
15 |
private allMessages: { [key: string]: { [key: string]: string } } = {
|
16 |
title: {
|
17 |
required: 'Ein Buchtitel muss angegeben werden.'
|
@@ -1,7 +1,7 @@
|
|
1 |
import { Injectable } from '@angular/core';
|
2 |
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
3 |
-
import { throwError, Observable } from 'rxjs';
|
4 |
-
import { retry, map, catchError } from 'rxjs/operators';
|
5 |
|
6 |
import { Book } from './book';
|
7 |
import { BookRaw } from './book-raw';
|
1 |
import { Injectable } from '@angular/core';
|
2 |
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
3 |
+
import { throwError, Observable, of } from 'rxjs';
|
4 |
+
import { retry, map, catchError, delay } from 'rxjs/operators';
|
5 |
|
6 |
import { Book } from './book';
|
7 |
import { BookRaw } from './book-raw';
|
@@ -17,7 +17,6 @@
|
|
17 |
}
|
18 |
}
|
19 |
|
20 |
-
|
21 |
static atLeastOneAuthor(controlArray: AbstractControl): ValidationErrors | null {
|
22 |
if ((controlArray as FormArray).controls.some((el: AbstractControl) => el.value)) {
|
23 |
return null;
|
17 |
}
|
18 |
}
|
19 |
|
|
|
20 |
static atLeastOneAuthor(controlArray: AbstractControl): ValidationErrors | null {
|
21 |
if ((controlArray as FormArray).controls.some((el: AbstractControl) => el.value)) {
|
22 |
return null;
|
@@ -0,0 +1,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { Pipe, PipeTransform } from '@angular/core';
|
2 |
+
|
3 |
+
@Pipe({
|
4 |
+
name: 'isbn'
|
5 |
+
})
|
6 |
+
export class IsbnPipe implements PipeTransform {
|
7 |
+
|
8 |
+
transform(value: string | null): string {
|
9 |
+
if (!value) { return ''; }
|
10 |
+
return `${value.substr(0, 3)}-${value.substr(3)}`;
|
11 |
+
}
|
12 |
+
}
|