ludovic.castiglia
/
angular_minigame
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Supression de toutes les références à des fichiers Book

Browse Source
ludo^2
Raphael LACOTE 8 months ago
parent 1dc47e6b7a
commit 76b98e2328
12 changed files with 3 additions and 247 deletions
Show Stats Download Patch File Download Diff File

22
src/app/app.component.ts
Unescape View File

@ -2,45 +2,29 @@ import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { BookFormComponent } from './components/book-form/book-form.component';
import { BookListComponent } from './components/book-list/book-list.component';
import { UserService } from './services/user-service';
import { User } from './models/user.model';
import { BookService } from './services/book-service';
import { Book } from './models/book.model';
import { UserMenuComponent } from './components/user-menu/user-menu.component';
import { SudokuService } from "./services/sudoku-service"
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, BookListComponent, BookFormComponent, UserMenuComponent, HttpClientModule],
imports: [RouterOutlet, UserMenuComponent, HttpClientModule],
templateUrl: './app.component.html',
providers: [
BookService,
UserService,
SudokuService,
SudokuService
]
})
export class AppComponent {
title = 'angular-tp2-correct';
constructor(protected bookService: BookService, protected userService: UserService, protected sudokuService: SudokuService){ }
constructor( protected userService: UserService, protected sudokuService: SudokuService){ }
addBook($event: Book): void {
this.bookService.addBook($event);
}
onActivate(componentRef: Event): void {
console.log('onActivate', componentRef);
if(componentRef instanceof BookFormComponent) {
componentRef.addBookEvent.subscribe((newBook: Book) => {
this.addBook(newBook);
});
}
}
}

6
src/app/app.routes.ts
Unescape View File

@ -1,7 +1,4 @@
import { Routes } from '@angular/router';
import { BookListComponent } from './components/book-list/book-list.component';
import { BookFormComponent } from './components/book-form/book-form.component';
import { BookDetailComponent } from './components/book-detail/book-detail.component';
import { LoginComponent } from './components/login/login.component';
import { UserListComponent } from './components/user-list/user-list.component';
import { UserDetailComponent } from './components/user-detail/user-detail.component';
@ -12,9 +9,6 @@ import { UserAccueilComponent } from './components/user-accueil/user-accueil.com
export const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'accueil', component: UserAccueilComponent },
{ path: 'books', component: BookListComponent },
{ path: 'book/add', component: BookFormComponent },
{ path: 'book/:id', component: BookDetailComponent },
{ path: 'users', component: UserListComponent },
{ path: 'user/:id', component: UserDetailComponent },
{ path: 'sudoku', component: DifficultySelectorComponent },

12
src/app/components/book-detail/book-detail.component.html
Unescape View File

@ -1,12 +0,0 @@
<div *ngIf="selectedBook">
<h2>{{selectedBook.title | uppercase}}</h2>
<div><span>id: </span>{{selectedBook.id}}</div>
<div>
<label for="book-author">Auteur : </label>
{{ selectedBook.author }}
</div>
<div>
<label for="book-publicationDate">Date de publication : </label>
{{ selectedBook.publicationDate | date: 'EEEE d MMMM y' }}
</div>
</div>

25
src/app/components/book-detail/book-detail.component.ts
Unescape View File

@ -1,25 +0,0 @@
import { Component} from '@angular/core';
import { UpperCasePipe, DatePipe, NgIf} from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { Book } from '../../models/book.model';
import { BookService } from '../../services/book-service';
@Component({
standalone: true,
selector: 'app-book-detail',
imports: [DatePipe, UpperCasePipe, NgIf],
templateUrl: './book-detail.component.html',
styles: ``
})
export class BookDetailComponent {
selectedBook!: Book | undefined;
constructor(protected bookService: BookService, private activatedRoute: ActivatedRoute) {}
ngOnInit(){
const id = this.activatedRoute.snapshot.params['id'];
this.selectedBook = this.bookService.getBookById(id);
console.log(this.selectedBook);
}
}

32
src/app/components/book-form/book-form.component.html
Unescape View File

@ -1,32 +0,0 @@
<section>
<h2>Add book form</h2>
<form [formGroup]="bookForm">
<div>
<mat-form-field class="full-width">
<mat-label>Title</mat-label>
<input matInput type="text" formControlName="title" />
</mat-form-field>
</div>
<div>
<mat-form-field class="full-width">
<mat-label>Author</mat-label>
<input matInput type="text" formControlName="author" />
</mat-form-field>
</div>
<div>
<mat-form-field class="full-width">
<mat-label>Publication date</mat-label>
<input matInput [matDatepicker]="picker" type="text" formControlName="publicationDate" />
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<div>
<button mat-flat-button color="primary" type="button" (click)="addBook()">Add</button>
</div>
</form>
</section>

