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