From efdbe5eb359d6abd1bc2d27bd94d44689e08405a Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Thu, 31 Dec 2020 13:19:18 -0600
Subject: [PATCH 1/3] Added skeleton code for Library -> Series detail pages.
 Added a card component to keep a lot of the logic and design consistent
 between screens. Added ability to see your libraries and open them up.

---
 src/app/_models/library.ts                    |   1 +
 src/app/_models/series.ts                     |  10 +++++
 src/app/_models/volume.ts                     |   5 +++
 src/app/_services/library.service.ts          |   5 ++-
 src/app/_services/series.service.ts           |  18 +++++++++
 .../manage-users/manage-users.component.html  |   1 -
 .../manage-users/manage-users.component.ts    |   5 +--
 src/app/app-routing.module.ts                 |   3 +-
 src/app/app.module.ts                         |   4 ++
 .../library-detail.component.html             |   6 +++
 .../library-detail.component.scss             |   4 ++
 .../library-detail.component.ts               |  34 +++++++++++++++++
 src/app/library/library.component.html        |   8 +++-
 src/app/library/library.component.ts          |  15 ++++++--
 .../series-detail.component.html              |  20 ++++++++++
 .../series-detail.component.scss              |   0
 .../series-detail/series-detail.component.ts  |  15 ++++++++
 .../shared/card-item/card-item.component.html |   7 ++++
 .../shared/card-item/card-item.component.scss |   9 +++++
 .../shared/card-item/card-item.component.ts   |  36 ++++++++++++++++++
 src/app/shared/shared.module.ts               |   6 ++-
 src/assets/images/image-placeholder.jpg       | Bin 0 -> 8285 bytes
 22 files changed, 197 insertions(+), 15 deletions(-)
 create mode 100644 src/app/_models/series.ts
 create mode 100644 src/app/_models/volume.ts
 create mode 100644 src/app/_services/series.service.ts
 create mode 100644 src/app/library-detail/library-detail.component.html
 create mode 100644 src/app/library-detail/library-detail.component.scss
 create mode 100644 src/app/library-detail/library-detail.component.ts
 create mode 100644 src/app/series-detail/series-detail.component.html
 create mode 100644 src/app/series-detail/series-detail.component.scss
 create mode 100644 src/app/series-detail/series-detail.component.ts
 create mode 100644 src/app/shared/card-item/card-item.component.html
 create mode 100644 src/app/shared/card-item/card-item.component.scss
 create mode 100644 src/app/shared/card-item/card-item.component.ts
 create mode 100644 src/assets/images/image-placeholder.jpg

diff --git a/src/app/_models/library.ts b/src/app/_models/library.ts
index 19fa61c19..a56f2c122 100644
--- a/src/app/_models/library.ts
+++ b/src/app/_models/library.ts
@@ -1,4 +1,5 @@
 export interface Library {
+    id: number;
     name: string;
     coverImage: string;
     type: any;
diff --git a/src/app/_models/series.ts b/src/app/_models/series.ts
new file mode 100644
index 000000000..b54ebf135
--- /dev/null
+++ b/src/app/_models/series.ts
@@ -0,0 +1,10 @@
+import { Volume } from './volume';
+
+export interface Series {
+    id: number;
+    name: string;
+    originalName: string;
+    sortName: string;
+    summary: string;
+    volumes: Volume[];
+}
diff --git a/src/app/_models/volume.ts b/src/app/_models/volume.ts
new file mode 100644
index 000000000..35f390d4d
--- /dev/null
+++ b/src/app/_models/volume.ts
@@ -0,0 +1,5 @@
+export interface Volume {
+    id: number;
+    number: string;
+    files: Array<string>; // In future, we can refactor this to be a type with extra metadata around it
+}
\ No newline at end of file
diff --git a/src/app/_services/library.service.ts b/src/app/_services/library.service.ts
index 49399a650..5243bf517 100644
--- a/src/app/_services/library.service.ts
+++ b/src/app/_services/library.service.ts
@@ -26,12 +26,13 @@ export class LibraryService {
   }
 
   getLibrariesForMember(username: string) {
-    return this.httpClient.get<Library[]>(this.baseUrl + 'library/' + username);
+    return this.httpClient.get<Library[]>(this.baseUrl + 'library/libraries-for?username=' + username);
   }
 
   updateLibrariesForMember(username: string, selectedLibraries: Library[]) {
-    return this.httpClient.post(this.baseUrl + '/library/update-for', {username, selectedLibraries});
+    return this.httpClient.post(this.baseUrl + 'library/update-for', {username, selectedLibraries});
   }
 
 
+
 }
