From 62afacae55415a013819eec6a18fe1f3313c62fb Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Wed, 16 Mar 2022 18:44:24 -0500 Subject: [PATCH] Side nav (#1155) * adding back side-nav * Event Widget Update (#1098) * Took care of some notes in the code * Fixed an issue where Extra might get flagged as special too early, if in a word like Extraordinary * Moved Tag cleanup code into Scanner service. Added a SplitQuery to another heavy API. Refactored Scan loop to remove parallelism and use async instead. * Lots of rework on the codebase to support detailed messages and easier management of message sending. Need to take a break on this work. * Progress is being made, but slowly. Code is broken in this commit. * Progress is being made, but slowly. Code is broken in this commit. * Fixed merge issue * Fixed unit tests * CoverUpdate is now hooked into new ProgressEvent structure * Refactored code to remove custom observables and have everything use standard messages$ * Refactored a ton of instances to NotificationProgressEvent style and tons of the UI to respect that too. UI is still a bit buggy, but wholistically the work is done. * Working much better. Sometimes events come in too fast. Currently cover update progress doesn't display on UI * Fixed unit tests * Removed SignalREvent to minimize internal event types. Updated the UI to use progress bars. Finished SiteThemeService. * Merged metadata refresh progress events and changed library scan events to merge cleaner in the UI * Changed RefreshMetadataProgress to CoverUpdateProgress to reflect the event better. * Theme Cleanup (#1089) * Fixed e-ink theme not properly applying correctly * Fixed some seed changes. Changed card checkboxes to use our themed ones * Fixed recently added carousel not going to recently-added page * Fixed an issue where no results found would show when searching for a library name * Cleaned up list a bit, typeahead dropdown still needs work * Added a TODO to streamline series-card component * Removed ng-lazyload-image module since we don't use it. We use lazysizes * Darken card on hover * Fixing accordion focus style * ux pass updates - Fixed typeahead width - Fixed changelog download buttons - Fixed a select - Fixed various input box-shadows - Fixed all anchors to only have underline on hover - Added navtab hover and active effects * more ux pass - Fixed spacing on theme cards - Fixed some light theme issues - Exposed text-muted-color for theme card subtitle color * UX pass fixes - Changed back to bright green for primary on dark theme - Changed fa icon to black on e-ink * Merged changelog component * Fixed anchor buttons text decoration * Changed nav tabs to have a background color instead of open active state * When user is not authenticated, make sure we set default theme (dark) * Cleanup on carousel * Updated Users tab to use small buttons with icons to align with Library tab * Cleaned up brand to not underline, removed default link underline on hover in dropdown and pill tabs * Fixed collection detail posters not rendering Co-authored-by: Robbie Davis * Bump versions by dotnet-bump-version. * Tweaked some of the emitting code * Some css, but pretty bad. Robbie please save me * Removed a todo * styling update * Only send filename on FileScanProgress * Some console.log spam cleanup * Various updates * Show events widget activity based on activeEvents * progress bar color updates * Code cleanup Co-authored-by: Robbie Davis * Bump versions by dotnet-bump-version. * Scanner event hub fix (#1099) * Scanner event hub fix - Fixed an issue where the scanner would error when adding a new series because the series didn't have a library name yet. (develop) * Removing library.type * Bump versions by dotnet-bump-version. * Workflow update to add nightly versions (#1100) # Changed - Changed: Changed automated workflow to release individual nightly versions on dockerhub * Bump versions by dotnet-bump-version. * Updating GA to parse version (#1101) * Bump versions by dotnet-bump-version. * GA Fixes (#1103) **Strictly Repo Changes** # Fixed - Fixed: Fixed an issue where patch version was not being added to docker tag. * Bump versions by dotnet-bump-version. * Fixed specials being misaligned (#1106) # Fixed - Fixed: Fixed issue with specials not being properly aligned (develop) * Bump versions by dotnet-bump-version. * Bugfix/ux pass 2 (#1107) * Adding margin bottom to series detail tabs * Styling tag badges with green on dark - Added 3 new css vars * Removing underline from readmore * Fixing see more to be on one line * adding gutter to see more * Changing queue toasts to info * adding api key tooltip * Updating active accordion on user preference. * Fixing search bar and close btn position * Fixed a bug where entering book reader in dark mode then closing out, would leave you in a broken white state. * Fixed broken wiki links Co-authored-by: Joseph Milazzo * Bump versions by dotnet-bump-version. * Series Detail Refactor (#1118) * Fixed a bug where reading list and collection's summary wouldn't render newlines * Moved all the logic in the UI for Series Detail into the backend (messy code). We are averaging 400ms max with much optimizations available. Next step is to refactor out of controller and provide unit tests. * Unit tests for CleanSpecialTitle * Laid out foundation for testing major code in SeriesController. * Refactored code so that read doesn't need to be disabled on page load. SeriesId doesn't need the series to actually load. * Removed old property from Volume * Changed tagbadge font size to rem. * Refactored some methods from SeriesController.cs into SeriesService.cs * UpdateRating unit tested * Wrote unit tests for SeriesDetail * Worked up some code where books are rendered only as volumes. However, looks like I will need to use Chapters to better support series_index as floats. * Refactored Series Detail to change Volume Name on Book libraries to have book name and series_index. * Some cleanup on the code * DeleteMultipleSeries test is hard. Going to skip. * Removed some debug code and make all tabs Books for Book library Type * Bump versions by dotnet-bump-version. * Tachiyomi Bugfix (#1119) * Updated the dependencies for .NET 6.0.2 * Fixed a bad prev chapter logic where we would bleed into chapters from last volume instead of specials. * Fixed the get prev chapter code to properly walk the order according to documentation and updated some bad test cases * Updated side nav to float a bit and added user settings to it. * Refactored the code to hide/show sidenav to be more angular and decoupled * Moved Changelog out of admin dashboard and into a dedicated page in user menu. Added a wiki link from user menu * Introduced a side nav item for rendering each item and refactored code to use it. * Added a filter of side nav when there are more than 10 libraries. Added some themeing overrides for side nav. * Cleaned up the template code for side nav item so if there is no link, we don't generate that html directive * Refactored side nav into a module and migrated a few pipes into a pipe module for easy re-use * Added companion bar on reading list and collection. Updated modules to load pages and make side nav items clickable as anchors, so new tab works. * Moved metadata filter into separate component/module and the button in the companion bar. Needs cleanup. * Finished cleanup and refactoring of metadata filter into separate component. Removed filtering from Collections as it doesn't work and wasn't hooked up. * Tweaked the css on carousel component * Added to library detail and series-detail * Fixes and css vars * Stop destroying sidenav, animaton timing * Integrated side nav on the rest of the pages * Navbar now collapses to icons * mobile sidenav start * more mobile fixes * mobile tweaks * light and e-ink theme updates * white and eink dropdown color fixes * plex inspired side-nav * theme fixes * Making spacing more uniform across app * More fixes * fixing spacing on cards * actionable fix for sidenav * no scroll on mobile when sidenav is open * hide sidenav on pages * Adding card spacing * Adding ability to remove sidenav when in a reader * tidying up sidenav toggles * side-nav mobile updates * fixing up other themes * overlay fixes * Cleaned up the code to make the observables have better names. Removed a bunch of pointless subscriptions. Cleaned up methods that werent needed. Added jsdocs to help ensure the understandability of the 2 states for the side nav. * Integrated a highlight effect on side nav. Fixed a ton of places where the nav was being hidden when it shouldn't. * Fixed where active state wasn't working on all urls * misc fixes - smaller hamburger - z-index fixes - active fixes * Revert "Merge branch 'develop' into feature/side-nav-upgrade" This reverts commit 76b0d15a984692874e0cb57e821686ea703144cf, reversing changes made to b3ed55395473aa35577500596a211ad22a42631b. * Fixing edit-series modal spacing * Give the ability to jump to a library from admin manage libraries page * Fixed a bug with highlighting active item on side nav * Moved localized series title to companion bar via subtitle * Removed old title * Fixed a bug where clicking a link would reload the whole app, styling fixes on filter, fixed issue with initial load not setting active state, adjusted styles on active style. * code cleanup Co-authored-by: Robbie Davis --- .github/workflows/sonar-scan.yml | 2 +- API.Tests/Services/ReaderServiceTests.cs | 176 ------ API/Controllers/AccountController.cs | 16 +- API/Controllers/ReaderController.cs | 18 +- API/DTOs/Account/InviteUserDto.cs | 2 + API/DTOs/Account/InviteUserResponse.cs | 13 - API/DTOs/Filtering/FilterDto.cs | 24 +- API/DTOs/Reader/ChapterInfoDto.cs | 1 - API/Data/Repositories/ChapterRepository.cs | 8 +- API/Data/Repositories/SeriesRepository.cs | 16 +- API/Services/EmailService.cs | 8 +- API/Services/ReaderService.cs | 38 +- Kavita.Common/Kavita.Common.csproj | 2 +- .../src/app/_models/invite-user-response.ts | 10 - UI/Web/src/app/_services/account.service.ts | 9 +- UI/Web/src/app/_services/nav.service.ts | 52 +- UI/Web/src/app/admin/admin.module.ts | 7 +- .../admin/dashboard/dashboard.component.html | 12 +- .../admin/dashboard/dashboard.component.ts | 4 +- .../invite-user/invite-user.component.html | 24 +- .../invite-user/invite-user.component.ts | 23 +- .../manage-library.component.html | 2 +- .../app/all-series/all-series.component.html | 10 +- .../app/all-series/all-series.component.ts | 6 +- .../announcements-routing.module.ts | 23 + .../announcements.component.html | 3 + .../announcements.component.scss | 0 .../announcements/announcements.component.ts | 15 + .../app/announcements/announcements.module.ts | 23 + .../changelog/changelog.component.html | 2 +- .../changelog/changelog.component.scss | 0 .../changelog/changelog.component.ts | 0 UI/Web/src/app/app-routing.module.ts | 8 + UI/Web/src/app/app.component.html | 9 +- UI/Web/src/app/app.component.scss | 39 ++ UI/Web/src/app/app.component.ts | 1 - UI/Web/src/app/app.module.ts | 20 +- .../src/app/book-reader/book-reader.module.ts | 4 +- .../book-reader/book-reader.component.ts | 2 + .../card-details-modal.component.html | 14 +- .../edit-series-modal.component.html | 6 +- .../card-detail-layout.component.html | 362 +----------- .../card-detail-layout.component.ts | 531 +---------------- .../cards/card-item/card-item.component.scss | 1 - UI/Web/src/app/cards/cards.module.ts | 8 +- .../carousel-reel.component.scss | 11 +- .../all-collections.component.html | 9 +- .../all-collections.component.ts | 5 +- .../collection-detail.component.ts | 2 +- .../src/app/collections/collections.module.ts | 2 + .../app/dashboard/dashboard.component.html | 24 +- .../library-detail.component.html | 13 +- .../library-detail.component.ts | 9 +- UI/Web/src/app/library/library.component.html | 10 +- UI/Web/src/app/library/library.component.ts | 6 +- .../app/manga-reader/_models/chapter-info.ts | 2 - .../manga-reader/manga-reader.component.html | 44 +- .../manga-reader/manga-reader.component.scss | 6 +- .../manga-reader/manga-reader.component.ts | 36 +- .../app/metadata-filter/filter-settings.ts | 21 + .../metadata-filter.component.html | 338 +++++++++++ .../metadata-filter.component.scss | 0 .../metadata-filter.component.ts | 555 ++++++++++++++++++ .../metadata-filter/metadata-filter.module.ts | 27 + .../app/nav-header/nav-header.component.html | 7 +- .../app/nav-header/nav-header.component.scss | 9 + .../app/nav-header/nav-header.component.ts | 5 +- UI/Web/src/app/on-deck/on-deck.component.html | 19 + UI/Web/src/app/on-deck/on-deck.component.scss | 0 UI/Web/src/app/on-deck/on-deck.component.ts | 133 +++++ UI/Web/src/app/pipe/pipe.module.ts | 7 +- .../app/{shared => pipe}/safe-html.pipe.ts | 0 .../reading-list-detail.component.html | 20 +- .../app/reading-list/reading-list.module.ts | 4 +- .../reading-list.router.module.ts | 6 +- .../reading-lists.component.html | 9 +- .../recently-added.component.html | 8 +- .../recently-added.component.ts | 7 +- .../series-detail.component.html | 25 +- .../series-detail/series-detail.component.ts | 19 +- .../app/shared/_services/utility.service.ts | 22 +- UI/Web/src/app/shared/shared.module.ts | 7 +- .../side-nav-companion-bar.component.html | 21 + .../side-nav-companion-bar.component.scss | 0 .../side-nav-companion-bar.component.ts | 47 ++ .../side-nav-item.component.html | 29 + .../side-nav-item.component.scss | 206 +++++++ .../side-nav-item/side-nav-item.component.ts | 72 +++ .../sidenav/side-nav/side-nav.component.html | 31 + .../sidenav/side-nav/side-nav.component.scss | 63 ++ .../sidenav/side-nav/side-nav.component.ts | 70 +++ UI/Web/src/app/sidenav/sidenav.module.ts | 34 ++ UI/Web/src/app/typeahead/typeahead.module.ts | 4 +- .../app/user-login/user-login.component.ts | 2 + .../api-key/api-key.component.html | 2 +- .../user-preferences.component.html | 73 +-- .../app/user-settings/user-settings.module.ts | 12 +- UI/Web/src/styles.scss | 5 +- UI/Web/src/theme/components/_anchors.scss | 5 +- UI/Web/src/theme/components/_carousel.scss | 3 + UI/Web/src/theme/components/_dropdown.scss | 2 +- UI/Web/src/theme/components/_modal.scss | 6 +- UI/Web/src/theme/components/_navbar.scss | 1 + UI/Web/src/theme/components/_pagination.scss | 14 + UI/Web/src/theme/components/_sidenav.scss | 52 ++ UI/Web/src/theme/components/_tagbadge.scss | 4 +- UI/Web/src/theme/themes/dark.scss | 28 +- UI/Web/src/theme/themes/e-ink.scss | 24 +- UI/Web/src/theme/themes/light.scss | 23 + 109 files changed, 2371 insertions(+), 1443 deletions(-) delete mode 100644 API/DTOs/Account/InviteUserResponse.cs delete mode 100644 UI/Web/src/app/_models/invite-user-response.ts create mode 100644 UI/Web/src/app/announcements/announcements-routing.module.ts create mode 100644 UI/Web/src/app/announcements/announcements.component.html create mode 100644 UI/Web/src/app/announcements/announcements.component.scss create mode 100644 UI/Web/src/app/announcements/announcements.component.ts create mode 100644 UI/Web/src/app/announcements/announcements.module.ts rename UI/Web/src/app/{admin => announcements}/changelog/changelog.component.html (92%) rename UI/Web/src/app/{admin => announcements}/changelog/changelog.component.scss (100%) rename UI/Web/src/app/{admin => announcements}/changelog/changelog.component.ts (100%) create mode 100644 UI/Web/src/app/metadata-filter/filter-settings.ts create mode 100644 UI/Web/src/app/metadata-filter/metadata-filter.component.html create mode 100644 UI/Web/src/app/metadata-filter/metadata-filter.component.scss create mode 100644 UI/Web/src/app/metadata-filter/metadata-filter.component.ts create mode 100644 UI/Web/src/app/metadata-filter/metadata-filter.module.ts create mode 100644 UI/Web/src/app/on-deck/on-deck.component.html create mode 100644 UI/Web/src/app/on-deck/on-deck.component.scss create mode 100644 UI/Web/src/app/on-deck/on-deck.component.ts rename UI/Web/src/app/{shared => pipe}/safe-html.pipe.ts (100%) create mode 100644 UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.html create mode 100644 UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.scss create mode 100644 UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.ts create mode 100644 UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html create mode 100644 UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.scss create mode 100644 UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts create mode 100644 UI/Web/src/app/sidenav/side-nav/side-nav.component.html create mode 100644 UI/Web/src/app/sidenav/side-nav/side-nav.component.scss create mode 100644 UI/Web/src/app/sidenav/side-nav/side-nav.component.ts create mode 100644 UI/Web/src/app/sidenav/sidenav.module.ts create mode 100644 UI/Web/src/theme/components/_carousel.scss create mode 100644 UI/Web/src/theme/components/_sidenav.scss diff --git a/.github/workflows/sonar-scan.yml b/.github/workflows/sonar-scan.yml index e997a9e8d..ec7837fdc 100644 --- a/.github/workflows/sonar-scan.yml +++ b/.github/workflows/sonar-scan.yml @@ -230,7 +230,7 @@ jobs: severity: info description: v${{steps.get-version.outputs.assembly-version}} - ${{ steps.findPr.outputs.title }} details: '${{ steps.parse-body.outputs.BODY }}' - text: <@&950058626658234398> A new nightly build has been released for docker. + text: <@&939225459156217917> <@&939225350775406643> A new nightly build has been released for docker. webhookUrl: ${{ secrets.DISCORD_DOCKER_UPDATE_URL }} stable: diff --git a/API.Tests/Services/ReaderServiceTests.cs b/API.Tests/Services/ReaderServiceTests.cs index 61fad6e0a..a66863487 100644 --- a/API.Tests/Services/ReaderServiceTests.cs +++ b/API.Tests/Services/ReaderServiceTests.cs @@ -1650,61 +1650,6 @@ public class ReaderServiceTests Assert.Equal("Some Special Title", nextChapter.Range); } - [Fact] - public async Task GetContinuePoint_ShouldReturnFirstVolumeChapter_WhenPreExistingProgress() - { - var series = new Series() - { - Name = "Test", - Library = new Library() - { - Name = "Test LIb", - Type = LibraryType.Manga, - }, - Volumes = new List() - { - EntityFactory.CreateVolume("0", new List() - { - EntityFactory.CreateChapter("230", false, new List(), 1), - //EntityFactory.CreateChapter("231", false, new List(), 1), (added later) - }), - EntityFactory.CreateVolume("1", new List() - { - EntityFactory.CreateChapter("1", false, new List(), 1), - EntityFactory.CreateChapter("2", false, new List(), 1), - }), - EntityFactory.CreateVolume("2", new List() - { - EntityFactory.CreateChapter("0", false, new List(), 1), - //EntityFactory.CreateChapter("14.9", false, new List(), 1), (added later) - }), - } - }; - _context.Series.Add(series); - - _context.AppUser.Add(new AppUser() - { - UserName = "majora2007" - }); - - await _context.SaveChangesAsync(); - - - var readerService = new ReaderService(_unitOfWork, Substitute.For>()); - var user = await _unitOfWork.UserRepository.GetUserByIdAsync(1, AppUserIncludes.Progress); - await readerService.MarkSeriesAsRead(user, 1); - await _context.SaveChangesAsync(); - - // Add 2 new unread series to the Series - series.Volumes[0].Chapters.Add(EntityFactory.CreateChapter("231", false, new List(), 1)); - series.Volumes[2].Chapters.Add(EntityFactory.CreateChapter("14.9", false, new List(), 1)); - _context.Series.Attach(series); - await _context.SaveChangesAsync(); - - var nextChapter = await readerService.GetContinuePoint(1, 1); - Assert.Equal("14.9", nextChapter.Range); - } - #endregion #region MarkChaptersUntilAsRead @@ -1838,126 +1783,5 @@ public class ReaderServiceTests #endregion - #region MarkSeriesAsRead - [Fact] - public async Task MarkSeriesAsReadTest() - { - await ResetDB(); - - _context.Series.Add(new Series() - { - Name = "Test", - Library = new Library() { - Name = "Test LIb", - Type = LibraryType.Manga, - }, - Volumes = new List() - { - new Volume() - { - Chapters = new List() - { - new Chapter() - { - Pages = 1 - }, - new Chapter() - { - Pages = 2 - } - } - }, - new Volume() - { - Chapters = new List() - { - new Chapter() - { - Pages = 1 - }, - new Chapter() - { - Pages = 2 - } - } - } - } - }); - - _context.AppUser.Add(new AppUser() - { - UserName = "majora2007" - }); - - await _context.SaveChangesAsync(); - - var readerService = new ReaderService(_unitOfWork, Substitute.For>()); - - await readerService.MarkSeriesAsRead(await _unitOfWork.UserRepository.GetUserByIdAsync(1, AppUserIncludes.Progress), 1); - await _context.SaveChangesAsync(); - - Assert.Equal(4, (await _unitOfWork.UserRepository.GetUserByIdAsync(1, AppUserIncludes.Progress)).Progresses.Count); - } - - - #endregion - - #region MarkSeriesAsUnread - - [Fact] - public async Task MarkSeriesAsUnreadTest() - { - await ResetDB(); - - _context.Series.Add(new Series() - { - Name = "Test", - Library = new Library() { - Name = "Test LIb", - Type = LibraryType.Manga, - }, - Volumes = new List() - { - new Volume() - { - Chapters = new List() - { - new Chapter() - { - Pages = 1 - }, - new Chapter() - { - Pages = 2 - } - } - } - } - }); - - _context.AppUser.Add(new AppUser() - { - UserName = "majora2007" - }); - - await _context.SaveChangesAsync(); - - var readerService = new ReaderService(_unitOfWork, Substitute.For>()); - - var volumes = (await _unitOfWork.VolumeRepository.GetVolumes(1)).ToList(); - readerService.MarkChaptersAsRead(await _unitOfWork.UserRepository.GetUserByIdAsync(1, AppUserIncludes.Progress), 1, volumes.First().Chapters); - - await _context.SaveChangesAsync(); - Assert.Equal(2, (await _unitOfWork.UserRepository.GetUserByIdAsync(1, AppUserIncludes.Progress)).Progresses.Count); - - await readerService.MarkSeriesAsUnread(await _unitOfWork.UserRepository.GetUserByIdAsync(1, AppUserIncludes.Progress), 1); - await _context.SaveChangesAsync(); - - var progresses = (await _unitOfWork.UserRepository.GetUserByIdAsync(1, AppUserIncludes.Progress)).Progresses; - Assert.Equal(0, progresses.Max(p => p.PagesRead)); - Assert.Equal(2, progresses.Count); - } - - #endregion } diff --git a/API/Controllers/AccountController.cs b/API/Controllers/AccountController.cs index 7fc8769e7..913f53133 100644 --- a/API/Controllers/AccountController.cs +++ b/API/Controllers/AccountController.cs @@ -338,12 +338,6 @@ namespace API.Controllers - /// - /// Invites a user to the server. Will generate a setup link for continuing setup. If the server is not accessible, no - /// email will be sent. - /// - /// - /// [Authorize(Policy = "RequireAdminRole")] [HttpPost("invite")] public async Task> InviteUser(InviteUserDto dto) @@ -423,9 +417,7 @@ namespace API.Controllers var emailLink = GenerateEmailLink(token, "confirm-email", dto.Email); _logger.LogCritical("[Invite User]: Email Link for {UserName}: {Link}", user.UserName, emailLink); - var host = _environment.IsDevelopment() ? "localhost:4200" : Request.Host.ToString(); - var accessible = await _emailService.CheckIfAccessible(host); - if (accessible) + if (dto.SendEmail) { await _emailService.SendConfirmationEmail(new ConfirmationEmailDto() { @@ -434,11 +426,7 @@ namespace API.Controllers ServerConfirmationLink = emailLink }); } - return Ok(new InviteUserResponse - { - EmailLink = emailLink, - EmailSent = accessible - }); + return Ok(emailLink); } catch (Exception) { diff --git a/API/Controllers/ReaderController.cs b/API/Controllers/ReaderController.cs index fa3be9c05..a8a34bdfd 100644 --- a/API/Controllers/ReaderController.cs +++ b/API/Controllers/ReaderController.cs @@ -109,7 +109,14 @@ namespace API.Controllers public async Task MarkRead(MarkReadDto markReadDto) { var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername(), AppUserIncludes.Progress); - await _readerService.MarkSeriesAsRead(user, markReadDto.SeriesId); + var volumes = await _unitOfWork.VolumeRepository.GetVolumes(markReadDto.SeriesId); + user.Progresses ??= new List(); + foreach (var volume in volumes) + { + _readerService.MarkChaptersAsRead(user, markReadDto.SeriesId, volume.Chapters); + } + + _unitOfWork.UserRepository.Update(user); if (await _unitOfWork.CommitAsync()) { @@ -130,7 +137,14 @@ namespace API.Controllers public async Task MarkUnread(MarkReadDto markReadDto) { var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername(), AppUserIncludes.Progress); - await _readerService.MarkSeriesAsUnread(user, markReadDto.SeriesId); + var volumes = await _unitOfWork.VolumeRepository.GetVolumes(markReadDto.SeriesId); + user.Progresses ??= new List(); + foreach (var volume in volumes) + { + _readerService.MarkChaptersAsUnread(user, markReadDto.SeriesId, volume.Chapters); + } + + _unitOfWork.UserRepository.Update(user); if (await _unitOfWork.CommitAsync()) { diff --git a/API/DTOs/Account/InviteUserDto.cs b/API/DTOs/Account/InviteUserDto.cs index 42d4bdf8e..04c9c1103 100644 --- a/API/DTOs/Account/InviteUserDto.cs +++ b/API/DTOs/Account/InviteUserDto.cs @@ -16,4 +16,6 @@ public class InviteUserDto /// A list of libraries to grant access to /// public IList Libraries { get; init; } + + public bool SendEmail { get; init; } = true; } diff --git a/API/DTOs/Account/InviteUserResponse.cs b/API/DTOs/Account/InviteUserResponse.cs deleted file mode 100644 index 9387b5492..000000000 --- a/API/DTOs/Account/InviteUserResponse.cs +++ /dev/null @@ -1,13 +0,0 @@ -namespace API.DTOs.Account; - -public class InviteUserResponse -{ - /// - /// Email link used to setup the user account - /// - public string EmailLink { get; set; } - /// - /// Was an email sent (ie is this server accessible) - /// - public bool EmailSent { get; set; } -} diff --git a/API/DTOs/Filtering/FilterDto.cs b/API/DTOs/Filtering/FilterDto.cs index 90ad52759..fba9a7493 100644 --- a/API/DTOs/Filtering/FilterDto.cs +++ b/API/DTOs/Filtering/FilterDto.cs @@ -25,51 +25,51 @@ namespace API.DTOs.Filtering /// public IList Genres { get; init; } = new List(); /// - /// A list of Writers to restrict search to. Defaults to all Writers by passing an empty list + /// A list of Writers to restrict search to. Defaults to all genres by passing an empty list /// public IList Writers { get; init; } = new List(); /// - /// A list of Penciller ids to restrict search to. Defaults to all Pencillers by passing an empty list + /// A list of Penciller ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Penciller { get; init; } = new List(); /// - /// A list of Inker ids to restrict search to. Defaults to all Inkers by passing an empty list + /// A list of Inker ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Inker { get; init; } = new List(); /// - /// A list of Colorist ids to restrict search to. Defaults to all Colorists by passing an empty list + /// A list of Colorist ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Colorist { get; init; } = new List(); /// - /// A list of Letterer ids to restrict search to. Defaults to all Letterers by passing an empty list + /// A list of Letterer ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Letterer { get; init; } = new List(); /// - /// A list of CoverArtist ids to restrict search to. Defaults to all CoverArtists by passing an empty list + /// A list of CoverArtist ids to restrict search to. Defaults to all genres by passing an empty list /// public IList CoverArtist { get; init; } = new List(); /// - /// A list of Editor ids to restrict search to. Defaults to all Editors by passing an empty list + /// A list of Editor ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Editor { get; init; } = new List(); /// - /// A list of Publisher ids to restrict search to. Defaults to all Publishers by passing an empty list + /// A list of Publisher ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Publisher { get; init; } = new List(); /// - /// A list of Character ids to restrict search to. Defaults to all Characters by passing an empty list + /// A list of Character ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Character { get; init; } = new List(); /// - /// A list of Translator ids to restrict search to. Defaults to all Translatorss by passing an empty list + /// A list of Translator ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Translators { get; init; } = new List(); /// - /// A list of Collection Tag ids to restrict search to. Defaults to all Collection Tags by passing an empty list + /// A list of Collection Tag ids to restrict search to. Defaults to all genres by passing an empty list /// public IList CollectionTags { get; init; } = new List(); /// - /// A list of Tag ids to restrict search to. Defaults to all Tags by passing an empty list + /// A list of Tag ids to restrict search to. Defaults to all genres by passing an empty list /// public IList Tags { get; init; } = new List(); /// diff --git a/API/DTOs/Reader/ChapterInfoDto.cs b/API/DTOs/Reader/ChapterInfoDto.cs index 9f33bada7..7c847d926 100644 --- a/API/DTOs/Reader/ChapterInfoDto.cs +++ b/API/DTOs/Reader/ChapterInfoDto.cs @@ -12,7 +12,6 @@ namespace API.DTOs.Reader public MangaFormat SeriesFormat { get; set; } public int SeriesId { get; set; } public int LibraryId { get; set; } - public LibraryType LibraryType { get; set; } public string ChapterTitle { get; set; } = string.Empty; public int Pages { get; set; } public string FileName { get; set; } diff --git a/API/Data/Repositories/ChapterRepository.cs b/API/Data/Repositories/ChapterRepository.cs index ab3684fa0..330aa4b5e 100644 --- a/API/Data/Repositories/ChapterRepository.cs +++ b/API/Data/Repositories/ChapterRepository.cs @@ -81,8 +81,7 @@ public class ChapterRepository : IChapterRepository data.TitleName, SeriesFormat = series.Format, SeriesName = series.Name, - series.LibraryId, - LibraryType = series.Library.Type + series.LibraryId }) .Select(data => new ChapterInfoDto() { @@ -90,13 +89,12 @@ public class ChapterRepository : IChapterRepository VolumeNumber = data.VolumeNumber + string.Empty, VolumeId = data.VolumeId, IsSpecial = data.IsSpecial, - SeriesId = data.SeriesId, + SeriesId =data.SeriesId, SeriesFormat = data.SeriesFormat, SeriesName = data.SeriesName, LibraryId = data.LibraryId, Pages = data.Pages, - ChapterTitle = data.TitleName, - LibraryType = data.LibraryType + ChapterTitle = data.TitleName }) .AsNoTracking() .AsSplitQuery() diff --git a/API/Data/Repositories/SeriesRepository.cs b/API/Data/Repositories/SeriesRepository.cs index d70681b46..efe2f1a27 100644 --- a/API/Data/Repositories/SeriesRepository.cs +++ b/API/Data/Repositories/SeriesRepository.cs @@ -79,8 +79,8 @@ public interface ISeriesRepository /// Task AddSeriesModifiers(int userId, List series); Task GetSeriesCoverImageAsync(int seriesId); - Task> GetOnDeck(int userId, int libraryId, UserParams userParams, FilterDto filter, bool cutoffOnDate = true); - Task> GetRecentlyAdded(int libraryId, int userId, UserParams userParams, FilterDto filter); + Task> GetOnDeck(int userId, int libraryId, UserParams userParams, FilterDto filter); + Task> GetRecentlyAdded(int libraryId, int userId, UserParams userParams, FilterDto filter); // NOTE: Probably put this in LibraryRepo Task GetSeriesMetadata(int seriesId); Task> GetSeriesDtoForCollectionAsync(int collectionId, int userId, UserParams userParams); Task> GetFilesForSeries(int seriesId); @@ -593,11 +593,11 @@ public class SeriesRepository : ISeriesRepository /// Pagination information /// Optional (default null) filter on query /// - public async Task> GetOnDeck(int userId, int libraryId, UserParams userParams, FilterDto filter, bool cutoffOnDate = true) + public async Task> GetOnDeck(int userId, int libraryId, UserParams userParams, FilterDto filter) { //var allSeriesWithProgress = await _context.AppUserProgresses.Select(p => p.SeriesId).ToListAsync(); //var allChapters = await GetChapterIdsForSeriesAsync(allSeriesWithProgress); - var cutoffProgressPoint = DateTime.Now - TimeSpan.FromDays(30); + var cuttoffProgressPoint = DateTime.Now - TimeSpan.FromDays(30); var query = (await CreateFilteredSearchQueryable(userId, libraryId, filter)) .Join(_context.AppUserProgresses, s => s.Id, progress => progress.SeriesId, (s, progress) => new @@ -612,12 +612,8 @@ public class SeriesRepository : ISeriesRepository // This is only taking into account chapters that have progress on them, not all chapters in said series LastChapterCreated = _context.Chapter.Where(c => progress.ChapterId == c.Id).Max(c => c.Created) //LastChapterCreated = _context.Chapter.Where(c => allChapters.Contains(c.Id)).Max(c => c.Created) - }); - if (cutoffOnDate) - { - query = query.Where(d => d.LastReadingProgress >= cutoffProgressPoint); - } - + }) + .Where(d => d.LastReadingProgress >= cuttoffProgressPoint); // I think I need another Join statement. The problem is the chapters are still limited to progress diff --git a/API/Services/EmailService.cs b/API/Services/EmailService.cs index c5ba90464..ab2c52a2c 100644 --- a/API/Services/EmailService.cs +++ b/API/Services/EmailService.cs @@ -98,7 +98,7 @@ public class EmailService : IEmailService return await SendEmailWithPost(emailLink + "/api/email/email-password-reset", data); } - private static async Task SendEmailWithGet(string url, int timeoutSecs = 30) + private static async Task SendEmailWithGet(string url) { try { @@ -108,7 +108,7 @@ public class EmailService : IEmailService .WithHeader("x-api-key", "MsnvA2DfQqxSK5jh") .WithHeader("x-kavita-version", BuildInfo.Version) .WithHeader("Content-Type", "application/json") - .WithTimeout(TimeSpan.FromSeconds(timeoutSecs)) + .WithTimeout(TimeSpan.FromSeconds(30)) .GetStringAsync(); if (!string.IsNullOrEmpty(response) && bool.Parse(response)) @@ -124,7 +124,7 @@ public class EmailService : IEmailService } - private static async Task SendEmailWithPost(string url, object data, int timeoutSecs = 30) + private static async Task SendEmailWithPost(string url, object data) { try { @@ -134,7 +134,7 @@ public class EmailService : IEmailService .WithHeader("x-api-key", "MsnvA2DfQqxSK5jh") .WithHeader("x-kavita-version", BuildInfo.Version) .WithHeader("Content-Type", "application/json") - .WithTimeout(TimeSpan.FromSeconds(timeoutSecs)) + .WithTimeout(TimeSpan.FromSeconds(30)) .PostJsonAsync(data); if (response.StatusCode != StatusCodes.Status200OK) diff --git a/API/Services/ReaderService.cs b/API/Services/ReaderService.cs index ab78437c2..ee8647187 100644 --- a/API/Services/ReaderService.cs +++ b/API/Services/ReaderService.cs @@ -16,8 +16,6 @@ namespace API.Services; public interface IReaderService { - Task MarkSeriesAsRead(AppUser user, int seriesId); - Task MarkSeriesAsUnread(AppUser user, int seriesId); void MarkChaptersAsRead(AppUser user, int seriesId, IEnumerable chapters); void MarkChaptersAsUnread(AppUser user, int seriesId, IEnumerable chapters); Task SaveReadingProgress(ProgressDto progressDto, int userId); @@ -47,40 +45,6 @@ public class ReaderService : IReaderService return Parser.Parser.NormalizePath(Path.Join(baseDirectory, $"{userId}", $"{seriesId}", $"{chapterId}")); } - /// - /// Does not commit. Marks all entities under the series as read. - /// - /// - /// - public async Task MarkSeriesAsRead(AppUser user, int seriesId) - { - var volumes = await _unitOfWork.VolumeRepository.GetVolumes(seriesId); - user.Progresses ??= new List(); - foreach (var volume in volumes) - { - MarkChaptersAsRead(user, seriesId, volume.Chapters); - } - - _unitOfWork.UserRepository.Update(user); - } - - /// - /// Does not commit. Marks all entities under the series as unread. - /// - /// - /// - public async Task MarkSeriesAsUnread(AppUser user, int seriesId) - { - var volumes = await _unitOfWork.VolumeRepository.GetVolumes(seriesId); - user.Progresses ??= new List(); - foreach (var volume in volumes) - { - MarkChaptersAsUnread(user, seriesId, volume.Chapters); - } - - _unitOfWork.UserRepository.Update(user); - } - /// /// Marks all Chapters as Read by creating or updating UserProgress rows. Does not commit. /// @@ -403,7 +367,7 @@ public class ReaderService : IReaderService .ToList(); // If there are any volumes that have progress, return those. If not, move on. - var currentlyReadingChapter = volumeChapters.FirstOrDefault(chapter => chapter.PagesRead < chapter.Pages); // (removed for GetContinuePoint_ShouldReturnFirstVolumeChapter_WhenPreExistingProgress), not sure if needed && chapter.PagesRead > 0 + var currentlyReadingChapter = volumeChapters.FirstOrDefault(chapter => chapter.PagesRead < chapter.Pages && chapter.PagesRead > 0); if (currentlyReadingChapter != null) return currentlyReadingChapter; // Check loose leaf chapters (and specials). First check if there are any diff --git a/Kavita.Common/Kavita.Common.csproj b/Kavita.Common/Kavita.Common.csproj index 381e53452..7ee020cd9 100644 --- a/Kavita.Common/Kavita.Common.csproj +++ b/Kavita.Common/Kavita.Common.csproj @@ -19,4 +19,4 @@ - \ No newline at end of file + diff --git a/UI/Web/src/app/_models/invite-user-response.ts b/UI/Web/src/app/_models/invite-user-response.ts deleted file mode 100644 index a9042c555..000000000 --- a/UI/Web/src/app/_models/invite-user-response.ts +++ /dev/null @@ -1,10 +0,0 @@ -export interface InviteUserResponse { - /** - * Link to register new user - */ - emailLink: string; - /** - * If an email was sent to the invited user - */ - emailSent: boolean; -} \ No newline at end of file diff --git a/UI/Web/src/app/_services/account.service.ts b/UI/Web/src/app/_services/account.service.ts index df5555f41..419dec77d 100644 --- a/UI/Web/src/app/_services/account.service.ts +++ b/UI/Web/src/app/_services/account.service.ts @@ -8,7 +8,6 @@ import { User } from '../_models/user'; import { Router } from '@angular/router'; import { MessageHubService } from './message-hub.service'; import { ThemeService } from '../theme.service'; -import { InviteUserResponse } from '../_models/invite-user-response'; @Injectable({ providedIn: 'root' @@ -22,9 +21,6 @@ export class AccountService implements OnDestroy { // Stores values, when someone subscribes gives (1) of last values seen. private currentUserSource = new ReplaySubject(1); - /** - * - */ currentUser$ = this.currentUserSource.asObservable(); /** @@ -63,7 +59,6 @@ export class AccountService implements OnDestroy { map((response: User) => { const user = response; if (user) { - console.log('Login: ', user); this.setCurrentUser(user); this.messageHub.createHubConnection(user, this.hasAdminRole(user)); } @@ -135,8 +130,8 @@ export class AccountService implements OnDestroy { return this.httpClient.post(this.baseUrl + 'account/resend-confirmation-email?userId=' + userId, {}, {responseType: 'text' as 'json'}); } - inviteUser(model: {email: string, roles: Array, libraries: Array}) { - return this.httpClient.post(this.baseUrl + 'account/invite', model); + inviteUser(model: {email: string, roles: Array, libraries: Array, sendEmail: boolean}) { + return this.httpClient.post(this.baseUrl + 'account/invite', model, {responseType: 'text' as 'json'}); } confirmEmail(model: {email: string, username: string, password: string, token: string}) { diff --git a/UI/Web/src/app/_services/nav.service.ts b/UI/Web/src/app/_services/nav.service.ts index c1ca3f0ad..9dba9d9b0 100644 --- a/UI/Web/src/app/_services/nav.service.ts +++ b/UI/Web/src/app/_services/nav.service.ts @@ -1,23 +1,71 @@ import { Injectable } from '@angular/core'; -import { ReplaySubject } from 'rxjs'; +import { ReplaySubject, take } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class NavService { + public localStorageSideNavKey = 'kavita--sidenav--collapsed'; private navbarVisibleSource = new ReplaySubject(1); + /** + * If the top Nav bar is rendered or not + */ navbarVisible$ = this.navbarVisibleSource.asObservable(); + private sideNavCollapseSource = new ReplaySubject(1); + /** + * If the Side Nav is in a collapsed state or not. + */ + sideNavCollapsed$ = this.sideNavCollapseSource.asObservable(); + + private sideNavVisibilitySource = new ReplaySubject(1); + /** + * If the side nav is rendered or not into the DOM. + */ + sideNavVisibility$ = this.sideNavVisibilitySource.asObservable(); + constructor() { this.showNavBar(); + const sideNavState = (localStorage.getItem(this.localStorageSideNavKey) === 'true') || false; + this.sideNavCollapseSource.next(sideNavState); + this.showSideNav(); } - + + /** + * Shows the top nav bar. This should be visible on all pages except the reader. + */ showNavBar() { this.navbarVisibleSource.next(true); } + /** + * Hides the top nav bar. + */ hideNavBar() { this.navbarVisibleSource.next(false); } + + /** + * Shows the side nav. When being visible, the side nav will automatically return to previous collapsed state. + */ + showSideNav() { + this.sideNavVisibilitySource.next(true); + } + + /** + * Hides the side nav. This is useful for the readers and login page. + */ + hideSideNav() { + this.sideNavVisibilitySource.next(false); + } + + toggleSideNav() { + this.sideNavCollapseSource.pipe(take(1)).subscribe(val => { + if (val === undefined) val = false; + const newVal = !(val || false); + this.sideNavCollapseSource.next(newVal); + localStorage.setItem(this.localStorageSideNavKey, newVal + ''); + }); + } } diff --git a/UI/Web/src/app/admin/admin.module.ts b/UI/Web/src/app/admin/admin.module.ts index d594cbff3..0f042a097 100644 --- a/UI/Web/src/app/admin/admin.module.ts +++ b/UI/Web/src/app/admin/admin.module.ts @@ -13,13 +13,13 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ResetPasswordModalComponent } from './_modals/reset-password-modal/reset-password-modal.component'; import { ManageSettingsComponent } from './manage-settings/manage-settings.component'; import { ManageSystemComponent } from './manage-system/manage-system.component'; -import { ChangelogComponent } from './changelog/changelog.component'; +import { ChangelogComponent } from '../announcements/changelog/changelog.component'; import { PipeModule } from '../pipe/pipe.module'; import { InviteUserComponent } from './invite-user/invite-user.component'; import { RoleSelectorComponent } from './role-selector/role-selector.component'; import { LibrarySelectorComponent } from './library-selector/library-selector.component'; import { EditUserComponent } from './edit-user/edit-user.component'; -import { UserSettingsModule } from '../user-settings/user-settings.module'; +import { SidenavModule } from '../sidenav/sidenav.module'; @@ -35,7 +35,6 @@ import { UserSettingsModule } from '../user-settings/user-settings.module'; ResetPasswordModalComponent, ManageSettingsComponent, ManageSystemComponent, - ChangelogComponent, InviteUserComponent, RoleSelectorComponent, LibrarySelectorComponent, @@ -51,7 +50,7 @@ import { UserSettingsModule } from '../user-settings/user-settings.module'; NgbDropdownModule, SharedModule, PipeModule, - UserSettingsModule // API-key componet + SidenavModule ], providers: [] }) diff --git a/UI/Web/src/app/admin/dashboard/dashboard.component.html b/UI/Web/src/app/admin/dashboard/dashboard.component.html index 84a81d506..7db5206ea 100644 --- a/UI/Web/src/app/admin/dashboard/dashboard.component.html +++ b/UI/Web/src/app/admin/dashboard/dashboard.component.html @@ -1,6 +1,9 @@ -
-

Admin Dashboard

- + +

+ Admin Dashboard +

+ +
diff --git a/UI/Web/src/app/admin/dashboard/dashboard.component.ts b/UI/Web/src/app/admin/dashboard/dashboard.component.ts index 33549db13..d84b3ba26 100644 --- a/UI/Web/src/app/admin/dashboard/dashboard.component.ts +++ b/UI/Web/src/app/admin/dashboard/dashboard.component.ts @@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; import { ServerService } from 'src/app/_services/server.service'; import { Title } from '@angular/platform-browser'; +import { NavService } from '../../_services/nav.service'; @@ -18,13 +19,12 @@ export class DashboardComponent implements OnInit { {title: 'Users', fragment: 'users'}, {title: 'Libraries', fragment: 'libraries'}, {title: 'System', fragment: 'system'}, - {title: 'Changelog', fragment: 'changelog'}, ]; counter = this.tabs.length + 1; active = this.tabs[0]; constructor(public route: ActivatedRoute, private serverService: ServerService, - private toastr: ToastrService, private titleService: Title) { + private toastr: ToastrService, private titleService: Title, public navService: NavService) { this.route.fragment.subscribe(frag => { const tab = this.tabs.filter(item => item.fragment === frag); if (tab.length > 0) { diff --git a/UI/Web/src/app/admin/invite-user/invite-user.component.html b/UI/Web/src/app/admin/invite-user/invite-user.component.html index 495b3f6e9..83fbb86eb 100644 --- a/UI/Web/src/app/admin/invite-user/invite-user.component.html +++ b/UI/Web/src/app/admin/invite-user/invite-user.component.html @@ -9,7 +9,13 @@ Invite a user to your server. Enter their email in and we will send them an email to create an account.

-
+

+ +  Checking accessibility of server... +

+ + +
@@ -22,6 +28,11 @@
+ +

Use this link to finish setting up the user account due to your server not being accessible outside your local network.

+ + +
@@ -33,21 +44,12 @@
- -

User invited

-

You can use the following link below to setup the account for your user or use the copy button. You may need to log out before using the link to register a new user. - If your server is externallyaccessible, an email will have been sent to the user and the links can be used by them to finish setting up their account. -

- - - -
- diff --git a/UI/Web/src/app/admin/invite-user/invite-user.component.ts b/UI/Web/src/app/admin/invite-user/invite-user.component.ts index b5066c99c..cc525957f 100644 --- a/UI/Web/src/app/admin/invite-user/invite-user.component.ts +++ b/UI/Web/src/app/admin/invite-user/invite-user.component.ts @@ -3,7 +3,6 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { ToastrService } from 'ngx-toastr'; import { ConfirmService } from 'src/app/shared/confirm.service'; -import { InviteUserResponse } from 'src/app/_models/invite-user-response'; import { Library } from 'src/app/_models/library'; import { AccountService } from 'src/app/_services/account.service'; import { ServerService } from 'src/app/_services/server.service'; @@ -20,12 +19,15 @@ export class InviteUserComponent implements OnInit { */ isSending: boolean = false; inviteForm: FormGroup = new FormGroup({}); + /** + * If a user would be able to load this server up externally + */ + accessible: boolean = true; + checkedAccessibility: boolean = false; selectedRoles: Array = []; selectedLibraries: Array = []; emailLink: string = ''; - makeLink: (val: string) => string = (val: string) => {return this.emailLink}; - public get email() { return this.inviteForm.get('email'); } constructor(public modal: NgbActiveModal, private accountService: AccountService, private serverService: ServerService, @@ -33,6 +35,14 @@ export class InviteUserComponent implements OnInit { ngOnInit(): void { this.inviteForm.addControl('email', new FormControl('', [Validators.required])); + + this.serverService.isServerAccessible().subscribe(async (accessibile) => { + if (!accessibile) { + await this.confirmService.alert('This server is not accessible outside the network. You cannot invite via Email. You wil be given a link to finish registration with instead.'); + this.accessible = accessibile; + } + this.checkedAccessibility = true; + }); } close() { @@ -47,10 +57,11 @@ export class InviteUserComponent implements OnInit { email, libraries: this.selectedLibraries, roles: this.selectedRoles, - }).subscribe((data: InviteUserResponse) => { - this.emailLink = data.emailLink; + sendEmail: this.accessible + }).subscribe(emailLink => { + this.emailLink = emailLink; this.isSending = false; - if (data.emailSent) { + if (this.accessible) { this.toastr.info('Email sent to ' + email); this.modal.close(true); } diff --git a/UI/Web/src/app/admin/manage-library/manage-library.component.html b/UI/Web/src/app/admin/manage-library/manage-library.component.html index ba80c0a5e..2fb30357a 100644 --- a/UI/Web/src/app/admin/manage-library/manage-library.component.html +++ b/UI/Web/src/app/admin/manage-library/manage-library.component.html @@ -7,7 +7,7 @@

  • - {{library.name}}  + {{library.name}}  diff --git a/UI/Web/src/app/all-series/all-series.component.html b/UI/Web/src/app/all-series/all-series.component.html index dc589e566..76f9cc623 100644 --- a/UI/Web/src/app/all-series/all-series.component.html +++ b/UI/Web/src/app/all-series/all-series.component.html @@ -1,10 +1,16 @@ + +

    + + All Series +

    +     - diff --git a/UI/Web/src/app/all-series/all-series.component.ts b/UI/Web/src/app/all-series/all-series.component.ts index cdcca3b20..1268005d4 100644 --- a/UI/Web/src/app/all-series/all-series.component.ts +++ b/UI/Web/src/app/all-series/all-series.component.ts @@ -1,11 +1,12 @@ -import { Component, HostListener, OnDestroy, OnInit } from '@angular/core'; +import { Component, EventEmitter, HostListener, OnDestroy, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { take, debounceTime, takeUntil } from 'rxjs/operators'; import { BulkSelectionService } from '../cards/bulk-selection.service'; -import { FilterSettings } from '../cards/card-detail-layout/card-detail-layout.component'; +import { FilterSettings } from '../metadata-filter/filter-settings'; import { KEY_CODES, UtilityService } from '../shared/_services/utility.service'; +import { SeriesAddedEvent } from '../_models/events/series-added-event'; import { Library } from '../_models/library'; import { Pagination } from '../_models/pagination'; import { Series } from '../_models/series'; @@ -29,6 +30,7 @@ export class AllSeriesComponent implements OnInit, OnDestroy { filter: SeriesFilter | undefined = undefined; onDestroy: Subject = new Subject(); filterSettings: FilterSettings = new FilterSettings(); + filterOpen: EventEmitter = new EventEmitter(); bulkActionCallback = (action: Action, data: any) => { const selectedSeriesIndexies = this.bulkSelectionService.getSelectedCardsForSource('series'); diff --git a/UI/Web/src/app/announcements/announcements-routing.module.ts b/UI/Web/src/app/announcements/announcements-routing.module.ts new file mode 100644 index 000000000..3cfe07970 --- /dev/null +++ b/UI/Web/src/app/announcements/announcements-routing.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from "@angular/core"; +import { Routes, RouterModule } from "@angular/router"; +import { AdminGuard } from "../_guards/admin.guard"; +import { AuthGuard } from "../_guards/auth.guard"; +import { AnnouncementsComponent } from "./announcements.component"; + +const routes: Routes = [ + {path: '**', component: AnnouncementsComponent, pathMatch: 'full', canActivate: [AuthGuard, AdminGuard]}, + { + runGuardsAndResolvers: 'always', + canActivate: [AuthGuard, AdminGuard], + children: [ + {path: '/announcments', component: AnnouncementsComponent}, + ] + } +]; + + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class AnnouncementsRoutingModule { } \ No newline at end of file diff --git a/UI/Web/src/app/announcements/announcements.component.html b/UI/Web/src/app/announcements/announcements.component.html new file mode 100644 index 000000000..b4e053264 --- /dev/null +++ b/UI/Web/src/app/announcements/announcements.component.html @@ -0,0 +1,3 @@ +

    Announcements

    + + \ No newline at end of file diff --git a/UI/Web/src/app/announcements/announcements.component.scss b/UI/Web/src/app/announcements/announcements.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/UI/Web/src/app/announcements/announcements.component.ts b/UI/Web/src/app/announcements/announcements.component.ts new file mode 100644 index 000000000..cc2ccf2a4 --- /dev/null +++ b/UI/Web/src/app/announcements/announcements.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-announcements', + templateUrl: './announcements.component.html', + styleUrls: ['./announcements.component.scss'] +}) +export class AnnouncementsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/UI/Web/src/app/announcements/announcements.module.ts b/UI/Web/src/app/announcements/announcements.module.ts new file mode 100644 index 000000000..32323aa9b --- /dev/null +++ b/UI/Web/src/app/announcements/announcements.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AnnouncementsComponent } from './announcements.component'; +import { ChangelogComponent } from './changelog/changelog.component'; +import { AnnouncementsRoutingModule } from './announcements-routing.module'; +import { SharedModule } from '../shared/shared.module'; +import { PipeModule } from '../pipe/pipe.module'; + + + +@NgModule({ + declarations: [ + AnnouncementsComponent, + ChangelogComponent + ], + imports: [ + CommonModule, + AnnouncementsRoutingModule, + SharedModule, + PipeModule + ] +}) +export class AnnouncementsModule { } diff --git a/UI/Web/src/app/admin/changelog/changelog.component.html b/UI/Web/src/app/announcements/changelog/changelog.component.html similarity index 92% rename from UI/Web/src/app/admin/changelog/changelog.component.html rename to UI/Web/src/app/announcements/changelog/changelog.component.html index 55ab39cfd..caffe5d8c 100644 --- a/UI/Web/src/app/admin/changelog/changelog.component.html +++ b/UI/Web/src/app/announcements/changelog/changelog.component.html @@ -10,7 +10,7 @@ 
    -            
+
    Installed Download diff --git a/UI/Web/src/app/admin/changelog/changelog.component.scss b/UI/Web/src/app/announcements/changelog/changelog.component.scss similarity index 100% rename from UI/Web/src/app/admin/changelog/changelog.component.scss rename to UI/Web/src/app/announcements/changelog/changelog.component.scss diff --git a/UI/Web/src/app/admin/changelog/changelog.component.ts b/UI/Web/src/app/announcements/changelog/changelog.component.ts similarity index 100% rename from UI/Web/src/app/admin/changelog/changelog.component.ts rename to UI/Web/src/app/announcements/changelog/changelog.component.ts diff --git a/UI/Web/src/app/app-routing.module.ts b/UI/Web/src/app/app-routing.module.ts index 0a09d8c38..dc24f98bd 100644 --- a/UI/Web/src/app/app-routing.module.ts +++ b/UI/Web/src/app/app-routing.module.ts @@ -6,10 +6,13 @@ import { RecentlyAddedComponent } from './recently-added/recently-added.componen import { UserLoginComponent } from './user-login/user-login.component'; import { AuthGuard } from './_guards/auth.guard'; import { LibraryAccessGuard } from './_guards/library-access.guard'; +import { OnDeckComponent } from './on-deck/on-deck.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { AllSeriesComponent } from './all-series/all-series.component'; import { AdminGuard } from './_guards/admin.guard'; import { ThemeTestComponent } from './theme-test/theme-test.component'; +import { ReadingListsComponent } from './reading-list/reading-lists/reading-lists.component'; +import { AllCollectionsComponent } from './collections/all-collections/all-collections.component'; // TODO: Once we modularize the components, use this and measure performance impact: https://angular.io/guide/lazy-loading-ngmodules#preloading-modules @@ -39,6 +42,10 @@ const routes: Routes = [ path: 'registration', loadChildren: () => import('../app/registration/registration.module').then(m => m.RegistrationModule) }, + { + path: 'announcements', + loadChildren: () => import('../app/announcements/announcements.module').then(m => m.AnnouncementsModule) + }, { path: '', runGuardsAndResolvers: 'always', @@ -63,6 +70,7 @@ const routes: Routes = [ children: [ {path: 'library', component: DashboardComponent}, {path: 'recently-added', component: RecentlyAddedComponent}, + {path: 'on-deck', component: OnDeckComponent}, {path: 'all-series', component: AllSeriesComponent}, ] diff --git a/UI/Web/src/app/app.component.html b/UI/Web/src/app/app.component.html index 43b951ba9..7cb10f46e 100644 --- a/UI/Web/src/app/app.component.html +++ b/UI/Web/src/app/app.component.html @@ -1,5 +1,10 @@ -
    +
    - + +
    +
    + +
    +
    diff --git a/UI/Web/src/app/app.component.scss b/UI/Web/src/app/app.component.scss index e69de29bb..97b30aa2b 100644 --- a/UI/Web/src/app/app.component.scss +++ b/UI/Web/src/app/app.component.scss @@ -0,0 +1,39 @@ +.content-wrapper { + padding: calc(56px) 10px 0; + height: 100%; +} + +.companion-bar { + transition: all var(--side-nav-companion-bar-transistion); + margin-left: 40px; +} + +.companion-bar-content { + margin-left: 190px; + width: auto; +} + +@media (max-width: 576px) { + .container-fluid { + padding: 0; + } + + .content-wrapper { + padding: calc(56px) 10px 0; + overflow: hidden; + + &.closed { + overflow: auto; + } + } + + .companion-bar { + margin-left: 0px; + padding-left: 0px; + } + + .companion-bar-content { + margin-left: 0px; + width: auto; + } +} diff --git a/UI/Web/src/app/app.component.ts b/UI/Web/src/app/app.component.ts index 72a38814e..734c40c1b 100644 --- a/UI/Web/src/app/app.component.ts +++ b/UI/Web/src/app/app.component.ts @@ -47,7 +47,6 @@ export class AppComponent implements OnInit { ngOnInit(): void { this.setCurrentUser(); - this.setDocHeight(); } diff --git a/UI/Web/src/app/app.module.ts b/UI/Web/src/app/app.module.ts index f3c974f9c..28993559b 100644 --- a/UI/Web/src/app/app.module.ts +++ b/UI/Web/src/app/app.module.ts @@ -7,7 +7,8 @@ import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; -import { NgbAccordionModule, NgbCollapseModule, NgbDropdownModule, NgbNavModule, NgbPaginationModule, NgbPopoverModule, NgbRatingModule } from '@ng-bootstrap/ng-bootstrap'; +import { + NgbAccordionModule, NgbCollapseModule, NgbDropdownModule, NgbNavModule, NgbPaginationModule, NgbPopoverModule, NgbRatingModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; import { NavHeaderComponent } from './nav-header/nav-header.component'; import { JwtInterceptor } from './_interceptors/jwt.interceptor'; import { UserLoginComponent } from './user-login/user-login.component'; @@ -22,6 +23,7 @@ import { CarouselModule } from './carousel/carousel.module'; import { TypeaheadModule } from './typeahead/typeahead.module'; import { RecentlyAddedComponent } from './recently-added/recently-added.component'; +import { OnDeckComponent } from './on-deck/on-deck.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { CardsModule } from './cards/cards.module'; import { CollectionsModule } from './collections/collections.module'; @@ -35,6 +37,7 @@ import { GroupedTypeaheadComponent } from './grouped-typeahead/grouped-typeahead import { ThemeTestComponent } from './theme-test/theme-test.component'; import { PipeModule } from './pipe/pipe.module'; import { ColorPickerModule } from 'ngx-color-picker'; +import { SidenavModule } from './sidenav/sidenav.module'; @NgModule({ @@ -42,11 +45,12 @@ import { ColorPickerModule } from 'ngx-color-picker'; AppComponent, NavHeaderComponent, UserLoginComponent, - LibraryComponent, - LibraryDetailComponent, - SeriesDetailComponent, + LibraryComponent, + LibraryDetailComponent, + SeriesDetailComponent, ReviewSeriesModalComponent, RecentlyAddedComponent, + OnDeckComponent, DashboardComponent, EventsWidgetComponent, SeriesMetadataDetailComponent, @@ -68,7 +72,7 @@ import { ColorPickerModule } from 'ngx-color-picker'; NgbNavModule, NgbPaginationModule, - NgbCollapseModule, // Login + NgbCollapseModule, // Login SharedModule, CarouselModule, @@ -78,11 +82,14 @@ import { ColorPickerModule } from 'ngx-color-picker'; ReadingListModule, RegistrationModule, - ColorPickerModule, // User preferences + ColorPickerModule, // User preferences NgbAccordionModule, // ThemeTest Component only PipeModule, + PipeModule, + SidenavModule, // For sidenav + ToastrModule.forRoot({ positionClass: 'toast-bottom-right', @@ -97,6 +104,7 @@ import { ColorPickerModule } from 'ngx-color-picker'; {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}, Title, {provide: SAVER, useFactory: getSaver}, + // { provide: APP_BASE_HREF, useFactory: (config: ConfigData) => config.baseUrl, deps: [ConfigData] }, ], entryComponents: [], bootstrap: [AppComponent] diff --git a/UI/Web/src/app/book-reader/book-reader.module.ts b/UI/Web/src/app/book-reader/book-reader.module.ts index a327128e5..a572d1a96 100644 --- a/UI/Web/src/app/book-reader/book-reader.module.ts +++ b/UI/Web/src/app/book-reader/book-reader.module.ts @@ -6,6 +6,7 @@ import { SharedModule } from '../shared/shared.module'; import { SafeStylePipe } from './safe-style.pipe'; import { ReactiveFormsModule } from '@angular/forms'; import { NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; +import { PipeModule } from '../pipe/pipe.module'; @NgModule({ @@ -16,7 +17,8 @@ import { NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstr ReactiveFormsModule, SharedModule, NgbProgressbarModule, - NgbTooltipModule + NgbTooltipModule, + PipeModule, ], exports: [ BookReaderComponent, SafeStylePipe diff --git a/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts b/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts index 9b5a5f5f3..a98a78802 100644 --- a/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts +++ b/UI/Web/src/app/book-reader/book-reader/book-reader.component.ts @@ -263,6 +263,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy { private scrollService: ScrollService, private utilityService: UtilityService, private libraryService: LibraryService, @Inject(DOCUMENT) private document: Document, private themeService: ThemeService) { this.navService.hideNavBar(); + this.navService.hideSideNav(); this.darkModeStyleElem = this.renderer.createElement('style'); this.darkModeStyleElem.innerHTML = this.darkModeStyles; @@ -388,6 +389,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy { }); } this.navService.showNavBar(); + this.navService.showSideNav(); const head = this.document.querySelector('head'); this.renderer.removeChild(head, this.darkModeStyleElem); diff --git a/UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.html b/UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.html index a3cb6dfdd..7d2dbddc7 100644 --- a/UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.html +++ b/UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.html @@ -27,7 +27,7 @@ Release Date: {{chapterMetadata.releaseDate | date: 'shortDate' || '-'}} - {{data.pages}} pages + {{chapter.pages}} pages
    @@ -106,26 +106,24 @@

    {{utilityService.formatChapterName(libraryType) + 's'}}

    • - +
      - + - - {{utilityService.formatChapterName(libraryType, true, false) }} {{formatChapterNumber(chapter)}} - + {{utilityService.formatChapterName(libraryType, true, false) }} {{formatChapterNumber(chapter)}} - + {{chapter.pagesRead}} / {{chapter.pages}} UNREAD READ - Files + File(s)
      • 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 044fd2c34..e6bf5a81a 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 @@ -112,7 +112,7 @@
      -
      +
      -
      +
      @@ -138,7 +138,7 @@
      -
      +
      diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html index f6262d111..2b4a003aa 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html +++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html @@ -1,364 +1,25 @@ -
      -
      + +

        - {{header}}  - {{pagination.totalItems}} + + + {{header}}  + {{pagination.totalItems}} +

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

      Book Settings - -

      - -
      -
      - -
      -       -
      - - - This is library agnostic -
      -
      -
      -
      -   - - - - {{item.title}} - - - {{item.title}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      -   - - - - {{item.title}} - - - {{item.title}} - - -
      -
      - -
      -
      - - - - {{item.title}} - - - {{item.title}} - - -
      -
      - -
      -
      - - - - {{item.title}} - - - {{item.title}} - - -
      -
      -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      - -
      -
      - - - - {{item.name}} - - - {{item.name}} - - -
      -
      -
      -
      -
      - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      -
      - -
      - -
      - - - ★ - - -
      -
      - -
      - - - - {{item.title}} - - - {{item.title}} - - -
      - -
      - - - - {{item.title}} - - - {{item.title}} - - -
      - -
      - - - - {{item.title}} - - - {{item.title}} - - -
      -
      -
      -
      -
      -
      -
      - - - -
      -
      -
      -
      -
      -
      -
      - -
      -
      - -
      -
      -
      -       + -
      -
      +
      +
      @@ -368,10 +29,9 @@
      -
      -
      +
      ; - formatSettings: TypeaheadSettings> = new TypeaheadSettings(); - librarySettings: TypeaheadSettings = new TypeaheadSettings(); - genreSettings: TypeaheadSettings = new TypeaheadSettings(); - collectionSettings: TypeaheadSettings = new TypeaheadSettings(); - ageRatingSettings: TypeaheadSettings = new TypeaheadSettings(); - publicationStatusSettings: TypeaheadSettings = new TypeaheadSettings(); - tagsSettings: TypeaheadSettings = new TypeaheadSettings(); - languageSettings: TypeaheadSettings = new TypeaheadSettings(); - peopleSettings: {[PersonRole: string]: TypeaheadSettings} = {}; - resetTypeaheads: Subject = new ReplaySubject(1); - /** - * Controls the visiblity of extended controls that sit below the main header. - */ - filteringCollapsed: boolean = true; + // Filter Code + @Input() filterOpen!: EventEmitter; + filter!: SeriesFilter; libraries: Array> = []; - - readProgressGroup!: FormGroup; - sortGroup!: FormGroup; - isAscendingSort: boolean = true; - updateApplied: number = 0; private onDestory: Subject = new Subject(); - get PersonRole(): typeof PersonRole { - return PersonRole; - } - - get SortField(): typeof SortField { - return SortField; - } - - constructor(private libraryService: LibraryService, private metadataService: MetadataService, private seriesService: SeriesService, - private utilityService: UtilityService, private collectionTagService: CollectionTagService) { + constructor(private seriesService: SeriesService) { this.filter = this.seriesService.createSeriesFilter(); - - this.readProgressGroup = new FormGroup({ - read: new FormControl(this.filter.readStatus.read, []), - notRead: new FormControl(this.filter.readStatus.notRead, []), - inProgress: new FormControl(this.filter.readStatus.inProgress, []), - }); - - this.sortGroup = new FormGroup({ - sortField: new FormControl(this.filter.sortOptions?.sortField || SortField.SortName, []), - }); - - this.readProgressGroup.valueChanges.pipe(takeUntil(this.onDestory)).subscribe(changes => { - this.filter.readStatus.read = this.readProgressGroup.get('read')?.value; - this.filter.readStatus.inProgress = this.readProgressGroup.get('inProgress')?.value; - this.filter.readStatus.notRead = this.readProgressGroup.get('notRead')?.value; - - let sum = 0; - sum += (this.filter.readStatus.read ? 1 : 0); - sum += (this.filter.readStatus.inProgress ? 1 : 0); - sum += (this.filter.readStatus.notRead ? 1 : 0); - - if (sum === 1) { - if (this.filter.readStatus.read) this.readProgressGroup.get('read')?.disable({ emitEvent: false }); - if (this.filter.readStatus.notRead) this.readProgressGroup.get('notRead')?.disable({ emitEvent: false }); - if (this.filter.readStatus.inProgress) this.readProgressGroup.get('inProgress')?.disable({ emitEvent: false }); - } else { - this.readProgressGroup.get('read')?.enable({ emitEvent: false }); - this.readProgressGroup.get('notRead')?.enable({ emitEvent: false }); - this.readProgressGroup.get('inProgress')?.enable({ emitEvent: false }); - } - }); - - this.sortGroup.valueChanges.pipe(takeUntil(this.onDestory)).subscribe(changes => { - if (this.filter.sortOptions == null) { - this.filter.sortOptions = { - isAscending: this.isAscendingSort, - sortField: parseInt(this.sortGroup.get('sortField')?.value, 10) - }; - } - this.filter.sortOptions.sortField = parseInt(this.sortGroup.get('sortField')?.value, 10); - }); } ngOnInit(): void { @@ -163,14 +63,6 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy { if (this.filterSettings === undefined) { this.filterSettings = new FilterSettings(); } - - if (this.filterSettings.presets) { - this.readProgressGroup.get('read')?.patchValue(this.filterSettings.presets?.readStatus.read); - this.readProgressGroup.get('notRead')?.patchValue(this.filterSettings.presets?.readStatus.notRead); - this.readProgressGroup.get('inProgress')?.patchValue(this.filterSettings.presets?.readStatus.inProgress); - } - - this.setupTypeaheads(); } ngOnDestroy() { @@ -178,302 +70,6 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy { this.onDestory.complete(); } - setupTypeaheads() { - - this.setupFormatTypeahead(); - - forkJoin([ - this.setupLibraryTypeahead(), - this.setupCollectionTagTypeahead(), - this.setupAgeRatingSettings(), - this.setupPublicationStatusSettings(), - this.setupTagSettings(), - this.setupLanguageSettings(), - this.setupGenreTypeahead(), - this.setupPersonTypeahead(), - ]).subscribe(results => { - this.resetTypeaheads.next(true); - if (this.filterSettings.openByDefault) { - this.filteringCollapsed = false; - } - this.apply(); - }); - } - - - setupFormatTypeahead() { - this.formatSettings.minCharacters = 0; - this.formatSettings.multiple = true; - this.formatSettings.id = 'format'; - this.formatSettings.unique = true; - this.formatSettings.addIfNonExisting = false; - this.formatSettings.fetchFn = (filter: string) => of(mangaFormatFilters).pipe(map(items => this.formatSettings.compareFn(items, filter))); - this.formatSettings.compareFn = (options: FilterItem[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.title, filter)); - } - - this.formatSettings.singleCompareFn = (a: FilterItem, b: FilterItem) => { - return a.title == b.title; - } - - if (this.filterSettings.presets?.formats && this.filterSettings.presets?.formats.length > 0) { - this.formatSettings.savedData = mangaFormatFilters.filter(item => this.filterSettings.presets?.formats.includes(item.value)); - this.filter.formats = this.formatSettings.savedData.map(item => item.value); - this.resetTypeaheads.next(true); - } - } - - setupLibraryTypeahead() { - this.librarySettings.minCharacters = 0; - this.librarySettings.multiple = true; - this.librarySettings.id = 'libraries'; - this.librarySettings.unique = true; - this.librarySettings.addIfNonExisting = false; - this.librarySettings.fetchFn = (filter: string) => { - return this.libraryService.getLibrariesForMember() - .pipe(map(items => this.librarySettings.compareFn(items, filter))); - }; - this.librarySettings.compareFn = (options: Library[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.name, filter)); - } - this.librarySettings.singleCompareFn = (a: Library, b: Library) => { - return a.name == b.name; - } - - if (this.filterSettings.presets?.libraries && this.filterSettings.presets?.libraries.length > 0) { - return this.librarySettings.fetchFn('').pipe(map(libraries => { - this.librarySettings.savedData = libraries.filter(item => this.filterSettings.presets?.libraries.includes(item.id)); - this.filter.libraries = this.librarySettings.savedData.map(item => item.id); - return of(true); - })); - } - return of(true); - } - - setupGenreTypeahead() { - this.genreSettings.minCharacters = 0; - this.genreSettings.multiple = true; - this.genreSettings.id = 'genres'; - this.genreSettings.unique = true; - this.genreSettings.addIfNonExisting = false; - this.genreSettings.fetchFn = (filter: string) => { - return this.metadataService.getAllGenres(this.filter.libraries) - .pipe(map(items => this.genreSettings.compareFn(items, filter))); - }; - this.genreSettings.compareFn = (options: Genre[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.title, filter)); - } - this.genreSettings.singleCompareFn = (a: Genre, b: Genre) => { - return a.title == b.title; - } - - if (this.filterSettings.presets?.genres && this.filterSettings.presets?.genres.length > 0) { - return this.genreSettings.fetchFn('').pipe(map(genres => { - this.genreSettings.savedData = genres.filter(item => this.filterSettings.presets?.genres.includes(item.id)); - this.filter.genres = this.genreSettings.savedData.map(item => item.id); - return of(true); - })); - } - return of(true); - } - - setupAgeRatingSettings() { - this.ageRatingSettings.minCharacters = 0; - this.ageRatingSettings.multiple = true; - this.ageRatingSettings.id = 'age-rating'; - this.ageRatingSettings.unique = true; - this.ageRatingSettings.addIfNonExisting = false; - this.ageRatingSettings.fetchFn = (filter: string) => this.metadataService.getAllAgeRatings(this.filter.libraries) - .pipe(map(items => this.ageRatingSettings.compareFn(items, filter))); - - this.ageRatingSettings.compareFn = (options: AgeRatingDto[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.title, filter)); - } - - this.ageRatingSettings.singleCompareFn = (a: AgeRatingDto, b: AgeRatingDto) => { - return a.title == b.title; - } - - if (this.filterSettings.presets?.ageRating && this.filterSettings.presets?.ageRating.length > 0) { - return this.ageRatingSettings.fetchFn('').pipe(map(rating => { - this.ageRatingSettings.savedData = rating.filter(item => this.filterSettings.presets?.ageRating.includes(item.value)); - this.filter.ageRating = this.ageRatingSettings.savedData.map(item => item.value); - return of(true); - })); - } - return of(true); - } - - setupPublicationStatusSettings() { - this.publicationStatusSettings.minCharacters = 0; - this.publicationStatusSettings.multiple = true; - this.publicationStatusSettings.id = 'publication-status'; - this.publicationStatusSettings.unique = true; - this.publicationStatusSettings.addIfNonExisting = false; - this.publicationStatusSettings.fetchFn = (filter: string) => this.metadataService.getAllPublicationStatus(this.filter.libraries) - .pipe(map(items => this.publicationStatusSettings.compareFn(items, filter))); - - this.publicationStatusSettings.compareFn = (options: PublicationStatusDto[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.title, filter)); - } - - this.publicationStatusSettings.singleCompareFn = (a: PublicationStatusDto, b: PublicationStatusDto) => { - return a.title == b.title; - } - - if (this.filterSettings.presets?.publicationStatus && this.filterSettings.presets?.publicationStatus.length > 0) { - return this.publicationStatusSettings.fetchFn('').pipe(map(statuses => { - this.publicationStatusSettings.savedData = statuses.filter(item => this.filterSettings.presets?.publicationStatus.includes(item.value)); - this.filter.publicationStatus = this.publicationStatusSettings.savedData.map(item => item.value); - return of(true); - })); - } - return of(true); - } - - setupTagSettings() { - this.tagsSettings.minCharacters = 0; - this.tagsSettings.multiple = true; - this.tagsSettings.id = 'tags'; - this.tagsSettings.unique = true; - this.tagsSettings.addIfNonExisting = false; - this.tagsSettings.compareFn = (options: Tag[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.title, filter)); - } - this.tagsSettings.fetchFn = (filter: string) => this.metadataService.getAllTags(this.filter.libraries) - .pipe(map(items => this.tagsSettings.compareFn(items, filter))); - - this.tagsSettings.singleCompareFn = (a: Tag, b: Tag) => { - return a.id == b.id; - } - - if (this.filterSettings.presets?.tags && this.filterSettings.presets?.tags.length > 0) { - return this.tagsSettings.fetchFn('').pipe(map(tags => { - this.tagsSettings.savedData = tags.filter(item => this.filterSettings.presets?.tags.includes(item.id)); - this.filter.tags = this.tagsSettings.savedData.map(item => item.id); - return of(true); - })); - } - return of(true); - } - - setupLanguageSettings() { - this.languageSettings.minCharacters = 0; - this.languageSettings.multiple = true; - this.languageSettings.id = 'languages'; - this.languageSettings.unique = true; - this.languageSettings.addIfNonExisting = false; - this.languageSettings.compareFn = (options: Language[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.title, filter)); - } - this.languageSettings.fetchFn = (filter: string) => this.metadataService.getAllLanguages(this.filter.libraries) - .pipe(map(items => this.languageSettings.compareFn(items, filter))); - - this.languageSettings.singleCompareFn = (a: Language, b: Language) => { - return a.isoCode == b.isoCode; - } - - if (this.filterSettings.presets?.languages && this.filterSettings.presets?.languages.length > 0) { - return this.languageSettings.fetchFn('').pipe(map(languages => { - this.languageSettings.savedData = languages.filter(item => this.filterSettings.presets?.languages.includes(item.isoCode)); - this.filter.languages = this.languageSettings.savedData.map(item => item.isoCode); - return of(true); - })); - } - return of(true); - } - - setupCollectionTagTypeahead() { - this.collectionSettings.minCharacters = 0; - this.collectionSettings.multiple = true; - this.collectionSettings.id = 'collections'; - this.collectionSettings.unique = true; - this.collectionSettings.addIfNonExisting = false; - this.collectionSettings.compareFn = (options: CollectionTag[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.title, filter)); - } - this.collectionSettings.fetchFn = (filter: string) => this.collectionTagService.allTags() - .pipe(map(items => this.collectionSettings.compareFn(items, filter))); - - this.collectionSettings.singleCompareFn = (a: CollectionTag, b: CollectionTag) => { - return a.id == b.id; - } - - if (this.filterSettings.presets?.collectionTags && this.filterSettings.presets?.collectionTags.length > 0) { - return this.collectionSettings.fetchFn('').pipe(map(tags => { - this.collectionSettings.savedData = tags.filter(item => this.filterSettings.presets?.collectionTags.includes(item.id)); - this.filter.collectionTags = this.collectionSettings.savedData.map(item => item.id); - return of(true); - })); - } - return of(true); - } - - updateFromPreset(id: string, peopleFilterField: Array, presetField: Array | undefined, role: PersonRole) { - const personSettings = this.createBlankPersonSettings(id, role) - if (presetField && presetField.length > 0) { - const fetch = personSettings.fetchFn as ((filter: string) => Observable); - return fetch('').pipe(map(people => { - personSettings.savedData = people.filter(item => presetField.includes(item.id)); - peopleFilterField = personSettings.savedData.map(item => item.id); - this.resetTypeaheads.next(true); - this.peopleSettings[role] = personSettings; - this.updatePersonFilters(personSettings.savedData as Person[], role); - return true; - })); - } else { - this.peopleSettings[role] = personSettings; - return of(true); - } - } - - setupPersonTypeahead() { - this.peopleSettings = {}; - - return forkJoin([ - this.updateFromPreset('writers', this.filter.writers, this.filterSettings.presets?.writers, PersonRole.Writer), - this.updateFromPreset('character', this.filter.character, this.filterSettings.presets?.character, PersonRole.Character), - this.updateFromPreset('colorist', this.filter.colorist, this.filterSettings.presets?.colorist, PersonRole.Colorist), - this.updateFromPreset('cover-artist', this.filter.coverArtist, this.filterSettings.presets?.coverArtist, PersonRole.CoverArtist), - this.updateFromPreset('editor', this.filter.editor, this.filterSettings.presets?.editor, PersonRole.Editor), - this.updateFromPreset('inker', this.filter.inker, this.filterSettings.presets?.inker, PersonRole.Inker), - this.updateFromPreset('letterer', this.filter.letterer, this.filterSettings.presets?.letterer, PersonRole.Letterer), - this.updateFromPreset('penciller', this.filter.penciller, this.filterSettings.presets?.penciller, PersonRole.Penciller), - this.updateFromPreset('publisher', this.filter.publisher, this.filterSettings.presets?.publisher, PersonRole.Publisher), - this.updateFromPreset('translators', this.filter.translators, this.filterSettings.presets?.translators, PersonRole.Translator) - ]).pipe(map(results => { - this.resetTypeaheads.next(true); - return of(true); - })); - } - - fetchPeople(role: PersonRole, filter: string) { - return this.metadataService.getAllPeople(this.filter.libraries).pipe(map(people => { - return people.filter(p => p.role == role && this.utilityService.filter(p.name, filter)); - })); - } - - createBlankPersonSettings(id: string, role: PersonRole) { - var personSettings = new TypeaheadSettings(); - personSettings.minCharacters = 0; - personSettings.multiple = true; - personSettings.unique = true; - personSettings.addIfNonExisting = false; - personSettings.id = id; - personSettings.compareFn = (options: Person[], filter: string) => { - return options.filter(m => this.utilityService.filter(m.name, filter)); - } - - personSettings.singleCompareFn = (a: Person, b: Person) => { - return a.name == b.name && a.role == b.role; - } - personSettings.fetchFn = (filter: string) => { - return this.fetchPeople(role, filter).pipe(map(items => personSettings.compareFn(items, filter))); - }; - return personSettings; - } - - onPageChange(page: number) { this.pageChange.emit(this.pagination); } @@ -493,117 +89,8 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy { } } - - updateFormatFilters(formats: MangaFormat[]) { - this.filter.formats = formats.map(item => item) || []; - } - - updateLibraryFilters(libraries: Library[]) { - this.filter.libraries = libraries.map(item => item.id) || []; - } - - updateGenreFilters(genres: Genre[]) { - this.filter.genres = genres.map(item => item.id) || []; - } - - updateTagFilters(tags: Tag[]) { - this.filter.tags = tags.map(item => item.id) || []; - } - - updatePersonFilters(persons: Person[], role: PersonRole) { - switch (role) { - case PersonRole.CoverArtist: - this.filter.coverArtist = persons.map(p => p.id); - break; - case PersonRole.Character: - this.filter.character = persons.map(p => p.id); - break; - case PersonRole.Colorist: - this.filter.colorist = persons.map(p => p.id); - break; - case PersonRole.Editor: - this.filter.editor = persons.map(p => p.id); - break; - case PersonRole.Inker: - this.filter.inker = persons.map(p => p.id); - break; - case PersonRole.Letterer: - this.filter.letterer = persons.map(p => p.id); - break; - case PersonRole.Penciller: - this.filter.penciller = persons.map(p => p.id); - break; - case PersonRole.Publisher: - this.filter.publisher = persons.map(p => p.id); - break; - case PersonRole.Writer: - this.filter.writers = persons.map(p => p.id); - break; - case PersonRole.Translator: - this.filter.translators = persons.map(p => p.id); - - } - } - - updateCollectionFilters(tags: CollectionTag[]) { - this.filter.collectionTags = tags.map(item => item.id) || []; - } - - updateRating(rating: any) { - this.filter.rating = rating; - } - - updateAgeRating(ratingDtos: AgeRatingDto[]) { - this.filter.ageRating = ratingDtos.map(item => item.value) || []; - } - - updatePublicationStatus(dtos: PublicationStatusDto[]) { - this.filter.publicationStatus = dtos.map(item => item.value) || []; - } - - updateLanguageRating(languages: Language[]) { - this.filter.languages = languages.map(item => item.isoCode) || []; - } - - updateReadStatus(status: string) { - if (status === 'read') { - this.filter.readStatus.read = !this.filter.readStatus.read; - } else if (status === 'inProgress') { - this.filter.readStatus.inProgress = !this.filter.readStatus.inProgress; - } else if (status === 'notRead') { - this.filter.readStatus.notRead = !this.filter.readStatus.notRead; - } - } - - updateSortOrder() { - this.isAscendingSort = !this.isAscendingSort; - if (this.filter.sortOptions === null) { - this.filter.sortOptions = { - isAscending: this.isAscendingSort, - sortField: SortField.SortName - } - } - - this.filter.sortOptions.isAscending = this.isAscendingSort; - } - - getPersonsSettings(role: PersonRole) { - return this.peopleSettings[role]; - } - - clear() { - this.filter = this.seriesService.createSeriesFilter(); - this.readProgressGroup.get('read')?.setValue(true); - this.readProgressGroup.get('notRead')?.setValue(true); - this.readProgressGroup.get('inProgress')?.setValue(true); - this.sortGroup.get('sortField')?.setValue(SortField.SortName); - this.isAscendingSort = true; - // Apply any presets which will trigger the apply - this.setupTypeaheads(); - } - - apply() { - this.applyFilter.emit({filter: this.filter, isFirst: this.updateApplied === 0}); + applyMetadataFilter(event: FilterEvent) { + this.applyFilter.emit(event); this.updateApplied++; } diff --git a/UI/Web/src/app/cards/card-item/card-item.component.scss b/UI/Web/src/app/cards/card-item/card-item.component.scss index 44ee88c77..f436a0fa8 100644 --- a/UI/Web/src/app/cards/card-item/card-item.component.scss +++ b/UI/Web/src/app/cards/card-item/card-item.component.scss @@ -19,7 +19,6 @@ $image-width: 160px; } .card { - margin: 5px; max-width: $image-width; cursor: pointer; padding-left: 0px; diff --git a/UI/Web/src/app/cards/cards.module.ts b/UI/Web/src/app/cards/cards.module.ts index 8f44a076b..cf9027fb0 100644 --- a/UI/Web/src/app/cards/cards.module.ts +++ b/UI/Web/src/app/cards/cards.module.ts @@ -22,6 +22,7 @@ import { PipeModule } from '../pipe/pipe.module'; import { ChapterMetadataDetailComponent } from './chapter-metadata-detail/chapter-metadata-detail.component'; import { FileInfoComponent } from './file-info/file-info.component'; import { BookmarkComponent } from './bookmark/bookmark.component'; +import { MetadataFilterModule } from '../metadata-filter/metadata-filter.module'; @@ -49,14 +50,19 @@ import { BookmarkComponent } from './bookmark/bookmark.component'; ReactiveFormsModule, FormsModule, // EditCollectionsModal + PipeModule, SharedModule, - TypeaheadModule, + TypeaheadModule, // edit series modal + + MetadataFilterModule, NgbNavModule, NgbTooltipModule, // Card item NgbCollapseModule, NgbRatingModule, + + NgbNavModule, //Series Detail NgbPaginationModule, // CardDetailLayoutComponent NgbDropdownModule, diff --git a/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.scss b/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.scss index 6e707c502..287588465 100644 --- a/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.scss +++ b/UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.scss @@ -1,16 +1,13 @@ .carousel-container { overflow: hidden; - padding-top: 15px; width: 100%; position: relative; display: flex; - float: left; flex-direction: column; } .carousel-container { .section-title { - font-size: 1.6rem; font-weight: 400; margin-left: 10px; color: var(--carousel-header-text-color); @@ -26,3 +23,11 @@ ::ng-deep .swiper-slide { width: auto !important; } + +::ng-deep .swiper-wrapper { + margin-bottom: 10px; +} + +::ng-deep .last-carousel { + margin-bottom: 0; +} diff --git a/UI/Web/src/app/collections/all-collections/all-collections.component.html b/UI/Web/src/app/collections/all-collections/all-collections.component.html index 8cde25096..a3eda8d16 100644 --- a/UI/Web/src/app/collections/all-collections/all-collections.component.html +++ b/UI/Web/src/app/collections/all-collections/all-collections.component.html @@ -1,6 +1,13 @@ - +

      + + Collections +

      + + diff --git a/UI/Web/src/app/collections/all-collections/all-collections.component.ts b/UI/Web/src/app/collections/all-collections/all-collections.component.ts index 223894632..62371ea78 100644 --- a/UI/Web/src/app/collections/all-collections/all-collections.component.ts +++ b/UI/Web/src/app/collections/all-collections/all-collections.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; @@ -20,6 +20,8 @@ export class AllCollectionsComponent implements OnInit { collections: CollectionTag[] = []; collectionTagActions: ActionItem[] = []; + filterOpen: EventEmitter = new EventEmitter(); + constructor(private collectionService: CollectionTagService, private router: Router, private actionFactoryService: ActionFactoryService, private modalService: NgbModal, private titleService: Title, private imageService: ImageService) { @@ -61,5 +63,4 @@ export class AllCollectionsComponent implements OnInit { break; } } - } diff --git a/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts b/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts index 4366f9d00..a6cea8df2 100644 --- a/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts +++ b/UI/Web/src/app/collections/collection-detail/collection-detail.component.ts @@ -6,8 +6,8 @@ import { ToastrService } from 'ngx-toastr'; import { Subject } from 'rxjs'; import { debounceTime, take, takeUntil, takeWhile } from 'rxjs/operators'; import { BulkSelectionService } from 'src/app/cards/bulk-selection.service'; -import { FilterSettings } from 'src/app/cards/card-detail-layout/card-detail-layout.component'; import { EditCollectionTagsComponent } from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component'; +import { FilterSettings } from 'src/app/metadata-filter/filter-settings'; import { KEY_CODES, UtilityService } from 'src/app/shared/_services/utility.service'; import { CollectionTag } from 'src/app/_models/collection-tag'; import { SeriesAddedToCollectionEvent } from 'src/app/_models/events/series-added-to-collection-event'; diff --git a/UI/Web/src/app/collections/collections.module.ts b/UI/Web/src/app/collections/collections.module.ts index 0863647c8..fb21685e4 100644 --- a/UI/Web/src/app/collections/collections.module.ts +++ b/UI/Web/src/app/collections/collections.module.ts @@ -5,6 +5,7 @@ import { SharedModule } from '../shared/shared.module'; import { CollectionsRoutingModule } from './collections-routing.module'; import { CardsModule } from '../cards/cards.module'; import { AllCollectionsComponent } from './all-collections/all-collections.component'; +import { SidenavModule } from '../sidenav/sidenav.module'; @@ -18,6 +19,7 @@ import { AllCollectionsComponent } from './all-collections/all-collections.compo SharedModule, CardsModule, CollectionsRoutingModule, + SidenavModule ], exports: [ AllCollectionsComponent diff --git a/UI/Web/src/app/dashboard/dashboard.component.html b/UI/Web/src/app/dashboard/dashboard.component.html index 73bda1d74..f4c84f091 100644 --- a/UI/Web/src/app/dashboard/dashboard.component.html +++ b/UI/Web/src/app/dashboard/dashboard.component.html @@ -1,21 +1,3 @@ -
      - -
      -
      \ No newline at end of file + + + \ No newline at end of file diff --git a/UI/Web/src/app/library-detail/library-detail.component.html b/UI/Web/src/app/library-detail/library-detail.component.html index cebeac178..9240670ef 100644 --- a/UI/Web/src/app/library-detail/library-detail.component.html +++ b/UI/Web/src/app/library-detail/library-detail.component.html @@ -1,10 +1,19 @@ + +

      + + {{libraryName}} +

      +
      + +
      +       - diff --git a/UI/Web/src/app/library-detail/library-detail.component.ts b/UI/Web/src/app/library-detail/library-detail.component.ts index e1b382d66..c2101dbdf 100644 --- a/UI/Web/src/app/library-detail/library-detail.component.ts +++ b/UI/Web/src/app/library-detail/library-detail.component.ts @@ -1,10 +1,10 @@ -import { Component, HostListener, OnDestroy, OnInit } from '@angular/core'; +import { Component, EventEmitter, HostListener, OnDestroy, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { debounceTime, take, takeUntil, takeWhile } from 'rxjs/operators'; import { BulkSelectionService } from '../cards/bulk-selection.service'; -import { FilterSettings } from '../cards/card-detail-layout/card-detail-layout.component'; +import { FilterSettings } from '../metadata-filter/filter-settings'; import { KEY_CODES, UtilityService } from '../shared/_services/utility.service'; import { SeriesAddedEvent } from '../_models/events/series-added-event'; import { Library } from '../_models/library'; @@ -16,6 +16,7 @@ import { ActionService } from '../_services/action.service'; import { LibraryService } from '../_services/library.service'; import { EVENTS, MessageHubService } from '../_services/message-hub.service'; import { SeriesService } from '../_services/series.service'; +import { NavService } from '../_services/nav.service'; @Component({ selector: 'app-library-detail', @@ -33,6 +34,8 @@ export class LibraryDetailComponent implements OnInit, OnDestroy { filter: SeriesFilter | undefined = undefined; onDestroy: Subject = new Subject(); filterSettings: FilterSettings = new FilterSettings(); + filterOpen: EventEmitter = new EventEmitter(); + bulkActionCallback = (action: Action, data: any) => { const selectedSeriesIndexies = this.bulkSelectionService.getSelectedCardsForSource('series'); @@ -74,7 +77,7 @@ export class LibraryDetailComponent implements OnInit, OnDestroy { constructor(private route: ActivatedRoute, private router: Router, private seriesService: SeriesService, private libraryService: LibraryService, private titleService: Title, private actionFactoryService: ActionFactoryService, private actionService: ActionService, public bulkSelectionService: BulkSelectionService, private hubService: MessageHubService, - private utilityService: UtilityService) { + private utilityService: UtilityService, public navService: NavService) { const routeId = this.route.snapshot.paramMap.get('id'); if (routeId === null) { this.router.navigateByUrl('/libraries'); diff --git a/UI/Web/src/app/library/library.component.html b/UI/Web/src/app/library/library.component.html index 4add40fa0..6d2692741 100644 --- a/UI/Web/src/app/library/library.component.html +++ b/UI/Web/src/app/library/library.component.html @@ -14,7 +14,7 @@ - @@ -27,13 +27,7 @@ - - - - - - diff --git a/UI/Web/src/app/library/library.component.ts b/UI/Web/src/app/library/library.component.ts index 610d67f1b..dade32f8b 100644 --- a/UI/Web/src/app/library/library.component.ts +++ b/UI/Web/src/app/library/library.component.ts @@ -141,11 +141,7 @@ export class LibraryComponent implements OnInit, OnDestroy { } else if (sectionTitle.toLowerCase() === 'recently updated series') { this.router.navigate(['recently-added']); } else if (sectionTitle.toLowerCase() === 'on deck') { - const params: any = {}; - params['readStatus'] = 'true,false,false'; - params['page'] = 1; - this.router.navigate(['all-series'], {queryParams: params}); - //this.router.navigate(['on-deck']); + this.router.navigate(['on-deck']); } else if (sectionTitle.toLowerCase() === 'libraries') { this.router.navigate(['all-series']); } diff --git a/UI/Web/src/app/manga-reader/_models/chapter-info.ts b/UI/Web/src/app/manga-reader/_models/chapter-info.ts index f9313b973..f83c86902 100644 --- a/UI/Web/src/app/manga-reader/_models/chapter-info.ts +++ b/UI/Web/src/app/manga-reader/_models/chapter-info.ts @@ -1,4 +1,3 @@ -import { LibraryType } from "src/app/_models/library"; import { MangaFormat } from "src/app/_models/manga-format"; export interface ChapterInfo { @@ -9,7 +8,6 @@ export interface ChapterInfo { seriesFormat: MangaFormat; seriesId: number; libraryId: number; - libraryType: LibraryType; fileName: string; isSpecial: boolean; volumeId: number; diff --git a/UI/Web/src/app/manga-reader/manga-reader.component.html b/UI/Web/src/app/manga-reader/manga-reader.component.html index 7891cb54a..ae6563fd9 100644 --- a/UI/Web/src/app/manga-reader/manga-reader.component.html +++ b/UI/Web/src/app/manga-reader/manga-reader.component.html @@ -38,7 +38,7 @@
      - @@ -128,19 +128,27 @@
      -
      -
      +
      +
       
      -
      +
      +
      + +
      +
      +
      -
      +
      +
        +
      +
      - - +
      +
      +
      -
      +
      @@ -168,6 +173,17 @@
      + +
      +
      + +
      +
      + +
      +
      diff --git a/UI/Web/src/app/manga-reader/manga-reader.component.scss b/UI/Web/src/app/manga-reader/manga-reader.component.scss index 0bc038212..65bef4e82 100644 --- a/UI/Web/src/app/manga-reader/manga-reader.component.scss +++ b/UI/Web/src/app/manga-reader/manga-reader.component.scss @@ -47,9 +47,9 @@ img { } } -// canvas { -// //position: absolute; // JOE: Not sure why we have this, but it breaks the renderer -// } +canvas { + position: absolute; +} .reader { background-color: var(--manga-reader-bg-color); diff --git a/UI/Web/src/app/manga-reader/manga-reader.component.ts b/UI/Web/src/app/manga-reader/manga-reader.component.ts index 1e3eae62f..ec00fe7cc 100644 --- a/UI/Web/src/app/manga-reader/manga-reader.component.ts +++ b/UI/Web/src/app/manga-reader/manga-reader.component.ts @@ -122,10 +122,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { * Used soley for LayoutMode.Double rendering. Will always hold the next image in buffer. */ canvasImage2 = new Image(); - /** - * Dictates if we use render with canvas or with image. This is only for Splitting. - */ - renderWithCanvas: boolean = false; + renderWithCanvas: boolean = false; // Dictates if we use render with canvas or with image /** * A circular array of size PREFETCH_PAGES + 2. Maintains prefetched Images around the current page to load from to avoid loading animation. @@ -329,6 +326,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { private libraryService: LibraryService, public utilityService: UtilityService, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document, private modalService: NgbModal) { this.navService.hideNavBar(); + this.navService.hideSideNav(); } ngOnInit(): void { @@ -341,6 +339,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { return; } + + this.libraryId = parseInt(libraryId, 10); this.seriesId = parseInt(seriesId, 10); this.chapterId = parseInt(chapterId, 10); @@ -428,6 +428,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { ngOnDestroy() { this.readerService.resetOverrideStyles(); this.navService.showNavBar(); + this.navService.showSideNav(); this.onDestroy.next(); this.onDestroy.complete(); this.goToPageEvent.complete(); @@ -533,8 +534,11 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { newOptions.ceil = this.maxPages - 1; // We -1 so that the slider UI shows us hitting the end, since visually we +1 everything. this.pageOptions = newOptions; - this.libraryType = results.chapterInfo.libraryType; - this.updateTitle(results.chapterInfo, this.libraryType); + // TODO: Move this into ChapterInfo + this.libraryService.getLibraryType(results.chapterInfo.libraryId).pipe(take(1)).subscribe(type => { + this.libraryType = type; + this.updateTitle(results.chapterInfo, type); + }); this.inSetup = false; @@ -645,20 +649,20 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { getFittingOptionClass() { const formControl = this.generalSettingsForm.get('fittingOption'); - let val = FITTING_OPTION.HEIGHT as string; + let val = FITTING_OPTION.HEIGHT; if (formControl === undefined) { - val = FITTING_OPTION.HEIGHT as string; + val = FITTING_OPTION.HEIGHT; } val = formControl?.value; - if (this.layoutMode !== LayoutMode.Single) { - val = val + (this.isCoverImage() ? 'cover' : '') + 'double'; - } else if (this.isCoverImage() && this.shouldRenderAsFitSplit()) { - // JOE: If we are Fit to Screen, we should use fitting as width just for cover images - // Rewriting to fit to width for this cover image - val = FITTING_OPTION.WIDTH; + + if (this.isCoverImage() && this.layoutMode !== LayoutMode.Single) { + return val + ' cover double'; } + if (!this.isCoverImage() && this.layoutMode !== LayoutMode.Single) { + return val + ' double'; + } return val; } @@ -971,10 +975,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.renderWithCanvas = true; } else { this.renderWithCanvas = false; - - // if (this.isCoverImage() && this.layoutMode === LayoutMode.Single && this.getFit() !== FITTING_OPTION.WIDTH) { - - // } } // Reset scroll on non HEIGHT Fits diff --git a/UI/Web/src/app/metadata-filter/filter-settings.ts b/UI/Web/src/app/metadata-filter/filter-settings.ts new file mode 100644 index 000000000..219e0eab5 --- /dev/null +++ b/UI/Web/src/app/metadata-filter/filter-settings.ts @@ -0,0 +1,21 @@ +import { SeriesFilter } from "../_models/series-filter"; + +export class FilterSettings { + libraryDisabled = false; + formatDisabled = false; + collectionDisabled = false; + genresDisabled = false; + peopleDisabled = false; + readProgressDisabled = false; + ratingDisabled = false; + sortDisabled = false; + ageRatingDisabled = false; + tagsDisabled = false; + languageDisabled = false; + publicationStatusDisabled = false; + presets: SeriesFilter | undefined; + /** + * Should the filter section be open by default + */ + openByDefault = false; + } \ No newline at end of file diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.html b/UI/Web/src/app/metadata-filter/metadata-filter.component.html new file mode 100644 index 000000000..c13248251 --- /dev/null +++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.html @@ -0,0 +1,338 @@ +
      +
      + +
      +
      + +
      + +
      +

      Book Settings + +

      + +
      +
      + +
      +       +
      + + + This is library agnostic +
      +
      +
      +
      +   + + + + {{item.title}} + + + {{item.title}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      +   + + + + {{item.title}} + + + {{item.title}} + + +
      +
      + +
      +
      + + + + {{item.title}} + + + {{item.title}} + + +
      +
      + +
      +
      + + + + {{item.title}} + + + {{item.title}} + + +
      +
      +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      + +
      +
      + + + + {{item.name}} + + + {{item.name}} + + +
      +
      +
      +
      +
      + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      +
      + +
      + +
      + + + ★ + + +
      +
      + +
      + + + + {{item.title}} + + + {{item.title}} + + +
      + +
      + + + + {{item.title}} + + + {{item.title}} + + +
      + +
      + + + + {{item.title}} + + + {{item.title}} + + +
      +
      +
      +
      +
      +
      +
      + + + +
      +
      +
      +
      +
      +
      +
      + +
      +
      + +
      +
      +
      +       \ No newline at end of file diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.scss b/UI/Web/src/app/metadata-filter/metadata-filter.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts new file mode 100644 index 000000000..f7f19a873 --- /dev/null +++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts @@ -0,0 +1,555 @@ +import { Component, ContentChild, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; +import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'; +import { forkJoin, map, Observable, of, ReplaySubject, Subject, takeUntil } from 'rxjs'; +import { UtilityService } from '../shared/_services/utility.service'; +import { TypeaheadSettings } from '../typeahead/typeahead-settings'; +import { CollectionTag } from '../_models/collection-tag'; +import { Genre } from '../_models/genre'; +import { Library } from '../_models/library'; +import { MangaFormat } from '../_models/manga-format'; +import { AgeRatingDto } from '../_models/metadata/age-rating-dto'; +import { Language } from '../_models/metadata/language'; +import { PublicationStatusDto } from '../_models/metadata/publication-status-dto'; +import { Person, PersonRole } from '../_models/person'; +import { FilterEvent, FilterItem, mangaFormatFilters, SeriesFilter, SortField } from '../_models/series-filter'; +import { Tag } from '../_models/tag'; +import { CollectionTagService } from '../_services/collection-tag.service'; +import { LibraryService } from '../_services/library.service'; +import { MetadataService } from '../_services/metadata.service'; +import { SeriesService } from '../_services/series.service'; +import { FilterSettings } from './filter-settings'; + +@Component({ + selector: 'app-metadata-filter', + templateUrl: './metadata-filter.component.html', + styleUrls: ['./metadata-filter.component.scss'] +}) +export class MetadataFilterComponent implements OnInit, OnDestroy { + + /** + * This toggles the opening/collapsing of the metadata filter code + */ + @Input() filterOpen: EventEmitter = new EventEmitter(); + + /** + * Should filtering be shown on the page + */ + @Input() filteringDisabled: boolean = false; + + @Input() filterSettings!: FilterSettings; + + @Output() applyFilter: EventEmitter = new EventEmitter(); + + @ContentChild('[ngbCollapse]') collapse!: NgbCollapse; + + + formatSettings: TypeaheadSettings> = new TypeaheadSettings(); + librarySettings: TypeaheadSettings = new TypeaheadSettings(); + genreSettings: TypeaheadSettings = new TypeaheadSettings(); + collectionSettings: TypeaheadSettings = new TypeaheadSettings(); + ageRatingSettings: TypeaheadSettings = new TypeaheadSettings(); + publicationStatusSettings: TypeaheadSettings = new TypeaheadSettings(); + tagsSettings: TypeaheadSettings = new TypeaheadSettings(); + languageSettings: TypeaheadSettings = new TypeaheadSettings(); + peopleSettings: {[PersonRole: string]: TypeaheadSettings} = {}; + resetTypeaheads: Subject = new ReplaySubject(1); + + /** + * Controls the visiblity of extended controls that sit below the main header. + */ + filteringCollapsed: boolean = true; + + filter!: SeriesFilter; + libraries: Array> = []; + + + readProgressGroup!: FormGroup; + sortGroup!: FormGroup; + isAscendingSort: boolean = true; + + updateApplied: number = 0; + + + private onDestory: Subject = new Subject(); + + get PersonRole(): typeof PersonRole { + return PersonRole; + } + + get SortField(): typeof SortField { + return SortField; + } + + constructor(private libraryService: LibraryService, private metadataService: MetadataService, private seriesService: SeriesService, + private utilityService: UtilityService, private collectionTagService: CollectionTagService) { + this.filter = this.seriesService.createSeriesFilter(); + this.readProgressGroup = new FormGroup({ + read: new FormControl(this.filter.readStatus.read, []), + notRead: new FormControl(this.filter.readStatus.notRead, []), + inProgress: new FormControl(this.filter.readStatus.inProgress, []), + }); + + this.sortGroup = new FormGroup({ + sortField: new FormControl(this.filter.sortOptions?.sortField || SortField.SortName, []), + }); + + this.readProgressGroup.valueChanges.pipe(takeUntil(this.onDestory)).subscribe(changes => { + this.filter.readStatus.read = this.readProgressGroup.get('read')?.value; + this.filter.readStatus.inProgress = this.readProgressGroup.get('inProgress')?.value; + this.filter.readStatus.notRead = this.readProgressGroup.get('notRead')?.value; + + let sum = 0; + sum += (this.filter.readStatus.read ? 1 : 0); + sum += (this.filter.readStatus.inProgress ? 1 : 0); + sum += (this.filter.readStatus.notRead ? 1 : 0); + + if (sum === 1) { + if (this.filter.readStatus.read) this.readProgressGroup.get('read')?.disable({ emitEvent: false }); + if (this.filter.readStatus.notRead) this.readProgressGroup.get('notRead')?.disable({ emitEvent: false }); + if (this.filter.readStatus.inProgress) this.readProgressGroup.get('inProgress')?.disable({ emitEvent: false }); + } else { + this.readProgressGroup.get('read')?.enable({ emitEvent: false }); + this.readProgressGroup.get('notRead')?.enable({ emitEvent: false }); + this.readProgressGroup.get('inProgress')?.enable({ emitEvent: false }); + } + }); + + this.sortGroup.valueChanges.pipe(takeUntil(this.onDestory)).subscribe(changes => { + if (this.filter.sortOptions == null) { + this.filter.sortOptions = { + isAscending: this.isAscendingSort, + sortField: parseInt(this.sortGroup.get('sortField')?.value, 10) + }; + } + this.filter.sortOptions.sortField = parseInt(this.sortGroup.get('sortField')?.value, 10); + }); + } + + ngOnInit(): void { + if (this.filterSettings === undefined) { + this.filterSettings = new FilterSettings(); + } + + if (this.filterOpen) { + this.filterOpen.pipe(takeUntil(this.onDestory)).subscribe(openState => { + this.filteringCollapsed = !openState; + }); + } + + this.setupTypeaheads(); + } + + ngOnDestroy() { + this.onDestory.next(); + this.onDestory.complete(); + } + + getPersonsSettings(role: PersonRole) { + return this.peopleSettings[role]; + } + + setupTypeaheads() { + + this.setupFormatTypeahead(); + + forkJoin([ + this.setupLibraryTypeahead(), + this.setupCollectionTagTypeahead(), + this.setupAgeRatingSettings(), + this.setupPublicationStatusSettings(), + this.setupTagSettings(), + this.setupLanguageSettings(), + this.setupGenreTypeahead(), + this.setupPersonTypeahead(), + ]).subscribe(results => { + this.resetTypeaheads.next(true); + if (this.filterSettings.openByDefault) { + this.filteringCollapsed = false; + } + this.apply(); + }); + } + + setupFormatTypeahead() { + this.formatSettings.minCharacters = 0; + this.formatSettings.multiple = true; + this.formatSettings.id = 'format'; + this.formatSettings.unique = true; + this.formatSettings.addIfNonExisting = false; + this.formatSettings.fetchFn = (filter: string) => of(mangaFormatFilters).pipe(map(items => this.formatSettings.compareFn(items, filter))); + this.formatSettings.compareFn = (options: FilterItem[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.title, filter)); + } + + this.formatSettings.singleCompareFn = (a: FilterItem, b: FilterItem) => { + return a.title == b.title; + } + + if (this.filterSettings.presets?.formats && this.filterSettings.presets?.formats.length > 0) { + this.formatSettings.savedData = mangaFormatFilters.filter(item => this.filterSettings.presets?.formats.includes(item.value)); + this.filter.formats = this.formatSettings.savedData.map(item => item.value); + this.resetTypeaheads.next(true); + } + } + + setupLibraryTypeahead() { + this.librarySettings.minCharacters = 0; + this.librarySettings.multiple = true; + this.librarySettings.id = 'libraries'; + this.librarySettings.unique = true; + this.librarySettings.addIfNonExisting = false; + this.librarySettings.fetchFn = (filter: string) => { + return this.libraryService.getLibrariesForMember() + .pipe(map(items => this.librarySettings.compareFn(items, filter))); + }; + this.librarySettings.compareFn = (options: Library[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.name, filter)); + } + this.librarySettings.singleCompareFn = (a: Library, b: Library) => { + return a.name == b.name; + } + + if (this.filterSettings.presets?.libraries && this.filterSettings.presets?.libraries.length > 0) { + return this.librarySettings.fetchFn('').pipe(map(libraries => { + this.librarySettings.savedData = libraries.filter(item => this.filterSettings.presets?.libraries.includes(item.id)); + this.filter.libraries = this.librarySettings.savedData.map(item => item.id); + return of(true); + })); + } + return of(true); + } + + setupGenreTypeahead() { + this.genreSettings.minCharacters = 0; + this.genreSettings.multiple = true; + this.genreSettings.id = 'genres'; + this.genreSettings.unique = true; + this.genreSettings.addIfNonExisting = false; + this.genreSettings.fetchFn = (filter: string) => { + return this.metadataService.getAllGenres(this.filter.libraries) + .pipe(map(items => this.genreSettings.compareFn(items, filter))); + }; + this.genreSettings.compareFn = (options: Genre[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.title, filter)); + } + this.genreSettings.singleCompareFn = (a: Genre, b: Genre) => { + return a.title == b.title; + } + + if (this.filterSettings.presets?.genres && this.filterSettings.presets?.genres.length > 0) { + return this.genreSettings.fetchFn('').pipe(map(genres => { + this.genreSettings.savedData = genres.filter(item => this.filterSettings.presets?.genres.includes(item.id)); + this.filter.genres = this.genreSettings.savedData.map(item => item.id); + return of(true); + })); + } + return of(true); + } + + setupAgeRatingSettings() { + this.ageRatingSettings.minCharacters = 0; + this.ageRatingSettings.multiple = true; + this.ageRatingSettings.id = 'age-rating'; + this.ageRatingSettings.unique = true; + this.ageRatingSettings.addIfNonExisting = false; + this.ageRatingSettings.fetchFn = (filter: string) => this.metadataService.getAllAgeRatings(this.filter.libraries) + .pipe(map(items => this.ageRatingSettings.compareFn(items, filter))); + + this.ageRatingSettings.compareFn = (options: AgeRatingDto[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.title, filter)); + } + + this.ageRatingSettings.singleCompareFn = (a: AgeRatingDto, b: AgeRatingDto) => { + return a.title == b.title; + } + + if (this.filterSettings.presets?.ageRating && this.filterSettings.presets?.ageRating.length > 0) { + return this.ageRatingSettings.fetchFn('').pipe(map(rating => { + this.ageRatingSettings.savedData = rating.filter(item => this.filterSettings.presets?.ageRating.includes(item.value)); + this.filter.ageRating = this.ageRatingSettings.savedData.map(item => item.value); + return of(true); + })); + } + return of(true); + } + + setupPublicationStatusSettings() { + this.publicationStatusSettings.minCharacters = 0; + this.publicationStatusSettings.multiple = true; + this.publicationStatusSettings.id = 'publication-status'; + this.publicationStatusSettings.unique = true; + this.publicationStatusSettings.addIfNonExisting = false; + this.publicationStatusSettings.fetchFn = (filter: string) => this.metadataService.getAllPublicationStatus(this.filter.libraries) + .pipe(map(items => this.publicationStatusSettings.compareFn(items, filter))); + + this.publicationStatusSettings.compareFn = (options: PublicationStatusDto[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.title, filter)); + } + + this.publicationStatusSettings.singleCompareFn = (a: PublicationStatusDto, b: PublicationStatusDto) => { + return a.title == b.title; + } + + if (this.filterSettings.presets?.publicationStatus && this.filterSettings.presets?.publicationStatus.length > 0) { + return this.publicationStatusSettings.fetchFn('').pipe(map(statuses => { + this.publicationStatusSettings.savedData = statuses.filter(item => this.filterSettings.presets?.publicationStatus.includes(item.value)); + this.filter.publicationStatus = this.publicationStatusSettings.savedData.map(item => item.value); + return of(true); + })); + } + return of(true); + } + + setupTagSettings() { + this.tagsSettings.minCharacters = 0; + this.tagsSettings.multiple = true; + this.tagsSettings.id = 'tags'; + this.tagsSettings.unique = true; + this.tagsSettings.addIfNonExisting = false; + this.tagsSettings.compareFn = (options: Tag[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.title, filter)); + } + this.tagsSettings.fetchFn = (filter: string) => this.metadataService.getAllTags(this.filter.libraries) + .pipe(map(items => this.tagsSettings.compareFn(items, filter))); + + this.tagsSettings.singleCompareFn = (a: Tag, b: Tag) => { + return a.id == b.id; + } + + if (this.filterSettings.presets?.tags && this.filterSettings.presets?.tags.length > 0) { + return this.tagsSettings.fetchFn('').pipe(map(tags => { + this.tagsSettings.savedData = tags.filter(item => this.filterSettings.presets?.tags.includes(item.id)); + this.filter.tags = this.tagsSettings.savedData.map(item => item.id); + return of(true); + })); + } + return of(true); + } + + setupLanguageSettings() { + this.languageSettings.minCharacters = 0; + this.languageSettings.multiple = true; + this.languageSettings.id = 'languages'; + this.languageSettings.unique = true; + this.languageSettings.addIfNonExisting = false; + this.languageSettings.compareFn = (options: Language[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.title, filter)); + } + this.languageSettings.fetchFn = (filter: string) => this.metadataService.getAllLanguages(this.filter.libraries) + .pipe(map(items => this.languageSettings.compareFn(items, filter))); + + this.languageSettings.singleCompareFn = (a: Language, b: Language) => { + return a.isoCode == b.isoCode; + } + + if (this.filterSettings.presets?.languages && this.filterSettings.presets?.languages.length > 0) { + return this.languageSettings.fetchFn('').pipe(map(languages => { + this.languageSettings.savedData = languages.filter(item => this.filterSettings.presets?.languages.includes(item.isoCode)); + this.filter.languages = this.languageSettings.savedData.map(item => item.isoCode); + return of(true); + })); + } + return of(true); + } + + setupCollectionTagTypeahead() { + this.collectionSettings.minCharacters = 0; + this.collectionSettings.multiple = true; + this.collectionSettings.id = 'collections'; + this.collectionSettings.unique = true; + this.collectionSettings.addIfNonExisting = false; + this.collectionSettings.compareFn = (options: CollectionTag[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.title, filter)); + } + this.collectionSettings.fetchFn = (filter: string) => this.collectionTagService.allTags() + .pipe(map(items => this.collectionSettings.compareFn(items, filter))); + + this.collectionSettings.singleCompareFn = (a: CollectionTag, b: CollectionTag) => { + return a.id == b.id; + } + + if (this.filterSettings.presets?.collectionTags && this.filterSettings.presets?.collectionTags.length > 0) { + return this.collectionSettings.fetchFn('').pipe(map(tags => { + this.collectionSettings.savedData = tags.filter(item => this.filterSettings.presets?.collectionTags.includes(item.id)); + this.filter.collectionTags = this.collectionSettings.savedData.map(item => item.id); + return of(true); + })); + } + return of(true); + } + + updateFromPreset(id: string, peopleFilterField: Array, presetField: Array | undefined, role: PersonRole) { + const personSettings = this.createBlankPersonSettings(id, role) + if (presetField && presetField.length > 0) { + const fetch = personSettings.fetchFn as ((filter: string) => Observable); + return fetch('').pipe(map(people => { + personSettings.savedData = people.filter(item => presetField.includes(item.id)); + peopleFilterField = personSettings.savedData.map(item => item.id); + this.resetTypeaheads.next(true); + this.peopleSettings[role] = personSettings; + this.updatePersonFilters(personSettings.savedData as Person[], role); + return true; + })); + } else { + this.peopleSettings[role] = personSettings; + return of(true); + } + } + + setupPersonTypeahead() { + this.peopleSettings = {}; + + return forkJoin([ + this.updateFromPreset('writers', this.filter.writers, this.filterSettings.presets?.writers, PersonRole.Writer), + this.updateFromPreset('character', this.filter.character, this.filterSettings.presets?.character, PersonRole.Character), + this.updateFromPreset('colorist', this.filter.colorist, this.filterSettings.presets?.colorist, PersonRole.Colorist), + this.updateFromPreset('cover-artist', this.filter.coverArtist, this.filterSettings.presets?.coverArtist, PersonRole.CoverArtist), + this.updateFromPreset('editor', this.filter.editor, this.filterSettings.presets?.editor, PersonRole.Editor), + this.updateFromPreset('inker', this.filter.inker, this.filterSettings.presets?.inker, PersonRole.Inker), + this.updateFromPreset('letterer', this.filter.letterer, this.filterSettings.presets?.letterer, PersonRole.Letterer), + this.updateFromPreset('penciller', this.filter.penciller, this.filterSettings.presets?.penciller, PersonRole.Penciller), + this.updateFromPreset('publisher', this.filter.publisher, this.filterSettings.presets?.publisher, PersonRole.Publisher), + this.updateFromPreset('translators', this.filter.translators, this.filterSettings.presets?.translators, PersonRole.Translator) + ]).pipe(map(results => { + this.resetTypeaheads.next(true); + return of(true); + })); + } + + fetchPeople(role: PersonRole, filter: string) { + return this.metadataService.getAllPeople(this.filter.libraries).pipe(map(people => { + return people.filter(p => p.role == role && this.utilityService.filter(p.name, filter)); + })); + } + + createBlankPersonSettings(id: string, role: PersonRole) { + var personSettings = new TypeaheadSettings(); + personSettings.minCharacters = 0; + personSettings.multiple = true; + personSettings.unique = true; + personSettings.addIfNonExisting = false; + personSettings.id = id; + personSettings.compareFn = (options: Person[], filter: string) => { + return options.filter(m => this.utilityService.filter(m.name, filter)); + } + + personSettings.singleCompareFn = (a: Person, b: Person) => { + return a.name == b.name && a.role == b.role; + } + personSettings.fetchFn = (filter: string) => { + return this.fetchPeople(role, filter).pipe(map(items => personSettings.compareFn(items, filter))); + }; + return personSettings; + } + + updateFormatFilters(formats: MangaFormat[]) { + this.filter.formats = formats.map(item => item) || []; + } + + updateLibraryFilters(libraries: Library[]) { + this.filter.libraries = libraries.map(item => item.id) || []; + } + + updateGenreFilters(genres: Genre[]) { + this.filter.genres = genres.map(item => item.id) || []; + } + + updateTagFilters(tags: Tag[]) { + this.filter.tags = tags.map(item => item.id) || []; + } + + updatePersonFilters(persons: Person[], role: PersonRole) { + switch (role) { + case PersonRole.CoverArtist: + this.filter.coverArtist = persons.map(p => p.id); + break; + case PersonRole.Character: + this.filter.character = persons.map(p => p.id); + break; + case PersonRole.Colorist: + this.filter.colorist = persons.map(p => p.id); + break; + case PersonRole.Editor: + this.filter.editor = persons.map(p => p.id); + break; + case PersonRole.Inker: + this.filter.inker = persons.map(p => p.id); + break; + case PersonRole.Letterer: + this.filter.letterer = persons.map(p => p.id); + break; + case PersonRole.Penciller: + this.filter.penciller = persons.map(p => p.id); + break; + case PersonRole.Publisher: + this.filter.publisher = persons.map(p => p.id); + break; + case PersonRole.Writer: + this.filter.writers = persons.map(p => p.id); + break; + case PersonRole.Translator: + this.filter.translators = persons.map(p => p.id); + + } + } + + updateCollectionFilters(tags: CollectionTag[]) { + this.filter.collectionTags = tags.map(item => item.id) || []; + } + + updateRating(rating: any) { + this.filter.rating = rating; + } + + updateAgeRating(ratingDtos: AgeRatingDto[]) { + this.filter.ageRating = ratingDtos.map(item => item.value) || []; + } + + updatePublicationStatus(dtos: PublicationStatusDto[]) { + this.filter.publicationStatus = dtos.map(item => item.value) || []; + } + + updateLanguageRating(languages: Language[]) { + this.filter.languages = languages.map(item => item.isoCode) || []; + } + + updateReadStatus(status: string) { + if (status === 'read') { + this.filter.readStatus.read = !this.filter.readStatus.read; + } else if (status === 'inProgress') { + this.filter.readStatus.inProgress = !this.filter.readStatus.inProgress; + } else if (status === 'notRead') { + this.filter.readStatus.notRead = !this.filter.readStatus.notRead; + } + } + + updateSortOrder() { + this.isAscendingSort = !this.isAscendingSort; + if (this.filter.sortOptions === null) { + this.filter.sortOptions = { + isAscending: this.isAscendingSort, + sortField: SortField.SortName + } + } + + this.filter.sortOptions.isAscending = this.isAscendingSort; + } + + clear() { + this.filter = this.seriesService.createSeriesFilter(); + this.readProgressGroup.get('read')?.setValue(true); + this.readProgressGroup.get('notRead')?.setValue(true); + this.readProgressGroup.get('inProgress')?.setValue(true); + this.sortGroup.get('sortField')?.setValue(SortField.SortName); + this.isAscendingSort = true; + // Apply any presets which will trigger the apply + this.setupTypeaheads(); + } + + apply() { + this.applyFilter.emit({filter: this.filter, isFirst: this.updateApplied === 0}); + this.updateApplied++; + } + +} diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.module.ts b/UI/Web/src/app/metadata-filter/metadata-filter.module.ts new file mode 100644 index 000000000..5cea6bdc8 --- /dev/null +++ b/UI/Web/src/app/metadata-filter/metadata-filter.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MetadataFilterComponent } from './metadata-filter.component'; +import { NgbCollapseModule, NgbRatingModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { SharedModule } from '../shared/shared.module'; +import { TypeaheadModule } from '../typeahead/typeahead.module'; + +@NgModule({ + declarations: [ + MetadataFilterComponent + ], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + NgbTooltipModule, + NgbRatingModule, + NgbCollapseModule, + SharedModule, + TypeaheadModule + ], + exports: [ + MetadataFilterComponent + ] +}) +export class MetadataFilterModule { } 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 c589629e9..c4149cd25 100644 --- a/UI/Web/src/app/nav-header/nav-header.component.html +++ b/UI/Web/src/app/nav-header/nav-header.component.html @@ -1,6 +1,7 @@