From 1816b6c68d7b15c9f26284a2c873aaee2bf57fbd Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Sat, 2 Jan 2021 12:44:11 -0600 Subject: [PATCH] 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!

+ +
+ + + +
\ 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 @@