49
src/app/components/book-form/book-form.component.ts
Unescape View File

@ -1,49 +0,0 @@
import { Component, EventEmitter, Output } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { Book } from '../../models/book.model';
import { MatButtonModule } from '@angular/material/button';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
@Component({
selector: 'app-book-form',
standalone: true,
imports: [
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatMenuModule,
MatDatepickerModule,
MatNativeDateModule,
FormsModule,
ReactiveFormsModule
],
templateUrl: './book-form.component.html'
})
export class BookFormComponent {
@Output() addBookEvent = new EventEmitter<Book>();
book: Book = { id: 0, title: '', author: '', publicationDate: new Date() }
bookForm: FormGroup = new FormGroup({
title: new FormControl(this.book.title, Validators.required),
author: new FormControl(this.book.author, Validators.required),
publicationDate: new FormControl(this.book.publicationDate, Validators.required)
});
addBook() {
if (this.bookForm.invalid) {
console.log("ERREUR");
return;
}
this.book = this.bookForm.value;
this.addBookEvent.emit(this.book);
this.bookForm.reset();
}
}

1
src/app/components/book-home/book-home.component.html
Unescape View File

@ -1 +0,0 @@
<h1>Bienvenue sur la page d'accueil du Book Shop</h1>

12
src/app/components/book-home/book-home.component.ts
Unescape View File

@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-book-home',
standalone: true,
imports: [],
templateUrl: './book-home.component.html',
styles: ``
})
export class BookHomeComponent {
}

7
src/app/components/book-list/book-list.component.html
Unescape View File

@ -1,7 +0,0 @@
<h2>Book list</h2>
<ul>
<li *ngFor="let book of books">
<a routerLink="/book/{{ book.id }}">{{ book.title }}</a>
</li>
</ul>

23
src/app/components/book-list/book-list.component.ts
Unescape View File

@ -1,23 +0,0 @@
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgFor, DatePipe } from '@angular/common';
import { Book } from '../../models/book.model';
import { BookService } from '../../services/book-service'
@Component({
selector: 'app-book-list',
standalone: true,
imports: [NgFor, DatePipe, RouterModule],
templateUrl: './book-list.component.html'
})
export class BookListComponent {
books: Book[] = [];
constructor(protected bookService: BookService){
}
ngOnInit(){
this.books = this.bookService.getAll();
}
}

11
src/app/datas/books.stub.ts
Unescape View File

@ -1,11 +0,0 @@
import { Book } from "../models/book.model";
export const BOOKS: Book[] = [
{ id: 1, title: 'The Lord of the Rings - The Fellowship of the Ring', author: 'J.R.R. Tolkien', publicationDate: new Date('07/29/1954') },
{ id: 2, title: 'The Lord of the Rings - The Two Towers', author: 'J.R.R. Tolkien', publicationDate: new Date('11/11/1954') },
{ id: 3, title: 'The Lord of the Rings - The Return of the King', author: 'J.R.R. Tolkien', publicationDate: new Date('10/20/1955') },
{ id: 4, title: 'Dune', author: 'Frank Herbert', publicationDate: new Date('1965') },
{ id: 5, title: 'Dune Messiah', author: 'Frank Herbert', publicationDate: new Date('1969') },
{ id: 6, title: 'It', author: 'Stephen King', publicationDate: new Date('09/15/1986') },
{ id: 7, title: 'Do Androids Dream of Electric Sheep?', author: 'Philip K. Dick', publicationDate: new Date('1968') }
];

50
src/app/services/book-service.ts
Unescape View File

@ -1,50 +0,0 @@
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from "@angular/core";
import { BOOKS } from "../datas/books.stub";
import { Book } from "../models/book.model";
@Injectable()
export class BookService {
private books: Book[];
private readonly bookApiUrl = 'https://66e8848bb17821a9d9dcf68c.mockapi.io/books';
public constructor(private http: HttpClient){
this.books = BOOKS;
this.http.get<Book[]>(this.bookApiUrl).subscribe(books => {
books.forEach(b => {
this.addBookToLocal(b);
});
});
}
public getAll(): Book[]{
return this.books;
}
public getBookById(id: number): Book | undefined{
return this.books.find(b => b.id === id);
}
public addBook(book: Book): void{
this.addBookToLocal(book);
this.addBookToApi(book);
}
private addBookToLocal(book: Book): void{
//console.log('addBookToLocal', book);
if(book.id === 0){
book.id = Math.max(...this.books.map(b => b.id)) + 1;
}
const existedBook = this.books.find(b => b.title === book.title || b.id === Number(book.id));
if(existedBook)
return;
this.books.push(book);
}
private addBookToApi(book: Book): void{
this.http.post<Book>(this.bookApiUrl, book).subscribe();
}
}
Write Preview
Loading…
Cancel
Save