diff --git a/src/app/_services/series.service.ts b/src/app/_services/series.service.ts
new file mode 100644
index 000000000..4ffd75f2a
--- /dev/null
+++ b/src/app/_services/series.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { Series } from '../_models/series';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeriesService {
+
+  baseUrl = environment.apiUrl;
+
+  constructor(private httpClient: HttpClient) { }
+
+  getSeries(libraryId: number) {
+    return this.httpClient.get<Series[]>(this.baseUrl + 'library/series?libraryId=' + libraryId);
+  }
+}
diff --git a/src/app/admin/manage-users/manage-users.component.html b/src/app/admin/manage-users/manage-users.component.html
index 678bac385..f247ba2a2 100644
--- a/src/app/admin/manage-users/manage-users.component.html
+++ b/src/app/admin/manage-users/manage-users.component.html
@@ -13,7 +13,6 @@
                     {{member.username | titlecase}} <span *ngIf="member.isAdmin" class="badge badge-pill badge-secondary">Admin</span>
                     <div class="pull-right" *ngIf="canEditMember(member)">
                         <button class="btn btn-danger mr-2" (click)="deleteUser(member)"><i class="fa fa-trash" title="Delete {{member.username | titlecase}}"></i></button>
-                        <!-- <button class="btn btn-primary" (click)="openChangeRole(member)"><i class="fa fa-pencil"></i>{{member.roles.includes('Admin') ? 'Demote' : 'Promote'}}</button> -->
                         <button class="btn btn-primary" (click)="openEditLibraryAccess(member)"><i class="fa fa-pencil" title="Edit {{member.username | titlecase}}"></i></button>
                     </div>
                 </h4>
diff --git a/src/app/admin/manage-users/manage-users.component.ts b/src/app/admin/manage-users/manage-users.component.ts
index 07008a465..4cfa0eb19 100644
--- a/src/app/admin/manage-users/manage-users.component.ts
+++ b/src/app/admin/manage-users/manage-users.component.ts
@@ -61,11 +61,8 @@ export class ManageUsersComponent implements OnInit {
     });
   }
 
