Add pagination (#452)

* Start pagination on books

* Update README

* Improve book pagination

* Refactor components with a base class

* Fix header menu

* Update test paths

Author: devpro

README.md

@@ -1,12 +1,23 @@
-# Keep track
+# Keeptrack
 
 [![Build Status](https://dev.azure.com/devprofr/open-source/_apis/build/status/keeptrack-ci?branchName=master)](https://dev.azure.com/devprofr/open-source/_build/latest?definitionId=26&branchName=master)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=devpro.keep-track&metric=alert_status)](https://sonarcloud.io/dashboard?id=devpro.keep-track)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=devpro.keep-track&metric=coverage)](https://sonarcloud.io/dashboard?id=devpro.keep-track)
 
-KeepTrack is a free open source application to save a memory of what we do: reading a book, watching a movie or a serie, playing a video game.
+Keeptrack is a an open source application that let you save everything you read, watch, listen or play.
+
+## Instances
+
+This code is Cloud Native, it can be deployed to any kind of infrastructure.
+
+A SaaS free version is currently available for early adopters (contact the repository owner to get an access).
 
 ## Software design
 
-* [Angular 13 with Bootstrap](angular-bootstrap/README.md): Web app #1 (frontend #1)
-* [.NET 7.0](dotnet/README.md): ASP.NET REST API (backend) & Blazor web app (frontend #2)
+Application frontend is a [web application](angular-bootstrap/README.md) (Single Page Application) written in TypeScript (Angular 16+).
+
+Application backend is a [web API](dotnet/README.md) (REST) written in C# (.NET 7+).
+
+Application data is persisted in a MongoDB (7.0) database.
+
+Application authentication is federated with Firebase Authentication and can be done from multiple providers (Google, GitHub, etc.).

angular-bootstrap/karma.conf.js

@@ -21,14 +21,14 @@ module.exports = function (config) {
       'src/**/*.js': ['coverage']
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, '../coverage'),
+      dir: require('path').join(__dirname, '/coverage'),
       reporters: [
         { type: 'html', subdir: 'html' },
         { type: 'lcovonly', subdir: '.', file: 'lcov.info' }
       ]
     },
     junitReporter: {
-      outputDir: require('path').join(__dirname, '..'),
+      outputDir: require('path').join(__dirname, '.'),
     },
     reporters: ['progress', 'kjhtml', 'junit', 'coverage'],
     port: 9876,

angular-bootstrap/src/app/backend/services/book.service.spec.ts

@@ -1,11 +1,11 @@
 import { TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
 import { BookService } from './book.service';
 import { Book } from '../types/book';
 import { environment } from 'src/environments/environment.dev';
 
 describe('BookService', () => {
-
   let bookService: BookService;
   let http: HttpTestingController;
 

angular-bootstrap/src/app/backend/services/book.service.ts

@@ -4,28 +4,29 @@ import { Observable } from 'rxjs';
 
 import { environment } from 'src/environments/environment';
 import { Book } from '../types/book';
+import { DataService } from './data.interface';
 
 @Injectable({
   providedIn: 'root'
 })
-export class BookService {
-
+export class BookService implements DataService<Book> {
   constructor(private httpClient: HttpClient) {
   }
 
   get(id: string): Observable<Book> {
     return this.httpClient.get<Book>(`${environment.keepTrackApiUrl}/api/books/${id}`);
   }
 
-  list(search?: string): Observable<Array<Book>> {
-    return this.httpClient.get<Array<Book>>(`${environment.keepTrackApiUrl}/api/books?search=${search ?? ''}&page=0&pageSize=50`);
+  list(search?: string, currentPage?: number, pageSize?: number): Observable<Array<Book>> {
+    return this.httpClient.get<Array<Book>>(`${environment.keepTrackApiUrl}/api/books?search=${search ?? ''}&page=${currentPage ?? 0}&pageSize=${pageSize ?? 50}`);
   }
 
   create(input: Book): Observable<Book> {
     return this.httpClient.post<Book>(`${environment.keepTrackApiUrl}/api/books`, input);
   }
 
   update(input: Book): Observable<number> {
+    delete input.isEditable;
     if (!input.finishedAt) {
       delete input.finishedAt;
     }
@@ -35,5 +36,4 @@ export class BookService {
   delete(input: Book): Observable<number> {
     return this.httpClient.delete<number>(`${environment.keepTrackApiUrl}/api/books/${input.id}`);
   }
-
 }

angular-bootstrap/src/app/backend/services/car-history.service.ts

@@ -4,7 +4,4 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class CarHistoryService {
-
-  constructor() { }
-
 }

angular-bootstrap/src/app/backend/services/data.interface.ts

@@ -0,0 +1,9 @@
+import { Observable } from "rxjs";
+
+export interface DataService<T> {
+  get(id: string): Observable<T>;
+  list(search?: string, currentPage?: number, pageSize?: number, filter?: T): Observable<Array<T>>;
+  create(input: T): Observable<T>;
+  update(input: T): Observable<number>;
+  delete(input: T): Observable<number>;
+}

angular-bootstrap/src/app/backend/services/movie.service.spec.ts

@@ -1,11 +1,11 @@
 import { TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
 import { environment } from 'src/environments/environment.dev';
 import { MovieService } from './movie.service';
 import { Movie } from '../types/movie';
 
 describe('MovieService', () => {
-
   let movieService: MovieService;
   let http: HttpTestingController;
 

angular-bootstrap/src/app/backend/services/movie.service.ts

@@ -3,29 +3,30 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 import { environment } from 'src/environments/environment';
+import { DataService } from './data.interface';
 import { Movie } from '../types/movie';
 
 @Injectable({
   providedIn: 'root'
 })
-export class MovieService {
-
+export class MovieService implements DataService<Movie> {
   constructor(private httpClient: HttpClient) {
   }
 
   get(id: string): Observable<Movie> {
     return this.httpClient.get<Movie>(`${environment.keepTrackApiUrl}/api/movies/${id}`);
   }
 
-  list(search?: string): Observable<Array<Movie>> {
-    return this.httpClient.get<Array<Movie>>(`${environment.keepTrackApiUrl}/api/movies?search=${search ?? ''}&page=0&pageSize=50`);
+  list(search?: string, currentPage?: number, pageSize?: number): Observable<Array<Movie>> {
+    return this.httpClient.get<Array<Movie>>(`${environment.keepTrackApiUrl}/api/movies?search=${search ?? ''}&page=${currentPage ?? 0}&pageSize=${pageSize ?? 50}`);
   }
 
   create(input: Movie): Observable<Movie> {
     return this.httpClient.post<Movie>(`${environment.keepTrackApiUrl}/api/movies`, input);
   }
 
   update(input: Movie): Observable<number> {
+    delete input.isEditable;
     if (!input.year) {
       delete input.year;
     }
@@ -36,5 +37,4 @@ export class MovieService {
   delete(input: Movie): Observable<number> {
     return this.httpClient.delete<number>(`${environment.keepTrackApiUrl}/api/movies/${input.id}`);
   }
-
 }

angular-bootstrap/src/app/backend/services/tv-show.service.spec.ts

@@ -1,11 +1,11 @@
 import { TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
 import { environment } from 'src/environments/environment.dev';
 import { TvShow } from '../types/tv-show';
 import { TvShowService } from './tv-show.service';
 
 describe('TvShowService', () => {
-
   let service: TvShowService;
   let http: HttpTestingController;
 

angular-bootstrap/src/app/backend/services/tv-show.service.ts

@@ -4,25 +4,33 @@ import { Observable } from 'rxjs';
 
 import { environment } from 'src/environments/environment';
 import { TvShow } from '../types/tv-show';
+import { DataService } from './data.interface';
 
 @Injectable({
   providedIn: 'root'
 })
-export class TvShowService {
-
+export class TvShowService implements DataService<TvShow> {
   constructor(private httpClient: HttpClient) {
   }
 
-  list(search?: string): Observable<Array<TvShow>> {
-    return this.httpClient.get<Array<TvShow>>(`${environment.keepTrackApiUrl}/api/tv-shows?search=${search ?? ''}&page=0&pageSize=50`);
+  get(id: string): Observable<TvShow> {
+    return this.httpClient.get<TvShow>(`${environment.keepTrackApiUrl}/api/tv-shows/${id}`);
+  }
+
+  list(search?: string, currentPage?: number, pageSize?: number): Observable<Array<TvShow>> {
+    return this.httpClient.get<Array<TvShow>>(`${environment.keepTrackApiUrl}/api/tv-shows?search=${search ?? ''}&page=${currentPage ?? 0}&pageSize=${pageSize ?? 50}`);
   }
 
   create(input: TvShow): Observable<TvShow> {
     return this.httpClient.post<TvShow>(`${environment.keepTrackApiUrl}/api/tv-shows`, input);
   }
 
+  update(input: TvShow): Observable<number> {
+    delete input.isEditable;
+    return this.httpClient.put<number>(`${environment.keepTrackApiUrl}/api/tv-shows/${input.id}`, input);
+  }
+
   delete(input: TvShow): Observable<number> {
     return this.httpClient.delete<number>(`${environment.keepTrackApiUrl}/api/tv-shows/${input.id}`);
   }
-
 }