Refactored library to use it's own card type which wraps app-card-item. Implemented ability to kick off a scan of a library from UI (non-admin route) if you are an admin.

src/app/_services/library.service.ts

@@ -33,6 +33,8 @@ export class LibraryService {
     return this.httpClient.post(this.baseUrl + 'library/update-for', {username, selectedLibraries});
   }
 
-
+  scan(libraryId: number) {
+    return this.httpClient.post(this.baseUrl + 'library/scan?libraryId=' + libraryId, {});
+  }
 
 }

src/app/library/library.component.html

@@ -2,6 +2,7 @@
 <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)" [actions]="actions" [entity]="library"></app-card-item>
+        <app-library-card [data]="library"></app-library-card>
+        <!-- <app-card-item [imageUrl]="library.coverImage" [title]="library.name" (clicked)="handleNavigation($event, library)" [actions]="actions" [entity]="library"></app-card-item> -->
     </div>
   </div>

src/app/library/library.component.ts

@@ -17,29 +17,16 @@ 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;
-      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);
       });
     });
   }
 
-  handleNavigation(event: any, library: Library) {
-    this.router.navigateByUrl('/library/' + library.id);
-  }
-
 }

src/app/shared/card-item/card-item.component.html

@@ -1,4 +1,5 @@
 <div class="card" style="width: 18rem;">
+    <!-- TODO: I need an anchor around this so you can open in new page easily -->
     <img (click)="handleClick()" class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
 
     <div class="card-body text-center" *ngIf="title.length > 0 || actions.length > 0">

src/app/shared/card-item/card-item.component.ts

@@ -19,6 +19,7 @@ export class CardItemComponent implements OnInit {
   @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';
 
   constructor() { }

src/app/shared/library-card/library-card.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngIf="data !== undefined">
+    <app-card-item [title]="data.name" [actions]="actions" [imageUrl]="data.coverImage" [entity]="data" (clicked)="handleClick()"></app-card-item>
+</ng-container>

src/app/shared/library-card/library-card.component.ts

@@ -0,0 +1,60 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { take } from 'rxjs/operators';
+import { Library } from 'src/app/_models/library';
+import { User } from 'src/app/_models/user';
+import { AccountService } from 'src/app/_services/account.service';
+import { LibraryService } from 'src/app/_services/library.service';
+import { CardItemAction } from '../card-item/card-item.component';
+
+// Represents a library type card. Uses a app-card-item internally
+@Component({
+  selector: 'app-library-card',
+  templateUrl: './library-card.component.html',
+  styleUrls: ['./library-card.component.scss']
+})
+export class LibraryCardComponent implements OnInit, OnChanges {
+  @Input() data: Library | undefined;
+  @Output() clicked = new EventEmitter<Library>();
+
+  isAdmin = false;
+  actions: CardItemAction[] = [];
+
+  constructor(private accountService: AccountService, private router: Router,
+              private libraryService: LibraryService, private toastr: ToastrService) {
+    this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
+      if (user) {
+        this.isAdmin = this.accountService.hasAdminRole(user);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: any) {
+    if (this.data) {
+      this.generateActions();
+    }
+  }
+
+  generateActions() {
+    this.actions = [];
+
+    if (this.isAdmin) {
+      this.actions.push({title: 'Scan Library', callback: (data: Library) => {
+        console.log('You tried to scan library: ' + data.name);
+        this.libraryService.scan(data?.id).subscribe((res: any) => {
+          this.toastr.success('Scan started for ' + data.name);
+        });
+      }});
+    }
+  }
+
+  handleClick() {
+    this.clicked.emit(this.data);
+    this.router.navigate(['library', this.data?.id]);
+  }
+
+}

src/app/shared/shared.module.ts

@@ -4,11 +4,12 @@ import { RegisterMemberComponent } from './register-member/register-member.compo
 import { ReactiveFormsModule } from '@angular/forms';
 import { CardItemComponent } from './card-item/card-item.component';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { LibraryCardComponent } from './library-card/library-card.component';
 
 
 
 @NgModule({
-  declarations: [RegisterMemberComponent, CardItemComponent],
+  declarations: [RegisterMemberComponent, CardItemComponent, LibraryCardComponent],
   imports: [
     CommonModule,
     ReactiveFormsModule,
@@ -16,7 +17,8 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
   ],
   exports: [
     RegisterMemberComponent,
-    CardItemComponent
+    CardItemComponent,
+    LibraryCardComponent
   ]
 })
 export class SharedModule { }