From 68bb5ed5a8255dd695f2dd6140ee478cc37bfb68 Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Wed, 18 Aug 2021 17:16:05 -0700 Subject: [PATCH] Feature/bookmark feedback (#508) * ImageService had a stream reset before writting out to array. Added logging statment for updating series metadata. Removed ConcurencyCheck due to bad update issue for CollectionTag. * Added a new screen which lets you quickly see all your bookmarks for a given user. * Built user bookmark page in user settings. Moved user settings to it's own lazy loaded module. Removed unneded debouncing from downloader and just used throttleTime instead. * Removed a not-yet implemented tab from series modal * Fixed a bug in clear bookmarks and adjusted icons within anchors to have proper styling --- API/Controllers/ReaderController.cs | 24 ++- API/Controllers/SeriesController.cs | 21 +- API/DTOs/RemoveBookmarkForSeriesDto.cs | 7 + API/DTOs/SeriesByIdsDto.cs | 9 + API/Data/DbFactory.cs | 10 +- API/Data/SeriesRepository.cs | 16 ++ API/Data/UserRepository.cs | 11 + API/Entities/CollectionTag.cs | 12 +- API/Interfaces/ISeriesRepository.cs | 1 + API/Interfaces/IUserRepository.cs | 1 + API/Services/ImageService.cs | 1 + UI/Web/src/app/_services/reader.service.ts | 4 + UI/Web/src/app/_services/series.service.ts | 4 + .../admin/dashboard/dashboard.component.html | 2 +- .../manage-system/manage-system.component.ts | 4 +- UI/Web/src/app/app-routing.module.ts | 6 +- UI/Web/src/app/app.module.ts | 11 +- .../bookmarks-modal.component.ts | 4 +- .../edit-series-modal.component.html | 10 +- .../edit-series-modal.component.ts | 2 +- .../cards/card-item/card-item.component.ts | 7 +- .../app/nav-header/nav-header.component.html | 10 +- .../series-detail/series-detail.component.ts | 4 +- .../app/shared/_services/download.service.ts | 19 +- UI/Web/src/app/shared/shared.module.ts | 6 +- .../user-preferences.component.html | 192 ----------------- .../series-bookmarks.component.html | 42 ++++ .../series-bookmarks.component.scss | 0 .../series-bookmarks.component.ts | 96 +++++++++ .../user-preferences.component.html | 203 ++++++++++++++++++ .../user-preferences.component.scss | 0 .../user-preferences.component.ts | 31 ++- .../user-settings-routing.module.ts | 22 ++ .../app/user-settings/user-settings.module.ts | 27 +++ UI/Web/src/assets/themes/dark.scss | 5 +- 35 files changed, 554 insertions(+), 270 deletions(-) create mode 100644 API/DTOs/RemoveBookmarkForSeriesDto.cs create mode 100644 API/DTOs/SeriesByIdsDto.cs delete mode 100644 UI/Web/src/app/user-preferences/user-preferences.component.html create mode 100644 UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html create mode 100644 UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.scss create mode 100644 UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.ts create mode 100644 UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html rename UI/Web/src/app/{ => user-settings}/user-preferences/user-preferences.component.scss (100%) rename UI/Web/src/app/{ => user-settings}/user-preferences/user-preferences.component.ts (87%) create mode 100644 UI/Web/src/app/user-settings/user-settings-routing.module.ts create mode 100644 UI/Web/src/app/user-settings/user-settings.module.ts diff --git a/API/Controllers/ReaderController.cs b/API/Controllers/ReaderController.cs index 47e96be37..c3015bbab 100644 --- a/API/Controllers/ReaderController.cs +++ b/API/Controllers/ReaderController.cs @@ -11,6 +11,7 @@ using API.Extensions; using API.Interfaces; using API.Interfaces.Services; using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Logging; namespace API.Controllers { @@ -22,16 +23,18 @@ namespace API.Controllers private readonly IDirectoryService _directoryService; private readonly ICacheService _cacheService; private readonly IUnitOfWork _unitOfWork; + private readonly ILogger _logger; private readonly ChapterSortComparer _chapterSortComparer = new ChapterSortComparer(); private readonly ChapterSortComparerZeroFirst _chapterSortComparerForInChapterSorting = new ChapterSortComparerZeroFirst(); private readonly NaturalSortComparer _naturalSortComparer = new NaturalSortComparer(); /// - public ReaderController(IDirectoryService directoryService, ICacheService cacheService, IUnitOfWork unitOfWork) + public ReaderController(IDirectoryService directoryService, ICacheService cacheService, IUnitOfWork unitOfWork, ILogger logger) { _directoryService = directoryService; _cacheService = cacheService; _unitOfWork = unitOfWork; + _logger = logger; } /// @@ -350,19 +353,31 @@ namespace API.Controllers return Ok(await _unitOfWork.UserRepository.GetBookmarkDtosForChapter(user.Id, chapterId)); } + /// + /// Returns a list of all bookmarked pages for a User + /// + /// + [HttpGet("get-all-bookmarks")] + public async Task>> GetAllBookmarks() + { + var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername()); + if (user.Bookmarks == null) return Ok(Array.Empty()); + return Ok(await _unitOfWork.UserRepository.GetAllBookmarkDtos(user.Id)); + } + /// /// Removes all bookmarks for all chapters linked to a Series /// /// /// [HttpPost("remove-bookmarks")] - public async Task RemoveBookmarks(int seriesId) + public async Task RemoveBookmarks(RemoveBookmarkForSeriesDto dto) { var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername()); if (user.Bookmarks == null) return Ok("Nothing to remove"); try { - user.Bookmarks = user.Bookmarks.Where(bmk => bmk.SeriesId == seriesId).ToList(); + user.Bookmarks = user.Bookmarks.Where(bmk => bmk.SeriesId != dto.SeriesId).ToList(); _unitOfWork.UserRepository.Update(user); if (await _unitOfWork.CommitAsync()) @@ -370,8 +385,9 @@ namespace API.Controllers return Ok(); } } - catch (Exception) + catch (Exception ex) { + _logger.LogError(ex, "There was an exception when trying to clear bookmarks"); await _unitOfWork.RollbackAsync(); } diff --git a/API/Controllers/SeriesController.cs b/API/Controllers/SeriesController.cs index 5ec47b53b..d99e0f767 100644 --- a/API/Controllers/SeriesController.cs +++ b/API/Controllers/SeriesController.cs @@ -12,6 +12,7 @@ using API.Interfaces; using Kavita.Common; using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Mvc; +using Microsoft.EntityFrameworkCore; using Microsoft.Extensions.Logging; namespace API.Controllers @@ -154,8 +155,8 @@ namespace API.Controllers } series.Name = updateSeries.Name.Trim(); series.LocalizedName = updateSeries.LocalizedName.Trim(); - series.SortName = updateSeries.SortName.Trim(); - series.Summary = updateSeries.Summary.Trim(); + series.SortName = updateSeries.SortName?.Trim(); + series.Summary = updateSeries.Summary?.Trim(); // BUG: There was an exceptionSystem.NullReferenceException: Object reference not set to an instance of an object. var needsRefreshMetadata = false; if (!updateSeries.CoverImageLocked) @@ -296,8 +297,9 @@ namespace API.Controllers return Ok("Successfully updated"); } } - catch (Exception) + catch (Exception ex) { + _logger.LogError(ex, "There was an exception when updating metadata"); await _unitOfWork.RollbackAsync(); } @@ -327,6 +329,19 @@ namespace API.Controllers return Ok(series); } + /// + /// Fetches Series for a set of Ids. This will check User for permission access and filter out any Ids that don't exist or + /// the user does not have access to. + /// + /// + [HttpPost("series-by-ids")] + public async Task>> GetAllSeriesById(SeriesByIdsDto dto) + { + if (dto.SeriesIds == null) return BadRequest("Must pass seriesIds"); + var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername()); + return Ok(await _unitOfWork.SeriesRepository.GetSeriesDtoForIdsAsync(dto.SeriesIds, user.Id)); + } + } } diff --git a/API/DTOs/RemoveBookmarkForSeriesDto.cs b/API/DTOs/RemoveBookmarkForSeriesDto.cs new file mode 100644 index 000000000..7ec76b081 --- /dev/null +++ b/API/DTOs/RemoveBookmarkForSeriesDto.cs @@ -0,0 +1,7 @@ +namespace API.DTOs +{ + public class RemoveBookmarkForSeriesDto + { + public int SeriesId { get; init; } + } +} diff --git a/API/DTOs/SeriesByIdsDto.cs b/API/DTOs/SeriesByIdsDto.cs new file mode 100644 index 000000000..75eabc6be --- /dev/null +++ b/API/DTOs/SeriesByIdsDto.cs @@ -0,0 +1,9 @@ +using System.Collections.Generic; + +namespace API.DTOs +{ + public class SeriesByIdsDto + { + public int[] SeriesIds { get; init; } + } +} diff --git a/API/Data/DbFactory.cs b/API/Data/DbFactory.cs index 877aa7581..a57ba4037 100644 --- a/API/Data/DbFactory.cs +++ b/API/Data/DbFactory.cs @@ -52,7 +52,7 @@ namespace API.Data IsSpecial = specialTreatment, }; } - + public static SeriesMetadata SeriesMetadata(ICollection collectionTags) { return new SeriesMetadata() @@ -66,11 +66,11 @@ namespace API.Data return new CollectionTag() { Id = id, - NormalizedTitle = API.Parser.Parser.Normalize(title).ToUpper(), - Title = title, - Summary = summary, + NormalizedTitle = API.Parser.Parser.Normalize(title?.Trim()).ToUpper(), + Title = title?.Trim(), + Summary = summary?.Trim(), Promoted = promoted }; } } -} \ No newline at end of file +} diff --git a/API/Data/SeriesRepository.cs b/API/Data/SeriesRepository.cs index 2e223c0c8..b1620d48d 100644 --- a/API/Data/SeriesRepository.cs +++ b/API/Data/SeriesRepository.cs @@ -443,5 +443,21 @@ namespace API.Data .AsNoTracking() .ToListAsync(); } + + public async Task> GetSeriesDtoForIdsAsync(IEnumerable seriesIds, int userId) + { + var allowedLibraries = _context.Library + .Include(l => l.AppUsers) + .Where(library => library.AppUsers.Any(x => x.Id == userId)) + .Select(l => l.Id); + + return await _context.Series + .Where(s => seriesIds.Contains(s.Id) && allowedLibraries.Contains(s.LibraryId)) + .OrderBy(s => s.SortName) + .ProjectTo(_mapper.ConfigurationProvider) + .AsNoTracking() + .AsSplitQuery() + .ToListAsync(); + } } } diff --git a/API/Data/UserRepository.cs b/API/Data/UserRepository.cs index d330b7954..f94972b1b 100644 --- a/API/Data/UserRepository.cs +++ b/API/Data/UserRepository.cs @@ -106,6 +106,17 @@ namespace API.Data .ToListAsync(); } + public async Task> GetAllBookmarkDtos(int userId) + { + return await _context.AppUserBookmark + .Where(x => x.AppUserId == userId) + .OrderBy(x => x.Page) + .AsNoTracking() + .ProjectTo(_mapper.ConfigurationProvider) + .ToListAsync(); + } + + public async Task> GetMembersAsync() { return await _context.Users diff --git a/API/Entities/CollectionTag.cs b/API/Entities/CollectionTag.cs index cc1a8acd2..f6058181e 100644 --- a/API/Entities/CollectionTag.cs +++ b/API/Entities/CollectionTag.cs @@ -9,7 +9,7 @@ namespace API.Entities /// Represents a user entered field that is used as a tagging and grouping mechanism /// [Index(nameof(Id), nameof(Promoted), IsUnique = true)] - public class CollectionTag : IHasConcurrencyToken + public class CollectionTag { public int Id { get; set; } /// @@ -42,12 +42,14 @@ namespace API.Entities public ICollection SeriesMetadatas { get; set; } - - /// - [ConcurrencyCheck] + /// + /// Not Used due to not using concurrency update + /// public uint RowVersion { get; private set; } - /// + /// + /// Not Used due to not using concurrency update + /// public void OnSavingChanges() { RowVersion++; diff --git a/API/Interfaces/ISeriesRepository.cs b/API/Interfaces/ISeriesRepository.cs index 399bf4f1a..a5518fc60 100644 --- a/API/Interfaces/ISeriesRepository.cs +++ b/API/Interfaces/ISeriesRepository.cs @@ -63,5 +63,6 @@ namespace API.Interfaces Task GetSeriesMetadata(int seriesId); Task> GetSeriesDtoForCollectionAsync(int collectionId, int userId, UserParams userParams); Task> GetFilesForSeries(int seriesId); + Task> GetSeriesDtoForIdsAsync(IEnumerable seriesIds, int userId); } } diff --git a/API/Interfaces/IUserRepository.cs b/API/Interfaces/IUserRepository.cs index eb2062646..4a5d8c2e3 100644 --- a/API/Interfaces/IUserRepository.cs +++ b/API/Interfaces/IUserRepository.cs @@ -19,5 +19,6 @@ namespace API.Interfaces Task> GetBookmarkDtosForSeries(int userId, int seriesId); Task> GetBookmarkDtosForVolume(int userId, int volumeId); Task> GetBookmarkDtosForChapter(int userId, int chapterId); + Task> GetAllBookmarkDtos(int userId); } } diff --git a/API/Services/ImageService.cs b/API/Services/ImageService.cs index bbfb6cec5..cc4d92742 100644 --- a/API/Services/ImageService.cs +++ b/API/Services/ImageService.cs @@ -57,6 +57,7 @@ namespace API.Services using var img = Image.NewFromFile(path); using var stream = new MemoryStream(); img.JpegsaveStream(stream); + stream.Position = 0; return stream.ToArray(); } catch (Exception ex) diff --git a/UI/Web/src/app/_services/reader.service.ts b/UI/Web/src/app/_services/reader.service.ts index 8b358a386..042eab4a0 100644 --- a/UI/Web/src/app/_services/reader.service.ts +++ b/UI/Web/src/app/_services/reader.service.ts @@ -28,6 +28,10 @@ export class ReaderService { return this.httpClient.post(this.baseUrl + 'reader/unbookmark', {seriesId, volumeId, chapterId, page}); } + getAllBookmarks() { + return this.httpClient.get(this.baseUrl + 'reader/get-all-bookmarks'); + } + getBookmarks(chapterId: number) { return this.httpClient.get(this.baseUrl + 'reader/get-bookmarks?chapterId=' + chapterId); } diff --git a/UI/Web/src/app/_services/series.service.ts b/UI/Web/src/app/_services/series.service.ts index c852a9e6d..1975fe49b 100644 --- a/UI/Web/src/app/_services/series.service.ts +++ b/UI/Web/src/app/_services/series.service.ts @@ -52,6 +52,10 @@ export class SeriesService { ); } + getAllSeriesByIds(seriesIds: Array) { + return this.httpClient.post(this.baseUrl + 'series/series-by-ids', {seriesIds: seriesIds}); + } + getSeries(seriesId: number) { return this.httpClient.get(this.baseUrl + 'series/' + seriesId); } diff --git a/UI/Web/src/app/admin/dashboard/dashboard.component.html b/UI/Web/src/app/admin/dashboard/dashboard.component.html index 2830cbf4d..dbc9e03b8 100644 --- a/UI/Web/src/app/admin/dashboard/dashboard.component.html +++ b/UI/Web/src/app/admin/dashboard/dashboard.component.html @@ -20,6 +20,6 @@ -
+
\ No newline at end of file diff --git a/UI/Web/src/app/admin/manage-system/manage-system.component.ts b/UI/Web/src/app/admin/manage-system/manage-system.component.ts index 8c0c2e4f3..54f787474 100644 --- a/UI/Web/src/app/admin/manage-system/manage-system.component.ts +++ b/UI/Web/src/app/admin/manage-system/manage-system.component.ts @@ -1,8 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { ToastrService } from 'ngx-toastr'; -import { asyncScheduler } from 'rxjs'; -import { finalize, take, takeWhile, throttleTime } from 'rxjs/operators'; +import { finalize, take, takeWhile } from 'rxjs/operators'; import { DownloadService } from 'src/app/shared/_services/download.service'; import { ServerService } from 'src/app/_services/server.service'; import { SettingsService } from '../settings.service'; @@ -92,7 +91,6 @@ export class ManageSystemComponent implements OnInit { downloadLogs() { this.downloadLogsInProgress = true; this.downloadService.downloadLogs().pipe( - throttleTime(100, asyncScheduler, { leading: true, trailing: true }), takeWhile(val => { return val.state != 'DONE'; }), diff --git a/UI/Web/src/app/app-routing.module.ts b/UI/Web/src/app/app-routing.module.ts index 0223e534a..21155ec75 100644 --- a/UI/Web/src/app/app-routing.module.ts +++ b/UI/Web/src/app/app-routing.module.ts @@ -7,7 +7,6 @@ import { NotConnectedComponent } from './not-connected/not-connected.component'; import { SeriesDetailComponent } from './series-detail/series-detail.component'; import { RecentlyAddedComponent } from './recently-added/recently-added.component'; import { UserLoginComponent } from './user-login/user-login.component'; -import { UserPreferencesComponent } from './user-preferences/user-preferences.component'; import { AuthGuard } from './_guards/auth.guard'; import { LibraryAccessGuard } from './_guards/library-access.guard'; import { InProgressComponent } from './in-progress/in-progress.component'; @@ -24,6 +23,10 @@ const routes: Routes = [ path: 'collections', loadChildren: () => import('./collections/collections.module').then(m => m.CollectionsModule) }, + { + path: 'preferences', + loadChildren: () => import('./user-settings/user-settings.module').then(m => m.UserSettingsModule) + }, { path: '', runGuardsAndResolvers: 'always', @@ -49,7 +52,6 @@ const routes: Routes = [ {path: 'library', component: LibraryComponent}, {path: 'recently-added', component: RecentlyAddedComponent}, {path: 'in-progress', component: InProgressComponent}, - {path: 'preferences', component: UserPreferencesComponent}, ] }, {path: 'login', component: UserLoginComponent}, diff --git a/UI/Web/src/app/app.module.ts b/UI/Web/src/app/app.module.ts index 946845ba1..a8d5915a5 100644 --- a/UI/Web/src/app/app.module.ts +++ b/UI/Web/src/app/app.module.ts @@ -18,7 +18,6 @@ import { SharedModule } from './shared/shared.module'; import { LibraryDetailComponent } from './library-detail/library-detail.component'; import { SeriesDetailComponent } from './series-detail/series-detail.component'; import { NotConnectedComponent } from './not-connected/not-connected.component'; -import { UserPreferencesComponent } from './user-preferences/user-preferences.component'; import { AutocompleteLibModule } from 'angular-ng-autocomplete'; import { ReviewSeriesModalComponent } from './_modals/review-series-modal/review-series-modal.component'; import { CarouselModule } from './carousel/carousel.module'; @@ -37,6 +36,8 @@ import { RecentlyAddedComponent } from './recently-added/recently-added.componen import { InProgressComponent } from './in-progress/in-progress.component'; import { CardsModule } from './cards/cards.module'; import { CollectionsModule } from './collections/collections.module'; +import { CommonModule } from '@angular/common'; +import { SAVER, getSaver } from './shared/_providers/saver.provider'; let sentryProviders: any[] = []; @@ -93,7 +94,6 @@ if (environment.production) { LibraryDetailComponent, SeriesDetailComponent, NotConnectedComponent, // Move into ExtrasModule - UserPreferencesComponent, // Move into SettingsModule ReviewSeriesModalComponent, PersonBadgeComponent, RecentlyAddedComponent, @@ -109,11 +109,11 @@ if (environment.production) { NgbDropdownModule, // Nav AutocompleteLibModule, // Nav - NgbTooltipModule, // Shared & SettingsModule + //NgbTooltipModule, // Shared & SettingsModule NgbRatingModule, // Series Detail NgbNavModule, - NgbAccordionModule, // User Preferences - NgxSliderModule, // User Preference + //NgbAccordionModule, // User Preferences + //NgxSliderModule, // User Preference NgbPaginationModule, @@ -135,6 +135,7 @@ if (environment.production) { {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true}, {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}, Title, + {provide: SAVER, useFactory: getSaver}, ...sentryProviders, ], entryComponents: [], diff --git a/UI/Web/src/app/cards/_modals/bookmarks-modal/bookmarks-modal.component.ts b/UI/Web/src/app/cards/_modals/bookmarks-modal/bookmarks-modal.component.ts index 0fd65ac42..8e3393fc7 100644 --- a/UI/Web/src/app/cards/_modals/bookmarks-modal/bookmarks-modal.component.ts +++ b/UI/Web/src/app/cards/_modals/bookmarks-modal/bookmarks-modal.component.ts @@ -1,8 +1,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { ToastrService } from 'ngx-toastr'; -import { asyncScheduler } from 'rxjs'; -import { finalize, take, takeWhile, throttleTime } from 'rxjs/operators'; +import { finalize, take, takeWhile } from 'rxjs/operators'; import { DownloadService } from 'src/app/shared/_services/download.service'; import { PageBookmark } from 'src/app/_models/page-bookmark'; import { Series } from 'src/app/_models/series'; @@ -55,7 +54,6 @@ export class BookmarksModalComponent implements OnInit { downloadBookmarks() { this.isDownloading = true; this.downloadService.downloadBookmarks(this.bookmarks).pipe( - throttleTime(100, asyncScheduler, { leading: true, trailing: true }), takeWhile(val => { return val.state != 'DONE'; }), diff --git a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html index 748785fbd..b968228b3 100644 --- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html +++ b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html @@ -82,12 +82,6 @@
  • {{tabs[1]}} - -

    Not Yet implemented

    -     -
    • -
  • - {{tabs[2]}}
    • -
  • - {{tabs[3]}} +
  • + {{tabs[2]}}

    Information

    diff --git a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts index 2ed296572..4f2103e67 100644 --- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts +++ b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts @@ -28,7 +28,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy { isCollapsed = true; volumeCollapsed: any = {}; - tabs = ['General', 'Fix Match', 'Cover Image', 'Info']; + tabs = ['General', 'Cover Image', 'Info']; active = this.tabs[0]; editSeriesForm!: FormGroup; libraryName: string | undefined = undefined; diff --git a/UI/Web/src/app/cards/card-item/card-item.component.ts b/UI/Web/src/app/cards/card-item/card-item.component.ts index 4a7fd96a3..826c068d8 100644 --- a/UI/Web/src/app/cards/card-item/card-item.component.ts +++ b/UI/Web/src/app/cards/card-item/card-item.component.ts @@ -1,7 +1,7 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { ToastrService } from 'ngx-toastr'; -import { asyncScheduler, Observable, Subject } from 'rxjs'; -import { finalize, take, takeUntil, takeWhile, throttleTime } from 'rxjs/operators'; +import { Observable, Subject } from 'rxjs'; +import { finalize, take, takeUntil, takeWhile } from 'rxjs/operators'; import { Download } from 'src/app/shared/_models/download'; import { DownloadService } from 'src/app/shared/_services/download.service'; import { UtilityService } from 'src/app/shared/_services/utility.service'; @@ -96,7 +96,6 @@ export class CardItemComponent implements OnInit, OnDestroy { if (!wantToDownload) { return; } this.downloadInProgress = true; this.download$ = this.downloadService.downloadVolume(volume).pipe( - throttleTime(100, asyncScheduler, { leading: true, trailing: true }), takeWhile(val => { return val.state != 'DONE'; }), @@ -112,7 +111,6 @@ export class CardItemComponent implements OnInit, OnDestroy { if (!wantToDownload) { return; } this.downloadInProgress = true; this.download$ = this.downloadService.downloadChapter(chapter).pipe( - throttleTime(100, asyncScheduler, { leading: true, trailing: true }), takeWhile(val => { return val.state != 'DONE'; }), @@ -128,7 +126,6 @@ export class CardItemComponent implements OnInit, OnDestroy { if (!wantToDownload) { return; } this.downloadInProgress = true; this.download$ = this.downloadService.downloadSeries(series).pipe( - throttleTime(100, asyncScheduler, { leading: true, trailing: true }), takeWhile(val => { return val.state != 'DONE'; }), diff --git a/UI/Web/src/app/nav-header/nav-header.component.html b/UI/Web/src/app/nav-header/nav-header.component.html index 8d912f51c..870dc6f1f 100644 --- a/UI/Web/src/app/nav-header/nav-header.component.html +++ b/UI/Web/src/app/nav-header/nav-header.component.html @@ -54,24 +54,18 @@
    - -
    +
    - +
    diff --git a/UI/Web/src/app/series-detail/series-detail.component.ts b/UI/Web/src/app/series-detail/series-detail.component.ts index f2fc17ee9..d51e407fb 100644 --- a/UI/Web/src/app/series-detail/series-detail.component.ts +++ b/UI/Web/src/app/series-detail/series-detail.component.ts @@ -3,8 +3,7 @@ import { Title } from '@angular/platform-browser'; import { ActivatedRoute, Router } from '@angular/router'; import { NgbModal, NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap'; import { ToastrService } from 'ngx-toastr'; -import { asyncScheduler } from 'rxjs'; -import { finalize, take, takeWhile, throttleTime } from 'rxjs/operators'; +import { finalize, take, takeWhile } from 'rxjs/operators'; import { CardDetailsModalComponent } from '../cards/_modals/card-details-modal/card-details-modal.component'; import { EditSeriesModalComponent } from '../cards/_modals/edit-series-modal/edit-series-modal.component'; import { ConfirmConfig } from '../shared/confirm-dialog/_models/confirm-config'; @@ -456,7 +455,6 @@ export class SeriesDetailComponent implements OnInit { if (!wantToDownload) { return; } this.downloadInProgress = true; this.downloadService.downloadSeries(this.series).pipe( - throttleTime(100, asyncScheduler, { leading: true, trailing: true }), takeWhile(val => { return val.state != 'DONE'; }), diff --git a/UI/Web/src/app/shared/_services/download.service.ts b/UI/Web/src/app/shared/_services/download.service.ts index 36eb3c0aa..0919eb0e7 100644 --- a/UI/Web/src/app/shared/_services/download.service.ts +++ b/UI/Web/src/app/shared/_services/download.service.ts @@ -1,17 +1,18 @@ -import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; import { Inject, Injectable } from '@angular/core'; import { Series } from 'src/app/_models/series'; import { environment } from 'src/environments/environment'; import { ConfirmService } from '../confirm.service'; -import { saveAs } from 'file-saver'; import { Chapter } from 'src/app/_models/chapter'; import { Volume } from 'src/app/_models/volume'; import { ToastrService } from 'ngx-toastr'; -import { Observable } from 'rxjs'; +import { asyncScheduler, Observable } from 'rxjs'; import { SAVER, Saver } from '../_providers/saver.provider'; import { download, Download } from '../_models/download'; import { PageBookmark } from 'src/app/_models/page-bookmark'; -import { debounceTime } from 'rxjs/operators'; +import { throttleTime } from 'rxjs/operators'; + +const DEBOUNCE_TIME = 100; @Injectable({ providedIn: 'root' @@ -42,7 +43,7 @@ export class DownloadService { downloadLogs() { return this.httpClient.get(this.baseUrl + 'server/logs', {observe: 'events', responseType: 'blob', reportProgress: true} - ).pipe(debounceTime(300), download((blob, filename) => { + ).pipe(throttleTime(DEBOUNCE_TIME, asyncScheduler, { leading: true, trailing: true }), download((blob, filename) => { this.save(blob, filename) })); @@ -51,7 +52,7 @@ export class DownloadService { downloadSeries(series: Series) { return this.httpClient.get(this.baseUrl + 'download/series?seriesId=' + series.id, {observe: 'events', responseType: 'blob', reportProgress: true} - ).pipe(debounceTime(300), download((blob, filename) => { + ).pipe(throttleTime(DEBOUNCE_TIME, asyncScheduler, { leading: true, trailing: true }), download((blob, filename) => { this.save(blob, filename) })); } @@ -59,7 +60,7 @@ export class DownloadService { downloadChapter(chapter: Chapter) { return this.httpClient.get(this.baseUrl + 'download/chapter?chapterId=' + chapter.id, {observe: 'events', responseType: 'blob', reportProgress: true} - ).pipe(debounceTime(300), download((blob, filename) => { //NOTE: DO I need debounceTime since I have throttleTime()? + ).pipe(throttleTime(DEBOUNCE_TIME, asyncScheduler, { leading: true, trailing: true }), download((blob, filename) => { //NOTE: DO I need debounceTime since I have throttleTime()? this.save(blob, filename) })); } @@ -67,7 +68,7 @@ export class DownloadService { downloadVolume(volume: Volume): Observable { return this.httpClient.get(this.baseUrl + 'download/volume?volumeId=' + volume.id, {observe: 'events', responseType: 'blob', reportProgress: true} - ).pipe(debounceTime(300), download((blob, filename) => { + ).pipe(throttleTime(DEBOUNCE_TIME, asyncScheduler, { leading: true, trailing: true }), download((blob, filename) => { this.save(blob, filename) })); } @@ -79,7 +80,7 @@ export class DownloadService { downloadBookmarks(bookmarks: PageBookmark[]) { return this.httpClient.post(this.baseUrl + 'download/bookmarks', {bookmarks}, {observe: 'events', responseType: 'blob', reportProgress: true} - ).pipe(debounceTime(300), download((blob, filename) => { + ).pipe(throttleTime(DEBOUNCE_TIME, asyncScheduler, { leading: true, trailing: true }), download((blob, filename) => { this.save(blob, filename) })); } diff --git a/UI/Web/src/app/shared/shared.module.ts b/UI/Web/src/app/shared/shared.module.ts index 0e5c152f6..790333aa8 100644 --- a/UI/Web/src/app/shared/shared.module.ts +++ b/UI/Web/src/app/shared/shared.module.ts @@ -35,11 +35,7 @@ import { NgCircleProgressModule } from 'ng-circle-progress'; CommonModule, RouterModule, ReactiveFormsModule, - //NgbDropdownModule, - //NgbProgressbarModule, - //NgbTooltipModule, NgbCollapseModule, - //LazyLoadImageModule, NgCircleProgressModule.forRoot(), ], exports: [ @@ -55,6 +51,6 @@ import { NgCircleProgressModule } from 'ng-circle-progress'; TagBadgeComponent, CircularLoaderComponent, ], - providers: [{provide: SAVER, useFactory: getSaver}] + //providers: [{provide: SAVER, useFactory: getSaver}] }) export class SharedModule { } diff --git a/UI/Web/src/app/user-preferences/user-preferences.component.html b/UI/Web/src/app/user-preferences/user-preferences.component.html deleted file mode 100644 index b6e2c5a36..000000000 --- a/UI/Web/src/app/user-preferences/user-preferences.component.html +++ /dev/null @@ -1,192 +0,0 @@ -
    -

    User Preferences

    -

    - These are global settings that are bound to your account. -

    - - - - -
    -
    - -
    -
    - - -
    -
    - - -
    -
    -
    -
    - - -
    -
    -     -     - - -
    -

    Manga

    -
    -   - Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. - Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. - -
    - -
    -   - How to scale the image to your screen. - How to scale the image to your screen. - -
    - -
    -   - How to split a full width image (ie both left and right images are combined) - How to split a full width image (ie both left and right images are combined) - -
    -
    - - -
    -
    - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -

    Books

    -
    - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -   - Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. - Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. - -
    -
    -   - Should the sides of the book reader screen allow tapping on it to move to prev/next page - Should the sides of the book reader screen allow tapping on it to move to prev/next page -
    -
    - - -
    -
    - - -
    -
    -
    -
    -   - Font familty to load up. Default will load the book's default font - Font familty to load up. Default will load the book's default font - -
    -
    - - -
    -
    -   - How much spacing between the lines of the book - How much spacing between the lines of the book - -
    - -
    -   - How much spacing on each side of the screen. This will override to 0 on mobile devices regardless of this setting. - How much spacing on each side of the screen. This will override to 0 on mobile devices regardless of this setting. - -
    - -
    - - -
    -
    -     -     - - - - -

    Change your Password

    - -
    -
    - - -
    -
    - This field is required -
    -
    -
    -
    - - -
    -
    - Passwords must match -
    -
    - This field is required -
    -
    -
    -
    - - -
    -
    -     -     -     - - - -
    \ No newline at end of file diff --git a/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html new file mode 100644 index 000000000..d4ce0ff4a --- /dev/null +++ b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html @@ -0,0 +1,42 @@ +

    + There are no bookmarks. Try creating one . +

    +
      +
    • +
      +

      + {{series.name | titlecase}} +  {{getBookmarkPages(series.id)}} +
      + + + +
      +

      +
      +
      • +
    • + +
      • +
    + diff --git a/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.scss b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.ts b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.ts new file mode 100644 index 000000000..4f67fdabe --- /dev/null +++ b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.ts @@ -0,0 +1,96 @@ +import { Component, OnInit } from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { ToastrService } from 'ngx-toastr'; +import { take, takeWhile, finalize } from 'rxjs/operators'; +import { BookmarksModalComponent } from 'src/app/cards/_modals/bookmarks-modal/bookmarks-modal.component'; +import { ConfirmService } from 'src/app/shared/confirm.service'; +import { DownloadService } from 'src/app/shared/_services/download.service'; +import { PageBookmark } from 'src/app/_models/page-bookmark'; +import { Series } from 'src/app/_models/series'; +import { ReaderService } from 'src/app/_services/reader.service'; +import { SeriesService } from 'src/app/_services/series.service'; + +@Component({ + selector: 'app-series-bookmarks', + templateUrl: './series-bookmarks.component.html', + styleUrls: ['./series-bookmarks.component.scss'] +}) +export class SeriesBookmarksComponent implements OnInit { + + bookmarks: Array = []; + series: Array = []; + loadingBookmarks: boolean = false; + seriesIds: {[id: number]: number} = {}; + downloadingSeries: {[id: number]: boolean} = {}; + clearingSeries: {[id: number]: boolean} = {}; + + constructor(private readerService: ReaderService, private seriesService: SeriesService, + private modalService: NgbModal, private downloadService: DownloadService, private toastr: ToastrService, + private confirmService: ConfirmService) { } + + ngOnInit(): void { + this.loadBookmarks(); + } + + loadBookmarks() { + this.loadingBookmarks = true; + this.readerService.getAllBookmarks().pipe(take(1)).subscribe(bookmarks => { + this.bookmarks = bookmarks; + this.seriesIds = {}; + this.bookmarks.forEach(bmk => { + if (!this.seriesIds.hasOwnProperty(bmk.seriesId)) { + this.seriesIds[bmk.seriesId] = 1; + } else { + this.seriesIds[bmk.seriesId] += 1; + } + this.downloadingSeries[bmk.seriesId] = false; + this.clearingSeries[bmk.seriesId] = false; + }); + + const ids = Object.keys(this.seriesIds).map(k => parseInt(k, 10)); + this.seriesService.getAllSeriesByIds(ids).subscribe(series => { + this.series = series; + this.loadingBookmarks = false; + }); + }); + } + + viewBookmarks(series: Series) { + const bookmarkModalRef = this.modalService.open(BookmarksModalComponent, { scrollable: true, size: 'lg' }); + bookmarkModalRef.componentInstance.series = series; + bookmarkModalRef.closed.pipe(take(1)).subscribe(() => { + this.loadBookmarks(); + }); + } + + async clearBookmarks(series: Series) { + if (!await this.confirmService.confirm('Are you sure you want to clear all bookmarks for ' + series.name + '? This cannot be undone.')) { + return; + } + + this.clearingSeries[series.id] = true; + this.readerService.clearBookmarks(series.id).subscribe(() => { + const index = this.series.indexOf(series); + if (index > -1) { + this.series.splice(index, 1); + } + this.clearingSeries[series.id] = false; + this.toastr.success(series.name + '\'s bookmarks have been removed'); + }); + } + + getBookmarkPages(seriesId: number) { + return this.seriesIds[seriesId]; + } + + downloadBookmarks(series: Series) { + this.downloadingSeries[series.id] = true; + this.downloadService.downloadBookmarks(this.bookmarks.filter(bmk => bmk.seriesId === series.id)).pipe( + takeWhile(val => { + return val.state != 'DONE'; + }), + finalize(() => { + this.downloadingSeries[series.id] = false; + })).subscribe(() => {/* No Operation */}); + } +} diff --git a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html new file mode 100644 index 000000000..ed4e7a232 --- /dev/null +++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html @@ -0,0 +1,203 @@ +
    +

    User Dashboard

    +
      +
    • + {{ tab.title | titlecase }} + + +

      + These are global settings that are bound to your account. +

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

      Manga

      +
      +   + Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. + Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. + +
      + +
      +   + How to scale the image to your screen. + How to scale the image to your screen. + +
      + +
      +   + How to split a full width image (ie both left and right images are combined) + How to split a full width image (ie both left and right images are combined) + +
      +
      + + +
      +
      + +
      +
      + + +
      +
      + + +
      +
      +
      +
      +

      Books

      +
      + +
      +
      + + +
      +
      + + +
      +
      +
      +
      +   + Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. + Direction to click to move to next page. Right to Left means you click on left side of screen to move to next page. + +
      +
      +   + Should the sides of the book reader screen allow tapping on it to move to prev/next page + Should the sides of the book reader screen allow tapping on it to move to prev/next page +
      +
      + + +
      +
      + + +
      +
      +
      +
      +   + Font familty to load up. Default will load the book's default font + Font familty to load up. Default will load the book's default font + +
      +
      + + +
      +
      +   + How much spacing between the lines of the book + How much spacing between the lines of the book + +
      + +
      +   + How much spacing on each side of the screen. This will override to 0 on mobile devices regardless of this setting. + How much spacing on each side of the screen. This will override to 0 on mobile devices regardless of this setting. + +
      + +
      + + +
      +
      +       +       + + + + +

      Change your Password

      + +
      +
      + + +
      +
      + This field is required +
      +
      +
      +
      + + +
      +
      + Passwords must match +
      +
      + This field is required +
      +
      +
      +
      + + +
      +
      +       +       +       +       + + + +       +
      • +
    + +
    +
    \ No newline at end of file diff --git a/UI/Web/src/app/user-preferences/user-preferences.component.scss b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.scss similarity index 100% rename from UI/Web/src/app/user-preferences/user-preferences.component.scss rename to UI/Web/src/app/user-settings/user-preferences/user-preferences.component.scss diff --git a/UI/Web/src/app/user-preferences/user-preferences.component.ts b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts similarity index 87% rename from UI/Web/src/app/user-preferences/user-preferences.component.ts rename to UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts index 9254967d5..0e6151e80 100644 --- a/UI/Web/src/app/user-preferences/user-preferences.component.ts +++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts @@ -2,13 +2,14 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { ToastrService } from 'ngx-toastr'; import { take } from 'rxjs/operators'; -import { pageSplitOptions, Preferences, readingDirections, scalingOptions, readingModes } from '../_models/preferences/preferences'; -import { User } from '../_models/user'; -import { AccountService } from '../_services/account.service'; import { Options } from '@angular-slider/ngx-slider'; -import { BookService } from '../book-reader/book.service'; -import { NavService } from '../_services/nav.service'; import { Title } from '@angular/platform-browser'; +import { BookService } from 'src/app/book-reader/book.service'; +import { readingDirections, scalingOptions, pageSplitOptions, readingModes, Preferences } from 'src/app/_models/preferences/preferences'; +import { User } from 'src/app/_models/user'; +import { AccountService } from 'src/app/_services/account.service'; +import { NavService } from 'src/app/_services/nav.service'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user-preferences', @@ -48,8 +49,25 @@ export class UserPreferencesComponent implements OnInit, OnDestroy { }; fontFamilies: Array = []; - constructor(private accountService: AccountService, private toastr: ToastrService, private bookService: BookService, private navService: NavService, private titleService: Title) { + //tabs = ['Preferences', 'Bookmarks']; + tabs: Array<{title: string, fragment: string}> = [ + {title: 'Preferences', fragment: ''}, + {title: 'Bookmarks', fragment: 'bookmarks'}, + ]; + active = this.tabs[0]; + + constructor(private accountService: AccountService, private toastr: ToastrService, private bookService: BookService, + private navService: NavService, private titleService: Title, private route: ActivatedRoute) { this.fontFamilies = this.bookService.getFontFamilies(); + + this.route.fragment.subscribe(frag => { + const tab = this.tabs.filter(item => item.fragment === frag); + if (tab.length > 0) { + this.active = tab[0]; + } else { + this.active = this.tabs[0]; // Default to first tab + } + }); } ngOnInit(): void { @@ -159,5 +177,4 @@ export class UserPreferencesComponent implements OnInit, OnDestroy { this.resetPasswordErrors = err; })); } - } diff --git a/UI/Web/src/app/user-settings/user-settings-routing.module.ts b/UI/Web/src/app/user-settings/user-settings-routing.module.ts new file mode 100644 index 000000000..b113fae64 --- /dev/null +++ b/UI/Web/src/app/user-settings/user-settings-routing.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { AuthGuard } from '../_guards/auth.guard'; +import { UserPreferencesComponent } from './user-preferences/user-preferences.component'; + +const routes: Routes = [ + {path: '**', component: UserPreferencesComponent, pathMatch: 'full'}, + { + runGuardsAndResolvers: 'always', + canActivate: [AuthGuard], + children: [ + {path: '', component: UserPreferencesComponent, pathMatch: 'full'}, + ] + } +]; + + +@NgModule({ + imports: [RouterModule.forChild(routes), ], + exports: [RouterModule] +}) +export class UserSettingsRoutingModule { } diff --git a/UI/Web/src/app/user-settings/user-settings.module.ts b/UI/Web/src/app/user-settings/user-settings.module.ts new file mode 100644 index 000000000..c5359e433 --- /dev/null +++ b/UI/Web/src/app/user-settings/user-settings.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SeriesBookmarksComponent } from './series-bookmarks/series-bookmarks.component'; +import { UserPreferencesComponent } from './user-preferences/user-preferences.component'; +import { NgbAccordionModule, NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; +import { ReactiveFormsModule } from '@angular/forms'; +import { NgxSliderModule } from '@angular-slider/ngx-slider'; +import { UserSettingsRoutingModule } from './user-settings-routing.module'; + + + +@NgModule({ + declarations: [ + SeriesBookmarksComponent, + UserPreferencesComponent + ], + imports: [ + CommonModule, + ReactiveFormsModule, + NgbAccordionModule, + NgbNavModule, + NgbTooltipModule, + NgxSliderModule, + UserSettingsRoutingModule, + ] +}) +export class UserSettingsModule { } diff --git a/UI/Web/src/assets/themes/dark.scss b/UI/Web/src/assets/themes/dark.scss index 185c3671e..62e5b1c94 100644 --- a/UI/Web/src/assets/themes/dark.scss +++ b/UI/Web/src/assets/themes/dark.scss @@ -20,7 +20,10 @@ $dark-item-accent-bg: #292d32; } a, .btn-link { - color: #4ac694; + color: $dark-hover-color; + > i { + color: $dark-hover-color !important; + } } a.btn {