-  openChangeRole(member: Member) {
-
-  }
-
   deleteUser(member: Member) {
+    // TODO: Use a modal for this confirm
     if (confirm('Are you sure you want to delete this user?')) {
       this.memberService.deleteMember(member.username).subscribe(() => {
         this.loadMembers();
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e23518db7..c0d3127d9 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { LibraryDetailComponent } from './library-detail/library-detail.component';
 import { LibraryComponent } from './library/library.component';
-import { AdminGuard } from './_guards/admin.guard';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
@@ -11,6 +11,7 @@ const routes: Routes = [
     loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
   },
   {path: 'library', component: LibraryComponent},
+  {path: 'library/:id', component: LibraryDetailComponent},
   {path: '**', component: HomeComponent, pathMatch: 'full'}
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 14b772fe4..41ce34cad 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,6 +15,8 @@ import { ToastrModule } from 'ngx-toastr';
 import { ErrorInterceptor } from './_interceptors/error.interceptor';
 import { LibraryComponent } from './library/library.component';
 import { SharedModule } from './shared/shared.module';
+import { LibraryDetailComponent } from './library-detail/library-detail.component';
+import { SeriesDetailComponent } from './series-detail/series-detail.component';
 
 
 
@@ -25,6 +27,8 @@ import { SharedModule } from './shared/shared.module';
     NavHeaderComponent,
     UserLoginComponent,
     LibraryComponent,
+    LibraryDetailComponent,
+    SeriesDetailComponent,
   ],
   imports: [
     HttpClientModule,
diff --git a/src/app/library-detail/library-detail.component.html b/src/app/library-detail/library-detail.component.html
new file mode 100644
index 000000000..dfb0e8e41
--- /dev/null
+++ b/src/app/library-detail/library-detail.component.html
@@ -0,0 +1,6 @@
+<h2>Title (Manga/Recently Added)</h2>
+<div class="row">
+    <div class="col-md-2">
+        <app-card-item title="Series 1"></app-card-item>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/library-detail/library-detail.component.scss b/src/app/library-detail/library-detail.component.scss
new file mode 100644
index 000000000..7f7daffd5
--- /dev/null
+++ b/src/app/library-detail/library-detail.component.scss
@@ -0,0 +1,4 @@
+.card {
+    height: 400;
+    width: 200;
+}
\ No newline at end of file
diff --git a/src/app/library-detail/library-detail.component.ts b/src/app/library-detail/library-detail.component.ts
new file mode 100644
index 000000000..fd4625b9b
--- /dev/null
+++ b/src/app/library-detail/library-detail.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Library } from '../_models/library';
+import { Series } from '../_models/series';
+import { SeriesService } from '../_services/series.service';
+
+@Component({
+  selector: 'app-library-detail',
+  templateUrl: './library-detail.component.html',
+  styleUrls: ['./library-detail.component.scss']
+})
+export class LibraryDetailComponent implements OnInit {
+
+  libraryId!: number;
+  series: Series[] = [];
+
+
+  constructor(private route: ActivatedRoute, private router: Router, private seriesService: SeriesService) {
+    const routeId = this.route.snapshot.paramMap.get('id');
+    if (routeId === null) {
+      console.error('No library id was passed. Redirecting to home');
+      this.router.navigateByUrl('/home');
+      return;
+    }
+    this.libraryId = parseInt(routeId, 10);
+    this.seriesService.getSeries(this.libraryId).subscribe(series => {
+      this.series = series;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/library/library.component.html b/src/app/library/library.component.html
index cedd8c65f..f618c2e64 100644
--- a/src/app/library/library.component.html
+++ b/src/app/library/library.component.html
@@ -1 +1,7 @@
-<p>library works!</p>
+
+<h2>Libraries</h2>
+<div class="row">
+    <div class="col-sm-6 col-md-4 col-lg-2" *ngFor="let library of libraries">
+        <app-card-item [imageUrl]="library.coverImage" [title]="library.name" (clicked)="handleNavigation($event, library)"></app-card-item>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/library/library.component.ts b/src/app/library/library.component.ts
index b33f10b9c..4b2a454ef 100644
--- a/src/app/library/library.component.ts
+++ b/src/app/library/library.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { take } from 'rxjs/operators';
 import { Library } from '../_models/library';
 import { User } from '../_models/user';
@@ -16,15 +17,21 @@ export class LibraryComponent implements OnInit {
   user: User | undefined;
   libraries: Library[] = [];
 
-  constructor(public accountService: AccountService, private memberService: MemberService, private libraryService: LibraryService) { }
+  constructor(public accountService: AccountService, private libraryService: LibraryService, private router: Router) { }
 
   ngOnInit(): void {
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       this.user = user;
-      // this.libraryService.getLibrariesForUser(this.user.username).subscribe(libraries => {
-      //   this.libraries = libraries;
-      // });
+      console.log('user: ', this.user);
+      this.libraryService.getLibrariesForMember(this.user.username).subscribe(libraries => {
+        this.libraries = libraries;
+        console.log('Libraries: ', this.libraries);
+      });
     });
   }
 
+  handleNavigation(event: any, library: Library) {
+    this.router.navigateByUrl('/library/' + library.id);
+  }
+
 }
diff --git a/src/app/series-detail/series-detail.component.html b/src/app/series-detail/series-detail.component.html
new file mode 100644
index 000000000..2416b8c0a
--- /dev/null
+++ b/src/app/series-detail/series-detail.component.html
@@ -0,0 +1,20 @@
+<!-- <div class="container">
+    <div class="row">
+        <div class="col-md-6">
+            <div class="card">
+                <img src="{{manga.coverImage === null ? 'image-placeholder.jpg' : manga.coverImage}}">
+                <p>title</p>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <h2>Title</h2>
+            <button class="btn btn-primary">Read/Continue Reading</button>
+            (metadata here)
+        </div>
+    </div>
+
+    <div class="row mt-3">
+        Volumes here
+    </div>
+
+</div> -->
\ No newline at end of file
diff --git a/src/app/series-detail/series-detail.component.scss b/src/app/series-detail/series-detail.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/series-detail/series-detail.component.ts b/src/app/series-detail/series-detail.component.ts
new file mode 100644
index 000000000..54603840e
--- /dev/null
+++ b/src/app/series-detail/series-detail.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-series-detail',
+  templateUrl: './series-detail.component.html',
+  styleUrls: ['./series-detail.component.scss']
+})
+export class SeriesDetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/shared/card-item/card-item.component.html b/src/app/shared/card-item/card-item.component.html
new file mode 100644
index 000000000..bd8c0e237
--- /dev/null
+++ b/src/app/shared/card-item/card-item.component.html
@@ -0,0 +1,7 @@
+<div class="card" style="width: 18rem;" (click)="handleClick()">
+    <img class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
+
+    <div class="card-body text-center">
+        <h5 class="card-title">{{title}}</h5>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/card-item/card-item.component.scss b/src/app/shared/card-item/card-item.component.scss
new file mode 100644
index 000000000..a6b9c3588
--- /dev/null
+++ b/src/app/shared/card-item/card-item.component.scss
@@ -0,0 +1,9 @@
+.card {
+    margin: 5px;
+    max-width: 130px;
+    max-height: 195px;
+}
+
+.card-body {
+    padding: 5px !important;
+}
\ No newline at end of file
diff --git a/src/app/shared/card-item/card-item.component.ts b/src/app/shared/card-item/card-item.component.ts
new file mode 100644
index 000000000..479765d76
--- /dev/null
+++ b/src/app/shared/card-item/card-item.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+export interface CardItemTitle {
+  title: string;
+  linkUrl: string;
+}
+
+@Component({
+  selector: 'app-card-item',
+  templateUrl: './card-item.component.html',
+  styleUrls: ['./card-item.component.scss']
+})
+export class CardItemComponent implements OnInit {
+
+  @Input() imageUrl = '';
+  @Input() title = '';
+  @Output() clicked = new EventEmitter<string>();
+
+  placeholderImage = 'assets/images/image-placeholder.jpg'; //../../..
+
+  constructor() { }
+
+  ngOnInit(): void {
+    console.log('card item');
+    console.log('imageUrl: ', this.imageUrl);
+  }
+
+  handleClick() {
+    this.clicked.emit(this.title);
+  }
+
+  isNullOrEmpty(val: string) {
+    return val === null || val === undefined || val === '';
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index d3b94d520..f8cc3fc44 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -2,17 +2,19 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RegisterMemberComponent } from './register-member/register-member.component';
 import { ReactiveFormsModule } from '@angular/forms';
+import { CardItemComponent } from './card-item/card-item.component';
 
 
 
 @NgModule({
-  declarations: [RegisterMemberComponent],
+  declarations: [RegisterMemberComponent, CardItemComponent],
   imports: [
     CommonModule,
     ReactiveFormsModule
   ],
   exports: [
-    RegisterMemberComponent
+    RegisterMemberComponent,
+    CardItemComponent
   ]
 })
 export class SharedModule { }
diff --git a/src/assets/images/image-placeholder.jpg b/src/assets/images/image-placeholder.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..872022b56e41bc4b5c0d444ac4b4b130089ec8b6
GIT binary patch
literal 8285
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
AQ~&?~

literal 0
HcmV?d00001


From 8865c121d229f80bb092fde989ec7c4f90169634 Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Thu, 31 Dec 2020 15:14:32 -0600
Subject: [PATCH 2/3] Added ability to have actions on cards.

---
 src/app/_guards/admin.guard.ts                 |  2 +-
 src/app/_services/account.service.ts           |  4 ++++
 src/app/_services/member.service.ts            |  2 +-
 src/app/app-routing.module.ts                  |  4 +++-
 .../library-detail.component.html              |  4 ++--
 .../library-detail/library-detail.component.ts |  4 ++++
 src/app/library/library.component.html         |  2 +-
 src/app/library/library.component.ts           | 10 +++++++++-
 .../series-detail/series-detail.component.html |  6 +++---
 .../series-detail/series-detail.component.ts   |  3 +++
 .../shared/card-item/card-item.component.html  | 16 +++++++++++++---
 .../shared/card-item/card-item.component.scss  |  4 ++++
 .../shared/card-item/card-item.component.ts    | 18 +++++++++++++-----
 src/app/shared/shared.module.ts                |  4 +++-
 14 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/src/app/_guards/admin.guard.ts b/src/app/_guards/admin.guard.ts
index 2297e381c..d59b8643c 100644
--- a/src/app/_guards/admin.guard.ts
+++ b/src/app/_guards/admin.guard.ts
@@ -16,7 +16,7 @@ export class AdminGuard implements CanActivate {
     // this automaticallys subs due to being router guard
     return this.accountService.currentUser$.pipe(
       map((user: User) => {
-        if (user && user.roles.includes('Admin')) {
+        if (this.accountService.hasAdminRole(user)) {
           return true;
         }
 
diff --git a/src/app/_services/account.service.ts b/src/app/_services/account.service.ts
index dc6449c6e..9da467d08 100644
--- a/src/app/_services/account.service.ts
+++ b/src/app/_services/account.service.ts
@@ -21,6 +21,10 @@ export class AccountService {
   constructor(private httpClient: HttpClient) { 
   }
 
+  hasAdminRole(user: User) {
+    return user && user.roles.includes('Admin');
+  }
+
   login(model: any): Observable<any> {
     return this.httpClient.post<User>(this.baseUrl + 'account/login', model).pipe(
       map((response: User) => {
diff --git a/src/app/_services/member.service.ts b/src/app/_services/member.service.ts
index 08eee8bfe..32d219920 100644
--- a/src/app/_services/member.service.ts
+++ b/src/app/_services/member.service.ts
@@ -21,7 +21,7 @@ export class MemberService {
   }
 
   updatePassword(newPassword: string) {
-    // TODO: Implement update password (use JWT to assume role)
+    // TODO: Implement update password
   }
 
   deleteMember(username: string) {
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c0d3127d9..9b1705767 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { LibraryDetailComponent } from './library-detail/library-detail.component';
 import { LibraryComponent } from './library/library.component';
+import { SeriesDetailComponent } from './series-detail/series-detail.component';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
@@ -11,7 +12,8 @@ const routes: Routes = [
     loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
   },
   {path: 'library', component: LibraryComponent},
-  {path: 'library/:id', component: LibraryDetailComponent},
+  {path: 'library/:id', component: LibraryDetailComponent}, // NOTE: Should I put a guard up to prevent unauthorized access to libraries and series? 
+  {path: 'series/:id', component: SeriesDetailComponent},
   {path: '**', component: HomeComponent, pathMatch: 'full'}
 ];
 
diff --git a/src/app/library-detail/library-detail.component.html b/src/app/library-detail/library-detail.component.html
index dfb0e8e41..237312e99 100644
--- a/src/app/library-detail/library-detail.component.html
+++ b/src/app/library-detail/library-detail.component.html
@@ -1,6 +1,6 @@
 <h2>Title (Manga/Recently Added)</h2>
 <div class="row">
-    <div class="col-md-2">
-        <app-card-item title="Series 1"></app-card-item>
+    <div class="col-md-2" *ngFor="let series of series">
+        <app-card-item [title]="series.name" (clicked)="seriesClicked(series)"></app-card-item>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/library-detail/library-detail.component.ts b/src/app/library-detail/library-detail.component.ts
index fd4625b9b..43c3d5460 100644
--- a/src/app/library-detail/library-detail.component.ts
+++ b/src/app/library-detail/library-detail.component.ts
@@ -31,4 +31,8 @@ export class LibraryDetailComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  seriesClicked(series: Series) {
+    this.router.navigateByUrl('/series/' + series.id);
+  }
+
 }
diff --git a/src/app/library/library.component.html b/src/app/library/library.component.html
index f618c2e64..666f33e34 100644
--- a/src/app/library/library.component.html
+++ b/src/app/library/library.component.html
@@ -2,6 +2,6 @@
 <h2>Libraries</h2>
 <div class="row">
     <div class="col-sm-6 col-md-4 col-lg-2" *ngFor="let library of libraries">
-        <app-card-item [imageUrl]="library.coverImage" [title]="library.name" (clicked)="handleNavigation($event, library)"></app-card-item>
+        <app-card-item [imageUrl]="library.coverImage" [title]="library.name" (clicked)="handleNavigation($event, library)" [actions]="actions" [entity]="library"></app-card-item>
     </div>
   </div>
\ No newline at end of file
diff --git a/src/app/library/library.component.ts b/src/app/library/library.component.ts
index 4b2a454ef..c4f027c73 100644
--- a/src/app/library/library.component.ts
+++ b/src/app/library/library.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { take } from 'rxjs/operators';
+import { CardItemAction } from '../shared/card-item/card-item.component';
 import { Library } from '../_models/library';
 import { User } from '../_models/user';
 import { AccountService } from '../_services/account.service';
@@ -16,13 +17,20 @@ export class LibraryComponent implements OnInit {
 
   user: User | undefined;
   libraries: Library[] = [];
+  actions: CardItemAction[] = [];
 
   constructor(public accountService: AccountService, private libraryService: LibraryService, private router: Router) { }
 
   ngOnInit(): void {
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       this.user = user;
-      console.log('user: ', this.user);
+      if (this.accountService.hasAdminRole(user)) {
+        this.actions = [
+          {title: 'Scan Library', callback: (data: Library) => {
+            console.log('You tried to scan library: ' + data.name);
+          }}
+        ];
+      }
       this.libraryService.getLibrariesForMember(this.user.username).subscribe(libraries => {
         this.libraries = libraries;
         console.log('Libraries: ', this.libraries);
diff --git a/src/app/series-detail/series-detail.component.html b/src/app/series-detail/series-detail.component.html
index 2416b8c0a..4ad9e0f2b 100644
--- a/src/app/series-detail/series-detail.component.html
+++ b/src/app/series-detail/series-detail.component.html
@@ -1,8 +1,8 @@
-<!-- <div class="container">
+<div class="container">
     <div class="row">
         <div class="col-md-6">
             <div class="card">
-                <img src="{{manga.coverImage === null ? 'image-placeholder.jpg' : manga.coverImage}}">
+                <!-- <img src="{{series.coverImage === null ? 'image-placeholder.jpg' : series.coverImage}}"> -->
                 <p>title</p>
             </div>
         </div>
@@ -17,4 +17,4 @@
         Volumes here
     </div>
 
-</div> -->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/series-detail/series-detail.component.ts b/src/app/series-detail/series-detail.component.ts
index 54603840e..93df5173a 100644
--- a/src/app/series-detail/series-detail.component.ts
+++ b/src/app/series-detail/series-detail.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Series } from '../_models/series';
 
 @Component({
   selector: 'app-series-detail',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SeriesDetailComponent implements OnInit {
 
+  series: Series | undefined;
+
   constructor() { }
 
   ngOnInit(): void {
diff --git a/src/app/shared/card-item/card-item.component.html b/src/app/shared/card-item/card-item.component.html
index bd8c0e237..41523ea92 100644
--- a/src/app/shared/card-item/card-item.component.html
+++ b/src/app/shared/card-item/card-item.component.html
@@ -1,7 +1,17 @@
-<div class="card" style="width: 18rem;" (click)="handleClick()">
-    <img class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
+<div class="card" style="width: 18rem;">
+    <img (click)="handleClick()" class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
 
     <div class="card-body text-center">
-        <h5 class="card-title">{{title}}</h5>
+        <h5 class="card-title" (click)="handleClick()">{{title}}</h5>
+        <ng-container *ngIf="actions.length > 0">
+            <div class="col">
+                <div ngbDropdown class="d-inline-block">
+                  <button class="btn" id="actions-{{title}}" ngbDropdownToggle><i class="fa fa-ellipsis-v" aria-hidden="true"></i></button>
+                  <div ngbDropdownMenu attr.aria-labelledby="actions-{{title}}">
+                    <button ngbDropdownItem *ngFor="let action of actions" (click)="performAction($event, action)">{{action.title}}</button>
+                  </div>
+                </div>
+            </div>
+        </ng-container>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/card-item/card-item.component.scss b/src/app/shared/card-item/card-item.component.scss
index a6b9c3588..9987ed9cc 100644
--- a/src/app/shared/card-item/card-item.component.scss
+++ b/src/app/shared/card-item/card-item.component.scss
@@ -6,4 +6,8 @@
 
 .card-body {
     padding: 5px !important;
+}
+
+.dropdown-toggle:after {
+    content: none !important;
 }
\ No newline at end of file
diff --git a/src/app/shared/card-item/card-item.component.ts b/src/app/shared/card-item/card-item.component.ts
index 479765d76..ec10d3f28 100644
--- a/src/app/shared/card-item/card-item.component.ts
+++ b/src/app/shared/card-item/card-item.component.ts
@@ -1,8 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
-export interface CardItemTitle {
+
+export interface CardItemAction {
   title: string;
-  linkUrl: string;
+  callback: (data: any) => void;
 }
 
 @Component({
@@ -14,15 +15,15 @@ export class CardItemComponent implements OnInit {
 
   @Input() imageUrl = '';
   @Input() title = '';
+  @Input() actions: CardItemAction[] = [];
+  @Input() entity: any; // This is the entity we are representing. It will be returned if an action is executed. 
   @Output() clicked = new EventEmitter<string>();
 
-  placeholderImage = 'assets/images/image-placeholder.jpg'; //../../..
+  placeholderImage = 'assets/images/image-placeholder.jpg';
 
   constructor() { }
 
   ngOnInit(): void {
-    console.log('card item');
-    console.log('imageUrl: ', this.imageUrl);
   }
 
   handleClick() {
@@ -33,4 +34,11 @@ export class CardItemComponent implements OnInit {
     return val === null || val === undefined || val === '';
   }
 
+  performAction(event: any, action: CardItemAction) {
+    event.stopPropagation();
+    if (typeof action.callback === 'function') {
+      action.callback(this.entity);
+    }
+  }
+
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index f8cc3fc44..01a2b702f 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { RegisterMemberComponent } from './register-member/register-member.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { CardItemComponent } from './card-item/card-item.component';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 
 
@@ -10,7 +11,8 @@ import { CardItemComponent } from './card-item/card-item.component';
   declarations: [RegisterMemberComponent, CardItemComponent],
   imports: [
     CommonModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NgbDropdownModule
   ],
   exports: [
     RegisterMemberComponent,

From ca46d137c40b60f28ad27b3621cfd512c489f49a Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Fri, 1 Jan 2021 11:58:18 -0600
Subject: [PATCH 3/3] Finished the skeleton code for navigating Kavita.

All UIs need to be reworked and major code cleanup.
---
 src/app/_models/series.ts                     |  1 +
 src/app/_models/volume.ts                     |  5 +--
 src/app/_services/series.service.ts           | 11 ++++++-
 .../library-detail.component.html             | 14 ++++++---
 .../library-detail.component.ts               |  2 +-
 .../series-detail.component.html              | 31 ++++++++++++-------
 .../series-detail/series-detail.component.ts  | 24 +++++++++++++-
 .../shared/card-item/card-item.component.html |  2 +-
 .../shared/card-item/card-item.component.ts   |  2 +-
 9 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/src/app/_models/series.ts b/src/app/_models/series.ts
index b54ebf135..78085a077 100644
--- a/src/app/_models/series.ts
+++ b/src/app/_models/series.ts
@@ -6,5 +6,6 @@ export interface Series {
     originalName: string;
     sortName: string;
     summary: string;
+    coverImage: string;
     volumes: Volume[];
 }
diff --git a/src/app/_models/volume.ts b/src/app/_models/volume.ts
index 35f390d4d..77a7629fa 100644
--- a/src/app/_models/volume.ts
+++ b/src/app/_models/volume.ts
@@ -1,5 +1,6 @@
 export interface Volume {
     id: number;
     number: string;
-    files: Array<string>; // In future, we can refactor this to be a type with extra metadata around it
-}
\ No newline at end of file
+    files: Array<string>;
+    coverImage: string;
+}
diff --git a/src/app/_services/series.service.ts b/src/app/_services/series.service.ts
index 4ffd75f2a..c1fc3f188 100644
--- a/src/app/_services/series.service.ts
+++ b/src/app/_services/series.service.ts
@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import { Series } from '../_models/series';
+import { Volume } from '../_models/volume';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +13,15 @@ export class SeriesService {
 
   constructor(private httpClient: HttpClient) { }
 
-  getSeries(libraryId: number) {
+  getSeriesForLibrary(libraryId: number) {
     return this.httpClient.get<Series[]>(this.baseUrl + 'library/series?libraryId=' + libraryId);
   }
+
+  getSeries(seriesId: number) {
+    return this.httpClient.get<Series>(this.baseUrl + 'series/' + seriesId);
+  }
+
+  getVolumes(seriesId: number) {
+    return this.httpClient.get<Volume[]>(this.baseUrl + 'series/volumes?seriesId=' + seriesId);
+  }
 }
diff --git a/src/app/library-detail/library-detail.component.html b/src/app/library-detail/library-detail.component.html
index 237312e99..15bd6e363 100644
--- a/src/app/library-detail/library-detail.component.html
+++ b/src/app/library-detail/library-detail.component.html
@@ -1,6 +1,12 @@
-<h2>Title (Manga/Recently Added)</h2>
-<div class="row">
-    <div class="col-md-2" *ngFor="let series of series">
-        <app-card-item [title]="series.name" (clicked)="seriesClicked(series)"></app-card-item>
+<div class="container">
+    <h2>Title (Manga/Recently Added)</h2>
+    <div class="row">
+        <div class="col-md-2" *ngFor="let manga of series">
+            <app-card-item [title]="manga.name" (clicked)="seriesClicked(manga)"></app-card-item>
+        </div>
     </div>
+    <ng-container *ngIf="series.length === 0">
+        <!-- Put a cricket here -->
+        Nothing here....
+    </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/app/library-detail/library-detail.component.ts b/src/app/library-detail/library-detail.component.ts
index 43c3d5460..686726624 100644
--- a/src/app/library-detail/library-detail.component.ts
+++ b/src/app/library-detail/library-detail.component.ts
@@ -23,7 +23,7 @@ export class LibraryDetailComponent implements OnInit {
       return;
     }
     this.libraryId = parseInt(routeId, 10);
-    this.seriesService.getSeries(this.libraryId).subscribe(series => {
+    this.seriesService.getSeriesForLibrary(this.libraryId).subscribe(series => {
       this.series = series;
     });
   }
diff --git a/src/app/series-detail/series-detail.component.html b/src/app/series-detail/series-detail.component.html
index 4ad9e0f2b..7154f9845 100644
--- a/src/app/series-detail/series-detail.component.html
+++ b/src/app/series-detail/series-detail.component.html
@@ -1,20 +1,29 @@
-<div class="container">
+<div class="container" *ngIf="series !== undefined">
     <div class="row">
-        <div class="col-md-6">
-            <div class="card">
-                <!-- <img src="{{series.coverImage === null ? 'image-placeholder.jpg' : series.coverImage}}"> -->
-                <p>title</p>
-            </div>
+        <div class="col-md-2">
+            <app-card-item [imageUrl]="series.coverImage === null ? 'assets/images/image-placeholder.jpg' : series.coverImage"></app-card-item>
+            <button class="btn btn-primary">Read</button>
         </div>
-        <div class="col-md-6">
-            <h2>Title</h2>
-            <button class="btn btn-primary">Read/Continue Reading</button>
-            (metadata here)
+        <div class="col-md-10">
+            <h2>{{series.name | titlecase}}</h2>
+            <div class="row">
+                <ngb-rating></ngb-rating>
+            </div>
+            <div class="row">
+                
+            </div>
+            <div class="row">
+                <p>{{series?.summary}}</p>
+            </div>
+            
         </div>
     </div>
 
+    <h4 class="mt-3">Volumes</h4>
     <div class="row mt-3">
-        Volumes here
+        <div class="col-md-2" *ngFor="let volume of volumes">
+            <app-card-item [entity]="volume" [title]="'Volume ' + volume.number" (click)="openVolume(volume)"></app-card-item>
+        </div>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/src/app/series-detail/series-detail.component.ts b/src/app/series-detail/series-detail.component.ts
index 93df5173a..f0e8a0455 100644
--- a/src/app/series-detail/series-detail.component.ts
+++ b/src/app/series-detail/series-detail.component.ts
@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Series } from '../_models/series';
+import { Volume } from '../_models/volume';
+import { SeriesService } from '../_services/series.service';
 
 @Component({
   selector: 'app-series-detail',
@@ -9,10 +12,29 @@ import { Series } from '../_models/series';
 export class SeriesDetailComponent implements OnInit {
 
   series: Series | undefined;
+  volumes: Volume[] = [];
 
-  constructor() { }
+  constructor(private route: ActivatedRoute, private seriesService: SeriesService) { }
 
   ngOnInit(): void {
+
+    const routeId = this.route.snapshot.paramMap.get('id');
+    if (routeId === null) {
+      console.error('No library id was passed. Redirecting to home');
+      //this.router.navigateByUrl('/home');
+      return;
+    }
+    const seriesId = parseInt(routeId, 10);
+    this.seriesService.getSeries(seriesId).subscribe(series => {
+      this.series = series;
+      this.seriesService.getVolumes(this.series.id).subscribe(volumes => {
+        this.volumes = volumes;
+      });
+    });
+  }
+
+  openVolume(volume: Volume) {
+    alert('TODO: Let user read Manga');
   }
 
 }
diff --git a/src/app/shared/card-item/card-item.component.html b/src/app/shared/card-item/card-item.component.html
index 41523ea92..976a075f8 100644
--- a/src/app/shared/card-item/card-item.component.html
+++ b/src/app/shared/card-item/card-item.component.html
@@ -1,7 +1,7 @@
 <div class="card" style="width: 18rem;">
     <img (click)="handleClick()" class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
 
-    <div class="card-body text-center">
+    <div class="card-body text-center" *ngIf="title.length > 0 || actions.length > 0">
         <h5 class="card-title" (click)="handleClick()">{{title}}</h5>
         <ng-container *ngIf="actions.length > 0">
             <div class="col">
diff --git a/src/app/shared/card-item/card-item.component.ts b/src/app/shared/card-item/card-item.component.ts
index ec10d3f28..ff41443ee 100644
--- a/src/app/shared/card-item/card-item.component.ts
+++ b/src/app/shared/card-item/card-item.component.ts
@@ -15,7 +15,7 @@ export class CardItemComponent implements OnInit {
 
   @Input() imageUrl = '';
   @Input() title = '';
-  @Input() actions: CardItemAction[] = [];
+  @Input() actions: CardItemAction[] = []; // TODO: Create a factory that generates actions based on if admin, etc. for each card type.
   @Input() entity: any; // This is the entity we are representing. It will be returned if an action is executed. 
   @Output() clicked = new EventEmitter<string>();