From bdf382ca14353933dbb20a1e2eb22fd34a98a790 Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 08:07:34 -0600 Subject: [PATCH 1/7] Changed routing for series to use library/:id/series/:id so that we can always validate a user has library access. --- src/app/_guards/library-access.guard.ts | 41 +++++++++++++++++++ src/app/_services/member.service.ts | 6 ++- src/app/app-routing.module.ts | 13 +++++- .../library-detail.component.ts | 2 +- 4 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 src/app/_guards/library-access.guard.ts diff --git a/src/app/_guards/library-access.guard.ts b/src/app/_guards/library-access.guard.ts new file mode 100644 index 000000000..e6a70ea6d --- /dev/null +++ b/src/app/_guards/library-access.guard.ts @@ -0,0 +1,41 @@ +import { Injectable } from '@angular/core'; +import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { User } from '../_models/user'; +import { AccountService } from '../_services/account.service'; +import { MemberService } from '../_services/member.service'; + +@Injectable({ + providedIn: 'root' +}) +export class LibraryAccessGuard implements CanActivate { + + constructor(private accountService: AccountService, private toastr: ToastrService, private memberService: MemberService) {} + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + + + + + + return this.accountService.currentUser$.pipe( + map((user: User) => { + if (user) { + const libraryId = parseInt(state.url.split('library/')[1], 10); + this.memberService.hasLibraryAccess(libraryId).pipe(res => { + console.log('return: ', res); + return res; + }); + console.log('state:', state.url); + console.log('route: ', route); + return true; + } + this.toastr.error('You are not authorized to view this page.'); + return false; + }) + ); + } + +} diff --git a/src/app/_services/member.service.ts b/src/app/_services/member.service.ts index 4f1ca9fd4..0a6c4ba88 100644 --- a/src/app/_services/member.service.ts +++ b/src/app/_services/member.service.ts @@ -19,9 +19,13 @@ export class MemberService { adminExists() { return this.httpClient.get(this.baseUrl + 'admin/exists'); } - + deleteMember(username: string) { return this.httpClient.delete(this.baseUrl + 'users/delete-user?username=' + username); } + hasLibraryAccess(libraryId: number) { + return this.httpClient.get(this.baseUrl + 'users/has-library-access?libraryId=' + libraryId); + } + } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9b1705767..30c9eaf89 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,6 +4,8 @@ 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'; +import { LibraryAccessGuard } from './_guards/library-access.guard'; + const routes: Routes = [ {path: '', component: HomeComponent}, @@ -12,8 +14,15 @@ const routes: Routes = [ loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }, {path: 'library', component: LibraryComponent}, - {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: '', + runGuardsAndResolvers: 'always', + canActivate: [LibraryAccessGuard], + children: [ + {path: 'library/:id', component: LibraryDetailComponent}, + {path: 'library/:id/series/:id', component: SeriesDetailComponent}, + ] + }, {path: '**', component: HomeComponent, pathMatch: 'full'} ]; diff --git a/src/app/library-detail/library-detail.component.ts b/src/app/library-detail/library-detail.component.ts index 686726624..bf0986bdb 100644 --- a/src/app/library-detail/library-detail.component.ts +++ b/src/app/library-detail/library-detail.component.ts @@ -32,7 +32,7 @@ export class LibraryDetailComponent implements OnInit { } seriesClicked(series: Series) { - this.router.navigateByUrl('/series/' + series.id); + this.router.navigate(['library', this.libraryId, 'series', series.id]); } } From cb9e88acdca317b2cfe82f8ea4b2892102d06dfd Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 08:46:27 -0600 Subject: [PATCH 2/7] Ensure users are logged in before letting them access library route --- src/app/_guards/auth.guard.ts | 2 +- src/app/_guards/library-access.guard.ts | 36 +++++++++++-------------- src/app/app-routing.module.ts | 3 ++- 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/app/_guards/auth.guard.ts b/src/app/_guards/auth.guard.ts index 5c4ea0afb..a41cd7d16 100644 --- a/src/app/_guards/auth.guard.ts +++ b/src/app/_guards/auth.guard.ts @@ -13,7 +13,7 @@ export class AuthGuard implements CanActivate { constructor(private accountService: AccountService, private toastr: ToastrService) {} canActivate(): Observable { - // this automaticallys subs due to being router guard + // TODO: on failure, can we bring them back to home to show login screen return this.accountService.currentUser$.pipe( map((user: User) => { if (user) { diff --git a/src/app/_guards/library-access.guard.ts b/src/app/_guards/library-access.guard.ts index e6a70ea6d..94159045c 100644 --- a/src/app/_guards/library-access.guard.ts +++ b/src/app/_guards/library-access.guard.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { map, take } from 'rxjs/operators'; import { User } from '../_models/user'; import { AccountService } from '../_services/account.service'; import { MemberService } from '../_services/member.service'; @@ -14,28 +14,22 @@ export class LibraryAccessGuard implements CanActivate { constructor(private accountService: AccountService, private toastr: ToastrService, private memberService: MemberService) {} - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { + const libraryId = parseInt(state.url.split('library/')[1], 10); + return this.memberService.hasLibraryAccess(libraryId); - - - - return this.accountService.currentUser$.pipe( - map((user: User) => { - if (user) { - const libraryId = parseInt(state.url.split('library/')[1], 10); - this.memberService.hasLibraryAccess(libraryId).pipe(res => { - console.log('return: ', res); - return res; - }); - console.log('state:', state.url); - console.log('route: ', route); - return true; - } - this.toastr.error('You are not authorized to view this page.'); - return false; - }) - ); + // return this.accountService.currentUser$.pipe( + // take((user: User) => { + // if (user) { + // const libraryId = parseInt(state.url.split('library/')[1], 10); + // return this.memberService.hasLibraryAccess(libraryId); + // //return true; + // } + // this.toastr.error('You are not authorized to view this page.'); + // return false; + // }) + // ); } } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 30c9eaf89..30cdcf988 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,6 +4,7 @@ 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'; +import { AuthGuard } from './_guards/auth.guard'; import { LibraryAccessGuard } from './_guards/library-access.guard'; @@ -17,7 +18,7 @@ const routes: Routes = [ { path: '', runGuardsAndResolvers: 'always', - canActivate: [LibraryAccessGuard], + canActivate: [AuthGuard, LibraryAccessGuard], children: [ {path: 'library/:id', component: LibraryDetailComponent}, {path: 'library/:id/series/:id', component: SeriesDetailComponent}, From 1fe055b27ee5e20cac71cc018130fb571c1d3017 Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 08:59:28 -0600 Subject: [PATCH 3/7] Cleanup library access guard. --- src/app/_guards/library-access.guard.ts | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/src/app/_guards/library-access.guard.ts b/src/app/_guards/library-access.guard.ts index 94159045c..611eb556d 100644 --- a/src/app/_guards/library-access.guard.ts +++ b/src/app/_guards/library-access.guard.ts @@ -1,10 +1,6 @@ import { Injectable } from '@angular/core'; -import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router'; -import { ToastrService } from 'ngx-toastr'; +import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; -import { map, take } from 'rxjs/operators'; -import { User } from '../_models/user'; -import { AccountService } from '../_services/account.service'; import { MemberService } from '../_services/member.service'; @Injectable({ @@ -12,24 +8,10 @@ import { MemberService } from '../_services/member.service'; }) export class LibraryAccessGuard implements CanActivate { - constructor(private accountService: AccountService, private toastr: ToastrService, private memberService: MemberService) {} + constructor(private memberService: MemberService) {} canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { - const libraryId = parseInt(state.url.split('library/')[1], 10); return this.memberService.hasLibraryAccess(libraryId); - - // return this.accountService.currentUser$.pipe( - // take((user: User) => { - // if (user) { - // const libraryId = parseInt(state.url.split('library/')[1], 10); - // return this.memberService.hasLibraryAccess(libraryId); - // //return true; - // } - // this.toastr.error('You are not authorized to view this page.'); - // return false; - // }) - // ); } - } From fe5ec2f03256138503afc783c5cb2f02cbbd9c16 Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 09:26:48 -0600 Subject: [PATCH 4/7] 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 | 4 +- src/app/library/library.component.html | 3 +- src/app/library/library.component.ts | 13 ---- .../shared/card-item/card-item.component.html | 1 + .../shared/card-item/card-item.component.ts | 1 + .../library-card/library-card.component.html | 3 + .../library-card/library-card.component.scss | 0 .../library-card/library-card.component.ts | 60 +++++++++++++++++++ src/app/shared/shared.module.ts | 6 +- 9 files changed, 74 insertions(+), 17 deletions(-) create mode 100644 src/app/shared/library-card/library-card.component.html create mode 100644 src/app/shared/library-card/library-card.component.scss create mode 100644 src/app/shared/library-card/library-card.component.ts diff --git a/src/app/_services/library.service.ts b/src/app/_services/library.service.ts index 5243bf517..1e801b03e 100644 --- a/src/app/_services/library.service.ts +++ b/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, {}); + } } diff --git a/src/app/library/library.component.html b/src/app/library/library.component.html index 666f33e34..cb906425e 100644 --- a/src/app/library/library.component.html +++ b/src/app/library/library.component.html @@ -2,6 +2,7 @@

Libraries

- + +
\ No newline at end of file diff --git a/src/app/library/library.component.ts b/src/app/library/library.component.ts index c4f027c73..cc268287b 100644 --- a/src/app/library/library.component.ts +++ b/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); - } - } diff --git a/src/app/shared/card-item/card-item.component.html b/src/app/shared/card-item/card-item.component.html index 976a075f8..bb102cbd2 100644 --- a/src/app/shared/card-item/card-item.component.html +++ b/src/app/shared/card-item/card-item.component.html @@ -1,4 +1,5 @@
+ {{title}}
diff --git a/src/app/shared/card-item/card-item.component.ts b/src/app/shared/card-item/card-item.component.ts index ff41443ee..e4a8b431e 100644 --- a/src/app/shared/card-item/card-item.component.ts +++ b/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(); + placeholderImage = 'assets/images/image-placeholder.jpg'; constructor() { } diff --git a/src/app/shared/library-card/library-card.component.html b/src/app/shared/library-card/library-card.component.html new file mode 100644 index 000000000..fb6fa8b97 --- /dev/null +++ b/src/app/shared/library-card/library-card.component.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/shared/library-card/library-card.component.scss b/src/app/shared/library-card/library-card.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/shared/library-card/library-card.component.ts b/src/app/shared/library-card/library-card.component.ts new file mode 100644 index 000000000..773fa3d98 --- /dev/null +++ b/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(); + + 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]); + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 01a2b702f..adcc30dc2 100644 --- a/src/app/shared/shared.module.ts +++ b/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 { } From 1816b6c68d7b15c9f26284a2c873aaee2bf57fbd Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 12:44:11 -0600 Subject: [PATCH 5/7] Added series card implementation. Added a mock cover to help visualize style changes. Implemented ability to create a new library without validation errors. Fixed a bug in directory picker that caused selected folders to not export the full path. --- src/app/_models/volume.ts | 3 +- src/app/_services/library.service.ts | 4 + .../directory-picker.component.ts | 4 +- .../library-editor-modal.component.html | 38 ++++++++- .../library-editor-modal.component.ts | 42 +++++++++- src/app/admin/admin.module.ts | 5 +- .../library-detail.component.html | 6 +- src/app/library/library.component.html | 5 +- src/app/library/library.component.ts | 5 ++ src/app/nav-header/nav-header.component.html | 2 +- .../series-detail.component.html | 6 +- .../shared/card-item/card-item.component.html | 18 +++-- .../shared/card-item/card-item.component.scss | 14 +++- .../shared/card-item/card-item.component.ts | 4 +- .../library-card/library-card.component.ts | 20 ++++- .../series-card/series-card.component.html | 3 + .../series-card/series-card.component.scss | 0 .../series-card/series-card.component.ts | 76 ++++++++++++++++++ src/app/shared/shared.module.ts | 11 ++- src/assets/images/mock-cover.jpg | Bin 0 -> 12482 bytes 20 files changed, 235 insertions(+), 31 deletions(-) create mode 100644 src/app/shared/series-card/series-card.component.html create mode 100644 src/app/shared/series-card/series-card.component.scss create mode 100644 src/app/shared/series-card/series-card.component.ts create mode 100644 src/assets/images/mock-cover.jpg diff --git a/src/app/_models/volume.ts b/src/app/_models/volume.ts index 77a7629fa..830e5082b 100644 --- a/src/app/_models/volume.ts +++ b/src/app/_models/volume.ts @@ -1,6 +1,7 @@ export interface Volume { id: number; - number: string; + number: number; + name: string; files: Array; coverImage: string; } diff --git a/src/app/_services/library.service.ts b/src/app/_services/library.service.ts index 1e801b03e..ab68af45b 100644 --- a/src/app/_services/library.service.ts +++ b/src/app/_services/library.service.ts @@ -37,4 +37,8 @@ export class LibraryService { return this.httpClient.post(this.baseUrl + 'library/scan?libraryId=' + libraryId, {}); } + create(model: {name: string, type: number, folders: string[]}) { + return this.httpClient.post(this.baseUrl + 'library/create', model); + } + } diff --git a/src/app/admin/_modals/directory-picker/directory-picker.component.ts b/src/app/admin/_modals/directory-picker/directory-picker.component.ts index 55b03ddfb..1a78047ee 100644 --- a/src/app/admin/_modals/directory-picker/directory-picker.component.ts +++ b/src/app/admin/_modals/directory-picker/directory-picker.component.ts @@ -84,7 +84,9 @@ export class DirectoryPickerComponent implements OnInit { event.preventDefault(); event.stopPropagation(); - this.modal.close({success: true, folderPath: folderName}); + const fullPath = (this.routeStack.items.join('\\') + '\\' + folderName).replace('\\\\', '\\'); + + this.modal.close({success: true, folderPath: fullPath}); } close() { diff --git a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html index 70da5d876..3024c7cb5 100644 --- a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html +++ b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html @@ -1 +1,37 @@ -

library-editor-modal works!

+ +
+
+ + +
+
+
+ + +
+ +
+ + +
+ + +

Folders:

+ +
+
  • + {{folder}} + +
    • +
    +
    +
    + + + +
    +
    \ No newline at end of file diff --git a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts index 920cca0a0..2f76b0792 100644 --- a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts +++ b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts @@ -1,4 +1,8 @@ import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { LibraryService } from 'src/app/_services/library.service'; +import { DirectoryPickerComponent, DirectoryPickerResult } from '../directory-picker/directory-picker.component'; @Component({ selector: 'app-library-editor-modal', @@ -7,9 +11,45 @@ import { Component, OnInit } from '@angular/core'; }) export class LibraryEditorModalComponent implements OnInit { - constructor() { } + + libraryForm: FormGroup = new FormGroup({ + name: new FormControl('', [Validators.required]), + type: new FormControl(0, [Validators.required]) + }); + + selectedFolders: string[] = []; + + constructor(private modalService: NgbModal, private libraryService: LibraryService, public modal: NgbActiveModal) { } ngOnInit(): void { } + submitLibrary() { + const model = this.libraryForm.value; + model.folders = this.selectedFolders; + console.log('Creating library with: ', model); + // this.libraryService.create(model).subscribe(() => { + // this.close(true); + // }); + } + + close(returnVal= false) { + this.modal.close(returnVal); + } + + reset() { + + } + + openDirectoryPicker() { + const modalRef = this.modalService.open(DirectoryPickerComponent); + modalRef.closed.subscribe((closeResult: DirectoryPickerResult) => { + if (closeResult.success) { + this.selectedFolders.push(closeResult.folderPath); + } + }); + } + + + } diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts index 64ee124e7..c9608536b 100644 --- a/src/app/admin/admin.module.ts +++ b/src/app/admin/admin.module.ts @@ -9,7 +9,7 @@ import { LibraryEditorModalComponent } from './_modals/library-editor-modal/libr import { SharedModule } from '../shared/shared.module'; import { LibraryAccessModalComponent } from './_modals/library-access-modal/library-access-modal.component'; import { DirectoryPickerComponent } from './_modals/directory-picker/directory-picker.component'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @@ -25,9 +25,10 @@ import { FormsModule } from '@angular/forms'; imports: [ CommonModule, AdminRoutingModule, + ReactiveFormsModule, + FormsModule, NgbNavModule, SharedModule, - FormsModule ], providers: [] }) diff --git a/src/app/library-detail/library-detail.component.html b/src/app/library-detail/library-detail.component.html index 15bd6e363..705cc1173 100644 --- a/src/app/library-detail/library-detail.component.html +++ b/src/app/library-detail/library-detail.component.html @@ -1,12 +1,12 @@

    Title (Manga/Recently Added)

    -
    - +
    +
    - + Nothing here....
    \ No newline at end of file diff --git a/src/app/library/library.component.html b/src/app/library/library.component.html index cb906425e..157dd46c0 100644 --- a/src/app/library/library.component.html +++ b/src/app/library/library.component.html @@ -1,8 +1,7 @@

    Libraries

    -
    +
    -
    -
    \ No newline at end of file +
    \ No newline at end of file diff --git a/src/app/library/library.component.ts b/src/app/library/library.component.ts index cc268287b..33480833c 100644 --- a/src/app/library/library.component.ts +++ b/src/app/library/library.component.ts @@ -25,6 +25,11 @@ export class LibraryComponent implements OnInit { this.user = user; this.libraryService.getLibrariesForMember(this.user.username).subscribe(libraries => { this.libraries = libraries; + if (this.libraries.length > 0) { + // TODO: Remove this debug code + console.warn('Warning, debug code is being used!'); + this.libraries[0].coverImage = '/assets/images/mock-cover.jpg'; + } }); }); } diff --git a/src/app/nav-header/nav-header.component.html b/src/app/nav-header/nav-header.component.html index 431ce4a94..3223c7ff1 100644 --- a/src/app/nav-header/nav-header.component.html +++ b/src/app/nav-header/nav-header.component.html @@ -11,7 +11,7 @@
    - +
    diff --git a/src/app/series-detail/series-detail.component.html b/src/app/series-detail/series-detail.component.html index 7154f9845..65303a02e 100644 --- a/src/app/series-detail/series-detail.component.html +++ b/src/app/series-detail/series-detail.component.html @@ -1,10 +1,10 @@
    -
    +
    -
    +

    {{series.name | titlecase}}

    @@ -21,7 +21,7 @@

    Volumes

    -
    +
    diff --git a/src/app/shared/card-item/card-item.component.html b/src/app/shared/card-item/card-item.component.html index bb102cbd2..f48009325 100644 --- a/src/app/shared/card-item/card-item.component.html +++ b/src/app/shared/card-item/card-item.component.html @@ -3,16 +3,22 @@ {{title}}
    -
    {{title}}
    - -
    -
    + + + {{title}} + +
    + +
    -
    - + +
    + + +
    \ 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 9987ed9cc..98f7b4f2a 100644 --- a/src/app/shared/card-item/card-item.component.scss +++ b/src/app/shared/card-item/card-item.component.scss @@ -1,7 +1,15 @@ .card { - margin: 5px; - max-width: 130px; - max-height: 195px; + margin: 10px; + // max-width: 130px; + // max-height: 195px; + max-width: 160px; + max-height: 320px; + + // 370 x 210 roughly +} + +.card-title { + margin-top: 5px; } .card-body { diff --git a/src/app/shared/card-item/card-item.component.ts b/src/app/shared/card-item/card-item.component.ts index e4a8b431e..bbaafe27f 100644 --- a/src/app/shared/card-item/card-item.component.ts +++ b/src/app/shared/card-item/card-item.component.ts @@ -15,8 +15,8 @@ export class CardItemComponent implements OnInit { @Input() imageUrl = ''; @Input() title = ''; - @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. + @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(); diff --git a/src/app/shared/library-card/library-card.component.ts b/src/app/shared/library-card/library-card.component.ts index 773fa3d98..410b14eb1 100644 --- a/src/app/shared/library-card/library-card.component.ts +++ b/src/app/shared/library-card/library-card.component.ts @@ -40,11 +40,19 @@ export class LibraryCardComponent implements OnInit, OnChanges { } generateActions() { - this.actions = []; + this.actions = [ + { + title: 'Mark as Read', + callback: () => this.markAsRead + }, + { + title: 'Mark as Unread', + callback: () => this.markAsUnread + } + ]; 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); }); @@ -52,6 +60,14 @@ export class LibraryCardComponent implements OnInit, OnChanges { } } + markAsUnread(library: any) { + + } + + markAsRead(library: any) { + + } + handleClick() { this.clicked.emit(this.data); this.router.navigate(['library', this.data?.id]); diff --git a/src/app/shared/series-card/series-card.component.html b/src/app/shared/series-card/series-card.component.html new file mode 100644 index 000000000..fb6fa8b97 --- /dev/null +++ b/src/app/shared/series-card/series-card.component.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/shared/series-card/series-card.component.scss b/src/app/shared/series-card/series-card.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/shared/series-card/series-card.component.ts b/src/app/shared/series-card/series-card.component.ts new file mode 100644 index 000000000..b0bff1f11 --- /dev/null +++ b/src/app/shared/series-card/series-card.component.ts @@ -0,0 +1,76 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; +import { take } from 'rxjs/internal/operators/take'; +import { Series } from 'src/app/_models/series'; +import { AccountService } from 'src/app/_services/account.service'; +import { SeriesService } from 'src/app/_services/series.service'; +import { CardItemAction } from '../card-item/card-item.component'; + +@Component({ + selector: 'app-series-card', + templateUrl: './series-card.component.html', + styleUrls: ['./series-card.component.scss'] +}) +export class SeriesCardComponent implements OnInit { + @Input() data: Series | undefined; + @Input() libraryId = 0; + @Output() clicked = new EventEmitter(); + + isAdmin = false; + actions: CardItemAction[] = []; + + constructor(private accountService: AccountService, private router: Router, + private seriesService: SeriesService, 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 = [ + { + title: 'Mark as Read', + callback: () => this.markAsRead + }, + { + title: 'Mark as Unread', + callback: () => this.markAsUnread + } + ]; + + if (this.isAdmin) { + // this.actions.push({title: 'Scan Library', callback: (data: Library) => { + // this.libraryService.scan(this.libraryId).subscribe((res: any) => { + // this.toastr.success('Scan started for ' + data.name); + // }); + // }}); + } + } + + markAsUnread(series: any) { + + } + + markAsRead(series: any) { + + } + + handleClick() { + this.clicked.emit(this.data); + this.router.navigate(['library', this.libraryId, 'series', this.data?.id]); + } + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index adcc30dc2..7b0260b74 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -5,11 +5,17 @@ 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'; +import { SeriesCardComponent } from './series-card/series-card.component'; @NgModule({ - declarations: [RegisterMemberComponent, CardItemComponent, LibraryCardComponent], + declarations: [ + RegisterMemberComponent, + CardItemComponent, + LibraryCardComponent, + SeriesCardComponent + ], imports: [ CommonModule, ReactiveFormsModule, @@ -18,7 +24,8 @@ import { LibraryCardComponent } from './library-card/library-card.component'; exports: [ RegisterMemberComponent, CardItemComponent, - LibraryCardComponent + LibraryCardComponent, + SeriesCardComponent ] }) export class SharedModule { } diff --git a/src/assets/images/mock-cover.jpg b/src/assets/images/mock-cover.jpg new file mode 100644 index 0000000000000000000000000000000000000000..513acb12c22afad9a6478dcb6ddf74f789254432 GIT binary patch literal 12482 zcmbWdbyVEY`{zGMi$kG6ahIYkT4Z1f6sJ(!3l!HW?hJ*Z#VHO0#hv0V#RhkG7~I{N zSw7$0vwOb#&rfbna!yWelKaX{^2qx^&LP(TuM}kDWdJCs007GK0zfVTqyU&NUt+v` zfr){EfrW*MjZ2J&i-UtpPV}09n3{r?hMIzkijIk!m5zavk&5c=2R6?4JpBCpw5-Bn zLcBn3K7QW+Tm%IR3kw$qmkbY&jF+B@p7;NALv{cNF#+3v6f_hD04gC08X*d@8$kO! z&KD^E)d2sip`fCnzj%p(iG_{x+@bar02Kud4HX^j#S3)w=ia{0#{uYsFNo-QBwoH& zHNjwTB+{Gc_}}u(YzaadvTabNBG{3j7%q91os0ziPV3I3wm3<=Yb!MzozAs#iPRj+1?(VCRfVMOwAgtIAee{v(3|{g3_OawI_|+0;wxB%IlHAJ| z^E z5`YcYL;^BPKo5KEx2b!^Qw|j-!E!rp%b+AqyEU>YDCHK~U!ZrCb&~dnU!F{kuT*ub zm{U5iU&;>YV=$&)!vqGemNXAH+u*fZ4V2Dro4wLc9yubl5q_mez)3z5uwjJ+1UVKX z0i)BIPnWBYpWPRv_;m0(f^p|D>Xbh|h8C~TpD`ze*hS2W=Kc;a4Fur_njWGG%{7QgD4d# zJ3-MXD9F*PAhgy{OTv+*%x7MV)BpfkrUs!XKByBe`}St;BM7P=M&#R z*Lc0f ze8%=Q))?bi*_#+hXTvmPXMYrN4@R&=|MxkV&6A1v73{QA#7aAn`Jc0z9)g|%0}l}w zL;nxFd1n}5i3@Ai*J{Nho~d?bk~u~9NWfKyx<19%5}E=#Cd_d@)IrMFhI|h@x0lgJ zO0upu7}uoFz#}*alHL*|0Hg)EnS`7P@cW@oWq-`xo^>DcyKvomT2g`iMNq-}afwmV1VxNZdaQP@63zK4?y=_FQkM`KwyEr2VwoEHk^-K1(oYc&C{ra?#_?i(wSxLqz70 zfS(R04|SP0&+qYuZNW{>;Eg~;WvzL$h)JT!x}S!}YKQ>KgsV%lqD2FHM4Min2;ybE zcF!9^_Mpjp06QvftJ@zVmG8cxH|0jkx->^xoSRW{hoY%_rDdg?X~S{maY7wCzz;L6 z=?2!$E2_=)DHp;%B~3Q(6A~VSAg>LUCAI_;m_q;jCXK1=!gc!27Y%{&w=Zg|cA_^) zcjm8k6ahAIUD;JsMlVX7mlr>?19^^hE`lV9c}n${9rlk+iBU`!ADIF`B3ltATz|~> zNA|p>y{DQljW!*0Jv#L%1?6fK11a!&QdNThrd2;8urEf5Z=v=Ip6^)c+@gS+tR`2& zV!pQ<|}%QOdD- zW!d3f@xW8v6W*XT#(eC2n6)_wI*A}jFRtqwuiR9SU6W_L3m<+^${z8UiWMmBG$xSD z#YF-RS2N_Df$<$Z!YS{2yc;lp5GZ1!kw7WYN;AEmmX$u0Zz&2sh6IQwkaQ2D1h2iY zFU3wo`73J*ZI5JL?$9L4SN`ZAvUcx1W724?Ck3T?+!y(fL*NCt7hRu?w7(h_ptB9& z&bc$IOBj5Q1Xz=u4giz-j4F8Tyb%rAOTrg3b%+IpzZ=2lUa~ML4_AV^zmc&qNUYqYtHXp z7yiQK(WY86RS)Ak#Wmb%@ee8E|HN9{7JR;QTAhWG@e+<)R0fNuBN&=!5LY`!r_iNx z1)T+Rzmox3p!buFM+?MB55&6yXc&A|Hj7aJQt0(isG3;~o0X-Nq!2`Gd!a^2i?=Md z(eJa%CRy8bp$X&7(&~X9Iqg*tK1U!HB!D8iP|LUN()Ot=*buSpIIeUmzB%F;#fCTC zCAi__t;T*VRDfBzG}~@i?!0ySx!8y&jDNtxNj$-3;)<)EW!W%nM6R%_I%u{Fskce56z;A>y;tW7`7ou;?ewS^4i zOZ9|RD2GdsU4bK!4!TgesXcdp;h4agUq zIX}XJ%@;nB3z1#1vXg(R^Lgp~JUzA~NM0%&X3r0sh~@h3^e8ogrI#VIOH z?Yy zc7%9M9nmV`fs5&yjV?Hp(bZTp+7ChuyaqeJ-^z=PVC5_*FUG-@4-~;j003V0`0*XZ z+duV4fLuZxh;8)+)d^=AjEpcIdPh_9_h1_=YG1)4u`OiH6HLT!?&Vdqv)ALs>tQSB zsnqXqHlk!Xq#oFag1u_MLjw;F^Wn&6l-*nm(oo^twxIcTyyEUSIvjrzzi;iWkTER$ zwl(%g?rMgbZ35|T7;ZEzQKDT*!lpgI(pv1Z%~OUL!Is{PICXUuZ;c8=l4WeXGjFiP zQa9R(mS5NNV8tjAPqhZNy52**9&TI5T=;4zDLhA7ooJKss(a&i^(No(B@XnEfcZn> zYWCu&Txi1LuY_V6x0iSmcfUz-ceZv8)N;|pgiAKM(7xZDewR$&sF1Ru|7a$ybuC(X zul>5XPV9w5t(#NocBm^3`IkSUrta#|@P+5snD5IYYiq+)fk(v-uh?&vl_eqcVxL9> z1oeY2hing&@mE)>N6H`l6ti!!Oh0`JXqA^Bk-8H#U8aAm7lwtDC6Z~)e4vyQD@^JH9y82 z6;Bo#ooEI1__5hD953|PZxIb>G*=yA(ReQIJEpspxV4c_UKv{LZ)H34ORJJay|E&{ ze>!>C)s`kxuuW;E(pfmooua3#4xRvtIv4bt6v@*LzgXGp<@@=X7+k0p?icmhn;>w(kx5yx>H)LXWBup-JT_MSxP8xB_4tuS;+&jY* z)KU~t`Bt8?1i#?mKs!mj`GrmsQA@yh5o}L`Zpy_6MLf^a?$IY+DJ$X{E--0*y&ze! zfOl2anSD%8t?PJjqTp)1*sy0(`DUeu+CuTOx&%S7(Z4(tIwU|o-loLzc&)Ny^m3!c z3QzLMKSZrbj#M5rLF7r2Pfo9lbtm)Q@oUJLc6VGF4j%i!CwQFJBDBC{!tZCO)BaJ9(3){D4EQAc7QqY}8Rrh3w;)+CTR^#|#(+L!AYVvs{HVFN9 zg5XFRvxr=;y8NuDk1g>SR|WsdZ=(jTalFf9=46g4EiyE?y&Z($2dNzaVtRw!khybP zJ_D}dw1$Mqsyv#hzj9o&;>^*RN^t%-lk{l+^#<2RotVKujy6Gp)uf14TTq7%~h?5Inh zE?kR7qv-a4#o8Bu6-|HdJ`w&K9df4%yl}jv<}f{^$b5VRJv|};2eT>Ik&jB(C93id zCC9+oPfRv+(Z{KKiE8+~94X_k+OmmpGxD2u?U>y<)Ks!6OsOV{DonSX`UW&wS2lWB zl<`3#p7r`+a7ii*V1th_flaC$eXYy|mIYM;6#=5v3Chtn#eF$xnTLjZ0boiJI-eXP zoSck+dTS@JC*7)K=LFg6g^+BN41egQVIuW%ZgCq^cooh0)WhoIA92+WJol(DZ4961 zpUVj?tUFKm5+$=_Y3HbL7hVQb^|;P>b)`$D7JC{9~D=a*o2H7HiTX z4Jz{}gV)DVini)2dg^_+7$7wxrwpVrLu8KBoB)~hb!vH6eY5-Xo;H=z^ikyZ34~$w zdd)>1(F$XiQ;El-@pgPxx(_sU|CzN}XE$EEa%)AbVU zJ8tLm=w5NQ;kSY7LHcsF9vdnNb$!0heWUQqiEv))xrr9jx2r`vZVMwd<2eF{YgDiD zrJx`h5pDCl+wzTF=JJZyLEmtli+b^SMr)k}%PV+g7**Romil6--)rS8O8~VU@_>bY zYR(}4ypnM3 zFhk>mD2JiNJMOg&D>8<@^5R7mm6ne}umj!uo1YFf@;-Yk3A1sISe+F`cJ{PCO7pU= zmfGQlPJ^nIlPe?c4XG3BhU2OM2@4%ZaEyw*yK_>CpzYYAeP`}icTbYTY^#+QeK0YI z$nW=weB^UkQMzI1ftPfCzYicscx)GD0dj(Cy~j(0dod8bMLeT<<)e8jp(Rj#pw{PW zcSCR!^W@5n)|ro9daC(w`m2THXlS#OyqK8Rbcy0~XuJM?#@s4b&ODedj)Yzxn=f!B zWcEahe%pFNMjs%!WsG(F-RXsHy)8MjMe`Y2rFrKsZ;Q_%ZO-Y}6*4*lgbKrh`qz7= zeFaJ1@|Pz9wzl+E%SNg@>KDv#+;j6U6UQay%x`FY_pZwoHq6j@o ze}Qf`H%FK`8W`v`rf$lO=rU=kInO$P{;1wktXTK%y>9p>a<5GxTQjfTt!KGtw`EwY zl(WU;J9BhDLzA|VV$W?{-yT+WvhkhqcXVtr4c}h6DfLrHwX|;5`La{#d(U!=ZZDNI zp8BSxvKh9dn7NZXS7Lrb%TkYc4fz(P+3y3U*6?lzN^8R|sJF4hW63B#Buuq^o_}yo zQFrm>&##unXZ0LWf#|-N<=>D1&FP9795BJaZPbjcH8bAL)LO(7FGOVMRTnWm{R|zk?2&YUJ(KW%OoU>5c=Gw@p?XbG%XUcd* z_GsG!B!CwIIlgm&Ggg%n{Ke#d-v8L^@2k+Au6=OMmu5~c;#(^J#+ZP!9KCakaQzjL z!@=k(q|B{!DlAYC3(8p0z-9P&xecz{)LDBz*Wdo4uu z`l6Tx=2;zOVRDO8!g`cEJ?y(Y@T#9Rb)x_=Gbvz|^d)jU{z+#AReo3FvKREOf@HCH z>0$)_xhZ^nn^z`If^}d$Sb`kgFNex;|Xo7s}=VDc4xW7*_&62&|u{p&Gw`px?O!?sD-+j~JzmbSIl{lG2Pu=-*N_(AO?(*RIbuRgF8(#qz z6@!*rxbHF2<)-PV`|T<0dsH&Jy9^fK3NS5njD9V1@*uq)H&-}Mj;$*%4BQdIUCsDh z@h84Wz_tt&>US*O|ymr^!i!?(ZVJq__qs~4#iK9{3gWeIgKHBPP5vNFa zF3TeI=1TFddiy{_XJumL+jwT}TI{5CXZxNZ?uR1BDoqD7YqHE+a@a0=MbxFmn&M-~r)IcfZ0bLf%(82>Q20`M~~ zh9&LIQnf%H&}1rYCF20wgTCsdV2Rj6S))-ga~o%XMr|Fp(26H)l6K(PQ3~sMbPt_H=E}ypfrB0fzkhdjI!l;Tu31q`Dk2Zar8SNOyIA{kWg7U7YBil;~J3?^GE% zv~yyNTJR$xBE~i%RWUK9pP|tW7{_in7B>MiWGPK;ZDiS3bW@Mt3h=x-Q0?;dW;y`d z7UCot`>A6Z;BTgG*=M)Cm{`He$c#?FB3ZP$m)didVR`r%XH_k@+pBRF@Fp-yMc`e^ zZU_f+dG96-drRH(=S1gQ{BjEyON>{AA@@0}H}mf9lJ@4x2IsTzix%(kO`MB6Cu4sI z4H6KkJGXjCKpO{%bnDE}r1diT0iP-g-nN!O0z@fR$fhAxwOC9G&t`$@EDn-qx9al| zO)cP&Q{+MzF$`%651ZUGP<@c=PRy$AbtjD2^4|2);?B&r{mL-)j-kq1 zXEV^s0<)|J~EwqxgfsQ8Vvaqo(~gEYEAnX73$B2qQ|}r*zDVsDKGu_4-lVD<*2`U z8tCy`_-Q+7HgmQASt-z#T1Nt^q#b6pvO(M%=ek3oPE11u+oOJfGFzip^Q#BiO&V&V zOY@m4SrHMItNCxYO$MU5nxLP>6_ej(pC8-n+sfd()AaaCz)6Z+*H(#aRJ+ev(r`_r zLUR-9>3cmp2{Zo)OdYss&H8bVb2HaR=1C```ucNR{bPz&njQx0RgZBdUZ|#I2c^qq zpL1oS_O5ii3>RmMwI?Z-Y{4-5$&-zB5UUkSW1 z*U6&|X_0bK8XwGm1rybCAMl2hlxA?%;^}K7Nrh8-fb9e2_FT5yoKVmJJLSHZ+s&A+ zt%5tcZNC%~rLN_HjZ!k&woaHgy~zpl7W=#Mh3|Pt6zrfH&Ph;| zSqEh+m3R1=Bf`Ij^3|<#WT#+&fYI6E|_M#Y&d-3|@zz zfB3V}NQ=2!=MEw~F?C_^HWJ?i(IHODg^qdXx8vRMHJr5&#Ak+od7dhi6KSA|27}c! zU6$u%zAUp^ZH=w<;bPoaoSQni7p&jOerr+sDJL5XSEw~jm>4c5@`@7vd#oOIrXXqc zp9LyM;;&xz1px3N@D=XNNDX!cO7iKh&f=N~a`DB2{XmsAeK3C~i&lM1RRU8~F20|- z7VqjI!gcg^Is<6@GTxI1%E2Vhs5wH`9D@nNK&SDh*n!me=sw-GpL9M4bgo^*WhY!J z?B%-L;N@D=w#gHQ$~fCFv$v#gaDHTTM-iWTh_T;A#>{62*_m{{FW`uU*k z$|`hbgu`M&moD0~XllV73U9P#>eeFvx;(p}TF-w)B%q&sli(?F1$-$0lwYr(agAiS zS3JYZhxVktd*>N*68RV3;~_H`gxz;0J;he=>y7zE#p2;#dO8OS_$eANb^Z(-c35NW za-bM$`OamNks;#kK$PdG7B$~WqYAaPo8D@0Id@99fll{i_m-Rk2D`)+>|9`*=6)`% zW5K>Re#2LJV*fSzo;{hFNnm=aQP?=vqTCm^x;xKB=%9`fwt#JYdmCa5s{8HLr`VQK zd5L&`ECelhpy?e=?+GN=cl6y&9=U#;TZNHL?s5P88z1WYzLl3%ZV8gP4l-{FaaR+Z z5wGJB+@Nr(dQC}rkkYLDy3nx$ki?X7pii<*)ywx99(|y@f>s|63iV@TGJmYG+bK{v z%bUvax?X~9d?wYE!&F-jX&ol?Uhn&yh~<(AzEQww_xa|dAL6t6gQTBf|DG+(rz9>h3|!*U^(z| zn%D*VJqSBzT`tC|j`N{SUju-Op-IBX10-~U^+0*exI-7h?6WTKat{pIyKtc_KfbDH2ev-av6rleLgoTkM%M z)Hz`ujsJ4Sh>Z*yNcEhSEU$F&m4kE|Zdim66}5(u(kCvV6P7!9?a&se>mqQPKY&i- z29gMSk$?rYPsMB0>#D>N(DZk3^;>V>=wDZ>Vv?lIVY9d}C=*x!)s0ZB=XTrbusMdM_ji^faFBSy?92V}#S6TRO zXWv{88r_{g>%^#(kL*FtZ7rC_l!HM_yy|84k3tU^*L8KF7IRv-V54Ltp!6VmFFeP- z#Xy$Hx%3_7OZ)-K^m`gUr8BO?5_d;1bJ>!*-x_BCIVmYud_M|iFXkmoymrqbX1g0a zcFN0Y$LPI}1W5fkg9RSdwrWea=;t_avRsh+w00UK*qK4aPY!fx7_8oO>76yGk=vOQ z`g`C-XeTR{mbEVZx%#Xp{O0!PBnV}OQ+)Mh1pgAm!Hrj zc#(KQ$DaNXx9v-CmBg)6w4J?hSy}UxntaZPvT@vx(s!Z?P(~q_X<$ zPOCuaJ;|HA_OvchkKslnx8^|2e3;n{*v>RrzES45+qnGW$xKV~-saH-SN|6;ER==z z!vK&n`@6%r&EK?DLm@yy2FEK(*{g!X$DSjfl;dV}vz~dG7Z$ggb-N3WcwKrjykc(Q zXN%2X78l*1J52+b>{HaNYg&4=bc8GM8;eytQi`Z*q7vFAE?8pG(ql*Zb1eX48LP@L zMjhfnEc4UpzSVtswMV_U)szG9sWi=}O$S~yy7I*SpcB90ZP1h`s7_Su<#TpZ!51hy zoyr4Da_^P>h&^0PYAgbO(o~<~XFDPl4Wv3(6vd2i{OUjYXn@#7i?Ga8$h2rr@dItD z)cG>}XDUT2$hs5#KAf5s3*t^PZbggMy;DV8x!!Qtq-`f2lWBUL(4ibbIeOD1Q@65p zHyY6c4D(yH0FFO8H<18t_Dw&m)|MK+rysy9n8U%}yuXg=o(39)(#_5lu*WdXt;gtR zcb?C3J-3KE(r?nBi)wP8SAMI-UwEn5gEn(ZIa6lL6+~p4q;?y1-OJP%rrp<~Gd4kKsjR4GT7X8u;?vnV z!>7&9re>4v+i#+s&%UeMru+9VGb}gA*8k2Hr1ID?U+Ad_m5@`?z4F+}gbC z0V)sYpx&lo428M?#rzg;+sJ>Y$(uwmGR}R{@B*rvGNZrNM$1S*pDGe?CXn4ZT#|3X z+4UFU%Ox9at-b1a_fVGey!L1vjpg*UBoUU{w{4WDho@6wWLg^EmE^{pHCe&Xfb}rSB2}m4Wm#}udXRQk zsysMI8Jg^vkrj9;yj@$?qL0o+m71hiqz5J_g)+waY45)E^-x{8X-DwRt#ODC3kGbq|F=u4SQm*v} z9}15hWS0H!z65rA?#my~l@nea9As$GTl@*RZ;0{lIEGi4p3F24;{3X$zxX=;FB0Ot zCAj{EF+M5>@Ek;03JoaqCFO5b93lZ+%2z0IOFEU`0GHcMR;<%kTx_`$CUsCUgam2> z5kP2!VDi9VYQsHBkcgJWE+77n5$zAHUT?!hg?-+ti7%7d(|BX$*tLl&f%C@8jHqh4 z_T*LNc-Urxrc~yMGi)|cZRu-EsccGzc0Fp8DdtM};7E%xb)SU6 zgNF{B&c24wTnz42S4@;m3IEp=e;q4;6MvJ&Kl9~~|Ia&#hZ$#xK_|zNa%j`56t(MK>eZUb#9kBHi4f~B{m+lB?!lvuk{im90 z)?oLkTI+XYgs-T~eD{ZE@`-F>dUMxx6@8r%BsGEous_tHTDC5pJLpYsR7YkaQ+^(JH4J<~#EJ*Zf|9KYY$A5Ld=I5E0 z({1|_-gu`h;!^zTE}E(5H@!Ba)syv}qfI^Qbc;kG6NjnCmmL33#SN>`M#|O;+?8N( zfg!BnSCNMn$ekKPtSR+R$#LUkmE-nDcQ$HU!t4azQ-3ty%_1+JJQwhRJf*Fp?tHPi zCc{#D?@r^*b`wYR%f-9~4~IP6aZe^xg0b(iI|dFviuCmk1Sgld2`Qm`5dkQV1fU?V z;=Uvt!muvJzx2O131{zBDS6Engji17s&i~&jeIk>yX{+uL8EA(0=Twa?Xud!RlY8| z17s(q*SGoXs{CBLv?TfHm}!-tuunT^sj>gEU~v4^X6j9db>bkzz z-AN=Jp=qNpObioIs;Xe^W0x4E_E=nmdQS^YNfGt>vln&%zCmf9atw{MB5Q@(8dX2o z2L-!*aQIx^z=&Omi?`zMx^uR7r`ibJmo*abY287iGj?73F?yQX#6j)?tW4e*61=ig|>2iaySdt9vyhz&85s;6D1aY)g@|`j^#I1AT<4 zHQm*o2IOxIDro;TF!^)QTnQhZ^luutiapT{SSTU0;W)}ZR%`J9JTUM?zgRZ z9nymvVhC_n#cZHn!6?spg|9)YZ7KJdoe!oud9R(5@?872={Zku+6KN9_SKpkt$X9x z_*#OH-Z5rw2ji;LO2De?FxDppvak!GSb*+0q=>%mhzQ?iMhPZE<>+^SjpaG3-KYv) zJAA}Fe9sHf8<_l~!o`dPBt|I97nczHW?pg%@)*{yeVQ({UyZ=lZk{U9srk^w{`X;E zo}|*H*&(v?UB3vYKY?T5eR#KRL;CUj+p8B?2u*&yTp6LYI0Gi{x-DfHWyfbLCsLBF zXP%avWc!|$F&x})|AVmaHss@n1?Ubk1%f)fjEiBQVQ>JL!gLWo+v;^R0M z*kxIKVtd4Q#1!}XJWjQW5B6ufLDr<5>1yw59&Nlmx?`NqPc*bWy)OX?^P^#Dk)?93 z4fCj@xMK>+*uObJs6zag&U|>`j*GMV)^)q}(UrueoW6^6pXU8 zJLgN7zWB-0i|E;<(_*WIB5P{7~z` zCVLH42b!Pul*gL&Se&<&*Auk3ungN8N?vOI(fg4xMs8PHB6ibOBknXe5s2h5oOvK>>)2-e7zUlR)J&m^ltu2F{ z;G16xd1){?Nqtx6z849@-ycHc6(pH*;q`okgb}AZ6%8fthnVX_3D(I#LDG&CEu7D; zPmIlPwVKZfAXRl=8C#h-iOUkgIth}mKsz-N<8KAO%D#jTyl11rkZj8#zLV)E^Lni` zOrPM=fPP=wqRiW7yhQL_7&OodmOH&JC@b<7`Vm0|cK(qG)?05O%!gQc%*+5^lgY+O zVn_slQqayS{DNgFgVf$v7Vf_Oaj$i0KKRBov8_s5Sf{3D!l*ydK< z@?=vNoUwKBUb5&P#_9c(`kwY{8$6F(g~P>LmbgV9B&qzefpYs*Io=867a32QFqI1Iy-i=-bzcQmMCzD zfIWUv+#r%xYz!Xv+4Uw^v?#k#KQSyvtr10zuB!gKclOM;uFdYS7wfNj|M_G8JO=oy zP@T%{+-vjau!&})?>yfYBg8~1f5}QKj#^cw+fTwLxZTEMnQ```d7&#Dg)NQo zPL@LbBwuz@o!MT_86yF8t8i(OtEvJl(SC!+eX{VH=|3z<@nk?yUQ}WZ;sJd2tXU9` zgLb+htIzr%#oNOBTG~w`C;t0mR)nA8$+r(bYXs3L0TM_+el$XW_L1K2Ipdq<^cg`W$Ifyv^C4g2ej% zyE;^Pd`w#D24nA*_C$sciU|#Qu2N(~AV9a{(zIGRkH3y3{#WP0)UWZT zIR;|AnSfwz!-#*s%q)dAQzvbUmbUUtrHMJkn6I^$SR=Z{_Cc-ji~F-P1@A{Ro}*KO z3*x~@nd9AU>-p#kv^!O4P{{;B^9Ey0IUNh*7rL^7cgjR0y@ojd}^ez&>{t$9CB>VUX@qU9K tGBg%EsiV3a>3Oc+2CXwsBLO?lq0VaU^X@bFB_!b)eCQb*;tfL1{|}hp+!O!+ literal 0 HcmV?d00001 From c8bbbceecd3ae97c02bab83e5bd3c68093a89bca Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 12:59:33 -0600 Subject: [PATCH 6/7] Implemented ability to delete a library and ensure that after adding or deleting, the manage library page refreshes. --- src/app/_services/library.service.ts | 4 ++++ .../manage-library.component.html | 6 ++--- .../manage-library.component.ts | 24 ++++++++++++------- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/app/_services/library.service.ts b/src/app/_services/library.service.ts index ab68af45b..c81bb2abc 100644 --- a/src/app/_services/library.service.ts +++ b/src/app/_services/library.service.ts @@ -41,4 +41,8 @@ export class LibraryService { return this.httpClient.post(this.baseUrl + 'library/create', model); } + delete(libraryId: number) { + return this.httpClient.delete(this.baseUrl + 'library/delete?libraryId=' + libraryId, {}); + } + } diff --git a/src/app/admin/manage-library/manage-library.component.html b/src/app/admin/manage-library/manage-library.component.html index 4b2505ce3..0dc4eb1ce 100644 --- a/src/app/admin/manage-library/manage-library.component.html +++ b/src/app/admin/manage-library/manage-library.component.html @@ -10,7 +10,7 @@

    {{library.name | titlecase}}
    - +

    @@ -23,6 +23,4 @@ -
    - - \ No newline at end of file +
    \ No newline at end of file diff --git a/src/app/admin/manage-library/manage-library.component.ts b/src/app/admin/manage-library/manage-library.component.ts index 571620446..a7c17cd61 100644 --- a/src/app/admin/manage-library/manage-library.component.ts +++ b/src/app/admin/manage-library/manage-library.component.ts @@ -19,25 +19,31 @@ export class ManageLibraryComponent implements OnInit { ngOnInit(): void { + this.getLibraries(); + + } + + getLibraries() { this.libraryService.getLibraries().subscribe(libraries => { this.libraries = libraries; }); - } addLibrary() { const modalRef = this.modalService.open(LibraryEditorModalComponent); - } - - addFolder(library: string) { - const modalRef = this.modalService.open(DirectoryPickerComponent); - modalRef.closed.subscribe((closeResult: DirectoryPickerResult) => { - console.log('Closed Result', closeResult); - if (closeResult.success) { - console.log('Add folder path to Library'); + modalRef.closed.subscribe(refresh => { + if (refresh) { + this.getLibraries(); } }); + } + deleteLibrary(library: Library) { + if (confirm('Are you sure you want to delete this library? You cannot undo this action.')) { + this.libraryService.delete(library.id).subscribe(() => { + this.getLibraries(); + }); + } } } From 490110407ac0e9f0b8796f6428303d089261fbfd Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 14:21:10 -0600 Subject: [PATCH 7/7] Implemented the ability to delete a library from UI. Added update functionality for library. --- src/app/_services/library.service.ts | 4 +++ .../directory-picker.component.html | 2 +- .../library-editor-modal.component.html | 12 +++---- .../library-editor-modal.component.spec.ts | 25 -------------- .../library-editor-modal.component.ts | 34 +++++++++++++++---- .../manage-library.component.html | 2 +- .../manage-library.component.ts | 11 ++++++ .../series-card/series-card.component.ts | 2 +- 8 files changed, 52 insertions(+), 40 deletions(-) delete mode 100644 src/app/admin/_modals/library-editor-modal/library-editor-modal.component.spec.ts diff --git a/src/app/_services/library.service.ts b/src/app/_services/library.service.ts index c81bb2abc..21c267efc 100644 --- a/src/app/_services/library.service.ts +++ b/src/app/_services/library.service.ts @@ -45,4 +45,8 @@ export class LibraryService { return this.httpClient.delete(this.baseUrl + 'library/delete?libraryId=' + libraryId, {}); } + update(model: {name: string, folders: string[], id: number}) { + return this.httpClient.post(this.baseUrl + 'library/update', model); + } + } diff --git a/src/app/admin/_modals/directory-picker/directory-picker.component.html b/src/app/admin/_modals/directory-picker/directory-picker.component.html index 4a7e8a279..b9923565a 100644 --- a/src/app/admin/_modals/directory-picker/directory-picker.component.html +++ b/src/app/admin/_modals/directory-picker/directory-picker.component.html @@ -15,7 +15,7 @@ +
    There are no folders here diff --git a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html index 3024c7cb5..bc28e2c7d 100644 --- a/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html +++ b/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html @@ -1,7 +1,7 @@ -
    +
    - + @@ -12,7 +12,7 @@
    -
    +