diff --git a/API/Controllers/CollectionController.cs b/API/Controllers/CollectionController.cs index 253f6b7c2..e333bd42a 100644 --- a/API/Controllers/CollectionController.cs +++ b/API/Controllers/CollectionController.cs @@ -66,10 +66,12 @@ public class CollectionController : BaseApiController /// /// [HttpGet("single")] - public async Task>> GetTag(int collectionId) + public async Task> GetTag(int collectionId) { - var collections = await _unitOfWork.CollectionTagRepository.GetCollectionDtosAsync(UserId, false); - return Ok(collections.FirstOrDefault(c => c.Id == collectionId)); + var result = await _unitOfWork.CollectionTagRepository.GetCollectionDtoAsync(collectionId, UserId); + if (result == null) return NotFound(); // TODO: Figure out how to best handle restrictions/not found across the codebase + + return Ok(result); } /// @@ -101,10 +103,10 @@ public class CollectionController : BaseApiController /// UI does not contain controls to update title /// /// - /// + /// The updated tag entity [HttpPost("update")] [DisallowRole(PolicyConstants.ReadOnlyRole)] - public async Task UpdateTag(AppUserCollectionDto updatedTag) + public async Task> UpdateTag(AppUserCollectionDto updatedTag) { try { @@ -112,7 +114,7 @@ public class CollectionController : BaseApiController { await _eventHub.SendMessageAsync(MessageFactory.CollectionUpdated, MessageFactory.CollectionUpdatedEvent(updatedTag.Id), false); - return Ok(await _localizationService.Translate(UserId, "collection-updated-successfully")); + return Ok(await _unitOfWork.CollectionTagRepository.GetCollectionDtoAsync(updatedTag.Id, UserId)); } } catch (KavitaException ex) diff --git a/API/Controllers/LibraryController.cs b/API/Controllers/LibraryController.cs index 67b373c08..c9e864de1 100644 --- a/API/Controllers/LibraryController.cs +++ b/API/Controllers/LibraryController.cs @@ -24,6 +24,7 @@ using EasyCaching.Core; using Hangfire; using Kavita.Common; using Microsoft.AspNetCore.Authorization; +using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.EntityFrameworkCore; using Microsoft.Extensions.Logging; @@ -68,10 +69,10 @@ public class LibraryController : BaseApiController /// Creates a new Library. Upon library creation, adds new library to all Admin accounts. /// /// - /// + /// Created Library [Authorize(Policy = PolicyGroups.AdminPolicy)] [HttpPost("create")] - public async Task AddLibrary(UpdateLibraryDto dto) + public async Task> AddLibrary(UpdateLibraryDto dto) { if (await _unitOfWork.LibraryRepository.LibraryExists(dto.Name)) { @@ -161,7 +162,7 @@ public class LibraryController : BaseApiController await _eventHub.SendMessageAsync(MessageFactory.SideNavUpdate, MessageFactory.SideNavUpdateEvent(UserId), false); - return Ok(); + return Ok(await _unitOfWork.LibraryRepository.GetLibraryDtoByIdAsync(library.Id)); } /// @@ -207,17 +208,18 @@ public class LibraryController : BaseApiController /// /// Return a specific library /// + /// If the user is not an admin, only id, type, and name will be returned /// - [Authorize(Policy = PolicyGroups.AdminPolicy)] + [ProducesResponseType(StatusCodes.Status200OK)] + [ProducesResponseType(StatusCodes.Status200OK)] [HttpGet] public async Task> GetLibrary(int libraryId) { - var username = Username!; - if (string.IsNullOrEmpty(username)) return Unauthorized(); - - var libraries = await GetLibrariesForUser(username); - - return Ok(libraries.FirstOrDefault(l => l.Id == libraryId)); + if (User.IsInRole(PolicyConstants.AdminRole)) + { + return Ok(await _unitOfWork.LibraryRepository.GetLibraryDtoByIdAsync(libraryId)); + } + return Ok(await _unitOfWork.LibraryRepository.GetLiteLibraryDtoByIdAsync(libraryId)); } /// @@ -227,10 +229,7 @@ public class LibraryController : BaseApiController [HttpGet("libraries")] public async Task>> GetLibraries() { - var username = Username!; - if (string.IsNullOrEmpty(username)) return Unauthorized(); - - return Ok(await GetLibrariesForUser(username)); + return Ok(await GetLibrariesForUser(Username!)); } /// @@ -674,7 +673,7 @@ public class LibraryController : BaseApiController await _libraryCacheProvider.RemoveByPrefixAsync(CacheKey); - return Ok(); + return Ok(await _unitOfWork.LibraryRepository.GetLibraryDtoByIdAsync(library.Id)); } diff --git a/API/Controllers/SeriesController.cs b/API/Controllers/SeriesController.cs index 52fc83771..e9e1e5fcd 100644 --- a/API/Controllers/SeriesController.cs +++ b/API/Controllers/SeriesController.cs @@ -159,9 +159,9 @@ public class SeriesController : BaseApiController /// Updates the Series /// /// - /// + /// Updated Series [HttpPost("update")] - public async Task UpdateSeries(UpdateSeriesDto updateSeries) + public async Task> UpdateSeries(UpdateSeriesDto updateSeries) { var series = await _unitOfWork.SeriesRepository.GetSeriesByIdAsync(updateSeries.Id); if (series == null) @@ -206,7 +206,7 @@ public class SeriesController : BaseApiController await _taskScheduler.RefreshSeriesMetadata(series.LibraryId, series.Id); } - return Ok(); + return Ok(await _unitOfWork.SeriesRepository.GetSeriesDtoByIdAsync(series.Id, UserId)); } /// @@ -233,7 +233,7 @@ public class SeriesController : BaseApiController /// Page size and offset /// [HttpPost("recently-updated-series")] - public async Task>> GetRecentlyAddedChapters([FromQuery] UserParams? userParams) + public async Task>> GetRecentlyAddedChapters([FromQuery] UserParams? userParams) { userParams ??= UserParams.Default; return Ok(await _unitOfWork.SeriesRepository.GetRecentlyUpdatedSeries(UserId, userParams)); diff --git a/API/DTOs/Dashboard/RecentlyAddedItemDto.cs b/API/DTOs/Dashboard/RecentlyAddedItemDto.cs deleted file mode 100644 index bb0360b30..000000000 --- a/API/DTOs/Dashboard/RecentlyAddedItemDto.cs +++ /dev/null @@ -1,34 +0,0 @@ -using System; -using API.Entities.Enums; - -namespace API.DTOs.Dashboard; - -/// -/// A mesh of data for Recently added volume/chapters -/// -public sealed record RecentlyAddedItemDto -{ - public string SeriesName { get; set; } = default!; - public int SeriesId { get; set; } - public int LibraryId { get; set; } - public LibraryType LibraryType { get; set; } - /// - /// This will automatically map to Volume X, Chapter Y, etc. - /// - public string Title { get; set; } = default!; - public DateTime Created { get; set; } - /// - /// Chapter Id if this is a chapter. Not guaranteed to be set. - /// - public int ChapterId { get; set; } = 0; - /// - /// Volume Id if this is a chapter. Not guaranteed to be set. - /// - public int VolumeId { get; set; } = 0; - /// - /// This is used only on the UI. It is just index of being added. - /// - public int Id { get; set; } - public MangaFormat Format { get; set; } - -} diff --git a/API/DTOs/LibraryDto.cs b/API/DTOs/LibraryDto.cs index c038c5d69..a493b3626 100644 --- a/API/DTOs/LibraryDto.cs +++ b/API/DTOs/LibraryDto.cs @@ -6,15 +6,22 @@ using API.Entities.Enums; namespace API.DTOs; #nullable enable -public sealed record LibraryDto +/// +/// This is a LibraryDto that non-admins can resolve that has the core information they need +/// +public record LiteLibraryDto { public int Id { get; init; } public string? Name { get; init; } + public LibraryType Type { get; init; } +} + +public sealed record LibraryDto : LiteLibraryDto +{ /// /// Last time Library was scanned /// public DateTime LastScanned { get; init; } - public LibraryType Type { get; init; } /// /// An optional Cover Image or null /// diff --git a/API/Data/AutoMapper/AutoMapperProfiles.cs b/API/Data/AutoMapper/AutoMapperProfiles.cs index ac4b938dc..97966e257 100644 --- a/API/Data/AutoMapper/AutoMapperProfiles.cs +++ b/API/Data/AutoMapper/AutoMapperProfiles.cs @@ -231,7 +231,7 @@ public class AutoMapperProfiles : Profile .ForMember(dest => dest.LibraryName, opt => opt.MapFrom(src => src.Library.Name)); - + CreateMap(); CreateMap() .ForMember(dest => dest.Folders, opt => diff --git a/API/Data/Repositories/CollectionTagRepository.cs b/API/Data/Repositories/CollectionTagRepository.cs index 41b29686f..e1741c6c7 100644 --- a/API/Data/Repositories/CollectionTagRepository.cs +++ b/API/Data/Repositories/CollectionTagRepository.cs @@ -50,6 +50,11 @@ public interface ICollectionTagRepository /// /// Task> GetCollectionDtosAsync(int userId, bool includePromoted = false); + /// + /// Returns the collection if the user owns it or the collection is promoted + /// + /// + Task GetCollectionDtoAsync(int collectionId, int userId); Task> GetCollectionDtosPagedAsync(int userId, UserParams userParams, bool includePromoted = false); Task> GetCollectionDtosBySeriesAsync(int userId, int seriesId, bool includePromoted = false); @@ -108,6 +113,17 @@ public class CollectionTagRepository : ICollectionTagRepository .ToListAsync(); } + public async Task GetCollectionDtoAsync(int collectionId, int userId) + { + var ageRating = await _context.AppUser.GetUserAgeRestriction(userId); + return await _context.AppUserCollection + .Where(uc => (uc.AppUserId == userId || uc.Promoted) && uc.Id == collectionId) + .WhereIf(ageRating.AgeRating != AgeRating.NotApplicable, uc => uc.AgeRating <= ageRating.AgeRating) + .OrderBy(uc => uc.Title) + .ProjectTo(_mapper.ConfigurationProvider) + .FirstOrDefaultAsync(); + } + public async Task> GetCollectionDtosAsync(int userId, bool includePromoted = false) { var ageRating = await _context.AppUser.GetUserAgeRestriction(userId); diff --git a/API/Data/Repositories/LibraryRepository.cs b/API/Data/Repositories/LibraryRepository.cs index c410ff483..9c32b169c 100644 --- a/API/Data/Repositories/LibraryRepository.cs +++ b/API/Data/Repositories/LibraryRepository.cs @@ -37,6 +37,8 @@ public interface ILibraryRepository void Update(Library library); void Delete(Library? library); Task> GetLibraryDtosAsync(); + Task GetLibraryDtoByIdAsync(int libraryId); + Task GetLiteLibraryDtoByIdAsync(int libraryId); Task LibraryExists(string libraryName); Task GetLibraryForIdAsync(int libraryId, LibraryIncludes includes = LibraryIncludes.None); Task> GetLibraryDtosForUsernameAsync(string userName); @@ -214,6 +216,23 @@ public class LibraryRepository : ILibraryRepository .ToListAsync(); } + public async Task GetLibraryDtoByIdAsync(int libraryId) + { + return await _context.Library + .Include(f => f.Folders) + .Include(l => l.LibraryFileTypes) + .ProjectTo(_mapper.ConfigurationProvider) + .AsSplitQuery() + .FirstOrDefaultAsync(l => l.Id == libraryId); + } + + public async Task GetLiteLibraryDtoByIdAsync(int libraryId) + { + return await _context.Library + .ProjectTo(_mapper.ConfigurationProvider) + .FirstOrDefaultAsync(l => l.Id == libraryId); + } + public async Task GetLibraryForIdAsync(int libraryId, LibraryIncludes includes = LibraryIncludes.None) { diff --git a/API/Extensions/QueryExtensions/Filtering/SeriesSort.cs b/API/Extensions/QueryExtensions/Filtering/SeriesSort.cs index c7af70f65..8f0e9a364 100644 --- a/API/Extensions/QueryExtensions/Filtering/SeriesSort.cs +++ b/API/Extensions/QueryExtensions/Filtering/SeriesSort.cs @@ -32,7 +32,7 @@ public static class SeriesSort SortField.TimeToRead => query.DoOrderBy(s => s.AvgHoursToRead, sortOptions), SortField.ReleaseYear => query.DoOrderBy(s => s.Metadata.ReleaseYear, sortOptions), SortField.ReadProgress => query.DoOrderBy(s => s.Progress.Where(p => p.SeriesId == s.Id && p.AppUserId == userId) - .Select(p => p.LastModified) // TODO: Migrate this to UTC + .Select(p => p.LastModifiedUtc) .Max(), sortOptions), SortField.AverageRating => query.DoOrderBy(s => s.ExternalSeriesMetadata.ExternalRatings .Where(p => p.SeriesId == s.Id).Average(p => p.AverageScore), sortOptions), diff --git a/API/I18N/ca.json b/API/I18N/ca.json index b314a9374..139b6c7b5 100644 --- a/API/I18N/ca.json +++ b/API/I18N/ca.json @@ -61,5 +61,9 @@ "reading-list-item-delete": "No s'han pogut suprimir els elements", "generic-reading-list-create": "S'ha produït un problema en crear la llista de lectura", "generic-reading-list-update": "S'ha produït un problema en actualitzar la llista de lectura", - "generic-create-temp-archive": "S'ha produït un problema en crear l'arxiu temporal" + "generic-create-temp-archive": "S'ha produït un problema en crear l'arxiu temporal", + "locked-out": "S'ha bloquejat l'accés degut a masses intents d'autentificació. Si us plau, espera 10 minuts.", + "disabled-account": "El seu compte s'ha deshabilitat. Contacti amb l'administrador.", + "register-user": "Hi ha hagut un error al registrar-se", + "validate-email": "Hi ha hagut un error al validar l'e-mail: {0}" } diff --git a/API/I18N/ga.json b/API/I18N/ga.json index 441c05014..6d5d286e8 100644 --- a/API/I18N/ga.json +++ b/API/I18N/ga.json @@ -87,7 +87,7 @@ "bookmark-dir-permissions": "Níl na ceadanna cearta ag an Eolaire Leabharmharcanna chun Kavita a úsáid", "total-backups": "Caithfidh Cúltaca Iomlána a bheith idir 1 agus 30", "total-logs": "Caithfidh an Logchomhaid Iomlán a bheith idir 1 agus 30", - "url-not-valid": "Ní sheolann URL íomhá bhailí ar ais nó éilíonn sé údarú", + "url-not-valid": "Ní thugann an URL íomhá bhailí ar ais nó teastaíonn údarú uaidh", "url-required": "Caithfidh tú pas a fháil i url le húsáid", "generic-cover-series-save": "Ní féidir íomhá an chlúdaigh a shábháil sa tSraith", "generic-cover-collection-save": "Ní féidir íomhá an chlúdaigh a shábháil sa Bhailiúchán", diff --git a/API/I18N/ru.json b/API/I18N/ru.json index 0b6182ece..c81241893 100644 --- a/API/I18N/ru.json +++ b/API/I18N/ru.json @@ -1,5 +1,5 @@ { - "confirm-email": "Сначала Вы должны подтвердить свой адрес электронной почты", + "confirm-email": "Вы должны подтвердить адрес своей электронной почты", "generate-token": "Возникла проблема с генерацией токена подтверждения электронной почты. Смотрите журналы", "invalid-password": "Неверный пароль", "invalid-email-confirmation": "Неверное подтверждение электронной почты", @@ -9,7 +9,7 @@ "email-sent": "Электронное письмо отправлено", "generic-password-update": "В процессе подтверждения нового пароля возникла непредвиденная ошибка", "user-already-confirmed": "Пользователь уже подтвержден", - "user-migration-needed": "Для этой учётной записи требуется миграция. Попросите пользователя повторно авторизоваться для запуска процесса переноса", + "user-migration-needed": "Для этой учётной записи требуется перенос. Попросите пользователя повторно авторизоваться для запуска процесса переноса", "generic-user-update": "При обновлении пользователя возникало исключение", "disabled-account": "Ваша учетная запись отключена. Обратитесь к администратору сервера.", "locked-out": "Доступ временно заблокирован из-за превышения числа попыток входа. Пожалуйста, подождите 10 минут.", @@ -57,7 +57,7 @@ "generic-reading-list-create": "Возникла проблема с созданием читательского списка", "no-cover-image": "Нет изображения обложки", "collection-updated": "Коллекция успешно обновлена", - "critical-email-migration": "Возникла проблема в процессе смены электронной почты. Обратитесь в службу поддержки", + "critical-email-migration": "Возникла проблема в процессе переноса электронной почты. Обратитесь в службу поддержки", "cache-file-find": "Не удалось найти кешированное изображение. Перезагрузите страницу и попробуйте снова.", "duplicate-bookmark": "Закладка с такими параметрами уже существует", "collection-tag-duplicate": "Коллекция с таким именем уже существует", diff --git a/API/I18N/sk.json b/API/I18N/sk.json index 01f2ce9e4..7b48fe208 100644 --- a/API/I18N/sk.json +++ b/API/I18N/sk.json @@ -220,5 +220,8 @@ "genre-doesnt-exist": "Žáner neexistuje", "font-url-not-allowed": "Nahrávanie písma pomocou adresy URL je povolené iba z Google Fonts", "annotation-export-failed": "Nepodarilo sa exportovať anotácie, skontrolujte protokoly", - "download-not-allowed": "Používateľ nemá povolenia na sťahovanie" + "download-not-allowed": "Používateľ nemá povolenia na sťahovanie", + "client-device-doesnt-exist": "Klientske zariadenie neexistuje", + "auth-key-unique": "Názov autorizačného kľúča musí byť jedinečný pre váš účet", + "role-restricted": "Prístup odmietnutý: Vaša rola nemá povolenie na túto akciu" } diff --git a/API/I18N/sv.json b/API/I18N/sv.json index dd1e597f4..51f37da52 100644 --- a/API/I18N/sv.json +++ b/API/I18N/sv.json @@ -208,5 +208,7 @@ "smart-filter-name-required": "Smart Filter namn krävs", "sidenav-stream-only-delete-smart-filter": "Bara smarta-filter-strömmar kan tas bort från sidomenyn", "smart-filter-system-name": "Du kan inte använda namnet från en ström som systemet tillhandahåller", - "password-authentication-disabled": "Lösenords autentisering har stängts av, logga in via OpenID Connect" + "password-authentication-disabled": "Lösenords autentisering har stängts av, logga in via OpenID Connect", + "oidc-managed": "Användare som hanteras av OIDC kan inte redigeras.", + "cannot-change-identity-provider-original-user": "Identitetsleverantören för det ursprungliga administratörskontot kan inte ändras" } diff --git a/API/Program.cs b/API/Program.cs index 8dd65883b..15dad328e 100644 --- a/API/Program.cs +++ b/API/Program.cs @@ -172,10 +172,10 @@ public class Program private static void HandleFirstRunConfiguration() { var firstRunConfigFilePath = Path.Join(Directory.GetCurrentDirectory(), "config/appsettings-init.json"); - if (File.Exists(firstRunConfigFilePath) && - !File.Exists(Path.Join(Directory.GetCurrentDirectory(), "config/appsettings.json"))) + var actualRunConfigFilePath = Path.Join(Directory.GetCurrentDirectory(), "config/appsettings.json"); + if (File.Exists(firstRunConfigFilePath) && !File.Exists(actualRunConfigFilePath)) { - File.Move(firstRunConfigFilePath, Path.Join(Directory.GetCurrentDirectory(), "config/appsettings.json")); + File.Move(firstRunConfigFilePath, actualRunConfigFilePath); } } diff --git a/API/Services/LocalizationService.cs b/API/Services/LocalizationService.cs index 90f568d40..31c9a2d0c 100644 --- a/API/Services/LocalizationService.cs +++ b/API/Services/LocalizationService.cs @@ -292,7 +292,7 @@ public class LocalizationService : ILocalizationService try { var cultureInfo = new System.Globalization.CultureInfo(fileName.Replace('_', '-')); - return cultureInfo.NativeName; + return cultureInfo.EnglishName; } catch { diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 292217862..7bb7bd79d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -68,4 +68,8 @@ If you just want to play with Swagger, you can just If you have a build issue around swagger run: ` swagger tofile --output ../openapi.json API/bin/Debug/net8.0/API.dll v1` to see the error and correct it +### Building external scripts/apps ### +We welcome anyone to build external scripts and applications. Reach out to us about publishing, we will link from our wiki and discord. +Please do not use words like "Kavita reader" or "Kavita" as your explicit app name. Use of "[name]: A Kavita Reader" is preferred. + If you have any questions about any of this, please let us know. diff --git a/Kavita.Common/Kavita.Common.csproj b/Kavita.Common/Kavita.Common.csproj index c810d89ad..ac5f7e8c9 100644 --- a/Kavita.Common/Kavita.Common.csproj +++ b/Kavita.Common/Kavita.Common.csproj @@ -20,4 +20,4 @@ - \ No newline at end of file + diff --git a/UI/Web/src/_card-item-common.scss b/UI/Web/src/_card-item-common.scss index a793fa745..aead7b631 100644 --- a/UI/Web/src/_card-item-common.scss +++ b/UI/Web/src/_card-item-common.scss @@ -1,5 +1,5 @@ -$image-height: 232.91px; -$image-width: 160px; +$image-height: 14.5569rem; +$image-width: 10rem; .card-item-container { width: $image-width; @@ -7,25 +7,25 @@ $image-width: 160px; .error-banner { width: $image-width; - height: 18px; + height: 1.125rem; background-color: var(--toast-error-bg-color); - font-size: 12px; + font-size: 0.75rem; color: white; text-transform: uppercase; text-align: center; position: absolute; - top: 0px; - right: 0px; + top: 0; + right: 0; } .selected-highlight { - outline: 2px solid var(--primary-color); + outline: 0.125rem solid var(--primary-color); } .progress-banner { width: $image-width; - height: 5px; + height: 0.3125rem; .progress { color: var(--card-progress-bar-color); @@ -34,15 +34,15 @@ $image-width: 160px; } .download { - width: 80px; - height: 80px; + width: 5rem; + height: 5rem; position: absolute; top: 25%; right: 30%; } .badge-container { - border-radius: 4px; + border-radius: 0.25rem; display: block; height: $image-height; left: 0; @@ -50,13 +50,13 @@ $image-width: 160px; pointer-events: none; position: absolute; top: 0; - width: 160px; + width: 10rem; } .not-read-badge { position: absolute; top: calc(-1 * (var(--card-progress-triangle-size) / 2)); - right: -14px; + right: -0.875rem; z-index: 1000; height: var(--card-progress-triangle-size); width: var(--card-progress-triangle-size); @@ -66,8 +66,8 @@ $image-width: 160px; .bulk-mode { position: absolute; - top: 5px; - left: 5px; + top: 0.3125rem; + left: 0.3125rem; visibility: hidden; &.always-show { @@ -77,8 +77,8 @@ $image-width: 160px; } input[type="checkbox"] { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; color: var(--checkbox-bg-color); } } @@ -117,10 +117,10 @@ $image-width: 160px; top: 0; left: 0; width: 100%; - height: 232.91px; + height: 14.5569rem; transition: all 0.2s; - border-top-left-radius: 4px; - border-top-right-radius: 4px; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; &:hover { background-color: var(--card-overlay-hover-bg-color); @@ -130,7 +130,7 @@ $image-width: 160px; .overlay-information--centered { position: absolute; background-color: rgba(0, 0, 0, 0.7); - border-radius: 50px; + border-radius: 3.125rem; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -145,8 +145,8 @@ $image-width: 160px; } .count { - top: 5px; - right: 10px; + top: 0.3125rem; + right: 0.625rem; position: absolute; } } @@ -156,26 +156,26 @@ $image-width: 160px; } .library { - font-size: 13px; + font-size: 0.8125rem; text-decoration: none; - margin-top: 0px; + margin-top: 0; } .card-title-container { display: flex; justify-content: space-between; align-items: center; - padding: 0 5px; + padding: 0 0.3125rem; :first-child { - min-width: 22px; + min-width: 1.375rem; } .card-title { font-size: 0.8rem; margin: 0; text-align: center; - max-width: 90px; + max-width: 5.625rem; a { overflow: hidden; @@ -185,15 +185,15 @@ $image-width: 160px; } .card-actions { - min-width: 15.82px; + min-width: 0.9888rem; } .card-format { - min-width: 22px; + min-width: 1.375rem; } ::ng-deep app-card-actionables .dropdown .dropdown-toggle { - padding: 0 5px; + padding: 0 0.3125rem; } .meta-title { @@ -205,9 +205,9 @@ $image-width: 160px; .card-title { font-size: 0.8rem; margin: 0; - padding: 10px 0; + padding: 0.625rem 0; text-align: center; - max-width: 120px; + max-width: 7.5rem; a { overflow: hidden; @@ -216,7 +216,7 @@ $image-width: 160px; } .card-body > div:nth-child(2) { - height: 40px; + height: 2.5rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; @@ -229,7 +229,7 @@ $image-width: 160px; visibility: hidden; display: none; .card-title { - padding: 10px; + padding: 0.625rem; } } @@ -239,11 +239,11 @@ $image-width: 160px; .expected { .overlay-information--centered { div { - height: 32px; - width: 32px; + height: 2rem; + width: 2rem; i { font-size: 1.4rem; - line-height: 32px; + line-height: 2rem; } } } diff --git a/UI/Web/src/_manga-reader-common.scss b/UI/Web/src/_manga-reader-common.scss index 9b54a5fad..c2cbe4cf4 100644 --- a/UI/Web/src/_manga-reader-common.scss +++ b/UI/Web/src/_manga-reader-common.scss @@ -1,4 +1,4 @@ -$scrollbarHeight: 35px; +$scrollbarHeight: 2.1875rem; img { user-select: none; @@ -67,12 +67,12 @@ img { .highlight { background-color: var(--manga-reader-next-highlight-bg-color) !important; animation: fadein .5s both; - backdrop-filter: blur(10px); + backdrop-filter: blur(0.625rem); } .highlight-2 { background-color: var(--manga-reader-prev-highlight-bg-color) !important; animation: fadein .5s both; - backdrop-filter: blur(10px); + backdrop-filter: blur(0.625rem); } @@ -83,19 +83,19 @@ img { left: 50%; height: 100%; box-shadow: - 0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%), - 0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%), - 0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%), - 0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%); + 0 0 calc(1.0625rem*3.14) 1.5625rem rgb(0 0 0 / 43%), + 0 0 calc(0.125rem*3.14) 0.125rem rgb(0 0 0 / 43%), + 0 0 calc(0.3125rem*3.14) 0.25rem rgb(0 0 0 / 43%), + 0 0 calc(0.0312rem*3.14) 0.0187rem rgb(0 0 0 / 43%); } @supports (-moz-appearance:none) { ::ng-deep .image-container.book-shadow[class*="double-offset"]:before, ::ng-deep .image-container.book-shadow.wide:before { box-shadow: - 0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%), - 0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%), - 0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%), - 0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%), - 0px 0px 1px 0.5px rgb(0 0 0 / 43%); + 0 0 calc(1.0625rem*3.14) 1.5625rem rgb(0 0 0 / 43%), + 0 0 calc(0.125rem*3.14) 0.125rem rgb(0 0 0 / 43%), + 0 0 calc(0.3125rem*3.14) 0.25rem rgb(0 0 0 / 43%), + 0 0 calc(0.0312rem*3.14) 0.0187rem rgb(0 0 0 / 43%), + 0 0 0.0625rem 0.0312rem rgb(0 0 0 / 43%); } } diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index a949d8399..6a53a3699 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -8,8 +8,8 @@ .image-container { align-self: flex-start; - max-height: 400px; - max-width: 280px; + max-height: 25rem; + max-width: 17.5rem; } .subtitle { @@ -20,7 +20,7 @@ .main-container { overflow: unset !important; - margin-top: 15px; + margin-top: 0.9375rem; } ::ng-deep .badge-expander .content a { @@ -38,7 +38,7 @@ } .card-body > div:nth-child(2) { - height: 50px; + height: 3.125rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; @@ -47,17 +47,17 @@ } .under-image ~ .overlay-information { - top: -404px; - height: 364px; + top: -25.25rem; + height: 22.75rem; } .overlay-information { position: relative; - top: -364px; - height: 364px; + top: -22.75rem; + height: 22.75rem; transition: all 0.2s; - border-top-left-radius: 4px; - border-top-right-radius: 4px; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; &:hover { cursor: pointer; @@ -70,9 +70,9 @@ .overlay-information--centered { position: absolute; - border-radius: 15px; + border-radius: 0.9375rem; background-color: rgba(0, 0, 0, .7); - border-radius: 50px; + border-radius: 3.125rem; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -85,11 +85,11 @@ } div { - width: 60px; - height: 60px; + width: 3.75rem; + height: 3.75rem; i { font-size: 1.6rem; - line-height: 60px; + line-height: 3.75rem; width: 100%; } } @@ -118,7 +118,7 @@ -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; scrollbar-width: none; - box-shadow: inset -1px -2px 0px -1px var(--elevation-layer9); + box-shadow: inset -0.0625rem -0.125rem 0 -0.0625rem var(--elevation-layer9); } .carousel-tabs-container::-webkit-scrollbar { display: none; @@ -134,9 +134,9 @@ ::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{ border-width: 1px; border-style: solid; - border-radius: 5px; + border-radius: 0.3125rem; border-color: var(--primary-color); - padding: 5px; + padding: 0.3125rem; vertical-align: middle; &:hover { @@ -145,7 +145,7 @@ } ::ng-deep .image-container.mobile-bg app-image img { - max-height: 400px; + max-height: 25rem; object-fit: contain; } @@ -165,7 +165,7 @@ @media (max-width: theme.$grid-breakpoints-lg) { .image-container.mobile-bg{ width: 100vw; - top: calc(var(--nav-offset) - 20px); + top: calc(var(--nav-offset) - 1.25rem); left: 0; pointer-events: none; position: fixed !important; @@ -178,7 +178,7 @@ ::ng-deep .image-container.mobile-bg app-image img { max-height: unset !important; opacity: 0.05 !important; - filter: blur(5px) !important; + filter: blur(0.3125rem) !important; max-width: 100dvw; height: 100dvh !important; overflow: hidden; diff --git a/UI/Web/src/_tag-card-common.scss b/UI/Web/src/_tag-card-common.scss index dab6ababd..a613ef469 100644 --- a/UI/Web/src/_tag-card-common.scss +++ b/UI/Web/src/_tag-card-common.scss @@ -1,8 +1,8 @@ .tag-card { background-color: var(--bs-card-color, #2c2c2c); padding: 1rem; - border-radius: 12px; - box-shadow: 0 2px 5px rgba(0,0,0,0.2); + border-radius: 0.75rem; + box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.2); transition: transform 0.2s ease, background 0.3s ease; cursor: pointer; diff --git a/UI/Web/src/app/_directives/dbl-click.directive.ts b/UI/Web/src/app/_directives/dbl-click.directive.ts index ab1d0bcde..ee5966699 100644 --- a/UI/Web/src/app/_directives/dbl-click.directive.ts +++ b/UI/Web/src/app/_directives/dbl-click.directive.ts @@ -1,4 +1,4 @@ -import {Directive, EventEmitter, HostListener, Output} from '@angular/core'; +import {Directive, HostListener, output} from '@angular/core'; @Directive({ selector: '[appDblClick]', @@ -6,8 +6,8 @@ import {Directive, EventEmitter, HostListener, Output} from '@angular/core'; }) export class DblClickDirective { - @Output() singleClick = new EventEmitter(); - @Output() doubleClick = new EventEmitter(); + readonly singleClick = output(); + readonly doubleClick = output(); private lastTapTime = 0; private tapTimeout = 300; // Time threshold for a double tap (in milliseconds) diff --git a/UI/Web/src/app/_directives/long-click.directive.ts b/UI/Web/src/app/_directives/long-click.directive.ts index 594685667..4c70cf10a 100644 --- a/UI/Web/src/app/_directives/long-click.directive.ts +++ b/UI/Web/src/app/_directives/long-click.directive.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, EventEmitter, inject, input, OnDestroy, Output} from '@angular/core'; +import {Directive, ElementRef, inject, input, OnDestroy, output} from '@angular/core'; import {fromEvent, merge, Subscription, switchMap, tap, timer} from "rxjs"; import {takeUntil} from "rxjs/operators"; @@ -18,7 +18,7 @@ export class LongClickDirective implements OnDestroy { */ threshold = input(500); - @Output() longClick = new EventEmitter(); + readonly longClick = output(); constructor() { const start$ = merge( @@ -34,7 +34,7 @@ export class LongClickDirective implements OnDestroy { this.eventSubscribe = start$ .pipe( switchMap(() => timer(this.threshold()).pipe(takeUntil(end$))), - tap(() => this.longClick.emit()) + tap(() => this.longClick.emit(undefined)) ).subscribe(); } diff --git a/UI/Web/src/app/_guards/admin.guard.ts b/UI/Web/src/app/_guards/admin.guard.ts index ade795609..6e1a9a660 100644 --- a/UI/Web/src/app/_guards/admin.guard.ts +++ b/UI/Web/src/app/_guards/admin.guard.ts @@ -1,30 +1,17 @@ -import { Injectable } from '@angular/core'; -import {CanActivate, Router} from '@angular/router'; -import { ToastrService } from 'ngx-toastr'; -import { Observable } from 'rxjs'; -import { map, take } from 'rxjs/operators'; -import { AccountService } from '../_services/account.service'; +import {inject} from '@angular/core'; +import {CanActivateFn, Router} from '@angular/router'; +import {ToastrService} from 'ngx-toastr'; +import {AccountService} from '../_services/account.service'; import {TranslocoService} from "@jsverse/transloco"; -@Injectable({ - providedIn: 'root' -}) -export class AdminGuard implements CanActivate { - constructor(private accountService: AccountService, private toastr: ToastrService, - private router: Router, - private translocoService: TranslocoService) {} +export const adminGuard: CanActivateFn = () => { + const accountService = inject(AccountService); + const toastr = inject(ToastrService); + const router = inject(Router); + const translocoService = inject(TranslocoService); - canActivate(): Observable { - return this.accountService.currentUser$.pipe(take(1), - map((user) => { - if (user && this.accountService.hasAdminRole(user)) { - return true; - } + if (accountService.hasAdminRole()) return true; - this.toastr.error(this.translocoService.translate('toasts.unauthorized-1')); - this.router.navigateByUrl('/home'); - return false; - }) - ); - } -} + toastr.error(translocoService.translate('toasts.unauthorized-1')); + return router.createUrlTree(['/home']); +}; diff --git a/UI/Web/src/app/_guards/auth.guard.ts b/UI/Web/src/app/_guards/auth.guard.ts index bc037a081..a1436e18f 100644 --- a/UI/Web/src/app/_guards/auth.guard.ts +++ b/UI/Web/src/app/_guards/auth.guard.ts @@ -1,40 +1,25 @@ -import {inject, Injectable} from '@angular/core'; -import { CanActivate, Router } from '@angular/router'; -import { ToastrService } from 'ngx-toastr'; -import { Observable } from 'rxjs'; -import { map, take } from 'rxjs/operators'; -import { AccountService } from '../_services/account.service'; +import {inject} from '@angular/core'; +import {CanActivateFn, Router} from '@angular/router'; +import {ToastrService} from 'ngx-toastr'; +import {AccountService} from '../_services/account.service'; import {TranslocoService} from "@jsverse/transloco"; import {APP_BASE_HREF} from "@angular/common"; -@Injectable({ - providedIn: 'root' -}) -export class AuthGuard implements CanActivate { - private accountService = inject(AccountService); - private router = inject(Router); - private toastr = inject(ToastrService); - private translocoService = inject(TranslocoService); +export const AUTH_URL_KEY = 'kavita--auth-intersection-url'; +export const authGuard: CanActivateFn = () => { + const accountService = inject(AccountService); + const router = inject(Router); + const toastr = inject(ToastrService); + const translocoService = inject(TranslocoService); + const baseURL = inject(APP_BASE_HREF); - public static urlKey: string = 'kavita--auth-intersection-url'; + if (accountService.isLoggedIn()) return true; - baseURL = inject(APP_BASE_HREF); - - canActivate(): Observable { - return this.accountService.currentUser$.pipe(take(1), - map((user) => { - if (user) { - return true; - } - - const path = window.location.pathname; - if (path !== '/login' && !path.startsWith(this.baseURL + "registration") && path !== '') { - localStorage.setItem(AuthGuard.urlKey, path); - } - this.router.navigateByUrl('/login'); - return false; - }) - ); + const path = window.location.pathname; + if (path !== '/login' && !path.startsWith(baseURL + 'registration') && path !== '') { + localStorage.setItem(AUTH_URL_KEY, path); } -} + toastr.error(translocoService.translate('toasts.unauthorized-1')); + return router.createUrlTree(['/login']); +}; diff --git a/UI/Web/src/app/_guards/library-access.guard.ts b/UI/Web/src/app/_guards/library-access.guard.ts index d1054de33..f0f9e55b4 100644 --- a/UI/Web/src/app/_guards/library-access.guard.ts +++ b/UI/Web/src/app/_guards/library-access.guard.ts @@ -1,18 +1,23 @@ -import { Injectable, inject } from '@angular/core'; -import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; -import { Observable, of } from 'rxjs'; -import { MemberService } from '../_services/member.service'; +import {inject} from '@angular/core'; +import {CanActivateFn, Router} from '@angular/router'; +import {of} from 'rxjs'; +import {MemberService} from '../_services/member.service'; +import {map} from "rxjs/operators"; -@Injectable({ - providedIn: 'root' -}) -export class LibraryAccessGuard implements CanActivate { - private memberService = inject(MemberService); +export const libraryAccessGuard: CanActivateFn = (route, state) => { + const memberService = inject(MemberService); + const router = inject(Router); + const libraryId = parseInt( + route.parent?.paramMap.get('libraryId') ?? route.paramMap.get('libraryId') ?? '', + 10 + ); - canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { - const libraryId = parseInt(state.url.split('library/')[1], 10); - if (isNaN(libraryId)) return of(false); - return this.memberService.hasLibraryAccess(libraryId); + if (isNaN(libraryId)) { + return of(router.parseUrl('/home')); } -} + + return memberService.hasLibraryAccess(libraryId).pipe( + map(hasAccess => hasAccess || router.parseUrl('/home')) + ); +}; diff --git a/UI/Web/src/app/_guards/profile.guard.ts b/UI/Web/src/app/_guards/profile.guard.ts index 1342f602d..d155a6363 100644 --- a/UI/Web/src/app/_guards/profile.guard.ts +++ b/UI/Web/src/app/_guards/profile.guard.ts @@ -16,7 +16,7 @@ export const profileGuard: CanActivateFn = (route, state) => { const toastr = inject(ToastrService); // If this is my profile, allow - if (accountService.currentUserSignal()?.id === userId) { + if (accountService.currentUser()?.id === userId) { return true; } diff --git a/UI/Web/src/app/_interceptors/error.interceptor.ts b/UI/Web/src/app/_interceptors/error.interceptor.ts index f6c92f90e..66d7bbd37 100644 --- a/UI/Web/src/app/_interceptors/error.interceptor.ts +++ b/UI/Web/src/app/_interceptors/error.interceptor.ts @@ -6,7 +6,7 @@ import {ToastrService} from 'ngx-toastr'; import {catchError} from 'rxjs/operators'; import {AccountService} from '../_services/account.service'; import {translate, TranslocoService} from "@jsverse/transloco"; -import {AuthGuard} from "../_guards/auth.guard"; +import {AUTH_URL_KEY} from "../_guards/auth.guard"; import {APP_BASE_HREF} from "@angular/common"; export const errorInterceptor: HttpInterceptorFn = (req, next) => { @@ -136,7 +136,7 @@ function handleAuthError( const path = window.location.pathname; if (path !== '/login' && !path.startsWith(baseURL + "registration") && path !== '') { - localStorage.setItem(AuthGuard.urlKey, path); + localStorage.setItem(AUTH_URL_KEY, path); } if (error.error && error.error !== 'Unauthorized') { diff --git a/UI/Web/src/app/_interceptors/jwt.interceptor.ts b/UI/Web/src/app/_interceptors/jwt.interceptor.ts index b5a1153dc..e64824999 100644 --- a/UI/Web/src/app/_interceptors/jwt.interceptor.ts +++ b/UI/Web/src/app/_interceptors/jwt.interceptor.ts @@ -4,7 +4,7 @@ import {AccountService} from '../_services/account.service'; export const jwtInterceptor: HttpInterceptorFn = (req, next) => { const accountService = inject(AccountService); - const user = accountService.currentUserSignal(); + const user = accountService.currentUser(); if (user?.token) { req = req.clone({ diff --git a/UI/Web/src/app/_models/actionables/action-item.ts b/UI/Web/src/app/_models/actionables/action-item.ts new file mode 100644 index 000000000..77095777f --- /dev/null +++ b/UI/Web/src/app/_models/actionables/action-item.ts @@ -0,0 +1,40 @@ +import {Observable} from "rxjs"; +import {Action} from "./action"; +import {User} from "../user/user"; +import {Role} from "../../_services/account.service"; +import {ActionResultCallback} from "./action-result"; + +/** + * Callback for an action + */ +export type ActionCallback = (action: ActionItem, entity: T) => void; +export type ActionShouldRenderFunc = (action: ActionItem, entity: T, user: User) => boolean; + +export interface ActionItem { + title: string; + description: string; + action: Action; + callback: ActionResultCallback; + /** + * Roles required to be present for ActionItem to show. If empty, assumes anyone can see. At least one needs to apply. + */ + requiredRoles: Role[]; + children: Array>; + /** + * An optional class which applies to an item. ie) danger on a delete action + */ + class?: string; + /** + * Indicates that there exists a separate list will be loaded from an API. + * Rule: If using this, only one child should exist in children with the Action for dynamicList. + */ + dynamicList?: Observable<{title: string, data: any}[]> | undefined; + /** + * Extra data that needs to be sent back from the card item. Used mainly for dynamicList. This will be the item from dynamicList return + */ + _extra?: {title: string, data: any}; + /** + * Will call on each action to determine if it should show for the appropriate entity based on state and user + */ + shouldRender: ActionShouldRenderFunc; +} diff --git a/UI/Web/src/app/_models/actionables/action-result.ts b/UI/Web/src/app/_models/actionables/action-result.ts new file mode 100644 index 000000000..f33b94dac --- /dev/null +++ b/UI/Web/src/app/_models/actionables/action-result.ts @@ -0,0 +1,12 @@ +import {Action} from "./action"; +import {ActionItem} from "./action-item"; +import {Observable} from "rxjs"; + +export type ActionResultCallback = (action: ActionItem, entity: T) => Observable>; + +export type ActionEffect = 'update' | 'remove' | 'reload' | 'none'; +export interface ActionResult { + action: Action; + entity: T; + effect: ActionEffect; +} diff --git a/UI/Web/src/app/_models/actionables/action.ts b/UI/Web/src/app/_models/actionables/action.ts new file mode 100644 index 000000000..fc04110d7 --- /dev/null +++ b/UI/Web/src/app/_models/actionables/action.ts @@ -0,0 +1,115 @@ +export enum Action { + Submenu = -1, + /** + * Mark entity as read + */ + MarkAsRead = 0, + /** + * Mark entity as unread + */ + MarkAsUnread = 1, + /** + * Invoke a Scan on Series/Library + */ + Scan = 2, + /** + * Delete the entity + */ + Delete = 3, + /** + * Open edit modal + */ + Edit = 4, + /** + * Open details modal + */ + Info = 5, + /** + * Invoke a refresh covers + */ + RefreshMetadata = 6, + /** + * Download the entity + */ + Download = 7, + /** + * Invoke an Analyze Files which calculates word count + */ + AnalyzeFiles = 8, + /** + * Read in incognito mode aka no progress tracking + */ + IncognitoRead = 9, + /** + * Add to reading list + */ + AddToReadingList = 10, + /** + * Add to collection + */ + AddToCollection = 11, + /** + * Open Series detail page for said series + */ + ViewSeries = 13, + /** + * Open the reader for entity + */ + Read = 14, + /** + * Add to user's Want to Read List + */ + AddToWantToReadList = 15, + /** + * Remove from user's Want to Read List + */ + RemoveFromWantToReadList = 16, + /** + * Send to a device + */ + SendTo = 17, + /** + * Import some data into Kavita + */ + Import = 18, + /** + * Removes the Series from On Deck inclusion + */ + RemoveFromOnDeck = 19, + AddRuleGroup = 20, + RemoveRuleGroup = 21, + MarkAsVisible = 22, + MarkAsInvisible = 23, + /** + * Promotes the underlying item (Reading List, Collection) + */ + Promote = 24, + UnPromote = 25, + /** + * Invoke refresh covers as false to generate colorscapes + */ + GenerateColorScape = 26, + /** + * Copy settings from one entity to another + */ + CopySettings = 27, + /** + * Match an entity with an upstream system + */ + Match = 28, + /** + * Merge two (or more?) entities + */ + Merge = 29, + /** + * Add to a reading profile + */ + SetReadingProfile = 30, + /** + * Remove the reading profile from the entity + */ + ClearReadingProfile = 31, + Export = 32, + Like = 33, + UnLike = 34, +} diff --git a/UI/Web/src/app/_models/card/card-configuration.ts b/UI/Web/src/app/_models/card/card-configuration.ts new file mode 100644 index 000000000..c3623f81d --- /dev/null +++ b/UI/Web/src/app/_models/card/card-configuration.ts @@ -0,0 +1,165 @@ +import {DownloadEvent} from "../../shared/_services/download.service"; +import {Observable} from "rxjs"; +import {BulkSelectionEntityDataSource} from "../../cards/bulk-selection.service"; +import {CardEntity} from "./card-entity"; +import {MangaFormat} from "../manga-format"; +import {TemplateRef} from "@angular/core"; +import {ActionableEntity} from "../../_services/action-factory.service"; +import {IHasProgress} from "../common/i-has-progress"; +import {ActionItem} from "../actionables/action-item"; +import {UserProgressUpdateEvent} from "../events/user-progress-update-event"; + +/** + * Configuration object that defines how a card renders and behaves. + * Created by CardConfigFactory for each entity type with sensible defaults. + * + * @typeParam T - The underlying data type. + */ +export interface BaseCardConfiguration { + + /** Whether bulk selection is enabled for this card */ + allowSelection: boolean; + + /** Entity type identifier for bulk selection tracking */ + selectionType: BulkSelectionEntityDataSource; + + /** Suppress Archive Warning when page count is 0 **/ + suppressArchiveWarning: boolean; + + /** Returns the cover image URL */ + coverFunc: (entity: T) => string; + + /** Returns the primary title displayed in the card footer */ + titleFunc: (entity: T) => string; + + /** Returns the router link for the title */ + titleRouteFunc: (entity: T) => string; + + /** Returns the meta title text (area above the main title). Required as fallback. */ + metaTitleFunc: (entity: T, wrapper: CardEntity) => string; + + /** Returns tooltip text for the title */ + tooltipFunc: (entity: T) => string; + + /** Returns reading progress. Return { pages: 0, pagesRead: 0 } if not applicable. */ + progressFunc: (entity: T) => IHasProgress; + + /** Returns the MangaFormat for the format badge, or null to hide */ + formatBadgeFunc?: (entity: T) => MangaFormat | null; + + /** Returns count for the badge (e.g., volume count, file count). 0 or 1 hides the badge. */ + countFunc?: (entity: T) => number; + + /** Returns true to show the error banner ("cannot read"). Default: pages === 0 */ + showErrorFunc?: (entity: T) => boolean; + + /** Returns accessible label for the card */ + ariaLabelFunc?: (entity: T) => string; + + /** + * Optional template for title area. Takes precedence over titleFunc. + * Context: { $implicit: CardEntity } - the full wrapper, not just data + */ + titleTemplate?: TemplateRef<{ $implicit: CardEntity }>; + + /** + * Optional template for meta title area. Takes precedence over metaTitleFunc. + * Context: { $implicit: CardEntity } - the full wrapper, not just data + */ + metaTitleTemplate?: TemplateRef<{ $implicit: CardEntity }>; + + /** Callback when the read button is clicked */ + readFunc: (entity: T) => void; + + /** Callback when the card body is clicked (navigation or preview) */ + clickFunc?: (entity: T, wrapper: CardEntity) => void; + + /** + * Returns an observable of download events for this entity. + * Used to show download progress indicator. + */ + downloadObservableFunc?: (entity: T) => Observable; + /** + * Returns key/values for route params (bookmark mode) + */ + titleRouteParamsFunc?: (entity: T) => Record; + + /** + * Optional strategy for handling real-time progress updates. + * If not provided, the card ignores progress events. + */ + progressUpdateStrategy?: ProgressUpdateStrategy; +} + +/** + * Configuration object that defines how a card renders and behaves. + * Created by CardConfigFactory for each entity type with sensible defaults. + * + * @typeParam T - The underlying data type, T must be ActionableEntity + */ +export interface ActionableCardConfiguration + extends BaseCardConfiguration { + /** Action items for the card's action menu */ + actionableFunc: (entity: T) => ActionItem[]; +} + +export type CardConfiguration = T extends ActionableEntity + ? ActionableCardConfiguration | BaseCardConfiguration + : BaseCardConfiguration; + +export function hasActionables( + config: BaseCardConfiguration +): config is BaseCardConfiguration & { actionableFunc: (entity: any) => ActionItem[] } { + return ( + 'actionableFunc' in config && + typeof (config as any).actionableFunc === 'function' + ); +} + +/** + * Partial configuration for overrides. All properties optional. + */ +export type CardConfigurationOverrides = Partial>; +export type BaseCardConfigurationOverrides = Partial>; + + +/** + * Defines how a card entity matches and responds to real-time progress updates. + * The card component uses this to: + * 1. Filter relevant SignalR events + * 2. Apply local updates to the entity + * 3. Notify the parent via a callback for state synchronization + */ +export interface ProgressUpdateStrategy { + /** + * Extract matching criteria from the entity. + * Used to filter incoming UserProgressUpdateEvent. + */ + getMatchCriteria: (entity: T) => ProgressMatchCriteria; + + /** + * Apply the update to the entity and return the new state. + * Return null if the entity cannot be updated locally (e.g., series without chapter data) + * and requires a full refetch. + */ + applyUpdate: (entity: T, event: UserProgressUpdateEvent) => T | null; +} + +export interface ProgressMatchCriteria { + chapterId?: number; + volumeId?: number; + seriesId?: number; +} + +/** + * Result emitted after a progress update is processed. + * Parent components use this to update their state. + */ +export interface ProgressUpdateResult { + /** The updated entity (null if refetch required) */ + entity: T | null; + /** The original event that triggered the update */ + event: UserProgressUpdateEvent; + /** Whether the parent should refetch instead of using the entity */ + requiresRefetch: boolean; +} diff --git a/UI/Web/src/app/_models/card/card-entity.ts b/UI/Web/src/app/_models/card/card-entity.ts new file mode 100644 index 000000000..17a2fcb5b --- /dev/null +++ b/UI/Web/src/app/_models/card/card-entity.ts @@ -0,0 +1,167 @@ +import {ReadingList, ReadingListItem} from "../reading-list"; +import {Chapter} from "../chapter"; +import {Series} from "../series"; +import {RelationKind} from "../series-detail/relation-kind"; +import {Volume} from "../volume"; +import {UserCollection} from "../collection-tag"; +import {LibraryType} from "../library/library"; +import {PageBookmark} from "../readers/page-bookmark"; +import {RelatedSeriesPair} from "../../_single-module/related-tab/related-tab.component"; +import {SeriesGroup} from "../series-group"; + +/** + * Discriminated union representing any entity that can be displayed as a card. + * Backend returns entityType + data; UI patches in context properties as needed. + * + * Usage: + * if (entity.entityType === 'series') { + * // TypeScript knows entity.data is Series + * console.log(entity.data.libraryId); + * } + */ +export type CardEntity = + | SeriesCardEntity + | CollectionCardEntity + | ReadingListCardEntity + | VolumeCardEntity + | ChapterCardEntity + | ReadingListItemCardEntity + | BookmarkCardEntity + | RelatedSeriesCardEntity + | RecentlyUpdatedSeriesCardEntity; + +export interface SeriesCardEntity { + entityType: 'series'; + data: Series; + /** UI-patched: Relationship to another series when displayed in relations context */ + relation?: RelationKind; + /** UI-patched: Whether this card appears in the On Deck stream */ + isOnDeck?: boolean; +} + +export interface CollectionCardEntity { + entityType: 'collection'; + data: UserCollection; +} + +export interface ReadingListCardEntity { + entityType: 'readinglist'; + data: ReadingList; +} + +export interface VolumeCardEntity { + entityType: 'volume'; + data: Volume; + /** Required context for routing and actions */ + seriesId: number; + libraryId: number; +} + +export interface ChapterCardEntity { + entityType: 'chapter'; + data: Chapter; + /** Required context for routing and actions */ + seriesId: number; + libraryId: number; + /** UI-patched: Library type affects title rendering */ + libraryType?: LibraryType; + /** UI-patched: Suppresses "cannot read" warning for special cases */ + suppressArchiveWarning?: boolean; +} + +export interface ReadingListItemCardEntity { + entityType: 'readinglist-item'; + data: ReadingListItem; +} + +export interface BookmarkCardEntity { + entityType: 'bookmark'; + data: PageBookmark; +} + +export interface RelatedSeriesCardEntity { + entityType: 'related'; + data: RelatedSeriesPair; +} +export interface RecentlyUpdatedSeriesCardEntity { + entityType: 'recentlyUpdatedSeries'; + data: SeriesGroup; +} + +/** + * Type guard utilities for working with CardEntity + */ +export const CardEntityGuards = { + isSeries: (e: CardEntity): e is SeriesCardEntity => e.entityType === 'series', + isCollection: (e: CardEntity): e is CollectionCardEntity => e.entityType === 'collection', + isReadingList: (e: CardEntity): e is ReadingListCardEntity => e.entityType === 'readinglist', + isVolume: (e: CardEntity): e is VolumeCardEntity => e.entityType === 'volume', + isChapter: (e: CardEntity): e is ChapterCardEntity => e.entityType === 'chapter', + isReadingListItem: (e: CardEntity): e is ReadingListItemCardEntity => e.entityType === 'readinglist-item', + isBookmark: (e: CardEntity): e is BookmarkCardEntity => e.entityType === 'bookmark', + isRelatedSeries: (e: CardEntity): e is RelatedSeriesCardEntity => e.entityType === 'related', + isRecentlyUpdatedSeries: (e: CardEntity): e is RecentlyUpdatedSeriesCardEntity => e.entityType === 'recentlyUpdatedSeries', +}; + +/** + * Helper to extract the underlying data with proper typing + */ +export function getCardEntityData(entity: T): T['data'] { + return entity.data; +} + +/** + * Helper to create CardEntity wrappers (useful for UI patching) + */ +export const CardEntityFactory = { + series: (data: Series, context?: Partial>): SeriesCardEntity => ({ + entityType: 'series', + data, + ...context + }), + + collection: (data: UserCollection): CollectionCardEntity => ({ + entityType: 'collection', + data + }), + + readingList: (data: ReadingList): ReadingListCardEntity => ({ + entityType: 'readinglist', + data + }), + + volume: (data: Volume, seriesId: number, libraryId: number): VolumeCardEntity => ({ + entityType: 'volume', + data, + seriesId, + libraryId + }), + + chapter: (data: Chapter, seriesId: number, libraryId: number, context?: Partial>): ChapterCardEntity => ({ + entityType: 'chapter', + data, + seriesId, + libraryId, + ...context + }), + + readingListItem: (data: ReadingListItem): ReadingListItemCardEntity => ({ + entityType: 'readinglist-item', + data + }), + + bookmark: (data: PageBookmark): BookmarkCardEntity => ({ + entityType: 'bookmark', + data + }), + + related: (data: RelatedSeriesPair): RelatedSeriesCardEntity => ({ + entityType: 'related', + data + }), + + recentlyUpdatedSeries: (data: SeriesGroup): RecentlyUpdatedSeriesCardEntity => ({ + entityType: 'recentlyUpdatedSeries', + data + }), +}; diff --git a/UI/Web/src/app/_models/default-modal-options.ts b/UI/Web/src/app/_models/default-modal-options.ts deleted file mode 100644 index 4dbb391a9..000000000 --- a/UI/Web/src/app/_models/default-modal-options.ts +++ /dev/null @@ -1 +0,0 @@ -export const DefaultModalOptions = {scrollable: true, size: 'xl', fullscreen: 'xl'}; diff --git a/UI/Web/src/app/_models/library/library.ts b/UI/Web/src/app/_models/library/library.ts index 85e66df6b..a5f0437ae 100644 --- a/UI/Web/src/app/_models/library/library.ts +++ b/UI/Web/src/app/_models/library/library.ts @@ -16,11 +16,17 @@ export const allLibraryTypes = [LibraryType.Manga, LibraryType.ComicVine, Librar export const allKavitaPlusMetadataApplicableTypes = [LibraryType.Manga, LibraryType.LightNovel, LibraryType.ComicVine, LibraryType.Comic]; export const allKavitaPlusScrobbleEligibleTypes = [LibraryType.Manga, LibraryType.LightNovel]; -export interface Library { +export interface LiteLibrary { + id: number; + name: string; + type: LibraryType; +} + +export interface Library extends LiteLibrary{ id: number; name: string; - lastScanned: string; type: LibraryType; + lastScanned: string; folders: string[]; coverImage?: string | null; folderWatching: boolean; diff --git a/UI/Web/src/app/_models/modal/modal-options.ts b/UI/Web/src/app/_models/modal/modal-options.ts new file mode 100644 index 000000000..a0c2bcb3c --- /dev/null +++ b/UI/Web/src/app/_models/modal/modal-options.ts @@ -0,0 +1,45 @@ +import {NgbModalOptions} from "@ng-bootstrap/ng-bootstrap"; + +export const DefaultModalOptions: Partial = { + scrollable: true, + size: 'xl', + fullscreen: 'xl', +}; + +/** Any Edit Entity modal should use this */ +export function editModal(): Partial { + return {...DefaultModalOptions, size: 'xl', fullscreen: 'xl'}; +} + +export function mediumModal(): Partial { + return {...DefaultModalOptions, size: 'md', fullscreen: 'sm'}; +} + +export function confirmModal(): Partial { + return {...DefaultModalOptions, size: 'lg', fullscreen: 'md'}; +} + +/** Any Add-To flow (Add to Reading List/Collection/etc) modal should use this. A thinned out modal. */ +export function addToModal(): Partial { + return {...DefaultModalOptions, size: 'md', fullscreen: 'sm'}; +} + +/** Non-dismissible — for refresh-required modals only */ +export function versionRefreshModal(): Partial { + return { + ...DefaultModalOptions, + size: 'lg', + keyboard: false, + scrollable: true, + backdrop: 'static' + }; +} + +/** Dismissible — for update-available and out-of-date modals */ +export function versionNotifyModal(): Partial { + return { + ...DefaultModalOptions, + size: 'lg', + scrollable: true, + }; +} diff --git a/UI/Web/src/app/_models/modal/modal-result.ts b/UI/Web/src/app/_models/modal/modal-result.ts new file mode 100644 index 000000000..1b6997e8e --- /dev/null +++ b/UI/Web/src/app/_models/modal/modal-result.ts @@ -0,0 +1,18 @@ +export interface ModalResult { + success: boolean; + data?: T; + coverImageUpdated?: boolean; + isDeleted?: boolean; +} + +export function modalSaved(data?: T, coverImageUpdated = false): ModalResult { + return { success: true, data, coverImageUpdated, isDeleted: false }; +} + +export function modalDeleted(data?: T): ModalResult { + return { success: true, data, coverImageUpdated: false, isDeleted: true }; +} + +export function modalCancelled(): ModalResult { + return { success: false }; +} diff --git a/UI/Web/src/app/_models/series-group.ts b/UI/Web/src/app/_models/series-group.ts index 76c09d135..5fc9841da 100644 --- a/UI/Web/src/app/_models/series-group.ts +++ b/UI/Web/src/app/_models/series-group.ts @@ -1,4 +1,5 @@ -import { LibraryType } from "./library/library"; +import {LibraryType} from "./library/library"; +import {MangaFormat} from "./manga-format"; export interface SeriesGroup { seriesId: number; @@ -9,6 +10,7 @@ export interface SeriesGroup { libraryType: LibraryType; volumeId: number; chapterId: number; + format: MangaFormat; id: number; // This is UI only, sent from backend but has no relation to any entity count: number; } diff --git a/UI/Web/src/app/_models/series.ts b/UI/Web/src/app/_models/series.ts index 2978c04e4..17c00dc60 100644 --- a/UI/Web/src/app/_models/series.ts +++ b/UI/Web/src/app/_models/series.ts @@ -32,6 +32,7 @@ export interface Series extends IHasCover, IHasReadingTime, IHasProgress { userRating: number; hasUserRated: boolean; libraryId: number; + libraryName: string; /** * DateTime the entity was created */ diff --git a/UI/Web/src/app/_models/user/user.ts b/UI/Web/src/app/_models/user/user.ts index 1871e0a93..3398b5b2f 100644 --- a/UI/Web/src/app/_models/user/user.ts +++ b/UI/Web/src/app/_models/user/user.ts @@ -11,8 +11,6 @@ export interface User extends IHasCover { refreshToken: string; roles: string[]; preferences: Preferences; - // ApiKey is deprecated in favor of AuthKeys - //apiKey: string; email: string; ageRestriction: AgeRestriction; hasRunScrobbleEventGeneration: boolean; diff --git a/UI/Web/src/app/base-url.provider.ts b/UI/Web/src/app/_providers/base-url.provider.ts similarity index 100% rename from UI/Web/src/app/base-url.provider.ts rename to UI/Web/src/app/_providers/base-url.provider.ts diff --git a/UI/Web/src/app/_resolvers/chapter.resolver.ts b/UI/Web/src/app/_resolvers/chapter.resolver.ts new file mode 100644 index 000000000..54cfbe4e0 --- /dev/null +++ b/UI/Web/src/app/_resolvers/chapter.resolver.ts @@ -0,0 +1,23 @@ +import {ResolveFn, Router, UrlTree} from "@angular/router"; +import {inject} from "@angular/core"; +import {catchError, of} from "rxjs"; +import {ChapterService} from "../_services/chapter.service"; +import {Chapter} from "../_models/chapter"; + +export const chapterResolver: ResolveFn = (route, state) => { + const chapterService = inject(ChapterService); + const router = inject(Router); + + const chapterId = route.parent?.paramMap.get('chapterId') || route.paramMap.get('chapterId'); + + if (!chapterId || chapterId === '0') { + console.error('Chapter ID not found in route params or 0'); + return of(router.parseUrl('/home')); + } + + return chapterService.getChapterMetadata(parseInt(chapterId, 10)).pipe( + catchError(() => { + return of(router.parseUrl('/home')); + }) + ); +}; diff --git a/UI/Web/src/app/_resolvers/collection.resolver.ts b/UI/Web/src/app/_resolvers/collection.resolver.ts new file mode 100644 index 000000000..e212dc349 --- /dev/null +++ b/UI/Web/src/app/_resolvers/collection.resolver.ts @@ -0,0 +1,28 @@ +import {ResolveFn, Router, UrlTree} from "@angular/router"; +import {inject} from "@angular/core"; +import {catchError, of, switchMap} from "rxjs"; +import {UserCollection} from "../_models/collection-tag"; +import {CollectionTagService} from "../_services/collection-tag.service"; + +export const collectionResolver: ResolveFn = (route, state) => { + const collectionTagService = inject(CollectionTagService); + const router = inject(Router); + + const collectionId = route.paramMap.get('collectionId') || route.parent?.paramMap.get('collectionId'); + + if (!collectionId || collectionId === '0') { + return of(router.parseUrl('/collections')); + } + + return collectionTagService.getCollectionById(parseInt(collectionId, 10)).pipe( + switchMap(collection => { + if (collection === null) { + return of(router.parseUrl('/collections')); + } + return of(collection); + }), + catchError(() => { + return of(router.parseUrl('/collections')); + }) + ); +}; diff --git a/UI/Web/src/app/_resolvers/library.resolver.ts b/UI/Web/src/app/_resolvers/library.resolver.ts new file mode 100644 index 000000000..1544deec9 --- /dev/null +++ b/UI/Web/src/app/_resolvers/library.resolver.ts @@ -0,0 +1,28 @@ +import {ResolveFn, Router, UrlTree} from "@angular/router"; +import {inject} from "@angular/core"; +import {Library} from "../_models/library/library"; +import {LibraryService} from "../_services/library.service"; +import {catchError, of} from "rxjs"; + +/** + * Get Library is an admin-restricted API, in the case the user is not an Admin, this will return a Library with just the id/type/name + * @param route + * @param state + */ +export const libraryResolver: ResolveFn = (route, state) => { + const libraryService = inject(LibraryService); + const router = inject(Router); + + const libId = route.parent?.paramMap.get('libraryId') || route.paramMap.get('libraryId'); + + if (!libId || libId === '0') { + console.error('Library ID not found in route params or 0'); + return of(router.parseUrl('/home')); + } + + return libraryService.getLibrary(parseInt(libId, 10)).pipe( + catchError(() => { + return of(router.parseUrl('/home')); + }) + ); +}; diff --git a/UI/Web/src/app/_resolvers/person.resolver.ts b/UI/Web/src/app/_resolvers/person.resolver.ts new file mode 100644 index 000000000..076bb94b6 --- /dev/null +++ b/UI/Web/src/app/_resolvers/person.resolver.ts @@ -0,0 +1,29 @@ +import {ResolveFn, Router, UrlTree} from "@angular/router"; +import {inject} from "@angular/core"; +import {catchError, of, switchMap} from "rxjs"; +import {PersonService} from "../_services/person.service"; +import {Person} from "../_models/metadata/person"; + +export const personResolver: ResolveFn = (route, state) => { + const personService = inject(PersonService); + const router = inject(Router); + + const personName = route.parent?.paramMap.get('name') || route.paramMap.get('name'); + + if (!personName || personName === '') { + console.error('Person Name not found in route params or 0'); + return of(router.parseUrl('/home')); + } + + return personService.get(personName).pipe( + switchMap(person => { + if (person === null) { + return of(router.parseUrl('/home')); + } + return of(person); + }), + catchError(() => { + return of(router.parseUrl('/home')); + }) + ); +}; diff --git a/UI/Web/src/app/_resolvers/reading-list.resolver.ts b/UI/Web/src/app/_resolvers/reading-list.resolver.ts new file mode 100644 index 000000000..7d98b28fa --- /dev/null +++ b/UI/Web/src/app/_resolvers/reading-list.resolver.ts @@ -0,0 +1,29 @@ +import {ResolveFn, Router, UrlTree} from "@angular/router"; +import {inject} from "@angular/core"; +import {catchError, of, switchMap} from "rxjs"; +import {ReadingList} from "../_models/reading-list"; +import {ReadingListService} from "../_services/reading-list.service"; + +export const readingListResolver: ResolveFn = (route, state) => { + const readingListService = inject(ReadingListService); + const router = inject(Router); + + const readingListId = route.paramMap.get('readingListId') || route.parent?.paramMap.get('readingListId'); + + if (!readingListId || readingListId === '0') { + console.error('Reading List ID not found in route params or 0'); + return of(router.parseUrl('/home')); + } + + return readingListService.getReadingList(parseInt(readingListId, 10)).pipe( + switchMap(readingList => { + if (readingList === null) { + return of(router.parseUrl('/home')); + } + return of(readingList); + }), + catchError(() => { + return of(router.parseUrl('/home')); + }) + ); +}; diff --git a/UI/Web/src/app/_resolvers/series.resolver.ts b/UI/Web/src/app/_resolvers/series.resolver.ts new file mode 100644 index 000000000..86a362c10 --- /dev/null +++ b/UI/Web/src/app/_resolvers/series.resolver.ts @@ -0,0 +1,24 @@ +import {ResolveFn, Router, UrlTree} from "@angular/router"; +import {inject} from "@angular/core"; +import {catchError, of} from "rxjs"; +import {SeriesService} from "../_services/series.service"; +import {Series} from "../_models/series"; + + +export const seriesResolver: ResolveFn = (route, state) => { + const seriesService = inject(SeriesService); + const router = inject(Router); + + const seriesId = route.parent?.paramMap.get('seriesId') || route.paramMap.get('seriesId'); + + if (!seriesId || seriesId === '0') { + console.error('Series ID not found in route params or 0'); + return of(router.parseUrl('/home')); + } + + return seriesService.getSeries(parseInt(seriesId, 10)).pipe( + catchError(() => { + return of(router.parseUrl('/home')); + }) + ); +}; diff --git a/UI/Web/src/app/_resolvers/volume.resolver.ts b/UI/Web/src/app/_resolvers/volume.resolver.ts new file mode 100644 index 000000000..3b40726de --- /dev/null +++ b/UI/Web/src/app/_resolvers/volume.resolver.ts @@ -0,0 +1,23 @@ +import {ResolveFn, Router, UrlTree} from "@angular/router"; +import {inject} from "@angular/core"; +import {catchError, of} from "rxjs"; +import {Volume} from "../_models/volume"; +import {VolumeService} from "../_services/volume.service"; + +export const volumeResolver: ResolveFn = (route, state) => { + const volumeService = inject(VolumeService); + const router = inject(Router); + + const volumeId = route.parent?.paramMap.get('volumeId') || route.paramMap.get('volumeId'); + + if (!volumeId || volumeId === '0') { + console.error('Volume ID not found in route params or 0'); + return of(router.parseUrl('/home')); + } + + return volumeService.getVolumeMetadata(parseInt(volumeId, 10)).pipe( + catchError(() => { + return of(router.parseUrl('/home')); + }) + ); +}; diff --git a/UI/Web/src/app/_routes/all-series-routing.module.ts b/UI/Web/src/app/_routes/all-series-routing.module.ts index 5c4804251..7ff83c836 100644 --- a/UI/Web/src/app/_routes/all-series-routing.module.ts +++ b/UI/Web/src/app/_routes/all-series-routing.module.ts @@ -5,6 +5,7 @@ import {UrlFilterResolver} from "../_resolvers/url-filter.resolver"; export const routes: Routes = [ {path: '', component: AllSeriesComponent, pathMatch: 'full', + title: 'title.all-series', runGuardsAndResolvers: 'always', resolve: { filter: UrlFilterResolver diff --git a/UI/Web/src/app/_routes/bookmark-routing.module.ts b/UI/Web/src/app/_routes/bookmark-routing.module.ts index 2c7c52036..0b7f7f2e9 100644 --- a/UI/Web/src/app/_routes/bookmark-routing.module.ts +++ b/UI/Web/src/app/_routes/bookmark-routing.module.ts @@ -4,6 +4,7 @@ import {UrlFilterResolver} from "../_resolvers/url-filter.resolver"; export const routes: Routes = [ {path: '', component: BookmarksComponent, pathMatch: 'full', + title: 'title.bookmarks', resolve: { filter: UrlFilterResolver }, diff --git a/UI/Web/src/app/_routes/browse-routing.module.ts b/UI/Web/src/app/_routes/browse-routing.module.ts index ae5022bd1..51fe0b698 100644 --- a/UI/Web/src/app/_routes/browse-routing.module.ts +++ b/UI/Web/src/app/_routes/browse-routing.module.ts @@ -20,8 +20,8 @@ export const routes: Routes = [ }, runGuardsAndResolvers: 'always', }, - {path: 'genres', component: BrowseGenresComponent, pathMatch: 'full'}, - {path: 'tags', component: BrowseTagsComponent, pathMatch: 'full'}, + {path: 'genres', component: BrowseGenresComponent, pathMatch: 'full', title: 'title.browse-genres'}, + {path: 'tags', component: BrowseTagsComponent, pathMatch: 'full', title: 'title.browse-tags'}, {path: 'annotations', component: AllAnnotationsComponent, pathMatch: 'full', resolve: { filter: UrlFilterResolver, diff --git a/UI/Web/src/app/_routes/collections-routing.module.ts b/UI/Web/src/app/_routes/collections-routing.module.ts index 2b3b0ffd7..83858a782 100644 --- a/UI/Web/src/app/_routes/collections-routing.module.ts +++ b/UI/Web/src/app/_routes/collections-routing.module.ts @@ -2,14 +2,16 @@ import {Routes} from '@angular/router'; import {AllCollectionsComponent} from '../collections/_components/all-collections/all-collections.component'; import {CollectionDetailComponent} from '../collections/_components/collection-detail/collection-detail.component'; import {UrlFilterResolver} from "../_resolvers/url-filter.resolver"; +import {collectionResolver} from "../_resolvers/collection.resolver"; export const routes: Routes = [ - {path: '', component: AllCollectionsComponent, pathMatch: 'full'}, - {path: ':id', component: CollectionDetailComponent, + {path: '', component: AllCollectionsComponent, pathMatch: 'full', title: 'title.collections'}, + {path: ':collectionId', component: CollectionDetailComponent, + data: {titleField: 'collection', titleProp: 'title'}, resolve: { + collection: collectionResolver, filter: UrlFilterResolver }, runGuardsAndResolvers: 'always', }, ]; - diff --git a/UI/Web/src/app/_routes/dashboard-routing.module.ts b/UI/Web/src/app/_routes/dashboard-routing.module.ts index e035a47ea..bd9683b2a 100644 --- a/UI/Web/src/app/_routes/dashboard-routing.module.ts +++ b/UI/Web/src/app/_routes/dashboard-routing.module.ts @@ -6,5 +6,6 @@ export const routes: Routes = [ { path: '', component: DashboardComponent, + title: 'title.home', } ]; diff --git a/UI/Web/src/app/_routes/library-detail-routing.module.ts b/UI/Web/src/app/_routes/library-detail-routing.module.ts index 3c09a71ee..ba627e647 100644 --- a/UI/Web/src/app/_routes/library-detail-routing.module.ts +++ b/UI/Web/src/app/_routes/library-detail-routing.module.ts @@ -1,27 +1,17 @@ import {Routes} from '@angular/router'; -import {AuthGuard} from '../_guards/auth.guard'; -import {LibraryAccessGuard} from '../_guards/library-access.guard'; import {LibraryDetailComponent} from '../library-detail/library-detail.component'; import {UrlFilterResolver} from "../_resolvers/url-filter.resolver"; +import {libraryResolver} from "../_resolvers/library.resolver"; export const routes: Routes = [ - { - path: ':libraryId', - runGuardsAndResolvers: 'always', - canActivate: [AuthGuard, LibraryAccessGuard], - component: LibraryDetailComponent, - resolve: { - filter: UrlFilterResolver - }, - }, { path: '', - runGuardsAndResolvers: 'always', - canActivate: [AuthGuard, LibraryAccessGuard], component: LibraryDetailComponent, + data: {titleField: 'library', titleProp: 'name'}, resolve: { + library: libraryResolver, filter: UrlFilterResolver - }, - }, + } + } ]; diff --git a/UI/Web/src/app/_routes/person-detail-routing.module.ts b/UI/Web/src/app/_routes/person-detail-routing.module.ts deleted file mode 100644 index 95b610cea..000000000 --- a/UI/Web/src/app/_routes/person-detail-routing.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Routes } from '@angular/router'; -import { AuthGuard } from '../_guards/auth.guard'; -import {PersonDetailComponent} from "../person-detail/person-detail.component"; - - -export const routes: Routes = [ - { - path: ':name', - runGuardsAndResolvers: 'always', - canActivate: [AuthGuard], - component: PersonDetailComponent - }, - { - path: '', - runGuardsAndResolvers: 'always', - canActivate: [AuthGuard], - component: PersonDetailComponent - } -]; diff --git a/UI/Web/src/app/_routes/reading-list-routing.module.ts b/UI/Web/src/app/_routes/reading-list-routing.module.ts index f1c8e1410..1fc1e922c 100644 --- a/UI/Web/src/app/_routes/reading-list-routing.module.ts +++ b/UI/Web/src/app/_routes/reading-list-routing.module.ts @@ -1,9 +1,20 @@ -import { Routes } from "@angular/router"; -import { ReadingListDetailComponent } from "../reading-list/_components/reading-list-detail/reading-list-detail.component"; -import { ReadingListsComponent } from "../reading-list/_components/reading-lists/reading-lists.component"; - +import {Routes} from "@angular/router"; +import {ReadingListsComponent} from "../reading-list/_components/reading-lists/reading-lists.component"; +import {authGuard} from "../_guards/auth.guard"; +import {readingListResolver} from "../_resolvers/reading-list.resolver"; +// TODO: I can't figure out how to use this pattern and have the resolver work for readingList detail page. export const routes: Routes = [ - {path: '', component: ReadingListsComponent, pathMatch: 'full'}, - {path: ':id', component: ReadingListDetailComponent, pathMatch: 'full'}, + { + path: '', + component: ReadingListsComponent, + pathMatch: 'full' + }, + { + path: ':readingListId', + runGuardsAndResolvers: 'always', + canActivate: [authGuard], + resolve: { readingList: readingListResolver }, + loadComponent: () => import('../reading-list/_components/reading-list-detail/reading-list-detail.component').then(c => c.ReadingListDetailComponent), + } ]; diff --git a/UI/Web/src/app/_routes/settings-routing.module.ts b/UI/Web/src/app/_routes/settings-routing.module.ts index 83cb040ef..02b8df3d3 100644 --- a/UI/Web/src/app/_routes/settings-routing.module.ts +++ b/UI/Web/src/app/_routes/settings-routing.module.ts @@ -2,5 +2,5 @@ import { Routes } from '@angular/router'; import {SettingsComponent} from "../settings/_components/settings/settings.component"; export const routes: Routes = [ - {path: '', component: SettingsComponent, pathMatch: 'full'}, + {path: '', component: SettingsComponent, pathMatch: 'full', title: 'title.settings'}, ]; diff --git a/UI/Web/src/app/_routes/want-to-read-routing.module.ts b/UI/Web/src/app/_routes/want-to-read-routing.module.ts index b593172c0..330a6d9d5 100644 --- a/UI/Web/src/app/_routes/want-to-read-routing.module.ts +++ b/UI/Web/src/app/_routes/want-to-read-routing.module.ts @@ -3,7 +3,7 @@ import {WantToReadComponent} from '../want-to-read/_components/want-to-read/want import {UrlFilterResolver} from "../_resolvers/url-filter.resolver"; export const routes: Routes = [ - {path: '', component: WantToReadComponent, pathMatch: 'full', runGuardsAndResolvers: 'always', resolve: { + {path: '', component: WantToReadComponent, pathMatch: 'full', title: 'title.want-to-read', runGuardsAndResolvers: 'always', resolve: { filter: UrlFilterResolver } }, diff --git a/UI/Web/src/app/_services/account.service.ts b/UI/Web/src/app/_services/account.service.ts index 6d3cf1fb5..43b506246 100644 --- a/UI/Web/src/app/_services/account.service.ts +++ b/UI/Web/src/app/_services/account.service.ts @@ -1,6 +1,6 @@ import {HttpClient} from '@angular/common/http'; -import {computed, DestroyRef, inject, Injectable} from '@angular/core'; -import {Observable, of, ReplaySubject, shareReplay} from 'rxjs'; +import {computed, DestroyRef, inject, Injectable, signal} from '@angular/core'; +import {of} from 'rxjs'; import {filter, map, switchMap, tap} from 'rxjs/operators'; import {environment} from 'src/environments/environment'; import {Preferences} from '../_models/preferences/preferences'; @@ -12,12 +12,12 @@ import {UserUpdateEvent} from '../_models/events/user-update-event'; import {AgeRating} from '../_models/metadata/age-rating'; import {AgeRestriction} from '../_models/metadata/age-restriction'; import {TextResonse} from '../_types/text-response'; -import {takeUntilDestroyed, toSignal} from "@angular/core/rxjs-interop"; -import {Action} from "./action-factory.service"; +import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {LicenseService} from "./license.service"; import {LocalizationService} from "./localization.service"; import {Annotation} from "../book-reader/_models/annotations/annotation"; -import {AuthKey, OpdsName} from "../_models/user/auth-key"; +import {AuthKey, ImageOnlyName, OpdsName} from "../_models/user/auth-key"; +import {Action} from "../_models/actionables/action"; export enum Role { Admin = 'Admin', @@ -54,24 +54,34 @@ export class AccountService { private readonly messageHub = inject(MessageHubService); baseUrl = environment.apiUrl; - userKey = 'kavita-user'; + public static userKey = 'kavita-user'; public static lastLoginKey = 'kavita-lastlogin'; public static localeKey = 'kavita-locale'; - private currentUser: User | undefined; - // Stores values, when someone subscribes gives (1) of last values seen. - private currentUserSource = new ReplaySubject(1); - public currentUser$ = this.currentUserSource.asObservable().pipe(takeUntilDestroyed(this.destroyRef), shareReplay({bufferSize: 1, refCount: true})); - public isAdmin$: Observable = this.currentUser$.pipe(takeUntilDestroyed(this.destroyRef), map(u => { - if (!u) return false; - return this.hasAdminRole(u); - }), shareReplay({bufferSize: 1, refCount: true})); - public readonly isAdmin = toSignal(this.isAdmin$); + private readonly _currentUser = signal(undefined); + public readonly currentUser = this._currentUser.asReadonly(); - public readonly currentUserSignal = toSignal(this.currentUser$); - public readonly userId = computed(() => this.currentUserSignal()?.id); - public readonly currentUserGenericApiKey = computed(() => this.currentUserSignal()?.authKeys.filter(k => k.name === OpdsName)[0].key); - public readonly isReadOnly = computed(() => this.currentUserSignal()?.roles.includes(Role.ReadOnly) ?? true); + // Derived signals + public readonly isLoggedIn = computed(() => this._currentUser() !== undefined); + public readonly userId = computed(() => this._currentUser()?.id); + public readonly username = computed(() => this._currentUser()?.username); + public readonly userPreferences = computed(() => this._currentUser()?.preferences); + + // Role signals + public readonly hasAdminRole = computed(() => this.hasRole(this._currentUser(), Role.Admin)); + public readonly hasChangePasswordRole = computed(() => this.hasRole(this._currentUser(), Role.ChangePassword)); + public readonly hasChangeAgeRestrictionRole = computed(() => this.hasRole(this._currentUser(), Role.ChangeRestriction)); + public readonly hasDownloadRole = computed(() => this.hasRole(this._currentUser(), Role.Download)); + public readonly hasBookmarkRole = computed(() => this.hasRole(this._currentUser(), Role.Bookmark)); + public readonly hasReadOnlyRole = computed(() => this._currentUser() ? this.hasRole(this._currentUser(), Role.ReadOnly) : true); + public readonly hasPromoteRole = computed(() => this.hasRole(this._currentUser(), Role.Promote) || this.hasRole(this._currentUser(), Role.Admin)); + + public readonly currentUserGenericApiKey = computed(() => + this._currentUser()?.authKeys?.find(k => k.name === OpdsName)?.key + ); + public readonly currentUserImageAuthKey = computed(() => + this._currentUser()?.authKeys?.find(k => k.name === ImageOnlyName)?.key + ); /** * SetTimeout handler for keeping track of refresh token call @@ -83,7 +93,7 @@ export class AccountService { constructor() { this.messageHub.messages$.pipe(filter(evt => evt.event === EVENTS.UserUpdate), map(evt => evt.payload as UserUpdateEvent), - filter(userUpdateEvent => userUpdateEvent.userName === this.currentUser?.username), + filter(userUpdateEvent => userUpdateEvent.userName === this._currentUser()?.username), switchMap(() => this.refreshAccount())) .subscribe(() => {}); @@ -91,17 +101,14 @@ export class AccountService { filter(evt => evt.event === EVENTS.AuthKeyUpdate), map(evt => evt.payload as {authKey: AuthKey}), tap(({authKey}) => { - const existingKeys = this.currentUser!.authKeys; + const existing = this._currentUser(); + if (!existing) return; + const existingKeys = existing.authKeys ?? []; const index = existingKeys.findIndex(k => k.id === authKey.id); - const authKeys = index >= 0 ? existingKeys.map(k => k.id === authKey.id ? authKey : k) : [...existingKeys, authKey]; - - this.setCurrentUser({ - ...this.currentUser!, - authKeys: authKeys, - }, false); + this.setCurrentUser({ ...existing, authKeys }, false); }), ).subscribe(); @@ -109,12 +116,9 @@ export class AccountService { filter(evt => evt.event === EVENTS.AuthKeyDeleted), map(evt => evt.payload as {id: number}), tap(({id}) => { - const authKeys = this.currentUser!.authKeys.filter(k => k.id !== id); - - this.setCurrentUser({ - ...this.currentUser!, - authKeys: authKeys, - }, false); + const existing = this._currentUser(); + if (!existing) return; + this.setCurrentUser({ ...existing, authKeys: (existing.authKeys ?? []).filter(k => k.id !== id) }, false); }), ).subscribe(); @@ -129,10 +133,17 @@ export class AccountService { }); } + canCurrentUserInvokeAction(action: Action) { + const user = this.currentUser(); + if (!user) return false; + + return this.canInvokeAction(user, action); + } + canInvokeAction(user: User, action: Action) { - const isAdmin = this.hasAdminRole(user); - const canDownload = this.hasDownloadRole(user); - const canPromote = this.hasPromoteRole(user); + const isAdmin = this.hasRole(user, Role.Admin); + const canDownload = this.hasRole(user, Role.Download); + const canPromote = this.hasRole(user, Role.Promote) || this.hasRole(user, Role.Admin); if (isAdmin) return true; if (action === Action.Download) return canDownload; @@ -141,6 +152,10 @@ export class AccountService { return true; } + hasRole(user: User | undefined, role: Role) { + return !!user && user.roles.includes(role); + } + /** * If the user has any role in the restricted roles array or is an Admin * @param user @@ -153,7 +168,7 @@ export class AccountService { } // If the user is an admin, they have the role - if (this.hasAdminRole(user)) { + if (this.hasRole(user, Role.Admin)) { return true; } @@ -171,71 +186,12 @@ export class AccountService { return roles.some(role => user.roles.includes(role)); } - /** - * If User or Admin, will return false - * @param user - * @param restrictedRoles - */ - hasAnyRestrictedRole(user: User, restrictedRoles: Array = []) { - if (!user || !user.roles) { - return true; - } - - if (restrictedRoles.length === 0) { - return false; - } - - // If the user is an admin, they have the role - if (this.hasAdminRole(user)) { - return false; - } - - - if (restrictedRoles.length > 0 && restrictedRoles.some(role => user.roles.includes(role))) { - return true; - } - - return false; - } - - hasAdminRole(user: User) { - return user && user.roles.includes(Role.Admin); - } - - hasChangePasswordRole(user: User) { - return user && user.roles.includes(Role.ChangePassword); - } - - hasChangeAgeRestrictionRole(user: User) { - return user && !user.roles.includes(Role.Admin) && user.roles.includes(Role.ChangeRestriction); - } - - hasDownloadRole(user: User) { - return user && user.roles.includes(Role.Download); - } - - hasBookmarkRole(user: User) { - return user && user.roles.includes(Role.Bookmark); - } - - hasReadOnlyRole(user: User) { - return user && user.roles.includes(Role.ReadOnly); - } - - hasPromoteRole(user: User) { - return user && user.roles.includes(Role.Promote) || user.roles.includes(Role.Admin); - } - - getRoles() { - return this.httpClient.get(this.baseUrl + 'account/roles'); - } - /** * Should likes be displayed for the given annotation * @param annotation */ showAnnotationLikes(annotation: Annotation) { - const user = this.currentUserSignal(); + const user = this._currentUser(); if (!user) return false; const shareAnnotations = user.preferences.socialPreferences.shareAnnotations; @@ -250,7 +206,7 @@ export class AccountService { * @private */ private isSocialFeatureEnabled(feature: boolean, activeLibrary: number, ageRating: AgeRating) { - const user = this.currentUserSignal(); + const user = this._currentUser(); if (!user || !feature) return false; const socialPreferences = user.preferences.socialPreferences; @@ -295,42 +251,45 @@ export class AccountService { ); } - setCurrentUser(user?: User, refreshConnections = true) { + /** Omit auth keys since they are long-lived. The auth keys will be set from refreshAccount() */ + private getPersistableUser(user: User): Omit { + const { authKeys, ...persistable } = user; + return persistable; + } + + setCurrentUser(user?: User, refreshConnections = true) { + const currentUser = this._currentUser(); + const isSameUser = !!currentUser && !!user && currentUser.username === user.username; - const isSameUser = this.currentUser === user; if (user) { - localStorage.setItem(this.userKey, JSON.stringify(user)); + localStorage.setItem(AccountService.userKey, JSON.stringify(this.getPersistableUser(user))); localStorage.setItem(AccountService.lastLoginKey, user.username); } - this.currentUser = user; - this.currentUserSource.next(user); + this._currentUser.set(user); if (!refreshConnections) return; this.stopRefreshTokenTimer(); - if (this.currentUser) { - // BUG: StopHubConnection has a promise in it, this needs to be async - // But that really messes everything up + if (user) { if (!isSameUser) { this.messageHub.stopHubConnection(); - this.messageHub.createHubConnection(this.currentUser); + this.messageHub.createHubConnection(user); this.licenseService.hasValidLicense().subscribe(); } - if (this.currentUser.token) { + if (user.token) { this.startRefreshTokenTimer(); } } } logout(skipAutoLogin: boolean = false) { - const user = this.currentUserSignal(); + const user = this._currentUser(); if (!user) return; - localStorage.removeItem(this.userKey); - this.currentUserSource.next(undefined); - this.currentUser = undefined; + localStorage.removeItem(AccountService.userKey); + this._currentUser.set(undefined); this.stopRefreshTokenTimer(); this.messageHub.stopHubConnection(); @@ -403,10 +362,6 @@ export class AccountService { return this.httpClient.get(this.baseUrl + 'account/invite-url?userId=' + userId + '&withBaseUrl=' + withBaseUrl, TextResonse); } - getDecodedToken(token: string) { - return JSON.parse(atob(token.split('.')[1])); - } - requestResetPasswordEmail(email: string) { return this.httpClient.post(this.baseUrl + 'account/forgot-password?email=' + encodeURIComponent(email), {}, TextResonse); } @@ -437,32 +392,28 @@ export class AccountService { */ getPreferences() { return this.httpClient.get(this.baseUrl + 'users/get-preferences').pipe(map(pref => { - if (this.currentUser !== undefined && this.currentUser !== null) { - this.currentUser.preferences = pref; - this.setCurrentUser(this.currentUser); - } + const current = this._currentUser(); + if (current) this.setCurrentUser({ ...current, preferences: pref }); return pref; }), takeUntilDestroyed(this.destroyRef)); } updatePreferences(userPreferences: Preferences) { return this.httpClient.post(this.baseUrl + 'users/update-preferences', userPreferences).pipe(map(settings => { - if (this.currentUser !== undefined && this.currentUser !== null) { - this.currentUser.preferences = settings; - this.setCurrentUser(this.currentUser, false); + const current = this._currentUser(); + if (current) { + this.setCurrentUser({ ...current, preferences: settings }, false); // Update the locale on disk (for logout and compact-number pipe) - localStorage.setItem(AccountService.localeKey, this.currentUser.preferences.locale); - this.localizationService.refreshTranslations(this.currentUser.preferences.locale); - + localStorage.setItem(AccountService.localeKey, settings.locale); + this.localizationService.refreshTranslations(settings.locale); } return settings; }), takeUntilDestroyed(this.destroyRef)); } getUserFromLocalStorage(): User | undefined { - - const userString = localStorage.getItem(this.userKey); + const userString = localStorage.getItem(AccountService.userKey); if (userString) { return JSON.parse(userString) @@ -494,30 +445,23 @@ export class AccountService { refreshAccount() { - if (this.currentUser === null || this.currentUser === undefined) return of(); + if (!this._currentUser()) return of(); return this.httpClient.get(this.baseUrl + 'account/refresh-account').pipe(map((user: User) => { - if (user) { - this.currentUser = {...user}; - } - - this.setCurrentUser(this.currentUser); + if (user) this.setCurrentUser({ ...user }); return user; })); } private refreshToken() { - if (this.currentUser === null || this.currentUser === undefined || !this.isOnline || !this.currentUser.token) return of(); + const current = this._currentUser(); + if (!current || !this.isOnline || !current.token) return of(); return this.httpClient.post<{token: string, refreshToken: string}>(this.baseUrl + 'account/refresh-token', - {token: this.currentUser.token, refreshToken: this.currentUser.refreshToken}).pipe(map(user => { - if (this.currentUser) { - this.currentUser.token = user.token; - this.currentUser.refreshToken = user.refreshToken; - } - - this.setCurrentUser(this.currentUser); - return user; + {token: current.token, refreshToken: current.refreshToken}).pipe(map(tokens => { + const updated = this._currentUser(); + if (updated) this.setCurrentUser({ ...updated, token: tokens.token, refreshToken: tokens.refreshToken }); + return tokens; })); } @@ -525,7 +469,7 @@ export class AccountService { * Every 10 mins refresh the token */ private startRefreshTokenTimer() { - if (this.currentUser === null || this.currentUser === undefined) { + if (!this._currentUser()) { this.stopRefreshTokenTimer(); return; } diff --git a/UI/Web/src/app/_services/action-factory.service.ts b/UI/Web/src/app/_services/action-factory.service.ts index f404d0976..cebccabf0 100644 --- a/UI/Web/src/app/_services/action-factory.service.ts +++ b/UI/Web/src/app/_services/action-factory.service.ts @@ -1,9 +1,9 @@ -import {inject, Injectable} from '@angular/core'; -import {map, Observable, shareReplay} from 'rxjs'; +import {effect, inject, Injectable} from '@angular/core'; +import {EMPTY, map, shareReplay} from 'rxjs'; import {Chapter} from '../_models/chapter'; import {UserCollection} from '../_models/collection-tag'; import {Device} from '../_models/device/device'; -import {Library} from '../_models/library/library'; +import {Library, LibraryType} from '../_models/library/library'; import {ReadingList} from '../_models/reading-list'; import {Series} from '../_models/series'; import {Volume} from '../_models/volume'; @@ -16,170 +16,17 @@ import {Person} from "../_models/metadata/person"; import {User} from '../_models/user/user'; import {Annotation} from "../book-reader/_models/annotations/annotation"; import {ClientDevice} from "../_models/client-device"; +import {PageBookmark} from "../_models/readers/page-bookmark"; +import {ActionService} from "./action.service"; +import {ActionItem, ActionShouldRenderFunc} from "../_models/actionables/action-item"; +import {Action} from "../_models/actionables/action"; +import {ActionResultCallback} from "../_models/actionables/action-result"; -export enum Action { - Submenu = -1, - /** - * Mark entity as read - */ - MarkAsRead = 0, - /** - * Mark entity as unread - */ - MarkAsUnread = 1, - /** - * Invoke a Scan on Series/Library - */ - Scan = 2, - /** - * Delete the entity - */ - Delete = 3, - /** - * Open edit modal - */ - Edit = 4, - /** - * Open details modal - */ - Info = 5, - /** - * Invoke a refresh covers - */ - RefreshMetadata = 6, - /** - * Download the entity - */ - Download = 7, - /** - * Invoke an Analyze Files which calculates word count - */ - AnalyzeFiles = 8, - /** - * Read in incognito mode aka no progress tracking - */ - IncognitoRead = 9, - /** - * Add to reading list - */ - AddToReadingList = 10, - /** - * Add to collection - */ - AddToCollection = 11, - /** - * Essentially a download, but handled differently. Needed so card bubbles it up for handling - */ - DownloadBookmark = 12, - /** - * Open Series detail page for said series - */ - ViewSeries = 13, - /** - * Open the reader for entity - */ - Read = 14, - /** - * Add to user's Want to Read List - */ - AddToWantToReadList = 15, - /** - * Remove from user's Want to Read List - */ - RemoveFromWantToReadList = 16, - /** - * Send to a device - */ - SendTo = 17, - /** - * Import some data into Kavita - */ - Import = 18, - /** - * Removes the Series from On Deck inclusion - */ - RemoveFromOnDeck = 19, - AddRuleGroup = 20, - RemoveRuleGroup = 21, - MarkAsVisible = 22, - MarkAsInvisible = 23, - /** - * Promotes the underlying item (Reading List, Collection) - */ - Promote = 24, - UnPromote = 25, - /** - * Invoke refresh covers as false to generate colorscapes - */ - GenerateColorScape = 26, - /** - * Copy settings from one entity to another - */ - CopySettings = 27, - /** - * Match an entity with an upstream system - */ - Match = 28, - /** - * Merge two (or more?) entities - */ - Merge = 29, - /** - * Add to a reading profile - */ - SetReadingProfile = 30, - /** - * Remove the reading profile from the entity - */ - ClearReadingProfile = 31, - Export = 32, - Like = 33, - UnLike = 34, -} - -/** - * Callback for an action - */ -export type ActionCallback = (action: ActionItem, entity: T) => void; -export type ActionShouldRenderFunc = (action: ActionItem, entity: T, user: User) => boolean; - -export interface ActionItem { - title: string; - description: string; - action: Action; - callback: ActionCallback; - /** - * Roles required to be present for ActionItem to show. If empty, assumes anyone can see. At least one needs to apply. - */ - requiredRoles: Role[]; - /** - * @deprecated Use required Roles instead - */ - requiresAdmin?: boolean; - children: Array>; - /** - * An optional class which applies to an item. ie) danger on a delete action - */ - class?: string; - /** - * Indicates that there exists a separate list will be loaded from an API. - * Rule: If using this, only one child should exist in children with the Action for dynamicList. - */ - dynamicList?: Observable<{title: string, data: any}[]> | undefined; - /** - * Extra data that needs to be sent back from the card item. Used mainly for dynamicList. This will be the item from dyanamicList return - */ - _extra?: {title: string, data: any}; - /** - * Will call on each action to determine if it should show for the appropriate entity based on state and user - */ - shouldRender: ActionShouldRenderFunc; -} /** * Entities that can be actioned upon */ -export type ActionableEntity = Volume | Series | Chapter | ReadingList | UserCollection | Person | Library | SideNavStream | SmartFilter | ClientDevice | null; +export type ActionableEntity = Volume | Series | Chapter | ReadingList | UserCollection | Person | Library | SideNavStream | SmartFilter | ClientDevice | PageBookmark | null; @Injectable({ providedIn: 'root', @@ -187,6 +34,7 @@ export type ActionableEntity = Volume | Series | Chapter | ReadingList | UserCol export class ActionFactoryService { private accountService = inject(AccountService); private deviceService = inject(DeviceService); + private actionService = inject(ActionService); private libraryActions: Array> = []; private seriesActions: Array> = []; @@ -194,78 +42,158 @@ export class ActionFactoryService { private chapterActions: Array> = []; private collectionTagActions: Array> = []; private readingListActions: Array> = []; - private bookmarkActions: Array> = []; + private bookmarkActions: Array> = []; private personActions: Array> = []; private sideNavStreamActions: Array> = []; private smartFilterActions: Array> = []; - private sideNavHomeActions: Array> = []; + private sideNavHomeActions: Array> = []; private annotationActions: Array> = []; private clientDeviceActions: Array> = []; constructor() { - this.accountService.currentUser$.subscribe((_) => { + this._resetActions(); + effect(() => { + this.accountService.currentUser(); this._resetActions(); }); } - getLibraryActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.libraryActions, callback, shouldRenderFunc) as ActionItem[]; + getLibraryActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.libraryActions, + (action, entity) => this.actionService.handleLibraryAction(action, entity), + shouldRenderFunc + ); } - getSeriesActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { - return this.applyCallbackToList(this.seriesActions, callback, shouldRenderFunc); + getSeriesActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.seriesActions, + (action, entity) => this.actionService.handleSeriesAction(action, entity), + shouldRenderFunc + ); } - getSideNavStreamActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.sideNavStreamActions, callback, shouldRenderFunc); + getVolumeActions(seriesId: number, libraryId: number, libraryType: LibraryType, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.volumeActions, + (action, entity) => this.actionService.handleVolumeAction(action, entity, seriesId, libraryId, libraryType), + shouldRenderFunc + ); } - getSmartFilterActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.smartFilterActions, callback, shouldRenderFunc); + getChapterActions(seriesId: number, libraryId: number, libraryType: LibraryType, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.chapterActions, + (action, entity) => this.actionService.handleChapterAction(action, entity, seriesId, libraryId, libraryType), + shouldRenderFunc + ); } - getVolumeActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { - return this.applyCallbackToList(this.volumeActions, callback, shouldRenderFunc); + getBookmarkActions(contextFunc: () => {seriesId: number, libraryId: number, seriesName: string}, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.bookmarkActions, + (action, entity) => this.actionService.handleBookmarkAction(action, entity, contextFunc), + shouldRenderFunc + ); } - getChapterActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { - return this.applyCallbackToList(this.chapterActions, callback, shouldRenderFunc); + getReadingListActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.readingListActions, + (action, entity) => this.actionService.handleReadingListAction(action, entity), + shouldRenderFunc + ); } - getCollectionTagActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.collectionTagActions, callback, shouldRenderFunc); + getCollectionTagActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.collectionTagActions, + (action, entity) => this.actionService.handleCollectionAction(action, entity), + shouldRenderFunc + ); } - getReadingListActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.readingListActions, callback, shouldRenderFunc); + getAnnotationActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.annotationActions, + (action, entity) => this.actionService.handleAnnotationAction(action, entity), + shouldRenderFunc + ); } - getBookmarkActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.bookmarkActions, callback, shouldRenderFunc); + getClientDeviceActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.clientDeviceActions, + (action, entity) => this.actionService.handleClientDeviceAction(action, entity), + shouldRenderFunc + ); } - getPersonActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.personActions, callback, shouldRenderFunc); + getPersonActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.personActions, + (action, entity) => this.actionService.handlePersonAction(action, entity), + shouldRenderFunc + ); } - getSideNavHomeActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.sideNavHomeActions, callback, shouldRenderFunc); + getSmartFilterActions(allFilters: SmartFilter[], shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.smartFilterActions, + (action, entity) => this.actionService.handleSmartFilterAction(action, entity, allFilters), + shouldRenderFunc + ); } - getAnnotationActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.annotationActions, callback, shouldRenderFunc); + + getSideNavStreamActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList( + this.sideNavStreamActions, + (action, entity) => this.actionService.handleSideNavStreamAction(action, entity), + shouldRenderFunc + ); } - getClientDeviceActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - return this.applyCallbackToList(this.clientDeviceActions, callback, shouldRenderFunc); + getSideNavHomeActions(shouldRenderFunc: ActionShouldRenderFunc<{}> = this.basicReadRender) { + return this.applyCallbackToList( + this.sideNavHomeActions, + (action, entity) => this.actionService.handleSideNavHomeStream(action, entity), + shouldRenderFunc + ); } - dummyCallback(action: ActionItem, entity: any) {} + getBulkLibraryActions(shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + + const filteredActions = this.flattenActions(this.libraryActions).filter(a => { + return [Action.Delete, Action.GenerateColorScape, Action.RefreshMetadata, Action.CopySettings].includes(a.action); + }); + + filteredActions.push({ + _extra: undefined, + class: undefined, + description: '', + dynamicList: undefined, + action: Action.CopySettings, + callback: this.dummyCallback, + shouldRender: shouldRenderFunc, + children: [], + requiredRoles: [Role.Admin], + title: 'copy-settings' + }); + + return this.applyCallbackToList( + filteredActions, + (action, entity) => this.actionService.handleBulkLibraryAction(action, entity), + shouldRenderFunc + ); + } + + dummyCallback(action: ActionItem, entity: any) { return EMPTY; } dummyShouldRender(action: ActionItem, entity: any, user: User) {return true;} basicReadRender(action: ActionItem, entity: any, user: User) { if (entity === null || entity === undefined) return true; if (!entity.hasOwnProperty('pagesRead') && !entity.hasOwnProperty('pages')) return true; - switch (action.action) { case(Action.MarkAsRead): return entity.pagesRead < entity.pages; @@ -276,13 +204,6 @@ export class ActionFactoryService { } } - filterSendToAction(actions: Array>, chapter: Chapter) { - // if (chapter.files.filter(f => f.format === MangaFormat.EPUB || f.format === MangaFormat.PDF).length !== chapter.files.length) { - // // Remove Send To as it doesn't apply - // return actions.filter(item => item.title !== 'Send To'); - // } - return actions; - } getActionablesForSettingsPage(actions: Array>, blacklist: Array = []) { const tasks = []; @@ -317,29 +238,6 @@ export class ActionFactoryService { return tasks.filter(t => !blacklist.includes(t.action)); } - getBulkLibraryActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { - - // Scan is currently not supported due to the backend not being able to handle it yet - const actions = this.flattenActions(this.libraryActions).filter(a => { - return [Action.Delete, Action.GenerateColorScape, Action.RefreshMetadata, Action.CopySettings].includes(a.action); - }); - - actions.push({ - _extra: undefined, - class: undefined, - description: '', - dynamicList: undefined, - action: Action.CopySettings, - callback: this.dummyCallback, - shouldRender: shouldRenderFunc, - children: [], - requiredRoles: [Role.Admin], - requiresAdmin: true, - title: 'copy-settings' - }) - return this.applyCallbackToList(actions, callback, shouldRenderFunc) as ActionItem[]; - } - flattenActions(actions: Array>): Array> { return actions.reduce>>((flatArray, action) => { if (action.action !== Action.Submenu) { @@ -362,9 +260,9 @@ export class ActionFactoryService { action: Action.Scan, title: 'scan-library', description: 'scan-library-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, requiredRoles: [Role.Admin], children: [], }, @@ -372,18 +270,18 @@ export class ActionFactoryService { action: Action.Submenu, title: 'reading-profiles', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, requiredRoles: [], children: [ { action: Action.SetReadingProfile, title: 'set-reading-profile', description: 'set-reading-profile-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, requiredRoles: [], children: [], }, @@ -391,9 +289,10 @@ export class ActionFactoryService { action: Action.ClearReadingProfile, title: 'clear-reading-profile', description: 'clear-reading-profile-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -403,18 +302,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'others', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [ { action: Action.RefreshMetadata, title: 'refresh-covers', description: 'refresh-covers-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -422,9 +323,10 @@ export class ActionFactoryService { action: Action.GenerateColorScape, title: 'generate-colorscape', description: 'generate-colorscape-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -432,9 +334,10 @@ export class ActionFactoryService { action: Action.Delete, title: 'delete', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -444,9 +347,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'settings', description: 'settings-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -457,9 +361,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'edit', description: 'edit-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -467,9 +372,10 @@ export class ActionFactoryService { action: Action.Delete, title: 'delete', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], class: 'danger', children: [], @@ -478,9 +384,10 @@ export class ActionFactoryService { action: Action.Promote, title: 'promote', description: 'promote-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -488,9 +395,10 @@ export class ActionFactoryService { action: Action.UnPromote, title: 'unpromote', description: 'unpromote-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -501,9 +409,10 @@ export class ActionFactoryService { action: Action.MarkAsRead, title: 'mark-as-read', description: 'mark-as-read-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -511,9 +420,10 @@ export class ActionFactoryService { action: Action.MarkAsUnread, title: 'mark-as-unread', description: 'mark-as-unread-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -521,9 +431,10 @@ export class ActionFactoryService { action: Action.Scan, title: 'scan-series', description: 'scan-series-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -531,18 +442,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'add-to', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.AddToWantToReadList, title: 'add-to-want-to-read', description: 'add-to-want-to-read-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -550,9 +463,10 @@ export class ActionFactoryService { action: Action.RemoveFromWantToReadList, title: 'remove-from-want-to-read', description: 'remove-to-want-to-read-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -560,9 +474,10 @@ export class ActionFactoryService { action: Action.AddToReadingList, title: 'add-to-reading-list', description: 'add-to-reading-list-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -570,9 +485,10 @@ export class ActionFactoryService { action: Action.AddToCollection, title: 'add-to-collection', description: 'add-to-collection-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], } @@ -582,18 +498,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'send-to', description: 'send-to-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.SendTo, title: '', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], dynamicList: this.deviceService.devices$.pipe(map((devices: Array) => devices.map(d => { return {'title': d.name, 'data': d}; @@ -606,18 +524,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'reading-profiles', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.SetReadingProfile, title: 'set-reading-profile', description: 'set-reading-profile-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -625,9 +545,10 @@ export class ActionFactoryService { action: Action.ClearReadingProfile, title: 'clear-reading-profile', description: 'clear-reading-profile-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -637,18 +558,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'others', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [], children: [ { action: Action.RefreshMetadata, title: 'refresh-covers', description: 'refresh-covers-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -656,9 +579,10 @@ export class ActionFactoryService { action: Action.GenerateColorScape, title: 'generate-colorscape', description: 'generate-colorscape-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -666,9 +590,10 @@ export class ActionFactoryService { action: Action.AnalyzeFiles, title: 'analyze-files', description: 'analyze-files-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -676,9 +601,10 @@ export class ActionFactoryService { action: Action.Delete, title: 'delete', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], class: 'danger', children: [], @@ -689,9 +615,10 @@ export class ActionFactoryService { action: Action.Match, title: 'match', description: 'match-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -699,9 +626,10 @@ export class ActionFactoryService { action: Action.Download, title: 'download', description: 'download-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [Role.Download], children: [], }, @@ -709,9 +637,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'edit', description: 'edit-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -722,9 +651,10 @@ export class ActionFactoryService { action: Action.IncognitoRead, title: 'read-incognito', description: 'read-incognito-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -732,9 +662,10 @@ export class ActionFactoryService { action: Action.MarkAsRead, title: 'mark-as-read', description: 'mark-as-read-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -742,9 +673,10 @@ export class ActionFactoryService { action: Action.MarkAsUnread, title: 'mark-as-unread', description: 'mark-as-unread-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -752,18 +684,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'add-to', description: '=', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.AddToReadingList, title: 'add-to-reading-list', description: 'add-to-reading-list-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], } @@ -773,18 +707,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'send-to', description: 'send-to-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.SendTo, title: '', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], dynamicList: this.deviceService.devices$.pipe(map((devices: Array) => devices.map(d => { return {'title': d.name, 'data': d}; @@ -797,18 +733,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'others', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.Delete, title: 'delete', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -816,9 +754,10 @@ export class ActionFactoryService { action: Action.Download, title: 'download', description: 'download-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -828,9 +767,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'details', description: 'edit-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -841,9 +781,10 @@ export class ActionFactoryService { action: Action.IncognitoRead, title: 'read-incognito', description: 'read-incognito-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -851,9 +792,10 @@ export class ActionFactoryService { action: Action.MarkAsRead, title: 'mark-as-read', description: 'mark-as-read-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -861,9 +803,10 @@ export class ActionFactoryService { action: Action.MarkAsUnread, title: 'mark-as-unread', description: 'mark-as-unread-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -871,18 +814,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'add-to', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.AddToReadingList, title: 'add-to-reading-list', description: 'add-to-reading-list-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], } @@ -892,18 +837,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'send-to', description: 'send-to-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.SendTo, title: '', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], dynamicList: this.deviceService.devices$.pipe(map((devices: Array) => devices.map(d => { return {'title': d.name, 'data': d}; @@ -917,18 +864,20 @@ export class ActionFactoryService { action: Action.Submenu, title: 'others', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [ { action: Action.Delete, title: 'delete', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -936,9 +885,10 @@ export class ActionFactoryService { action: Action.Download, title: 'download', description: 'download-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [Role.Download], children: [], }, @@ -948,9 +898,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'edit', description: 'edit-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -961,9 +912,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'edit', description: 'edit-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -971,9 +923,10 @@ export class ActionFactoryService { action: Action.Delete, title: 'delete', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], class: 'danger', children: [], @@ -982,9 +935,10 @@ export class ActionFactoryService { action: Action.Promote, title: 'promote', description: 'promote-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -992,9 +946,10 @@ export class ActionFactoryService { action: Action.UnPromote, title: 'unpromote', description: 'unpromote-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -1005,9 +960,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'edit', description: 'edit-person-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, @@ -1015,9 +971,10 @@ export class ActionFactoryService { action: Action.Merge, title: 'merge', description: 'merge-person-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], } @@ -1028,19 +985,21 @@ export class ActionFactoryService { action: Action.ViewSeries, title: 'view-series', description: 'view-series-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, { - action: Action.DownloadBookmark, + action: Action.Download, title: 'download', description: 'download-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -1048,10 +1007,11 @@ export class ActionFactoryService { action: Action.Delete, title: 'clear', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, class: 'danger', - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -1062,9 +1022,10 @@ export class ActionFactoryService { action: Action.MarkAsVisible, title: 'mark-visible', description: 'mark-visible-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -1072,9 +1033,10 @@ export class ActionFactoryService { action: Action.MarkAsInvisible, title: 'mark-invisible', description: 'mark-invisible-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -1085,9 +1047,10 @@ export class ActionFactoryService { action: Action.Edit, title: 'rename', description: 'rename-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -1095,9 +1058,10 @@ export class ActionFactoryService { action: Action.Delete, title: 'delete', description: 'delete-tooltip', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, + requiredRoles: [], children: [], }, @@ -1108,9 +1072,9 @@ export class ActionFactoryService { action: Action.Edit, title: 'reorder', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, - requiresAdmin: false, requiredRoles: [], children: [], } @@ -1121,6 +1085,7 @@ export class ActionFactoryService { action: Action.Delete, title: 'delete', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, requiredRoles: [], @@ -1130,6 +1095,7 @@ export class ActionFactoryService { action: Action.Export, title: 'export', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, requiredRoles: [], @@ -1139,6 +1105,7 @@ export class ActionFactoryService { action: Action.Like, title: 'like', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, requiredRoles: [], @@ -1148,6 +1115,7 @@ export class ActionFactoryService { action: Action.UnLike, title: 'unlike', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, requiredRoles: [], @@ -1160,6 +1128,7 @@ export class ActionFactoryService { action: Action.Edit, title: 'edit-device-name', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, requiredRoles: [], @@ -1169,6 +1138,7 @@ export class ActionFactoryService { action: Action.Delete, title: 'delete', description: '', + callback: this.dummyCallback, shouldRender: this.dummyShouldRender, requiredRoles: [], @@ -1179,7 +1149,7 @@ export class ActionFactoryService { } - private applyCallback(action: ActionItem, callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc) { + private applyCallback(action: ActionItem, callback: ActionResultCallback, shouldRenderFunc: ActionShouldRenderFunc) { action.callback = callback; action.shouldRender = shouldRenderFunc; @@ -1194,7 +1164,7 @@ export class ActionFactoryService { } public applyCallbackToList(list: Array>, - callback: ActionCallback, + callback: ActionResultCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender): Array> { // Create a clone of the list to ensure we aren't affecting the default state const actions = list.map((a) => { @@ -1206,6 +1176,7 @@ export class ActionFactoryService { return actions; } + // Checks the whole tree for the action and returns true if it exists public hasAction(actions: Array>, action: Action) { if (actions.length === 0) return false; diff --git a/UI/Web/src/app/_services/action.service.ts b/UI/Web/src/app/_services/action.service.ts index 929f261a9..a86e7ce57 100644 --- a/UI/Web/src/app/_services/action.service.ts +++ b/UI/Web/src/app/_services/action.service.ts @@ -1,9 +1,9 @@ import {inject, Injectable} from '@angular/core'; -import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap'; +import {NgbModalRef} from '@ng-bootstrap/ng-bootstrap'; import {ToastrService} from 'ngx-toastr'; -import {take} from 'rxjs/operators'; -import {BulkAddToCollectionComponent} from '../cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component'; -import {ADD_FLOW, AddToListModalComponent} from '../reading-list/_modals/add-to-list-modal/add-to-list-modal.component'; +import {catchError, finalize, map, take} from 'rxjs/operators'; +import {ListSelectModalComponent} from '../shared/_components/list-select-modal/list-select-modal.component'; +import {ScrobbleProvider} from './scrobbling.service'; import { EditReadingListModalComponent } from '../reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component'; @@ -13,7 +13,7 @@ import { } from '../sidenav/_modals/library-settings-modal/library-settings-modal.component'; import {Chapter} from '../_models/chapter'; import {Device} from '../_models/device/device'; -import {Library} from '../_models/library/library'; +import {Library, LibraryType} from '../_models/library/library'; import {ReadingList} from '../_models/reading-list'; import {Series} from '../_models/series'; import {Volume} from '../_models/volume'; @@ -25,15 +25,42 @@ import {SeriesService} from './series.service'; import {translate} from "@jsverse/transloco"; import {UserCollection} from "../_models/collection-tag"; import {CollectionTagService} from "./collection-tag.service"; -import {FilterService} from "./filter.service"; import {ReadingListService} from "./reading-list.service"; import {ChapterService} from "./chapter.service"; import {VolumeService} from "./volume.service"; -import {DefaultModalOptions} from "../_models/default-modal-options"; import {MatchSeriesModalComponent} from "../_single-module/match-series-modal/match-series-modal.component"; import { BulkSetReadingProfileModalComponent } from "../cards/_modals/bulk-set-reading-profile-modal/bulk-set-reading-profile-modal.component"; +import {EditSeriesModalComponent} from "../cards/_modals/edit-series-modal/edit-series-modal.component"; +import {EditVolumeModalComponent} from "../_single-module/edit-volume-modal/edit-volume-modal.component"; +import {DownloadService} from "../shared/_services/download.service"; +import {ReadingProfileService} from "./reading-profile.service"; +import {Action} from "../_models/actionables/action"; +import {ActionItem} from "../_models/actionables/action-item"; +import {EMPTY, filter, from, Observable, of, switchMap, tap} from "rxjs"; +import {ActionEffect, ActionResult} from "../_models/actionables/action-result"; +import {EditChapterModalComponent} from "../_single-module/edit-chapter-modal/edit-chapter-modal.component"; +import {PageBookmark} from "../_models/readers/page-bookmark"; +import {Router} from "@angular/router"; +import { + EditCollectionTagsModalComponent +} from "../cards/_modals/edit-collection-tags/edit-collection-tags-modal.component"; +import {Annotation} from "../book-reader/_models/annotations/annotation"; +import {AnnotationService} from "./annotation.service"; +import {ClientDevice} from "../_models/client-device"; +import {Person} from "../_models/metadata/person"; +import {EditPersonModalComponent} from "../person-detail/_modal/edit-person-modal/edit-person-modal.component"; +import {MergePersonModalComponent} from "../person-detail/_modal/merge-person-modal/merge-person-modal.component"; +import {SmartFilter} from "../_models/metadata/v2/smart-filter"; +import { + EditSmartFilterModalComponent +} from "../sidenav/_components/edit-smart-filter-modal/edit-smart-filter-modal.component"; +import {SideNavStream} from "../_models/sidenav/sidenav-stream"; +import {NavService} from "./nav.service"; +import {ModalResult} from "../_models/modal/modal-result"; +import {addToModal, editModal} from "../_models/modal/modal-options"; +import {ModalService, TypedModalRef} from "./modal.service"; export type LibraryActionCallback = (library: Partial) => void; @@ -44,6 +71,7 @@ export type ReadingListActionCallback = (readingList: ReadingList) => void; export type VoidActionCallback = () => void; export type BooleanActionCallback = (result: boolean) => void; + /** * Responsible for executing actions */ @@ -58,17 +86,1195 @@ export class ActionService { private readonly seriesService = inject(SeriesService); private readonly readerService = inject(ReaderService); private readonly toastr = inject(ToastrService); - private readonly modalService = inject(NgbModal); + private readonly modalService = inject(ModalService); private readonly confirmService = inject(ConfirmService); private readonly memberService = inject(MemberService); private readonly deviceService = inject(DeviceService); private readonly collectionTagService = inject(CollectionTagService); - private readonly filterService = inject(FilterService); private readonly readingListService = inject(ReadingListService); + private readonly collectionService = inject(CollectionTagService); + private readonly downloadService = inject(DownloadService); + private readonly readingProfilesService = inject(ReadingProfileService); + private readonly router = inject(Router); + private readonly annotationsService = inject(AnnotationService); + private readonly sideNavService = inject(NavService); + + private readingListModalRef: TypedModalRef> | null = null; + private collectionModalRef: TypedModalRef> | null = null; - private readingListModalRef: NgbModalRef | null = null; - private collectionModalRef: NgbModalRef | null = null; + + // ------------------------------------------- + // MAIN HANDLERS + // ------------------------------------------- + + handleLibraryAction(action: ActionItem, library: Library) { + if (!library.hasOwnProperty('id') || library.id === undefined) { + return of(this.fromAction(action, library, 'none')); + } + + switch (action.action) { + case Action.Scan: + return this.libraryService.scan(library.id, false).pipe( + tap(() => this.toastr.info(translate('toasts.scan-queued', {name: library.name}))), + map(() => this.fromAction(action, library, 'none')) + ); + + case Action.RefreshMetadata: + return from(this.confirmService.confirm(translate('toasts.confirm-regen-covers'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.libraryService.refreshMetadata(library.id, true, false)), + tap(() => this.toastr.info(translate('toasts.refresh-covers-queued', {name: library.name}))), + map(() => this.fromAction(action, library, 'none')) + ); + + case Action.GenerateColorScape: + return this.libraryService.refreshMetadata(library.id, false, false).pipe( + tap(() => this.toastr.info(translate('toasts.generate-colorscape-queued', {name: library.name}))), + map(() => this.fromAction(action, library, 'none')) + ); + + case Action.Delete: + return from(this.confirmService.alert(translate('toasts.confirm-library-delete'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.libraryService.delete(library.id)), + tap(() => this.toastr.info(translate('toasts.library-deleted', {name: library.name}))), + map(() => this.fromAction(action, library, 'remove')) + ); + + case Action.Edit: { + const modalRef = this.modalService.open(LibrarySettingsModalComponent, editModal()); + modalRef.componentInstance.library = library; + return this.handleEditModal(modalRef, action, library); + } + + case Action.SetReadingProfile: + this.setReadingProfileForLibrary(library); + return of(this.fromAction(action, library, 'none')); + + case Action.ClearReadingProfile: + return this.readingProfilesService.clearLibraryProfiles(library.id).pipe( + tap(() => this.toastr.success(translate('actionable.cleared-profile'))), + map(() => this.fromAction(action, library, 'none')) + ); + + default: + return of(this.fromAction(action, library, 'none')); + } + } + + /** + * Centralized handler for all series actions. + * Returns Observable> so the caller can react to effects. + */ + handleSeriesAction(action: ActionItem, series: Series) { + switch (action.action) { + case Action.MarkAsRead: + return this.seriesService.markRead(series.id).pipe( + tap(() => this.toastr.success(translate('toasts.entity-read', {name: series.name}))), + map(() => this.fromAction(action, { ...series, pagesRead: series.pages }, 'update')) + ); + + case Action.MarkAsUnread: + return this.seriesService.markUnread(series.id).pipe( + tap(() => this.toastr.success(translate('toasts.entity-unread', {name: series.name}))), + map(() => this.fromAction(action, { ...series, pagesRead: 0 }, 'update')) + ); + + case Action.Scan: + return this.seriesService.scan(series.libraryId, series.id).pipe( + tap(() => this.toastr.info(translate('toasts.scan-queued', {name: series.name}))), + map(() => this.fromAction(action, series, 'none')) + ); + + case Action.RefreshMetadata: + return from(this.confirmService.confirm(translate('toasts.confirm-regen-covers'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.seriesService.refreshMetadata(series, true, false)), + tap(() => this.toastr.info(translate('toasts.refresh-covers-queued', {name: series.name}))), + map(() => this.fromAction(action, series, 'none')) + ); + + case Action.GenerateColorScape: + return this.seriesService.refreshMetadata(series, false, false).pipe( + tap(() => this.toastr.info(translate('toasts.generate-colorscape-queued', {name: series.name}))), + map(() => this.fromAction(action, series, 'none')) + ); + + case Action.AnalyzeFiles: + return this.seriesService.analyzeFiles(series.libraryId, series.id).pipe( + tap(() => this.toastr.info(translate('toasts.scan-queued', {name: series.name}))), + map(() => this.fromAction(action, series, 'none')) + ); + + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-series'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.seriesService.delete(series.id)), + tap(() => this.toastr.success(translate('toasts.series-deleted'))), + map(() => this.fromAction(action, series, 'remove')) + ); + + case Action.Edit: { + const modalRef = this.modalService.open(EditSeriesModalComponent, editModal()); + modalRef.componentInstance.series = series; + return this.handleEditModal(modalRef, action, series); + } + + case Action.Match: { + const ref = this.modalService.open(MatchSeriesModalComponent, editModal()); + ref.componentInstance.series = series; + return from(ref.closed).pipe( + filter((saved: boolean) => saved), + map(() => this.fromAction(action, series, 'reload')) + ); + } + + case Action.AddToReadingList: { + if (this.readingListModalRef != null) return EMPTY; + const rlRef = this.modalService.open(ListSelectModalComponent, addToModal()) as TypedModalRef>; + this.readingListModalRef = rlRef; + + rlRef.setInput('title', series.name); + rlRef.setInput('showCreate', true); + rlRef.setInput('createLabel', translate('add-to-list-modal.reading-list-label')); + rlRef.setInput('inputItems', []); + rlRef.setInput('loading', true); + rlRef.setInput('createInitialValue', series.name); + + this.readingListService.getReadingLists(false, true).pipe( + take(1), + catchError(() => EMPTY), + finalize(() => rlRef.setInput('loading', false)) + ).subscribe(result => { + rlRef.setInput('inputItems', result.result.map(l => ({ label: l.title, value: l }))); + }); + + rlRef.setInput('interceptCreate', (name: string) => + this.readingListService.createList(name).pipe( + switchMap(list => this.readingListService.updateBySeries(list.id, series.id)), + tap(() => this.toastr.success(translate('toasts.series-added-to-reading-list'))) + ) + ); + + rlRef.setInput('interceptConfirm', (item: ReadingList | ReadingList[]) => { + const list = item as ReadingList; + this.readingListService.updateBySeries(list.id, series.id).subscribe(() => { + this.toastr.success(translate('toasts.series-added-to-reading-list')); + rlRef.close(); + }); + }); + + return new Observable>(subscriber => { + rlRef.closed.subscribe(() => { + this.readingListModalRef = null; + subscriber.next(this.fromAction(action, series, 'none')); + subscriber.complete(); + }); + rlRef.dismissed.subscribe(() => { + this.readingListModalRef = null; + subscriber.complete(); + }); + }); + } + + case Action.AddToCollection: { + if (this.collectionModalRef != null) return EMPTY; + const colRef = this.modalService.open(ListSelectModalComponent, addToModal()) as TypedModalRef>; + this.collectionModalRef = colRef; + + const singleSeriesIds = [series.id]; + colRef.setInput('title', translate('bulk-add-to-collection.title')); + colRef.setInput('showCreate', true); + colRef.setInput('createLabel', translate('bulk-add-to-collection.collection-label')); + colRef.setInput('createInitialValue', translate('actionable.new-collection')); + colRef.setInput('inputItems', []); + colRef.setInput('loading', true); + + this.collectionService.allCollections(true).pipe( + take(1), + catchError(() => EMPTY), + finalize(() => colRef.setInput('loading', false)) + ).subscribe(tags => { + const collections = tags.filter(t => t.source === ScrobbleProvider.Kavita); + colRef.setInput('inputItems', collections.map(c => ({ label: c.title, value: c }))); + }); + + colRef.setInput('interceptCreate', (name: string) => + this.collectionService.addByMultiple(0, singleSeriesIds, name).pipe( + tap(() => this.toastr.success(translate('toasts.series-added-to-collection', { collectionName: name }))) + ) + ); + + colRef.setInput('interceptConfirm', (item: UserCollection | UserCollection[]) => { + const tag = item as UserCollection; + this.collectionService.addByMultiple(tag.id, singleSeriesIds, '').subscribe(() => { + this.toastr.success(translate('toasts.series-added-to-collection', { collectionName: tag.title })); + colRef.close(); + }); + }); + + return new Observable>(subscriber => { + colRef.closed.subscribe(() => { + this.collectionModalRef = null; + subscriber.next(this.fromAction(action, series, 'none')); + subscriber.complete(); + }); + colRef.dismissed.subscribe(() => { + this.collectionModalRef = null; + subscriber.complete(); + }); + }); + } + + case Action.Download: + this.downloadService.download('series', series); + return of(this.fromAction(action, series, 'none')); + + case Action.AddToWantToReadList: + return this.memberService.addSeriesToWantToRead([series.id]).pipe( + tap(() => this.toastr.success(translate('toasts.series-added-want-to-read'))), + map(() => this.fromAction(action, series, 'none')) + ); + + case Action.RemoveFromWantToReadList: + return this.memberService.removeSeriesToWantToRead([series.id]).pipe( + tap(() => this.toastr.success(translate('toasts.series-removed-want-to-read'))), + map(() => this.fromAction(action, series, 'reload')) + ); + + case Action.RemoveFromOnDeck: + return this.seriesService.removeFromOnDeck(series.id).pipe( + map(() => this.fromAction(action, series, 'reload')) + ); + + case Action.SendTo: { + const device = action._extra!.data as Device; + return this.deviceService.sendSeriesToEmailDevice(series.id, device.id).pipe( + tap(() => this.toastr.success(translate('toasts.file-send-to', {name: device.name}))), + map(() => this.fromAction(action, series, 'none')) + ); + } + + case Action.SetReadingProfile: + this.setReadingProfileForMultiple([series]); + return of(this.fromAction(action, series, 'none')); + + case Action.ClearReadingProfile: + return this.readingProfilesService.clearSeriesProfiles(series.id).pipe( + tap(() => this.toastr.success(translate('actionable.cleared-profile'))), + map(() => this.fromAction(action, series, 'none')) + ); + + default: + return of(this.fromAction(action, series, 'none')); + } + } + + /** + * Centralized handler for all volume actions. + * Returns Observable> so the caller can react to effects. + */ + handleVolumeAction(action: ActionItem, volume: Volume, seriesId: number, libraryId: number, libraryType: LibraryType) { + switch (action.action) { + case Action.MarkAsRead: + return this.readerService.markVolumeRead(seriesId, volume.id).pipe( + tap(() => this.toastr.success(translate('toasts.mark-read'))), + map(() => { + const updated = { + ...volume, + pagesRead: volume.pages, + chapters: volume.chapters?.map(c => ({...c, pagesRead: c.pages})) + }; + return this.fromAction(action, updated, 'update'); + }) + ); + + case Action.MarkAsUnread: + return this.readerService.markVolumeUnread(seriesId, volume.id).pipe( + tap(() => this.toastr.success(translate('toasts.mark-unread'))), + map(() => { + const updated = { + ...volume, + pagesRead: 0, + chapters: volume.chapters?.map(c => ({...c, pagesRead: 0})) + }; + return this.fromAction(action, updated, 'update'); + }) + ); + + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-volume'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.volumeService.deleteVolume(volume.id)), + filter(success => success), + tap(() => this.toastr.success(translate('toasts.volume-deleted'))), + map(() => this.fromAction(action, volume, 'remove')) + ); + + case Action.Edit: { + const ref = this.modalService.open(EditVolumeModalComponent, editModal()); + ref.componentInstance.volume = volume; + ref.componentInstance.libraryType = libraryType; + ref.componentInstance.seriesId = seriesId; + ref.componentInstance.libraryId = libraryId; + return this.handleEditModal(ref, action, volume); + } + + case Action.AddToReadingList: { + if (this.readingListModalRef != null) return EMPTY; + const rlRef = this.modalService.open(ListSelectModalComponent, addToModal()) as TypedModalRef>; + this.readingListModalRef = rlRef; + + rlRef.setInput('title', translate('add-to-list-modal.title')); + rlRef.setInput('showCreate', true); + rlRef.setInput('createLabel', translate('add-to-list-modal.reading-list-label')); + rlRef.setInput('inputItems', []); + rlRef.setInput('loading', true); + + this.readingListService.getReadingLists(false, true).pipe( + take(1), + catchError(() => EMPTY), + finalize(() => rlRef.setInput('loading', false)) + ).subscribe(result => { + rlRef.setInput('inputItems', result.result.map(l => ({ label: l.title, value: l }))); + }); + + rlRef.setInput('interceptCreate', (name: string) => + this.readingListService.createList(name).pipe( + switchMap(list => this.readingListService.updateByVolume(list.id, seriesId, volume.id)), + tap(() => this.toastr.success(translate('toasts.volumes-added-to-reading-list'))) + ) + ); + + rlRef.setInput('interceptConfirm', (item: ReadingList | ReadingList[]) => { + const list = item as ReadingList; + this.readingListService.updateByVolume(list.id, seriesId, volume.id).subscribe(() => { + this.toastr.success(translate('toasts.volumes-added-to-reading-list')); + rlRef.close(); + }); + }); + + return new Observable>(subscriber => { + rlRef.closed.subscribe(() => { + this.readingListModalRef = null; + subscriber.next(this.fromAction(action, volume, 'none')); + subscriber.complete(); + }); + rlRef.dismissed.subscribe(() => { + this.readingListModalRef = null; + subscriber.complete(); + }); + }); + } + + case Action.IncognitoRead: + if (volume.chapters != undefined && volume.chapters.length >= 1) { + const sorted = [...volume.chapters].sort((a, b) => a.minNumber - b.minNumber); + this.readerService.readChapter(libraryId, seriesId, sorted[0], true); + } + return of(this.fromAction(action, volume, 'none')); + + case Action.SendTo: { + const device = action._extra!.data as Device; + return this.deviceService.sendToEmailDevice(volume.chapters.map(c => c.id), device.id).pipe( + tap(() => this.toastr.success(translate('toasts.file-send-to', {name: device.name}))), + map(() => this.fromAction(action, volume, 'none')) + ); + } + + case Action.Download: + this.downloadService.download('volume', volume); + return of(this.fromAction(action, volume, 'none')); + + default: + return of(this.fromAction(action, volume, 'none')); + } + } + + /** + * Centralized handler for all chapter actions. + * Returns Observable> so the caller can react to effects. + */ + handleChapterAction(action: ActionItem, chapter: Chapter, seriesId: number, libraryId: number, libraryType: LibraryType) { + switch (action.action) { + + case Action.MarkAsRead: + return this.readerService.saveProgress(libraryId, seriesId, chapter.volumeId, chapter.id, chapter.pages).pipe( + tap(() => this.toastr.success(translate('toasts.mark-read'))), + map(() => { + const updated = { + ...chapter, + pagesRead: chapter.pages, + }; + return this.fromAction(action, updated, 'update'); + }) + ); + + case Action.MarkAsUnread: + return this.readerService.saveProgress(libraryId, seriesId, chapter.volumeId, chapter.id, 9).pipe( + tap(() => this.toastr.success(translate('toasts.mark-unread'))), + map(() => { + const updated = { + ...chapter, + pagesRead: 0, + }; + return this.fromAction(action, updated, 'update'); + }) + ); + + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-chapter'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.chapterService.deleteChapter(chapter.id)), + filter(success => success), + tap(() => this.toastr.success(translate('toasts.chapter-deleted'))), + map(() => this.fromAction(action, chapter, 'remove')) + ); + + case Action.Download: + this.downloadService.download('chapter', chapter); + return of(this.fromAction(action, chapter, 'none')); + + case Action.Edit: + const ref = this.modalService.open(EditChapterModalComponent, editModal()); + ref.componentInstance.chapter = chapter; + ref.componentInstance.libraryType = libraryType; + ref.componentInstance.seriesId = seriesId; + ref.componentInstance.libraryId = libraryId; + + return this.handleEditModal(ref, action, chapter); + + case Action.AddToReadingList: { + if (this.readingListModalRef != null) return EMPTY; + const rlRef = this.modalService.open(ListSelectModalComponent, addToModal()) as TypedModalRef>; + this.readingListModalRef = rlRef; + + rlRef.setInput('title', translate('add-to-list-modal.title')); + rlRef.setInput('showCreate', true); + rlRef.setInput('createLabel', translate('add-to-list-modal.reading-list-label')); + rlRef.setInput('inputItems', []); + rlRef.setInput('loading', true); + + this.readingListService.getReadingLists(false, true).pipe( + take(1), + catchError(() => EMPTY), + finalize(() => rlRef.setInput('loading', false)) + ).subscribe(result => { + rlRef.setInput('inputItems', result.result.map(l => ({ label: l.title, value: l }))); + }); + + rlRef.setInput('interceptCreate', (name: string) => + this.readingListService.createList(name).pipe( + switchMap(list => this.readingListService.updateByChapter(list.id, seriesId, chapter.id)), + tap(() => this.toastr.success(translate('toasts.chapter-added-to-reading-list'))) + ) + ); + + rlRef.setInput('interceptConfirm', (item: ReadingList | ReadingList[]) => { + const list = item as ReadingList; + this.readingListService.updateByChapter(list.id, seriesId, chapter.id).subscribe(() => { + this.toastr.success(translate('toasts.chapter-added-to-reading-list')); + rlRef.close(); + }); + }); + + return new Observable>(subscriber => { + rlRef.closed.subscribe(() => { + this.readingListModalRef = null; + subscriber.next(this.fromAction(action, chapter, 'none')); + subscriber.complete(); + }); + rlRef.dismissed.subscribe(() => { + this.readingListModalRef = null; + subscriber.complete(); + }); + }); + } + + case Action.IncognitoRead: + this.readerService.readChapter(libraryId, seriesId, chapter, true); + return of(this.fromAction(action, chapter, 'none')); + + case Action.SendTo: + const device = action._extra!.data as Device; + return this.deviceService.sendToEmailDevice([chapter.id], device.id).pipe( + tap(() => this.toastr.success(translate('toasts.file-send-to', {name: device.name}))), + map(() => this.fromAction(action, chapter, 'none')) + ); + + default: + return of(this.fromAction(action, chapter, 'none')); + } + } + + /** + * Centralized handler for all bookmark actions. + * Returns Observable> so the caller can react to effects. + */ + handleBookmarkAction(action: ActionItem, bookmark: PageBookmark, contextFunc: () => {seriesId: number, libraryId: number, seriesName: string}) { + const ctx = contextFunc(); + switch (action.action) { + case Action.Delete: + return from(this.confirmService.confirm(translate('bookmarks.confirm-single-delete', {seriesName: ctx.seriesName}))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.readerService.clearBookmarks(ctx.seriesId)), + tap(() => this.toastr.success(translate('bookmarks.delete-single-success'))), + map(() => this.fromAction(action, bookmark, 'remove')) + ); + + case Action.Download: + this.downloadService.download('bookmark', [bookmark]); + return of(this.fromAction(action, bookmark, 'none')); + + case Action.ViewSeries: + this.router.navigate(['library', ctx.libraryId, 'series', ctx.seriesId]); + return of(this.fromAction(action, bookmark, 'none')); + + default: + return of(this.fromAction(action, bookmark, 'none')); + } + } + + /** + * Centralized handler for all reading list actions. + * Returns Observable> so the caller can react to effects. + */ + handleReadingListAction(action: ActionItem, readingList: ReadingList) { + switch (action.action) { + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-reading-list'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.readingListService.delete(readingList.id)), + tap(() => this.toastr.success(translate('toasts.reading-list-deleted'))), + map(() => this.fromAction(action, readingList, 'remove')) + ); + + case Action.Edit: + const ref = this.modalService.open(EditReadingListModalComponent, editModal()); + ref.componentInstance.readingList = readingList; + return this.handleEditModal(ref, action, readingList); + case Action.Promote: + return this.readingListService.promoteMultipleReadingLists([readingList.id], true).pipe( + tap(() => this.toastr.success(translate('toasts.reading-list-promoted'))), + map(() => this.fromAction(action, {...readingList, promoted: true}, 'update')) + ); + + case Action.UnPromote: + return this.readingListService.promoteMultipleReadingLists([readingList.id], false).pipe( + tap(() => this.toastr.success(translate('toasts.reading-list-unpromoted'))), + map(() => this.fromAction(action, {...readingList, promoted: false}, 'update')) + ); + default: + return of(this.fromAction(action, readingList, 'none')); + } + } + + /** + * Centralized handler for all collection actions. + * Returns Observable> so the caller can react to effects. + */ + handleCollectionAction(action: ActionItem, collection: UserCollection) { + switch (action.action) { + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-collection'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.collectionService.deleteTag(collection.id)), + tap(() => this.toastr.success(translate('toasts.collection-tag-deleted'))), + map(() => this.fromAction(action, collection, 'remove')) + ); + + case Action.Edit: + const ref = this.modalService.open(EditCollectionTagsModalComponent, editModal()); + ref.setInput('tag', collection); + return this.handleEditModal(ref, action, collection); + + case Action.Promote: + return this.collectionService.promoteMultipleCollections([collection.id], true).pipe( + tap(() => this.toastr.success(translate('toasts.collections-promoted'))), + map(() => this.fromAction(action, {...collection, promoted: true}, 'update')) + ); + + case Action.UnPromote: + return this.collectionService.promoteMultipleCollections([collection.id], false).pipe( + tap(() => this.toastr.success(translate('toasts.collections-unpromoted'))), + map(() => this.fromAction(action, {...collection, promoted: false}, 'update')) + ); + + default: + return of(this.fromAction(action, collection, 'none')); + } + } + + /** + * Centralized handler for all annotation actions. + * Returns Observable> so the caller can react to effects. + */ + handleAnnotationAction(action: ActionItem, annotation: Annotation) { + switch (action.action) { + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-annotations'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.annotationsService.bulkDelete([annotation.id])), + tap(() => this.toastr.success(translate('toasts.annotations-deleted'))), + map(() => this.fromAction(action, annotation, 'remove')) + ); + + case Action.Export: + return this.annotationsService.exportAnnotations([annotation.id]).pipe( + map(() => this.fromAction(action, annotation, 'none')) + ); + + case Action.Like: + return this.annotationsService.likeAnnotations([annotation.id]).pipe( + map(() => this.fromAction(action, annotation, 'update')) + ); + + case Action.UnLike: + return this.annotationsService.unLikeAnnotations([annotation.id]).pipe( + map(() => this.fromAction(action, annotation, 'update')) + ); + + default: + return of(this.fromAction(action, annotation, 'none')); + } + } + + /** + * Centralized handler for all client device actions. + * Returns Observable> so the caller can react to effects. + */ + handleClientDeviceAction(action: ActionItem, clientDevice: ClientDevice) { + switch (action.action) { + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-annotations'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.deviceService.deleteClientDevice(clientDevice.id)), + map((success) => this.fromAction(action, clientDevice, success ? 'remove' : 'none')) + ); + + case Action.Edit: + // Special case: This actually just triggers an edit toggle. Since there is no edit modal, we send update to handle + return of(this.fromAction(action, clientDevice, 'update')); + + default: + return of(this.fromAction(action, clientDevice, 'none')); + } + } + + /** + * Centralized handler for all person actions. + * Returns Observable> so the caller can react to effects. + */ + handlePersonAction(action: ActionItem, person: Person) { + switch (action.action) { + case Action.Edit: + const ref = this.modalService.open(EditPersonModalComponent, editModal()); + ref.componentInstance.person = person; + + return this.handleEditModal(ref, action, person); + + case Action.Merge: + const ref2 = this.modalService.open(MergePersonModalComponent, editModal()); + ref2.componentInstance.person = person; + + return from(ref2.closed).pipe( + filter((res: ModalResult) => res.success), + map((res: ModalResult) => + this.fromAction(action, person, res.success ? 'reload' : 'none') + ) + ); + default: + return of(this.fromAction(action, person, 'none')); + } + } + + /** + * Centralized handler for all smart filter actions. + * Returns Observable> so the caller can react to effects. + */ + handleSmartFilterAction(action: ActionItem, smartFilter: SmartFilter, allFilters: SmartFilter[]) { + switch (action.action) { + case Action.Edit: + const ref = this.modalService.open(EditSmartFilterModalComponent, editModal()); + ref.componentInstance.smartFilter = smartFilter; + ref.componentInstance.allFilters = allFilters; + return this.handleEditModal(ref, action, smartFilter); + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-smart-filter'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.collectionService.deleteTag(smartFilter.id)), + tap(() => this.toastr.success(translate('toasts.smart-filter-deleted'))), + map(() => this.fromAction(action, smartFilter, 'remove')) + ); + default: + return of(this.fromAction(action, smartFilter, 'none')); + } + } + + /** + * Centralized handler for all side nav stream actions. + * Returns Observable> so the caller can react to effects. + */ + handleSideNavStreamAction(action: ActionItem, sideNavStream: SideNavStream) { + switch (action.action) { + case Action.MarkAsVisible: + return this.sideNavService.bulkToggleSideNavStreamVisibility([sideNavStream.id], true).pipe( + map(() => this.fromAction(action, {...sideNavStream, visible: true}, 'update')) + ); + + case Action.MarkAsInvisible: + return this.sideNavService.bulkToggleSideNavStreamVisibility([sideNavStream.id], false).pipe( + map(() => this.fromAction(action, {...sideNavStream, visible: false}, 'update')) + ); + + default: + return of(this.fromAction(action, sideNavStream, 'none')); + } + } + + /** + * Centralized handler for all side nav home stream actions. + * Returns Observable> so the caller can react to effects. + */ + handleSideNavHomeStream(action: ActionItem<{}>, entity: {}) { + switch (action.action) { + case Action.Edit: + return of(this.fromAction(action, entity, 'none')); + + default: + return of(this.fromAction(action, entity, 'none')); + } + } + + /** + * Centralized handler for all bulk library actions. + * Returns Observable> so the caller can react to effects. + */ + handleBulkLibraryAction(action: ActionItem, library: Library) { + // manage-library handles all actions, the actionables don't perform as other implementations + return of(this.fromAction(action, library, 'none')); + } + + // ------------------------------------------- + // BULK HANDLERS + // ------------------------------------------- + + handleBulkSeriesAction(action: ActionItem, series: Series[]): Observable> { + switch (action.action) { + case Action.MarkAsRead: + return this.readerService.markMultipleSeriesRead(series.map(s => s.id)).pipe( + tap(() => { + series.forEach(s => s.pagesRead = s.pages); + this.toastr.success(translate('toasts.mark-read')); + }), + map(() => this.fromAction(action, series, 'update')) + ); + + case Action.MarkAsUnread: + return this.readerService.markMultipleSeriesUnread(series.map(s => s.id)).pipe( + tap(() => { + series.forEach(s => s.pagesRead = 0); + this.toastr.success(translate('toasts.mark-unread')); + }), + map(() => this.fromAction(action, series, 'update')) + ); + + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-multiple-series', {count: series.length}))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.seriesService.deleteMultipleSeries(series.map(s => s.id))), + tap(res => { + if (res) { + this.toastr.success(translate('toasts.series-deleted')); + } else { + this.toastr.error(translate('errors.generic')); + } + }), + filter(res => res), + map(() => this.fromAction(action, series, 'remove')) + ); + + case Action.AddToReadingList: { + if (this.readingListModalRef != null) return EMPTY; + const rlRef = this.modalService.open(ListSelectModalComponent, addToModal()) as TypedModalRef>; + this.readingListModalRef = rlRef; + + const bulkSeriesIds = series.map(s => s.id); + rlRef.setInput('title', translate('actionable.multiple-selections')); + rlRef.setInput('showCreate', true); + rlRef.setInput('createLabel', translate('add-to-list-modal.reading-list-label')); + rlRef.setInput('inputItems', []); + rlRef.setInput('loading', true); + + this.readingListService.getReadingLists(false, true).pipe( + take(1), + catchError(() => EMPTY), + finalize(() => rlRef.setInput('loading', false)) + ).subscribe(result => { + rlRef.setInput('inputItems', result.result.map(l => ({ label: l.title, value: l }))); + }); + + rlRef.setInput('interceptCreate', (name: string) => + this.readingListService.createList(name).pipe( + switchMap(list => this.readingListService.updateByMultipleSeries(list.id, bulkSeriesIds)), + tap(() => this.toastr.success(translate('toasts.series-added-to-reading-list'))) + ) + ); + + rlRef.setInput('interceptConfirm', (item: ReadingList | ReadingList[]) => { + const list = item as ReadingList; + this.readingListService.updateByMultipleSeries(list.id, bulkSeriesIds).subscribe(() => { + this.toastr.success(translate('toasts.series-added-to-reading-list')); + rlRef.close(); + }); + }); + + return new Observable>(subscriber => { + rlRef.closed.subscribe(() => { + this.readingListModalRef = null; + subscriber.next(this.fromAction(action, series, 'none')); + subscriber.complete(); + }); + rlRef.dismissed.subscribe(() => { + this.readingListModalRef = null; + subscriber.complete(); + }); + }); + } + + case Action.AddToCollection: { + if (this.collectionModalRef != null) return EMPTY; + const colRef = this.modalService.open(ListSelectModalComponent, addToModal()) as TypedModalRef>; + this.collectionModalRef = colRef; + + const bulkColSeriesIds = series.map(s => s.id); + colRef.setInput('title', translate('bulk-add-to-collection.title')); + colRef.setInput('showCreate', true); + colRef.setInput('createLabel', translate('bulk-add-to-collection.collection-label')); + colRef.setInput('createInitialValue', translate('actionable.new-collection')); + colRef.setInput('inputItems', []); + colRef.setInput('loading', true); + + this.collectionService.allCollections(true).pipe( + take(1), + catchError(() => EMPTY), + finalize(() => colRef.setInput('loading', false)) + ).subscribe(tags => { + const collections = tags.filter(t => t.source === ScrobbleProvider.Kavita); + colRef.setInput('inputItems', collections.map(c => ({ label: c.title, value: c }))); + }); + + colRef.setInput('interceptCreate', (name: string) => + this.collectionService.addByMultiple(0, bulkColSeriesIds, name).pipe( + tap(() => this.toastr.success(translate('toasts.series-added-to-collection', { collectionName: name }))) + ) + ); + + colRef.setInput('interceptConfirm', (item: UserCollection | UserCollection[]) => { + const tag = item as UserCollection; + this.collectionService.addByMultiple(tag.id, bulkColSeriesIds, '').subscribe(() => { + this.toastr.success(translate('toasts.series-added-to-collection', { collectionName: tag.title })); + colRef.close(); + }); + }); + + return new Observable>(subscriber => { + colRef.closed.subscribe(() => { + this.collectionModalRef = null; + subscriber.next(this.fromAction(action, series, 'none')); + subscriber.complete(); + }); + colRef.dismissed.subscribe(() => { + this.collectionModalRef = null; + subscriber.complete(); + }); + }); + } + + case Action.AddToWantToReadList: + return this.memberService.addSeriesToWantToRead(series.map(s => s.id)).pipe( + tap(() => this.toastr.success(translate('toasts.series-added-want-to-read'))), + map(() => this.fromAction(action, series, 'none')) + ); + + case Action.RemoveFromWantToReadList: + return this.memberService.removeSeriesToWantToRead(series.map(s => s.id)).pipe( + tap(() => this.toastr.success(translate('toasts.series-removed-want-to-read'))), + map(() => this.fromAction(action, series, 'reload')) + ); + + case Action.SetReadingProfile: { + if (this.readingListModalRef != null) return EMPTY; + this.readingListModalRef = this.modalService.open(BulkSetReadingProfileModalComponent, addToModal()); + this.readingListModalRef.setInput('seriesIds', series.map(s => s.id)); + + const ref = this.readingListModalRef; + return new Observable>(subscriber => { + ref.closed.subscribe(() => { + this.readingListModalRef = null; + subscriber.next(this.fromAction(action, series, 'none')); + subscriber.complete(); + }); + ref.dismissed.subscribe(() => { + this.readingListModalRef = null; + subscriber.complete(); + }); + }); + } + + default: + return of(this.fromAction(action, series, 'none')); + } + } + + handleBulkVolumeChapterAction(action: ActionItem, volumes: Volume[], chapters: Chapter[], seriesId: number): Observable> { + switch (action.action) { + case Action.MarkAsRead: + return this.readerService.markMultipleRead(seriesId, volumes.map(v => v.id), chapters.map(c => c.id)).pipe( + tap(() => { + volumes.forEach(v => { + v.pagesRead = v.pages; + v.chapters?.forEach(c => c.pagesRead = c.pages); + }); + chapters.forEach(c => c.pagesRead = c.pages); + this.toastr.success(translate('toasts.mark-read')); + }), + map(() => this.fromAction(action, [...volumes, ...chapters], 'update')) + ); + + case Action.MarkAsUnread: + return this.readerService.markMultipleUnread(seriesId, volumes.map(v => v.id), chapters.map(c => c.id)).pipe( + tap(() => { + volumes.forEach(v => { + v.pagesRead = 0; + v.chapters?.forEach(c => c.pagesRead = 0); + }); + chapters.forEach(c => c.pagesRead = 0); + this.toastr.success(translate('toasts.mark-unread')); + }), + map(() => this.fromAction(action, [...volumes, ...chapters], 'update')) + ); + + case Action.AddToReadingList: { + if (this.readingListModalRef != null) return EMPTY; + const rlRef = this.modalService.open(ListSelectModalComponent, addToModal()) as TypedModalRef>; + this.readingListModalRef = rlRef; + + const volumeIdList = volumes.map(v => v.id); + const chapterIdList = chapters.map(c => c.id); + rlRef.setInput('title', translate('actionable.multiple-selections')); + rlRef.setInput('showCreate', true); + rlRef.setInput('createLabel', translate('add-to-list-modal.reading-list-label')); + rlRef.setInput('inputItems', []); + rlRef.setInput('loading', true); + + this.readingListService.getReadingLists(false, true).pipe( + take(1), + catchError(() => EMPTY), + finalize(() => rlRef.setInput('loading', false)) + ).subscribe(result => { + rlRef.setInput('inputItems', result.result.map(l => ({ label: l.title, value: l }))); + }); + + rlRef.setInput('interceptCreate', (name: string) => + this.readingListService.createList(name).pipe( + switchMap(list => this.readingListService.updateByMultiple(list.id, seriesId, volumeIdList, chapterIdList)), + tap(() => this.toastr.success(translate('toasts.multiple-added-to-reading-list'))) + ) + ); + + rlRef.setInput('interceptConfirm', (item: ReadingList | ReadingList[]) => { + const list = item as ReadingList; + this.readingListService.updateByMultiple(list.id, seriesId, volumeIdList, chapterIdList).subscribe(() => { + this.toastr.success(translate('toasts.multiple-added-to-reading-list')); + rlRef.close(); + }); + }); + + return new Observable>(subscriber => { + rlRef.closed.subscribe(() => { + this.readingListModalRef = null; + subscriber.next(this.fromAction(action, [...volumes, ...chapters], 'none')); + subscriber.complete(); + }); + rlRef.dismissed.subscribe(() => { + this.readingListModalRef = null; + subscriber.complete(); + }); + }); + } + + case Action.SendTo: { + const device = action._extra!.data as Device; + const chapterIds = [ + ...volumes.flatMap(v => v.chapters?.map(c => c.id) ?? []), + ...chapters.map(c => c.id) + ]; + return this.deviceService.sendToEmailDevice(chapterIds, device.id).pipe( + tap(() => this.toastr.success(translate('toasts.file-send-to', {name: device.name}))), + map(() => this.fromAction(action, [...volumes, ...chapters], 'none')) + ); + } + + case Action.Delete: { + const entities = [...volumes, ...chapters]; + const deleteOps: Observable[] = []; + + if (volumes.length > 0) { + deleteOps.push( + from(this.confirmService.confirm(translate('toasts.confirm-delete-multiple-volumes', {count: volumes.length}))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.volumeService.deleteMultipleVolumes(volumes.map(v => v.id))) + ) + ); + } + + if (chapters.length > 0) { + deleteOps.push( + from(this.confirmService.confirm(translate('toasts.confirm-delete-multiple-chapters', {count: chapters.length}))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.chapterService.deleteMultipleChapters(seriesId, chapters.map(c => c.id))) + ) + ); + } + + if (deleteOps.length === 0) return EMPTY; + + return from(deleteOps).pipe( + switchMap(op => op), + map(() => this.fromAction(action, entities, 'remove')) + ); + } + + default: + return of(this.fromAction(action, [...volumes, ...chapters], 'none')); + } + } + + handleBulkBookmarkAction(action: ActionItem, bookmarks: PageBookmark[], seriesIds: number[]): Observable> { + switch (action.action) { + case Action.Download: + this.downloadService.download('bookmark', bookmarks); + return of(this.fromAction(action, bookmarks, 'none')); + + case Action.Delete: + return from(this.confirmService.confirm(translate('bookmarks.confirm-single-delete', {seriesName: ''}))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.readerService.clearMultipleBookmarks(seriesIds)), + tap(() => this.toastr.success(translate('bookmarks.delete-single-success'))), + map(() => this.fromAction(action, bookmarks, 'remove')) + ); + + default: + return of(this.fromAction(action, bookmarks, 'none')); + } + } + + handleBulkCollectionAction(action: ActionItem, collections: UserCollection[]): Observable> { + switch (action.action) { + case Action.Promote: + return this.collectionTagService.promoteMultipleCollections(collections.map(c => c.id), true).pipe( + tap(() => this.toastr.success(translate('toasts.collections-promoted'))), + map(() => this.fromAction(action, collections.map(c => ({...c, promoted: true})), 'update')) + ); + + case Action.UnPromote: + return this.collectionTagService.promoteMultipleCollections(collections.map(c => c.id), false).pipe( + tap(() => this.toastr.success(translate('toasts.collections-unpromoted'))), + map(() => this.fromAction(action, collections.map(c => ({...c, promoted: false})), 'update')) + ); + + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-collections'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.collectionTagService.deleteMultipleCollections(collections.map(c => c.id))), + tap(() => this.toastr.success(translate('toasts.collections-deleted'))), + map(() => this.fromAction(action, collections, 'remove')) + ); + + default: + return of(this.fromAction(action, collections, 'none')); + } + } + + handleBulkReadingListAction(action: ActionItem, readingLists: ReadingList[]): Observable> { + switch (action.action) { + case Action.Promote: + return this.readingListService.promoteMultipleReadingLists(readingLists.map(r => r.id), true).pipe( + tap(() => this.toastr.success(translate('toasts.reading-list-promoted'))), + map(() => this.fromAction(action, readingLists.map(r => ({...r, promoted: true})), 'update')) + ); + + case Action.UnPromote: + return this.readingListService.promoteMultipleReadingLists(readingLists.map(r => r.id), false).pipe( + tap(() => this.toastr.success(translate('toasts.reading-list-unpromoted'))), + map(() => this.fromAction(action, readingLists.map(r => ({...r, promoted: false})), 'update')) + ); + + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-reading-list'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.readingListService.deleteMultipleReadingLists(readingLists.map(r => r.id))), + tap(() => this.toastr.success(translate('toasts.reading-lists-deleted'))), + map(() => this.fromAction(action, readingLists, 'remove')) + ); + + default: + return of(this.fromAction(action, readingLists, 'none')); + } + } + + handleBulkAnnotationAction(action: ActionItem, annotations: Annotation[]): Observable> { + switch (action.action) { + case Action.Delete: + return from(this.confirmService.confirm(translate('toasts.confirm-delete-annotations'))).pipe( + filter(confirmed => confirmed), + switchMap(() => this.annotationsService.bulkDelete(annotations.map(a => a.id))), + tap(() => this.toastr.success(translate('toasts.annotations-deleted'))), + map(() => this.fromAction(action, annotations, 'remove')) + ); + + case Action.Export: + return this.annotationsService.exportAnnotations(annotations.map(a => a.id)).pipe( + map(() => this.fromAction(action, annotations, 'none')) + ); + + case Action.Like: + return this.annotationsService.likeAnnotations(annotations.map(a => a.id)).pipe( + map(() => this.fromAction(action, annotations, 'update')) + ); + + case Action.UnLike: + return this.annotationsService.unLikeAnnotations(annotations.map(a => a.id)).pipe( + map(() => this.fromAction(action, annotations, 'update')) + ); + + default: + return of(this.fromAction(action, annotations, 'none')); + } + } + + handleBulkSideNavStreamAction(action: ActionItem, streams: SideNavStream[]): Observable> { + switch (action.action) { + case Action.MarkAsVisible: + return this.sideNavService.bulkToggleSideNavStreamVisibility(streams.map(s => s.id), true).pipe( + map(() => this.fromAction(action, streams.map(s => ({...s, visible: true})), 'update')) + ); + + case Action.MarkAsInvisible: + return this.sideNavService.bulkToggleSideNavStreamVisibility(streams.map(s => s.id), false).pipe( + map(() => this.fromAction(action, streams.map(s => ({...s, visible: false})), 'update')) + ); + + default: + return of(this.fromAction(action, streams, 'none')); + } + } + + // ------------------------------------------- + // INDIVIDUAL HANDLERS + // ------------------------------------------- /** @@ -82,10 +1288,7 @@ export class ActionService { return; } - // Prompt user if we should do a force or not - const force = false; // await this.promptIfForce(); - - this.libraryService.scan(library.id, force).subscribe((res: any) => { + this.libraryService.scan(library.id, false).subscribe((res: any) => { this.toastr.info(translate('toasts.scan-queued', {name: library.name})); if (callback) { callback(library); @@ -93,156 +1296,6 @@ export class ActionService { }); } - - /** - * Request a refresh of Metadata for a given Library - * @param library Partial Library, must have id and name populated - * @param callback Optional callback to perform actions after API completes - * @param forceUpdate Optional Should we force - * @param forceColorscape Optional Should we force colorscape gen - * @returns - */ - async refreshLibraryMetadata(library: Partial, callback?: LibraryActionCallback, forceUpdate: boolean = true, forceColorscape: boolean = false) { - if (!library.hasOwnProperty('id') || library.id === undefined) { - return; - } - - // Prompt the user if we are doing a forced call - if (forceUpdate) { - if (!await this.confirmService.confirm(translate('toasts.confirm-regen-covers'))) { - if (callback) { - callback(library); - } - return; - } - } - - const message = forceUpdate ? 'toasts.refresh-covers-queued' : 'toasts.generate-colorscape-queued'; - - this.libraryService.refreshMetadata(library?.id, forceUpdate, forceColorscape).subscribe((res: any) => { - this.toastr.info(translate(message, {name: library.name})); - - if (callback) { - callback(library); - } - }); - } - - editLibrary(library: Partial, callback?: LibraryActionCallback) { - const modalRef = this.modalService.open(LibrarySettingsModalComponent, DefaultModalOptions); - modalRef.componentInstance.library = library; - modalRef.closed.subscribe((closeResult: {success: boolean, library: Library, coverImageUpdate: boolean}) => { - if (callback) callback(library) - }); - } - - async deleteLibrary(library: Partial, callback?: LibraryActionCallback) { - if (!library.hasOwnProperty('id') || library.id === undefined) { - return; - } - - if (!await this.confirmService.alert(translate('toasts.confirm-library-delete'))) { - if (callback) { - callback(library); - } - return; - } - - this.libraryService.delete(library?.id).subscribe(() => { - this.toastr.info(translate('toasts.library-deleted', {name: library.name})); - if (callback) { - callback(library); - } - }); - } - - /** - * Mark a series as read; updates the series pagesRead - * @param series Series, must have id and name populated - * @param callback Optional callback to perform actions after API completes - */ - markSeriesAsRead(series: Series, callback?: SeriesActionCallback) { - this.seriesService.markRead(series.id).subscribe(() => { - series.pagesRead = series.pages; - this.toastr.success(translate('toasts.entity-read', {name: series.name})); - if (callback) { - callback(series); - } - }); - } - - /** - * Mark a series as unread; updates the series pagesRead - * @param series Series, must have id and name populated - * @param callback Optional callback to perform actions after API completes - */ - markSeriesAsUnread(series: Series, callback?: SeriesActionCallback) { - this.seriesService.markUnread(series.id).subscribe(() => { - series.pagesRead = 0; - this.toastr.success(translate('toasts.entity-unread', {name: series.name})); - if (callback) { - callback(series); - } - }); - } - - /** - * Start a file scan for a Series - * @param series Series, must have libraryId and name populated - * @param callback Optional callback to perform actions after API completes - */ - async scanSeries(series: Series, callback?: SeriesActionCallback) { - this.seriesService.scan(series.libraryId, series.id).subscribe(() => { - this.toastr.info(translate('toasts.scan-queued', {name: series.name})); - if (callback) { - callback(series); - } - }); - } - - /** - * Start a file scan for analyze files for a Series - * @param series Series, must have libraryId and name populated - * @param callback Optional callback to perform actions after API completes - */ - analyzeFilesForSeries(series: Series, callback?: SeriesActionCallback) { - this.seriesService.analyzeFiles(series.libraryId, series.id).subscribe(() => { - this.toastr.info(translate('toasts.scan-queued', {name: series.name})); - if (callback) { - callback(series); - } - }); - } - - /** - * Start a metadata refresh for a Series - * @param series Series, must have libraryId, id and name populated - * @param callback Optional callback to perform actions after API completes - * @param forceUpdate If cache should be checked or not - * @param forceColorscape If cache should be checked or not - */ - async refreshSeriesMetadata(series: Series, callback?: SeriesActionCallback, forceUpdate: boolean = true, forceColorscape: boolean = false) { - - // Prompt the user if we are doing a forced call - if (forceUpdate) { - if (!await this.confirmService.confirm(translate('toasts.confirm-regen-covers'))) { - if (callback) { - callback(series); - } - return; - } - } - - const message = forceUpdate ? 'toasts.refresh-covers-queued' : 'toasts.generate-colorscape-queued'; - - this.seriesService.refreshMetadata(series, forceUpdate, forceColorscape).subscribe(() => { - this.toastr.info(translate(message, {name: series.name})); - if (callback) { - callback(series); - } - }); - } - /** * Mark all chapters and the volume as Read * @param seriesId Series Id @@ -261,6 +1314,7 @@ export class ActionService { }); } + /** * Mark all chapters and the volume as unread * @param seriesId Series Id @@ -278,6 +1332,7 @@ export class ActionService { }); } + /** * Mark a chapter as read * @param libraryId Library Id @@ -312,338 +1367,23 @@ export class ActionService { }); } - /** - * Mark all chapters and the volumes as Read. All volumes and chapters must belong to a series - * @param seriesId Series Id - * @param volumes Volumes, should have id, chapters and pagesRead populated - * @param chapters Optional Chapters, should have id - * @param callback Optional callback to perform actions after API completes - */ - markMultipleAsRead(seriesId: number, volumes: Array, chapters?: Array, callback?: VoidActionCallback) { - this.readerService.markMultipleRead(seriesId, volumes.map(v => v.id), chapters?.map(c => c.id)).subscribe(() => { - volumes.forEach(volume => { - volume.pagesRead = volume.pages; - volume.chapters?.forEach(c => c.pagesRead = c.pages); - }); - chapters?.forEach(c => c.pagesRead = c.pages); - this.toastr.success(translate('toasts.mark-read')); - - if (callback) { - callback(); - } - }); - } - - /** - * Mark all chapters and the volumes as Unread. All volumes must belong to a series - * @param seriesId Series Id - * @param volumes Volumes, should have id, chapters and pagesRead populated - * @param chapters Optional Chapters, should have id - * @param callback Optional callback to perform actions after API completes - */ - markMultipleAsUnread(seriesId: number, volumes: Array, chapters?: Array, callback?: VoidActionCallback) { - this.readerService.markMultipleUnread(seriesId, volumes.map(v => v.id), chapters?.map(c => c.id)).subscribe(() => { - volumes.forEach(volume => { - volume.pagesRead = 0; - volume.chapters?.forEach(c => c.pagesRead = 0); - }); - chapters?.forEach(c => c.pagesRead = 0); - this.toastr.success(translate('toasts.mark-unread')); - - if (callback) { - callback(); - } - }); - } - - /** - * Mark all series as Read. - * @param series Series, should have id, pagesRead populated - * @param callback Optional callback to perform actions after API completes - */ - markMultipleSeriesAsRead(series: Array, callback?: VoidActionCallback) { - this.readerService.markMultipleSeriesRead(series.map(v => v.id)).subscribe(() => { - series.forEach(s => { - s.pagesRead = s.pages; - }); - this.toastr.success(translate('toasts.mark-read')); - - if (callback) { - callback(); - } - }); - } - - /** - * Mark all series as Unread. - * @param series Series, should have id, pagesRead populated - * @param callback Optional callback to perform actions after API completes - */ - markMultipleSeriesAsUnread(series: Array, callback?: VoidActionCallback) { - this.readerService.markMultipleSeriesUnread(series.map(v => v.id)).subscribe(() => { - series.forEach(s => { - s.pagesRead = s.pages; - }); - this.toastr.success(translate('toasts.mark-unread')); - - if (callback) { - callback(); - } - }); - } - - /** - * Mark all collections as promoted/unpromoted. - * @param collections UserCollection, should have id, pagesRead populated - * @param promoted boolean, promoted state - * @param callback Optional callback to perform actions after API completes - */ - promoteMultipleCollections(collections: Array, promoted: boolean, callback?: BooleanActionCallback) { - this.collectionTagService.promoteMultipleCollections(collections.map(v => v.id), promoted).subscribe(() => { - if (promoted) { - this.toastr.success(translate('toasts.collections-promoted')); - } else { - this.toastr.success(translate('toasts.collections-unpromoted')); - } - - if (callback) { - callback(true); - } - }); - } - - /** - * Deletes multiple collections - * @param collections UserCollection, should have id, pagesRead populated - * @param callback Optional callback to perform actions after API completes - */ - async deleteMultipleCollections(collections: Array, callback?: BooleanActionCallback) { - if (!await this.confirmService.confirm(translate('toasts.confirm-delete-collections'))) return; - - this.collectionTagService.deleteMultipleCollections(collections.map(v => v.id)).subscribe(() => { - this.toastr.success(translate('toasts.collections-deleted')); - - if (callback) { - callback(true); - } - }); - } - - /** - * Mark all reading lists as promoted/unpromoted. - * @param readingLists UserCollection, should have id, pagesRead populated - * @param promoted boolean, promoted state - * @param callback Optional callback to perform actions after API completes - */ - promoteMultipleReadingLists(readingLists: Array, promoted: boolean, callback?: BooleanActionCallback) { - this.readingListService.promoteMultipleReadingLists(readingLists.map(v => v.id), promoted).subscribe(() => { - if (promoted) { - this.toastr.success(translate('toasts.reading-list-promoted')); - } else { - this.toastr.success(translate('toasts.reading-list-unpromoted')); - } - - if (callback) { - callback(true); - } - }); - } - - async deleteMultipleVolumes(volumes: Array, callback?: BooleanActionCallback) { - if (!await this.confirmService.confirm(translate('toasts.confirm-delete-multiple-volumes', {count: volumes.length}))) return; - - this.volumeService.deleteMultipleVolumes(volumes.map(v => v.id)).subscribe((success) => { - if (callback) { - callback(success); - } - }) - } - - async deleteMultipleChapters(seriesId: number, chapterIds: Array, callback?: BooleanActionCallback) { - if (!await this.confirmService.confirm(translate('toasts.confirm-delete-multiple-chapters', {count: chapterIds.length}))) return; - - this.chapterService.deleteMultipleChapters(seriesId, chapterIds.map(c => c.id)).subscribe(() => { - if (callback) { - callback(true); - } - }); - } - - /** - * Deletes multiple collections - * @param readingLists ReadingList, should have id - * @param callback Optional callback to perform actions after API completes - */ - async deleteMultipleReadingLists(readingLists: Array, callback?: BooleanActionCallback) { - if (!await this.confirmService.confirm(translate('toasts.confirm-delete-reading-list'))) return; - - this.readingListService.deleteMultipleReadingLists(readingLists.map(v => v.id)).subscribe(() => { - this.toastr.success(translate('toasts.reading-lists-deleted')); - - if (callback) { - callback(true); - } - }); - } - - addMultipleToReadingList(seriesId: number, volumes: Array, chapters?: Array, callback?: BooleanActionCallback) { - if (this.readingListModalRef != null) { return; } - this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' }); - this.readingListModalRef.componentInstance.seriesId = seriesId; - this.readingListModalRef.componentInstance.volumeIds = volumes.map(v => v.id); - this.readingListModalRef.componentInstance.chapterIds = chapters?.map(c => c.id); - this.readingListModalRef.componentInstance.title = translate('actionable.multiple-selections'); - this.readingListModalRef.componentInstance.type = ADD_FLOW.Multiple; - - - this.readingListModalRef.closed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(true); - } - }); - this.readingListModalRef.dismissed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(false); - } - }); - } addMultipleSeriesToWantToReadList(seriesIds: Array, callback?: VoidActionCallback) { this.memberService.addSeriesToWantToRead(seriesIds).subscribe(() => { this.toastr.success(translate('toasts.series-added-want-to-read')); - if (callback) { - callback(); - } + callback?.() }); } removeMultipleSeriesFromWantToReadList(seriesIds: Array, callback?: VoidActionCallback) { this.memberService.removeSeriesToWantToRead(seriesIds).subscribe(() => { this.toastr.success(translate('toasts.series-removed-want-to-read')); - if (callback) { - callback(); - } + callback?.() }); } - addMultipleSeriesToReadingList(series: Array, callback?: BooleanActionCallback) { - if (this.readingListModalRef != null) { return; } - this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' }); - this.readingListModalRef.componentInstance.seriesIds = series.map(v => v.id); - this.readingListModalRef.componentInstance.title = translate('actionable.multiple-selections'); - this.readingListModalRef.componentInstance.type = ADD_FLOW.Multiple_Series; - - - this.readingListModalRef.closed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(true); - } - }); - this.readingListModalRef.dismissed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(false); - } - }); - } - - /** - * Adds a set of series to a collection tag - * @param series - * @param callback - * @returns - */ - addMultipleSeriesToCollectionTag(series: Array, callback?: BooleanActionCallback) { - if (this.collectionModalRef != null) { return; } - this.collectionModalRef = this.modalService.open(BulkAddToCollectionComponent, { scrollable: true, size: 'md', windowClass: 'collection', fullscreen: 'md' }); - this.collectionModalRef.componentInstance.seriesIds = series.map(v => v.id); - this.collectionModalRef.componentInstance.title = translate('actionable.new-collection'); - - this.collectionModalRef.closed.subscribe(() => { - this.collectionModalRef = null; - if (callback) { - callback(true); - } - }); - this.collectionModalRef.dismissed.subscribe(() => { - this.collectionModalRef = null; - if (callback) { - callback(false); - } - }); - } - - addSeriesToReadingList(series: Series, callback?: SeriesActionCallback) { - if (this.readingListModalRef != null) { return; } - this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' }); - this.readingListModalRef.componentInstance.seriesId = series.id; - this.readingListModalRef.componentInstance.title = series.name; - this.readingListModalRef.componentInstance.type = ADD_FLOW.Series; - - - this.readingListModalRef.closed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(series); - } - }); - this.readingListModalRef.dismissed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(series); - } - }); - } - - addVolumeToReadingList(volume: Volume, seriesId: number, callback?: VolumeActionCallback) { - if (this.readingListModalRef != null) { return; } - this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' }); - this.readingListModalRef.componentInstance.seriesId = seriesId; - this.readingListModalRef.componentInstance.volumeId = volume.id; - this.readingListModalRef.componentInstance.type = ADD_FLOW.Volume; - - - this.readingListModalRef.closed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(volume); - } - }); - this.readingListModalRef.dismissed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(volume); - } - }); - } - - addChapterToReadingList(chapter: Chapter, seriesId: number, callback?: ChapterActionCallback) { - if (this.readingListModalRef != null) { return; } - this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' }); - this.readingListModalRef.componentInstance.seriesId = seriesId; - this.readingListModalRef.componentInstance.chapterId = chapter.id; - this.readingListModalRef.componentInstance.type = ADD_FLOW.Chapter; - - - this.readingListModalRef.closed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(chapter); - } - }); - this.readingListModalRef.dismissed.subscribe(() => { - this.readingListModalRef = null; - if (callback) { - callback(chapter); - } - }); - } - editReadingList(readingList: ReadingList, callback?: ReadingListActionCallback) { - const readingListModalRef = this.modalService.open(EditReadingListModalComponent, DefaultModalOptions); + const readingListModalRef = this.modalService.open(EditReadingListModalComponent, editModal()); readingListModalRef.componentInstance.readingList = readingList; readingListModalRef.closed.pipe(take(1)).subscribe((list) => { if (callback && list !== undefined) { @@ -657,52 +1397,6 @@ export class ActionService { }); } - /** - * Deletes all series - * @param seriesIds - List of series - * @param callback - Optional callback once complete - */ - async deleteMultipleSeries(seriesIds: Array, callback?: BooleanActionCallback) { - if (!await this.confirmService.confirm(translate('toasts.confirm-delete-multiple-series', {count: seriesIds.length}))) { - if (callback) { - callback(false); - } - return; - } - this.seriesService.deleteMultipleSeries(seriesIds.map(s => s.id)).subscribe(res => { - if (res) { - this.toastr.success(translate('toasts.series-deleted')); - } else { - this.toastr.error(translate('errors.generic')); - } - - if (callback) { - callback(res); - } - }); - } - - async deleteSeries(series: Series, callback?: BooleanActionCallback) { - if (!await this.confirmService.confirm(translate('toasts.confirm-delete-series'))) { - if (callback) { - callback(false); - } - return; - } - - this.seriesService.delete(series.id).subscribe((res: boolean) => { - if (callback) { - if (res) { - this.toastr.success(translate('toasts.series-deleted')); - } else { - this.toastr.error(translate('errors.generic')); - } - - callback(res); - } - }); - } - async deleteChapter(chapterId: number, callback?: BooleanActionCallback) { if (!await this.confirmService.confirm(translate('toasts.confirm-delete-chapter'))) { if (callback) { @@ -748,23 +1442,12 @@ export class ActionService { sendToDevice(chapterIds: Array, device: Device, callback?: VoidActionCallback) { this.deviceService.sendToEmailDevice(chapterIds, device.id).subscribe(() => { this.toastr.success(translate('toasts.file-send-to', {name: device.name})); - if (callback) { - callback(); - } - }); - } - - sendSeriesToDevice(seriesId: number, device: Device, callback?: VoidActionCallback) { - this.deviceService.sendSeriesToEmailDevice(seriesId, device.id).subscribe(() => { - this.toastr.success(translate('toasts.file-send-to', {name: device.name})); - if (callback) { - callback(); - } + callback?.() }); } matchSeries(series: Series, callback?: BooleanActionCallback) { - const ref = this.modalService.open(MatchSeriesModalComponent, DefaultModalOptions); + const ref = this.modalService.open(MatchSeriesModalComponent); ref.componentInstance.series = series; ref.closed.subscribe(saved => { if (callback) { @@ -773,23 +1456,6 @@ export class ActionService { }); } - async deleteFilter(filterId: number, callback?: BooleanActionCallback) { - if (!await this.confirmService.confirm(translate('toasts.confirm-delete-smart-filter'))) { - if (callback) { - callback(false); - } - return; - } - - this.filterService.deleteFilter(filterId).subscribe(_ => { - this.toastr.success(translate('toasts.smart-filter-deleted')); - - if (callback) { - callback(true); - } - }); - } - /** * Sets the reading profile for multiple series * @param series @@ -798,8 +1464,8 @@ export class ActionService { setReadingProfileForMultiple(series: Array, callback?: BooleanActionCallback) { if (this.readingListModalRef != null) { return; } - this.readingListModalRef = this.modalService.open(BulkSetReadingProfileModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' }); - this.readingListModalRef.componentInstance.seriesIds = series.map(s => s.id) + this.readingListModalRef = this.modalService.open(BulkSetReadingProfileModalComponent, addToModal()); + this.readingListModalRef.setInput('seriesIds', series.map(s => s.id)); this.readingListModalRef.closed.subscribe(() => { this.readingListModalRef = null; @@ -823,8 +1489,8 @@ export class ActionService { setReadingProfileForLibrary(library: Library, callback?: BooleanActionCallback) { if (this.readingListModalRef != null) { return; } - this.readingListModalRef = this.modalService.open(BulkSetReadingProfileModalComponent, { scrollable: true, size: 'md', fullscreen: 'md' }); - this.readingListModalRef.componentInstance.libraryId = library.id; + this.readingListModalRef = this.modalService.open(BulkSetReadingProfileModalComponent, addToModal()); + this.readingListModalRef.setInput('libraryId', library.id); this.readingListModalRef.closed.subscribe(() => { this.readingListModalRef = null; @@ -840,4 +1506,18 @@ export class ActionService { }); } + private handleEditModal(ref: NgbModalRef, action: ActionItem, fallbackEntity: T): Observable> { + return from(ref.closed).pipe( + filter((res: ModalResult) => res.success), + map(res => { + if (res.isDeleted) return this.fromAction(action, fallbackEntity, 'remove'); + return this.fromAction(action, res.data ?? fallbackEntity, 'update'); + }) + ); + } + + + private fromAction(action: ActionItem, data: T, effect: ActionEffect): ActionResult { + return { action: action.action, entity: data, effect: effect }; + } } diff --git a/UI/Web/src/app/_services/annotation.service.ts b/UI/Web/src/app/_services/annotation.service.ts index c9a8be92c..2ff5172c4 100644 --- a/UI/Web/src/app/_services/annotation.service.ts +++ b/UI/Web/src/app/_services/annotation.service.ts @@ -6,7 +6,6 @@ import {TextResonse} from "../_types/text-response"; import {asyncScheduler, map, of, tap} from "rxjs"; import {switchMap, throttleTime} from "rxjs/operators"; import {AccountService} from "./account.service"; -import {User} from "../_models/user/user"; import {MessageHubService} from "./message-hub.service"; import {RgbaColor} from "../book-reader/_models/annotations/highlight-slot"; import {Router} from "@angular/router"; @@ -50,21 +49,15 @@ export class AnnotationService { private _events = signal(null); public readonly events = this._events.asReadonly(); - private readonly user = signal(null); public readonly slots = computed(() => { - const currentUser = this.user(); + const currentUser = this.accountService.currentUser(); return currentUser?.preferences?.bookReaderHighlightSlots ?? []; }); - constructor() { - this.accountService.currentUser$.subscribe(user => { - this.user.set(user!); - }); - } updateSlotColor(index: number, color: RgbaColor) { - const user = this.accountService.currentUserSignal(); + const user = this.accountService.currentUser(); if (!user) return of([]); const preferences = user.preferences; @@ -206,7 +199,7 @@ export class AnnotationService { * @param ids */ likeAnnotations(ids: number[]) { - const userId = this.accountService.currentUserSignal()?.id; + const userId = this.accountService.currentUser()?.id; if (!userId) return of(); return this.httpClient.post(this.baseUrl + 'annotation/like', ids); @@ -217,7 +210,7 @@ export class AnnotationService { * @param ids */ unLikeAnnotations(ids: number[]) { - const userId = this.accountService.currentUserSignal()?.id; + const userId = this.accountService.currentUser()?.id; if (!userId) return of(); return this.httpClient.post(this.baseUrl + 'annotation/unlike', ids); diff --git a/UI/Web/src/app/_services/card-config-factory.service.ts b/UI/Web/src/app/_services/card-config-factory.service.ts new file mode 100644 index 000000000..9b83c4f74 --- /dev/null +++ b/UI/Web/src/app/_services/card-config-factory.service.ts @@ -0,0 +1,431 @@ +import {inject, Injectable, TemplateRef} from "@angular/core"; +import {ImageService} from "./image.service"; +import {ReaderService} from "./reader.service"; +import {ActionableEntity, ActionFactoryService} from "./action-factory.service"; +import {DownloadService} from "../shared/_services/download.service"; +import {Router} from "@angular/router"; +import {RelationshipPipe} from "../_pipes/relationship.pipe"; +import {Series} from "../_models/series"; +import {CardEntity, ChapterCardEntity, RelatedSeriesCardEntity, SeriesCardEntity} from "../_models/card/card-entity"; +import { + ActionableCardConfiguration, + BaseCardConfiguration, + BaseCardConfigurationOverrides, + CardConfigurationOverrides +} from "../_models/card/card-configuration"; +import {Chapter, LooseLeafOrDefaultNumber} from "../_models/chapter"; +import {map} from "rxjs/operators"; +import {Volume} from "../_models/volume"; +import {UserCollection} from "../_models/collection-tag"; +import {ReadingList} from "../_models/reading-list"; +import {LibraryType} from "../_models/library/library"; +import {MangaFormat} from "../_models/manga-format"; +import {User} from "../_models/user/user"; +import {PageBookmark} from "../_models/readers/page-bookmark"; +import {RelatedSeriesPair} from "../_single-module/related-tab/related-tab.component"; +import {ActionItem} from "../_models/actionables/action-item"; +import {SeriesGroup} from "../_models/series-group"; + +export interface ConfigCardFactoryBaseParameters { + shouldRenderAction?: (action: ActionItem, entity: T, user: User) => boolean, + titleRef?: TemplateRef<{ $implicit: CardEntity }> | undefined, + metaTitleRef?: TemplateRef<{ $implicit: CardEntity }> | undefined, + overrides?: BaseCardConfigurationOverrides, +} + +export interface ConfigCardFactoryActionableParameters { + shouldRenderAction?: (action: ActionItem, entity: T, user: User) => boolean, + titleRef?: TemplateRef<{ $implicit: CardEntity }> | undefined, + metaTitleRef?: TemplateRef<{ $implicit: CardEntity }> | undefined, + overrides?: CardConfigurationOverrides, +} + +export interface ConfigCardFactoryChapterVolumeParameters extends ConfigCardFactoryActionableParameters { + seriesId: number; + libraryId: number; + libraryType: number; +} + + +/** + * Factory service that creates CardConfiguration objects for each entity type. + * Provides sensible defaults that can be overridden at call sites. + * + * Usage: + * // In component + * private configFactory = inject(CardConfigFactory); + * + * config = computed(() => this.configFactory.forSeries({ + * allowSelection: true, + * actionables: this.customActions + * })); + */ +@Injectable({ providedIn: 'root' }) +export class CardConfigFactory { + private readonly imageService = inject(ImageService); + private readonly readerService = inject(ReaderService); + private readonly actionFactory = inject(ActionFactoryService); + private readonly downloadService = inject(DownloadService); + private readonly router = inject(Router); + private readonly relationshipPipe = new RelationshipPipe(); + + /** + * Creates configuration for Series cards + */ + forSeries( + params?: ConfigCardFactoryActionableParameters + ): ActionableCardConfiguration { + const defaults: ActionableCardConfiguration = { + allowSelection: false, + selectionType: 'series', + suppressArchiveWarning: false, + + coverFunc: (s) => this.imageService.getSeriesCoverImage(s.id), + titleFunc: (s) => s.name, + titleRouteFunc: (s) => `/library/${s.libraryId}/series/${s.id}`, + metaTitleFunc: (s, wrapper) => { + const seriesWrapper = wrapper as SeriesCardEntity; + if (seriesWrapper.relation) { + return this.relationshipPipe.transform(seriesWrapper.relation); + } + return s.localizedName || s.name; + }, + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + tooltipFunc: (s) => s.name, + progressFunc: (s) => ({ pages: s.pages, pagesRead: s.pagesRead }), + + formatBadgeFunc: (s) => s.format, + countFunc: () => 0, + showErrorFunc: (s) => s.pages === 0, + ariaLabelFunc: (s) => s.name, + + actionableFunc: (s) => this.actionFactory.getSeriesActions(), + readFunc: (s) => this.readerService.readSeries(s, false), + clickFunc: (s) => this.router.navigate(['library', s.libraryId, 'series', s.id]), + + downloadObservableFunc: (s) => this.downloadService.activeDownloads$.pipe( + map(events => this.downloadService.mapToEntityType(events, s)) + ), + + progressUpdateStrategy: { + getMatchCriteria: (s) => ({ seriesId: s.id }), + // Series cards don't contain chapter/volume details + // Signal that parent needs to refetch + applyUpdate: () => null + } + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + forRelationship( + params?: ConfigCardFactoryBaseParameters + ): BaseCardConfiguration { + const defaults: BaseCardConfiguration = { + allowSelection: false, + selectionType: 'series', + suppressArchiveWarning: false, + + coverFunc: (s) => this.imageService.getSeriesCoverImage(s.series.id), + titleFunc: (s) => s.series.name, + titleRouteFunc: (s) => `/library/${s.series.libraryId}/series/${s.series.id}`, + metaTitleFunc: (s, wrapper) => { + const seriesWrapper = wrapper as RelatedSeriesCardEntity; + if (seriesWrapper.data.relation) { + return this.relationshipPipe.transform(seriesWrapper.data.relation); + } + return s.series.localizedName || s.series.name; + }, + tooltipFunc: (s) => s.series.name, + progressFunc: (s) => ({ pages: s.series.pages, pagesRead: s.series.pagesRead }), + + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + + formatBadgeFunc: (s) => s.series.format, + countFunc: () => 0, + showErrorFunc: (s) => s.series.pages === 0, + ariaLabelFunc: (s) => s.series.name, + + readFunc: (s) => this.readerService.readSeries(s.series, false), + clickFunc: (s) => this.router.navigate(['library', s.series.libraryId, 'series', s.series.id]), + + downloadObservableFunc: (s) => this.downloadService.activeDownloads$.pipe( + map(events => this.downloadService.mapToEntityType(events, s.series)) + ) + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + forBookmark( + params?: ConfigCardFactoryActionableParameters + ): ActionableCardConfiguration { + const defaults: ActionableCardConfiguration = { + allowSelection: true, + selectionType: 'bookmark', + suppressArchiveWarning: true, + + coverFunc: (s) => this.imageService.getSeriesCoverImage(s.series!.id), + titleFunc: (s) => s.series!.name, + titleRouteFunc: (s) => `/library/${s.series!.libraryId}/series/${s.seriesId}}`, + metaTitleFunc: (s, wrapper) => s.series!.name, + tooltipFunc: (s) => s.series!.name, + progressFunc: (s) => ({ pages: s.series!.pages, pagesRead: s.series!.pagesRead }), + + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + + formatBadgeFunc: (s) => s.series!.format, + countFunc: () => 0, + showErrorFunc: (s) => false, + ariaLabelFunc: (s) => s.series!.name, + titleRouteParamsFunc: (s) => {return { bookmarkMode: true }}, + + actionableFunc: (s) => this.actionFactory.getBookmarkActions(() => ({seriesId: s.series!.id, libraryId: s.series!.libraryId, seriesName: s.series!.name}), params?.shouldRenderAction), + + readFunc: (s) => this.router.navigate(['library', s.series!.libraryId, 'series', s.seriesId, 'manga', s.chapterId], {queryParams: {incognitoMode: false, bookmarkMode: true}}), + clickFunc: (s) => this.router.navigate(['library', s.series!.libraryId, 'series', s.seriesId, 'manga', s.chapterId], {queryParams: {incognitoMode: false, bookmarkMode: true}}), + + downloadObservableFunc: (s) => this.downloadService.activeDownloads$.pipe( + map(events => this.downloadService.mapToEntityType(events, s)) + ) + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + + /** + * Creates configuration for Chapter cards + */ + forChapter(params: ConfigCardFactoryChapterVolumeParameters): ActionableCardConfiguration { + const defaults: ActionableCardConfiguration = { + allowSelection: false, + selectionType: 'chapter', + suppressArchiveWarning: false, + + coverFunc: (c) => this.imageService.getChapterCoverImage(c.id), + titleFunc: (c) => c.titleName || c.title || c.range, + titleRouteFunc: (c) => `/library/${params.libraryId}/series/${params.seriesId}/chapter/${c.id}`, + metaTitleFunc: (c, wrapper) => { + if (c.isSpecial) { + return c.title || c.range; + } + return c.titleName || ''; + }, + tooltipFunc: (c) => c.titleName || c.title || (c.range === (LooseLeafOrDefaultNumber + '') ? '' : c.range), + progressFunc: (c) => ({ pages: c.pages, pagesRead: c.pagesRead }), + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + + formatBadgeFunc: () => null, + countFunc: (c) => c.files?.length > 1 && c.files[0].format !== MangaFormat.IMAGE ? c.files.length : 0, + showErrorFunc: (c) => { + const wrapper = params?.overrides as unknown as ChapterCardEntity; + return c.pages === 0 && !wrapper?.suppressArchiveWarning; + }, + ariaLabelFunc: (c) => c.titleName || c.title || (c.range === (LooseLeafOrDefaultNumber + '') ? '' : c.range), + + actionableFunc: (c) => this.actionFactory.getChapterActions(params.seriesId, params.libraryId, params.libraryType, params?.shouldRenderAction), + readFunc: (c) => this.readerService.readChapter(params.libraryId, params.seriesId, c, false), + clickFunc: (c) => this.router.navigate(['library', params.libraryId, 'series', params.seriesId, 'chapter', c.id]), + + downloadObservableFunc: (c) => this.downloadService.activeDownloads$.pipe( + map(events => this.downloadService.mapToEntityType(events, c)) + ), + + progressUpdateStrategy: { + getMatchCriteria: (c) => ({ chapterId: c.id }), + applyUpdate: (c, event) => ({ + ...c, + pagesRead: event.pagesRead + }) + } + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + /** + * Creates configuration for Volume cards + */ + forVolume( + params: ConfigCardFactoryChapterVolumeParameters + ): ActionableCardConfiguration { + const defaults: ActionableCardConfiguration = { + allowSelection: true, + selectionType: 'volume', + suppressArchiveWarning: false, + + coverFunc: (v) => this.imageService.getVolumeCoverImage(v.id), + titleFunc: (v) => v.name, + titleRouteFunc: (v) => `/library/${params.libraryId}/series/${params.seriesId}/volume/${v.id}`, + metaTitleFunc: (v) => { + if (params.libraryType === LibraryType.Images) return ''; + if ([LibraryType.LightNovel || LibraryType.Book].includes(params.libraryType)) { + return v.name; + } + if (v.hasOwnProperty('chapters') && v.chapters.length > 0 && v.chapters[0].titleName) { + v.chapters[0].titleName + } + + return v.name; + }, + tooltipFunc: (v) => v.name, + progressFunc: (v) => ({ pages: v.pages, pagesRead: v.pagesRead }), + + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + + formatBadgeFunc: () => null, + // Show file count if there are duplicate files for volume, not just chapter count + countFunc: (v) => (v?.chapters || []) + .filter(c => c.minNumber === LooseLeafOrDefaultNumber) + .flatMap(c => c.files) + .length, + showErrorFunc: (v) => v.pages === 0, + ariaLabelFunc: (v) => v.name, + + actionableFunc: (v) => this.actionFactory.getVolumeActions(params.seriesId, params.libraryId, params.libraryType, params?.shouldRenderAction), + readFunc: (v) => { + this.readerService.readVolume(params.libraryId, params.seriesId, v, false); + }, + + downloadObservableFunc: (v) => this.downloadService.activeDownloads$.pipe( + map(events => this.downloadService.mapToEntityType(events, v)) + ), + + progressUpdateStrategy: { + getMatchCriteria: (v) => ({volumeId: v.id}), + applyUpdate: (v, event) => { + // Find and update the specific chapter + const chapterIndex = v.chapters.findIndex(c => c.id === event.chapterId); + if (chapterIndex === -1) return v; // Chapter not in this volume + + const updatedChapters = [...v.chapters]; + updatedChapters[chapterIndex] = { + ...updatedChapters[chapterIndex], + pagesRead: event.pagesRead + }; + + return { + ...v, + chapters: updatedChapters, + pagesRead: updatedChapters.reduce((sum, c) => sum + c.pagesRead, 0) + }; + } + } + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + /** + * Creates configuration for Collection cards + */ + forCollection(params?: ConfigCardFactoryActionableParameters): ActionableCardConfiguration { + const defaults: ActionableCardConfiguration = { + allowSelection: true, + selectionType: 'collection', + suppressArchiveWarning: true, + + coverFunc: (c) => this.imageService.getCollectionCoverImage(c.id), + titleFunc: (c) => c.title, + titleRouteFunc: (c) => `/collections/${c.id}`, + metaTitleFunc: (c) => '', + tooltipFunc: (c) => c.title, + progressFunc: () => ({ pages: 0, pagesRead: 0 }), + + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + + formatBadgeFunc: () => null, + countFunc: (c) => c.itemCount, + showErrorFunc: () => false, + ariaLabelFunc: (c) => c.title, + + actionableFunc: (c) => this.actionFactory.getCollectionTagActions(params?.shouldRenderAction), + readFunc: () => {}, + clickFunc: (c) => this.router.navigate(['collections', c.id]), + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + /** + * Creates configuration for ReadingList cards + */ + forReadingList(params?: ConfigCardFactoryActionableParameters): ActionableCardConfiguration { + const defaults: ActionableCardConfiguration = { + allowSelection: true, + selectionType: 'readingList', + suppressArchiveWarning: true, + + coverFunc: (r) => this.imageService.getReadingListCoverImage(r.id), + titleFunc: (r) => r.title, + titleRouteFunc: (r) => `/lists/${r.id}`, + metaTitleFunc: (r) => r.summary || '', + tooltipFunc: (r) => r.title, + progressFunc: () => ({ pages: 0, pagesRead: 0 }), + + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + + formatBadgeFunc: () => null, + countFunc: (r) => r.itemCount, + showErrorFunc: () => false, + ariaLabelFunc: (r) => r.title, + + actionableFunc: (r) => this.actionFactory.getReadingListActions(params?.shouldRenderAction), + readFunc: () => {}, + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + /** + * Creates configuration for Recently cards + */ + forRecentlyUpdated( + params?: ConfigCardFactoryBaseParameters + ): BaseCardConfiguration { + const defaults: BaseCardConfiguration = { + allowSelection: false, + selectionType: 'series', + suppressArchiveWarning: false, + + coverFunc: (s) => this.imageService.getSeriesCoverImage(s.seriesId), + titleFunc: (s) => s.seriesName, + titleRouteFunc: (s) => `/library/${s.libraryId}/series/${s.seriesId}`, + metaTitleFunc: (s, wrapper) => '', + titleTemplate: params?.titleRef, + metaTitleTemplate: params?.metaTitleRef, + tooltipFunc: (s) => s.seriesName, + progressFunc: (s) => ({ pages: 0, pagesRead: 0 }), + + formatBadgeFunc: (s) => s.format, + countFunc: (s) => s.count, + showErrorFunc: (s) => false, + ariaLabelFunc: (s) => s.seriesName, + + readFunc: (s) => null, + clickFunc: (s) => this.router.navigate(['library', s.libraryId, 'series', s.seriesId]), + }; + + return this.mergeConfig(defaults, params?.overrides); + } + + /** + * Merges default configuration with overrides. + * Overrides take precedence. + */ + private mergeConfig>( + defaults: C, + overrides?: Partial + ): C { + if (!overrides) return defaults; + return { ...defaults, ...overrides } as C; + } +} diff --git a/UI/Web/src/app/_services/collection-tag.service.ts b/UI/Web/src/app/_services/collection-tag.service.ts index 919c16c46..060d7dfff 100644 --- a/UI/Web/src/app/_services/collection-tag.service.ts +++ b/UI/Web/src/app/_services/collection-tag.service.ts @@ -4,9 +4,10 @@ import {environment} from 'src/environments/environment'; import {UserCollection} from '../_models/collection-tag'; import {TextResonse} from '../_types/text-response'; import {MalStack} from "../_models/collection/mal-stack"; -import {Action, ActionItem} from "./action-factory.service"; import {User} from "../_models/user/user"; -import {AccountService} from "./account.service"; +import {AccountService, Role} from "./account.service"; +import {ActionItem} from "../_models/actionables/action-item"; +import {Action} from "../_models/actionables/action"; @Injectable({ providedIn: 'root' @@ -18,6 +19,10 @@ export class CollectionTagService { baseUrl = environment.apiUrl; + getCollectionById(collectionId: number) { + return this.httpClient.get(this.baseUrl + 'collection/single?collectionId=' + collectionId); + } + allCollections(ownedOnly = false) { return this.httpClient.get(this.baseUrl + 'collection?ownedOnly=' + ownedOnly); } @@ -27,7 +32,7 @@ export class CollectionTagService { } updateTag(tag: UserCollection) { - return this.httpClient.post(this.baseUrl + 'collection/update', tag, TextResonse); + return this.httpClient.post(this.baseUrl + 'collection/update', tag); } promoteMultipleCollections(tags: Array, promoted: boolean) { @@ -59,7 +64,7 @@ export class CollectionTagService { } actionListFilter(action: ActionItem, user: User) { - const canPromote = this.accountService.hasAdminRole(user) || this.accountService.hasPromoteRole(user); + const canPromote = this.accountService.hasRole(user, Role.Admin) || this.accountService.hasRole(user, Role.Promote); const isPromotionAction = action.action == Action.Promote || action.action == Action.UnPromote; if (isPromotionAction) return canPromote; diff --git a/UI/Web/src/app/_services/colorscape.service.ts b/UI/Web/src/app/_services/colorscape.service.ts index 046f3d04f..96b35cc30 100644 --- a/UI/Web/src/app/_services/colorscape.service.ts +++ b/UI/Web/src/app/_services/colorscape.service.ts @@ -176,7 +176,7 @@ export class ColorscapeService { * @param complementaryColor */ setColorScape(primaryColor: string, complementaryColor: string | null = null) { - if (this.accountService.currentUserSignal()?.preferences?.colorScapeEnabled === false || this.getCssVariable('--colorscape-enabled') === 'false') { + if (this.accountService.currentUser()?.preferences?.colorScapeEnabled === false || this.getCssVariable('--colorscape-enabled') === 'false') { return; } diff --git a/UI/Web/src/app/_services/device.service.ts b/UI/Web/src/app/_services/device.service.ts index 445a4e328..61a70b86b 100644 --- a/UI/Web/src/app/_services/device.service.ts +++ b/UI/Web/src/app/_services/device.service.ts @@ -1,6 +1,6 @@ import {HttpClient} from '@angular/common/http'; -import {inject, Injectable} from '@angular/core'; -import {ReplaySubject, shareReplay, tap} from 'rxjs'; +import {DestroyRef, inject, Injectable, signal} from '@angular/core'; +import {EMPTY, switchMap, tap} from 'rxjs'; import {environment} from 'src/environments/environment'; import {Device} from '../_models/device/device'; import {DevicePlatform} from '../_models/device/device-platform'; @@ -8,35 +8,41 @@ import {TextResonse} from '../_types/text-response'; import {AccountService} from './account.service'; import {ClientDevice} from "../_models/client-device"; import {map} from "rxjs/operators"; -import {toSignal} from "@angular/core/rxjs-interop"; +import {takeUntilDestroyed, toObservable} from "@angular/core/rxjs-interop"; @Injectable({ providedIn: 'root' }) export class DeviceService { - private httpClient = inject(HttpClient); - private accountService = inject(AccountService); + private readonly httpClient = inject(HttpClient); + private readonly accountService = inject(AccountService); + private readonly destroyRef = inject(DestroyRef); - baseUrl = environment.apiUrl; + readonly baseUrl = environment.apiUrl; - private readonly devicesSource: ReplaySubject = new ReplaySubject(1); - public readonly devices$ = this.devicesSource.asObservable().pipe(shareReplay()); - public readonly devicesSignal = toSignal(this.devices$, { initialValue: [] }); + + + private readonly _devices = signal([]); + public readonly devices = this._devices.asReadonly(); + public readonly devices$ = toObservable(this.devices); constructor() { - // Ensure we are authenticated before we make an authenticated api call. - this.accountService.currentUser$.subscribe(user => { - if (!user) { - this.devicesSource.next([]); - return; - } - this.httpClient.get(this.baseUrl + 'device', {}).subscribe(data => { - this.devicesSource.next(data); - }); + // Ensure we are authenticated before we make an authenticated api call. + toObservable(this.accountService.currentUser).pipe( + switchMap(user => { + if (!user) { + this._devices.set([]); + return EMPTY; + } + return this.httpClient.get(this.baseUrl + 'device'); + }), + takeUntilDestroyed(this.destroyRef) + ).subscribe(data => { + if (data) this._devices.set([...data]) }); } @@ -54,7 +60,7 @@ export class DeviceService { getEmailDevices() { return this.httpClient.get(this.baseUrl + 'device', {}).pipe(tap(data => { - this.devicesSource.next(data); + this._devices.set([...data]); })); } diff --git a/UI/Web/src/app/_services/image.service.ts b/UI/Web/src/app/_services/image.service.ts index 63aa70a96..e5564c6ea 100644 --- a/UI/Web/src/app/_services/image.service.ts +++ b/UI/Web/src/app/_services/image.service.ts @@ -1,9 +1,8 @@ -import {DestroyRef, inject, Injectable} from '@angular/core'; +import {computed, DestroyRef, inject, Injectable} from '@angular/core'; import {environment} from 'src/environments/environment'; import {ThemeService} from './theme.service'; import {AccountService} from './account.service'; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; -import {ImageOnlyName} from "../_models/user/auth-key"; @Injectable({ providedIn: 'root' @@ -14,8 +13,8 @@ export class ImageService { private readonly destroyRef = inject(DestroyRef); baseUrl = environment.apiUrl; - apiKey: string = ''; - encodedKey: string = ''; + apiKey = this.accountService.currentUserImageAuthKey; + encodedKey = computed(() => encodeURIComponent(this.apiKey()!)); public placeholderImage = 'assets/images/image-placeholder.dark-min.png'; public errorImage = 'assets/images/error-placeholder2.dark-min.png'; public resetCoverImage = 'assets/images/image-reset-cover-min.png'; @@ -37,14 +36,6 @@ export class ImageService { this.noPersonImage = 'assets/images/error-person-missing.min.png'; } }); - - this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(user => { - if (user) { - // Get the image-only key from the auth keys - this.apiKey = user.authKeys.filter(k => k.name === ImageOnlyName)[0].key; - this.encodedKey = encodeURIComponent(this.apiKey); - } - }); } /** @@ -60,51 +51,51 @@ export class ImageService { } getPersonImage(personId: number) { - return `${this.baseUrl}image/person-cover?personId=${personId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/person-cover?personId=${personId}&apiKey=${this.encodedKey()}`; } getUserCoverImage(userId: number) { - return `${this.baseUrl}image/user-cover?userId=${userId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/user-cover?userId=${userId}&apiKey=${this.encodedKey()}`; } getLibraryCoverImage(libraryId: number) { - return `${this.baseUrl}image/library-cover?libraryId=${libraryId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/library-cover?libraryId=${libraryId}&apiKey=${this.encodedKey()}`; } getVolumeCoverImage(volumeId: number) { - return `${this.baseUrl}image/volume-cover?volumeId=${volumeId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/volume-cover?volumeId=${volumeId}&apiKey=${this.encodedKey()}`; } getSeriesCoverImage(seriesId: number) { - return `${this.baseUrl}image/series-cover?seriesId=${seriesId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/series-cover?seriesId=${seriesId}&apiKey=${this.encodedKey()}`; } getCollectionCoverImage(collectionTagId: number) { - return `${this.baseUrl}image/collection-cover?collectionTagId=${collectionTagId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/collection-cover?collectionTagId=${collectionTagId}&apiKey=${this.encodedKey()}`; } getReadingListCoverImage(readingListId: number) { - return `${this.baseUrl}image/readinglist-cover?readingListId=${readingListId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/readinglist-cover?readingListId=${readingListId}&apiKey=${this.encodedKey()}`; } getChapterCoverImage(chapterId: number) { - return `${this.baseUrl}image/chapter-cover?chapterId=${chapterId}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/chapter-cover?chapterId=${chapterId}&apiKey=${this.encodedKey()}`; } getBookmarkedImage(chapterId: number, pageNum: number, imageOffset: number = 0) { - return `${this.baseUrl}image/bookmark?chapterId=${chapterId}&apiKey=${this.encodedKey}&pageNum=${pageNum}&imageOffset=${imageOffset}`; + return `${this.baseUrl}image/bookmark?chapterId=${chapterId}&apiKey=${this.encodedKey()}&pageNum=${pageNum}&imageOffset=${imageOffset}`; } getWebLinkImage(url: string) { - return `${this.baseUrl}image/web-link?url=${encodeURIComponent(url)}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/web-link?url=${encodeURIComponent(url)}&apiKey=${this.encodedKey()}`; } getPublisherImage(name: string) { - return `${this.baseUrl}image/publisher?publisherName=${encodeURIComponent(name)}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/publisher?publisherName=${encodeURIComponent(name)}&apiKey=${this.encodedKey()}`; } getCoverUploadImage(filename: string) { - return `${this.baseUrl}image/cover-upload?filename=${encodeURIComponent(filename)}&apiKey=${this.encodedKey}`; + return `${this.baseUrl}image/cover-upload?filename=${encodeURIComponent(filename)}&apiKey=${this.encodedKey()}`; } updateErroredWebLinkImage(event: any) { diff --git a/UI/Web/src/app/_services/kavita-title.strategy.ts b/UI/Web/src/app/_services/kavita-title.strategy.ts new file mode 100644 index 000000000..db89e04e3 --- /dev/null +++ b/UI/Web/src/app/_services/kavita-title.strategy.ts @@ -0,0 +1,64 @@ +import {inject, Injectable} from '@angular/core'; +import {Title} from '@angular/platform-browser'; +import {RouterStateSnapshot, TitleStrategy} from '@angular/router'; +import {TranslocoService} from '@jsverse/transloco'; + +@Injectable({providedIn: 'root'}) +export class KavitaTitleStrategy extends TitleStrategy { + private readonly title = inject(Title); + private readonly translocoService = inject(TranslocoService); + + override updateTitle(routerState: RouterStateSnapshot): void { + // 1. Check for static route title (translation key) + const routeTitle = this.buildTitle(routerState); + if (routeTitle) { + this.setFormattedTitle(routeTitle); + return; + } + + // 2. Check for entity-based title from resolved data + const route = this.getDeepestRoute(routerState.root); + const titleField = route.data['titleField']; + if (titleField) { + const titleProp = route.data['titleProp'] || 'name'; + const titleSuffix = route.data['titleSuffix'] || ''; + const entity = this.findInRouteTree(route, titleField); + if (entity?.[titleProp]) { + this.title.setTitle(`Kavita: ${entity[titleProp]}${titleSuffix}`); + return; + } + } + + // 3. Fallback + this.title.setTitle('Kavita'); + } + + setFormattedTitle(pageTitle: string): void { + if (pageTitle.startsWith('title.')) { + pageTitle = this.translocoService.translate(pageTitle); + } + this.title.setTitle(`Kavita: ${pageTitle}`); + } + + setTranslatedTitle(key: string, params: Record): void { + this.title.setTitle(`Kavita: ${this.translocoService.translate(key, params)}`); + } + + private getDeepestRoute(route: RouterStateSnapshot['root']): RouterStateSnapshot['root'] { + while (route.firstChild) { + route = route.firstChild; + } + return route; + } + + private findInRouteTree(route: RouterStateSnapshot['root'], field: string): any { + let current: RouterStateSnapshot['root'] | null = route; + while (current) { + if (current.data[field]) { + return current.data[field]; + } + current = current.parent; + } + return null; + } +} diff --git a/UI/Web/src/app/_services/key-bind.service.ts b/UI/Web/src/app/_services/key-bind.service.ts index 215c50605..13b79c0d8 100644 --- a/UI/Web/src/app/_services/key-bind.service.ts +++ b/UI/Web/src/app/_services/key-bind.service.ts @@ -202,7 +202,7 @@ export class KeyBindService { * @private */ private readonly customKeyBinds = computed(() => { - const customKeyBinds = this.accountService.currentUserSignal()?.preferences.customKeyBinds ?? {}; + const customKeyBinds = this.accountService.currentUser()?.preferences.customKeyBinds ?? {}; return Object.fromEntries(Object.entries(customKeyBinds).filter(([target, _]) => { return DefaultKeyBinds[target as KeyBindTarget] !== undefined; // Filter out unused or old targets })) diff --git a/UI/Web/src/app/_services/library.service.ts b/UI/Web/src/app/_services/library.service.ts index ed0aebbad..d08a9ac29 100644 --- a/UI/Web/src/app/_services/library.service.ts +++ b/UI/Web/src/app/_services/library.service.ts @@ -1,5 +1,5 @@ import {HttpClient} from '@angular/common/http'; -import { DestroyRef, Injectable, inject } from '@angular/core'; +import {DestroyRef, inject, Injectable} from '@angular/core'; import {of} from 'rxjs'; import {filter, map, tap} from 'rxjs/operators'; import {environment} from 'src/environments/environment'; @@ -85,6 +85,10 @@ export class LibraryService { return this.httpClient.get(this.baseUrl + 'library/jump-bar?libraryId=' + libraryId); } + /** + * Admin-only + * @param libraryId + */ getLibrary(libraryId: number) { return this.httpClient.get(this.baseUrl + 'library?libraryId=' + libraryId); } @@ -122,7 +126,7 @@ export class LibraryService { } create(model: {name: string, type: number, folders: string[]}) { - return this.httpClient.post(this.baseUrl + 'library/create', model); + return this.httpClient.post(this.baseUrl + 'library/create', model); } delete(libraryId: number) { @@ -137,7 +141,7 @@ export class LibraryService { } update(model: {name: string, folders: string[], id: number}) { - return this.httpClient.post(this.baseUrl + 'library/update', model); + return this.httpClient.post(this.baseUrl + 'library/update', model); } getLibraryType(libraryId: number) { diff --git a/UI/Web/src/app/_services/metadata.service.ts b/UI/Web/src/app/_services/metadata.service.ts index 307c504bd..2a91e64c6 100644 --- a/UI/Web/src/app/_services/metadata.service.ts +++ b/UI/Web/src/app/_services/metadata.service.ts @@ -55,7 +55,7 @@ export class MetadataService { private readonly seriesService = inject(SeriesService) private readonly highlightSlots = computed(() => { - return this.accountService.currentUserSignal()?.preferences?.bookReaderHighlightSlots ?? []; + return this.accountService.currentUser()?.preferences?.bookReaderHighlightSlots ?? []; }); baseUrl = environment.apiUrl; @@ -180,9 +180,9 @@ export class MetadataService { createDefaultFilterStatement(entityType: ValidFilterEntity) { switch (entityType) { case "annotation": - const userId = this.accountService.currentUserSignal()?.id; + const userId = this.accountService.currentUser()?.id; if (userId) { - return this.createFilterStatement(AnnotationsFilterField.Owner, FilterComparison.Equal, `${this.accountService.currentUserSignal()!.id}`); + return this.createFilterStatement(AnnotationsFilterField.Owner, FilterComparison.Equal, `${this.accountService.currentUser()!.id}`); } return this.createFilterStatement(AnnotationsFilterField.Owner); case 'series': diff --git a/UI/Web/src/app/_services/modal.service.ts b/UI/Web/src/app/_services/modal.service.ts index d649a0de5..e7a66d0d1 100644 --- a/UI/Web/src/app/_services/modal.service.ts +++ b/UI/Web/src/app/_services/modal.service.ts @@ -1,6 +1,9 @@ -import {inject, Injectable, Type} from '@angular/core'; +import {ComponentRef, inject, Injectable, Type} from '@angular/core'; import {NgbModal, NgbModalOptions, NgbModalRef} from '@ng-bootstrap/ng-bootstrap'; +export interface TypedModalRef extends NgbModalRef { + setInput(key: K, value: unknown): void; +} @Injectable({ providedIn: 'root' @@ -9,21 +12,16 @@ export class ModalService { private modal = inject(NgbModal); - open(content: Type, options?: NgbModalOptions): [NgbModalRef, T] { - const modal = this.modal.open(content, options); - return [modal, modal.componentInstance as T] - } + /** * TODO: This is a hack to get the ComponentRef because NgbModalRef does not expose it. + * See https://github.com/ng-bootstrap/ng-bootstrap/issues/4688 */ + open(content: Type, options?: NgbModalOptions): TypedModalRef { + const ref = this.modal.open(content, options) as TypedModalRef; - hasOpenModals() { - return this.modal.hasOpenModals() - } + ref.setInput = (key: string, value: unknown) => { + const componentRef: ComponentRef = (ref as any)['_contentRef'].componentRef; + componentRef.setInput(key, value); + }; - get activeInstances() { - return this.modal.activeInstances + return ref; } - - dismissAll(reason?: any) { - this.modal.dismissAll(reason); - } - } diff --git a/UI/Web/src/app/_services/nav.service.ts b/UI/Web/src/app/_services/nav.service.ts index 32d813510..95716f3c8 100644 --- a/UI/Web/src/app/_services/nav.service.ts +++ b/UI/Web/src/app/_services/nav.service.ts @@ -1,6 +1,15 @@ import {DOCUMENT} from '@angular/common'; -import {DestroyRef, inject, Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, signal} from '@angular/core'; -import {filter, take} from 'rxjs'; +import { + DestroyRef, + effect, + inject, + Injectable, + Renderer2, + RendererFactory2, + RendererStyleFlags2, + signal +} from '@angular/core'; +import {filter} from 'rxjs'; import {HttpClient} from "@angular/common/http"; import {environment} from "../../environments/environment"; import {SideNavStream} from "../_models/sidenav/sidenav-stream"; @@ -10,7 +19,7 @@ import {map} from "rxjs/operators"; import {NavigationEnd, Router} from "@angular/router"; import {takeUntilDestroyed, toObservable} from "@angular/core/rxjs-interop"; import {WikiLink} from "../_models/wiki"; -import {AuthGuard} from "../_guards/auth.guard"; +import {AUTH_URL_KEY} from "../_guards/auth.guard"; /** * NavItem used to construct the dropdown or NavLinkModal on mobile @@ -120,15 +129,16 @@ export class NavService { constructor() { const rendererFactory = inject(RendererFactory2); - this.renderer = rendererFactory.createRenderer(null, null); + // To avoid flashing, let's check if we are authenticated before we show - this.accountService.currentUser$.pipe(take(1)).subscribe(u => { - if (u) { + effect(() => { + const user = this.accountService.currentUser(); + if (user) { this.showNavBar(); } - }); + }) const sideNavState = (localStorage.getItem(this.localStorageSideNavKey) === 'true') || false; this.sideNavCollapsed.set(sideNavState); @@ -204,12 +214,12 @@ export class NavService { this.showSideNav(); // Check if user came here from another url, else send to library route - const pageResume = localStorage.getItem(AuthGuard.urlKey); + const pageResume = localStorage.getItem(AUTH_URL_KEY); if (pageResume && pageResume !== '/login') { - localStorage.setItem(AuthGuard.urlKey, ''); + localStorage.setItem(AUTH_URL_KEY, ''); this.router.navigateByUrl(pageResume); } else { - localStorage.setItem(AuthGuard.urlKey, ''); + localStorage.setItem(AUTH_URL_KEY, ''); this.router.navigateByUrl('/home'); } } diff --git a/UI/Web/src/app/_services/reader.service.ts b/UI/Web/src/app/_services/reader.service.ts index 4983f6372..668d960d1 100644 --- a/UI/Web/src/app/_services/reader.service.ts +++ b/UI/Web/src/app/_services/reader.service.ts @@ -672,24 +672,22 @@ export class ReaderService { ).catch(err => console.error(err))); } - private handlePrompt(prompt: RereadPrompt, incognitoMode: boolean) { + private handlePrompt(prompt: RereadPrompt, incognitoMode: boolean) { if (incognitoMode) return of({prompt: prompt, result: RereadPromptResult.ReadIncognito}); if (!prompt.shouldPrompt) return of({prompt: prompt, result: RereadPromptResult.Continue}); - const [modal, component] = this.modalService.open(ListSelectModalComponent, { - centered: true, - }); + const ref = this.modalService.open>(ListSelectModalComponent); - component.showFooter.set(false); - component.title.set(translate('reread-modal.title')); + ref.componentInstance.showFooter.set(false); + ref.componentInstance.title.set(translate('reread-modal.title')); if (prompt.timePrompt) { - component.description.set(translate('reread-modal.description-time-passed', + ref.componentInstance.description.set(translate('reread-modal.description-time-passed', { days: prompt.daysSinceLastRead, name: prompt.chapterOnReread.label })); } else { - component.description.set(translate('reread-modal.description-full-read', { name: prompt.chapterOnReread.label })); + ref.componentInstance.description.set(translate('reread-modal.description-full-read', { name: prompt.chapterOnReread.label })); } const options = [ @@ -703,10 +701,10 @@ export class ReaderService { options.push({label: translate('reread-modal.cancel'), value: RereadPromptResult.Cancel}); - component.inputItems.set(options); + ref.setInput('inputItems', options); - return modal.closed.pipe( - takeUntil(modal.dismissed), + return ref.closed.pipe( + takeUntil(ref.dismissed), take(1), map(res => ({prompt: prompt, result: res as RereadPromptResult})), catchError(() => of({prompt: prompt, result: RereadPromptResult.Cancel})) diff --git a/UI/Web/src/app/_services/reading-list.service.ts b/UI/Web/src/app/_services/reading-list.service.ts index 1d778f143..f565b03e5 100644 --- a/UI/Web/src/app/_services/reading-list.service.ts +++ b/UI/Web/src/app/_services/reading-list.service.ts @@ -1,5 +1,5 @@ import {HttpClient, HttpParams} from '@angular/common/http'; -import { Injectable, inject } from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {map} from 'rxjs/operators'; import {environment} from 'src/environments/environment'; import {UtilityService} from '../shared/_services/utility.service'; @@ -8,7 +8,8 @@ import {PaginatedResult} from '../_models/pagination'; import {ReadingList, ReadingListCast, ReadingListInfo, ReadingListItem} from '../_models/reading-list'; import {CblImportSummary} from '../_models/reading-list/cbl/cbl-import-summary'; import {TextResonse} from '../_types/text-response'; -import {Action, ActionItem} from './action-factory.service'; +import {ActionItem} from "../_models/actionables/action-item"; +import {Action} from "../_models/actionables/action"; @Injectable({ providedIn: 'root' @@ -98,9 +99,6 @@ export class ReadingListService { if (isPromotionAction) return canPromote; return true; - - // if (readingList?.promoted && !isAdmin) return false; - // return true; } nameExists(name: string) { diff --git a/UI/Web/src/app/_services/recommendation.service.ts b/UI/Web/src/app/_services/recommendation.service.ts index 692d92a08..6aa81238f 100644 --- a/UI/Web/src/app/_services/recommendation.service.ts +++ b/UI/Web/src/app/_services/recommendation.service.ts @@ -1,10 +1,10 @@ -import { HttpClient, HttpParams } from '@angular/common/http'; -import { Injectable, inject } from '@angular/core'; -import { map } from 'rxjs'; -import { environment } from 'src/environments/environment'; -import { UtilityService } from '../shared/_services/utility.service'; -import { PaginatedResult } from '../_models/pagination'; -import { Series } from '../_models/series'; +import {HttpClient, HttpParams} from '@angular/common/http'; +import {inject, Injectable} from '@angular/core'; +import {map, Observable} from 'rxjs'; +import {environment} from 'src/environments/environment'; +import {UtilityService} from '../shared/_services/utility.service'; +import {PaginatedResult} from '../_models/pagination'; +import {Series} from '../_models/series'; @Injectable({ providedIn: 'root' @@ -48,6 +48,6 @@ export class RecommendationService { let params = new HttpParams(); params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage); return this.httpClient.get>(this.baseUrl + 'recommended/more-in?libraryId=' + libraryId + '&genreId=' + genreId, {observe: 'response', params}) - .pipe(map(response => this.utilityService.createPaginatedResult(response))); + .pipe(map(response => this.utilityService.createPaginatedResult(response))) as Observable>; } } diff --git a/UI/Web/src/app/_services/series.service.ts b/UI/Web/src/app/_services/series.service.ts index 9e2015c73..e87245173 100644 --- a/UI/Web/src/app/_services/series.service.ts +++ b/UI/Web/src/app/_services/series.service.ts @@ -100,7 +100,7 @@ export class SeriesService { } updateSeries(model: any) { - return this.httpClient.post(this.baseUrl + 'series/update', model); + return this.httpClient.post(this.baseUrl + 'series/update', model); } markRead(seriesId: number) { @@ -143,7 +143,8 @@ export class SeriesService { return this.httpClient.post(url, data, {observe: 'response', params}).pipe( map(response => { return this.utilityService.createPaginatedResult(response, new PaginatedResult()); - })); + }) + ); } isWantToRead(seriesId: number) { @@ -166,7 +167,8 @@ export class SeriesService { return this.httpClient.post(url, data, {observe: 'response', params}).pipe( map(response => { return this.utilityService.createPaginatedResult(response, new PaginatedResult()); - })); + }) + ); } diff --git a/UI/Web/src/app/_services/theme.service.ts b/UI/Web/src/app/_services/theme.service.ts index 9f924d481..a61fda15f 100644 --- a/UI/Web/src/app/_services/theme.service.ts +++ b/UI/Web/src/app/_services/theme.service.ts @@ -96,7 +96,7 @@ export class ThemeService { }); effect(() => { - const user = this.accountService.currentUserSignal(); + const user = this.accountService.currentUser(); if (user?.preferences && user?.preferences.theme) { this.setTheme(user.preferences.theme.name); } else { diff --git a/UI/Web/src/app/_services/version.service.ts b/UI/Web/src/app/_services/version.service.ts index 05239269d..a5121d49c 100644 --- a/UI/Web/src/app/_services/version.service.ts +++ b/UI/Web/src/app/_services/version.service.ts @@ -1,40 +1,48 @@ -import {inject, Injectable, OnDestroy} from '@angular/core'; +import {DestroyRef, inject, Injectable} from '@angular/core'; import {interval, Subscription, switchMap} from 'rxjs'; import {ServerService} from "./server.service"; import {AccountService} from "./account.service"; -import {filter, take} from "rxjs/operators"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; -import {NewUpdateModalComponent} from "../announcements/_components/new-update-modal/new-update-modal.component"; -import {OutOfDateModalComponent} from "../announcements/_components/out-of-date-modal/out-of-date-modal.component"; +import {filter, map, take, tap} from "rxjs/operators"; import {Router} from "@angular/router"; -import {OpdsName} from "../_models/user/auth-key"; +import { + VersionUpdateModalComponent +} from "../announcements/_components/version-update-modal/version-update-modal.component"; +import {versionNotifyModal, versionRefreshModal} from "../_models/modal/modal-options"; +import {UpdateVersionEvent} from "../_models/events/update-version-event"; +import {ModalService} from "./modal.service"; +import {takeUntilDestroyed, toObservable} from "@angular/core/rxjs-interop"; @Injectable({ providedIn: 'root' }) -export class VersionService implements OnDestroy{ +export class VersionService { private readonly serverService = inject(ServerService); private readonly accountService = inject(AccountService); - private readonly modalService = inject(NgbModal); + private readonly modalService = inject(ModalService); private readonly router = inject(Router); + private readonly destroyRef = inject(DestroyRef); public static readonly SERVER_VERSION_KEY = 'kavita--version'; public static readonly CLIENT_REFRESH_KEY = 'kavita--client-refresh-last-shown'; - public static readonly NEW_UPDATE_KEY = 'kavita--new-update-last-shown'; - public static readonly OUT_OF_BAND_KEY = 'kavita--out-of-band-last-shown'; + private static readonly DISMISS_KEY_PREFIX = 'kavita--update-dismiss-'; - // Notification intervals - private readonly CLIENT_REFRESH_INTERVAL = 0; // Show immediately (once) - private readonly NEW_UPDATE_INTERVAL = 7 * 24 * 60 * 60 * 1000; // 1 week in milliseconds - private readonly OUT_OF_BAND_INTERVAL = 30 * 24 * 60 * 60 * 1000; // 1 month in milliseconds - - // Check intervals private readonly VERSION_CHECK_INTERVAL = 30 * 60 * 1000; // 30 minutes - private readonly OUT_OF_DATE_CHECK_INTERVAL = 2 * 60 * 60 * 1000; // 2 hours - private readonly OUT_Of_BAND_AMOUNT = 3; // How many releases before we show "You're X releases out of date" + /** Threshold: above this count shows "out of date" instead of "update available" */ + private readonly OUT_OF_BAND_AMOUNT = 3; - // Routes where version update modals should not be shown + /** Backoff intervals indexed by dismiss count: [after 1st dismiss, after 2nd dismiss] */ + private readonly BACKOFF_INTERVALS = [ + 1 * 24 * 60 * 60 * 1000, // 1 day + 3 * 24 * 60 * 60 * 1000, // 3 days + 7 * 24 * 60 * 60 * 1000, // 1 week + 14 * 24 * 60 * 60 * 1000, // 2 weeks + 30 * 24 * 60 * 60 * 1000, // 1 month + ]; + /** After this many dismissals, Kavita will stop pestering the user */ + private readonly MAX_DISMISSALS = 5; + + /** Routes where version update modals should not be shown */ private readonly EXCLUDED_ROUTES = [ '/manga/', '/book/', @@ -44,208 +52,227 @@ export class VersionService implements OnDestroy{ private versionCheckSubscription?: Subscription; - private outOfDateCheckSubscription?: Subscription; private modalOpen = false; + /** Version fetched on initial page load — used to detect mid-session server updates */ + private loadedVersion: string | null = null; + /** Tracks which version the currently-open modal is for, so we can record dismissal on close */ + private activeModalVersion: string | null = null; constructor() { this.startInitialVersionCheck(); this.startVersionCheck(); - this.startOutOfDateCheck(); - } - - ngOnDestroy() { - this.versionCheckSubscription?.unsubscribe(); - this.outOfDateCheckSubscription?.unsubscribe(); } /** * Initial version check to ensure localStorage is populated on first load */ private startInitialVersionCheck(): void { - this.accountService.currentUser$ - .pipe( - filter(user => !!user), - take(1), - switchMap(user => this.serverService.getVersion(user!.authKeys.filter(k => k.name === OpdsName)[0].key)) - ) - .subscribe(serverVersion => { - const cachedVersion = localStorage.getItem(VersionService.SERVER_VERSION_KEY); - - // Always update localStorage on first load - localStorage.setItem(VersionService.SERVER_VERSION_KEY, serverVersion); - - console.log('Initial version check - Server version:', serverVersion, 'Cached version:', cachedVersion); - }); + toObservable(this.accountService.currentUserGenericApiKey).pipe( + filter((key): key is string => !!key), + take(1), + switchMap(key => this.serverService.getVersion(key)) + ).subscribe(serverVersion => { + this.loadedVersion = serverVersion; + localStorage.setItem(VersionService.SERVER_VERSION_KEY, serverVersion); + this.cleanupOldDismissals(serverVersion); + console.log('Initial version check - Server version:', serverVersion); + }); } + /** * Periodic check for server version to detect client refreshes and new updates */ private startVersionCheck(): void { - console.log('Starting version checker'); this.versionCheckSubscription = interval(this.VERSION_CHECK_INTERVAL) .pipe( - switchMap(() => this.accountService.currentUser$), - filter(user => !!user && !this.modalOpen), - switchMap(user => this.serverService.getVersion(user!.authKeys.filter(k => k.name === OpdsName)[0].key)), + map(() => this.accountService.currentUserGenericApiKey()), + filter((key): key is string => !!key && !this.modalOpen), + switchMap(key => this.serverService.getVersion(key)), filter(update => !!update), - ).subscribe(version => this.handleVersionUpdate(version)); - } - - /** - * Checks if the server is out of date compared to the latest release - */ - private startOutOfDateCheck() { - console.log('Starting out-of-date checker'); - this.outOfDateCheckSubscription = interval(this.OUT_OF_DATE_CHECK_INTERVAL) - .pipe( - switchMap(() => this.accountService.currentUser$), - filter(u => u !== undefined && this.accountService.hasAdminRole(u) && !this.modalOpen), - switchMap(_ => this.serverService.checkHowOutOfDate(true)), - filter(versionsOutOfDate => !isNaN(versionsOutOfDate) && versionsOutOfDate > this.OUT_Of_BAND_AMOUNT), - ) - .subscribe(versionsOutOfDate => this.handleOutOfDateNotification(versionsOutOfDate)); + tap(serverVersion => this.handleVersionCheck(serverVersion)), + takeUntilDestroyed(this.destroyRef) + ).subscribe(); } /** * Checks if the current route is in the excluded routes list */ - private isExcludedRoute(): boolean { + isExcludedRoute(): boolean { const currentUrl = this.router.url; return this.EXCLUDED_ROUTES.some(route => currentUrl.includes(route)); } /** - * Handles the version check response to determine if client refresh or new update notification is needed + * Given a server version string, determines whether to show a refresh modal + * (server updated mid-session) or check for available updates. */ - private handleVersionUpdate(serverVersion: string) { - if (this.modalOpen) return; + handleVersionCheck(serverVersion: string): void { + if (this.modalOpen || this.isExcludedRoute()) return; - // Validate if we are on a reader route and if so, suppress - if (this.isExcludedRoute()) { - console.log('Version update blocked due to user reading'); - return; - } + const isNewServerVersion = this.loadedVersion !== null && this.loadedVersion !== serverVersion; - const cachedVersion = localStorage.getItem(VersionService.SERVER_VERSION_KEY); - console.log('Server version:', serverVersion, 'Cached version:', cachedVersion); - - const isNewServerVersion = cachedVersion !== null && cachedVersion !== serverVersion; - - // Case 1: Client Refresh needed (server has updated since last client load) if (isNewServerVersion) { - this.showClientRefreshNotification(serverVersion); + // Server was updated mid-session — don't update loadedVersion so the + // refresh prompt persists until the user actually refreshes. + localStorage.setItem(VersionService.SERVER_VERSION_KEY, serverVersion); + this.serverService.getChangelog(1).subscribe(changelog => { + this.showRefreshModal(changelog[0]); + localStorage.setItem(VersionService.CLIENT_REFRESH_KEY, Date.now().toString()); + }); + } else { + this.handleUpdateCheck(); } - // Case 2: Check for new updates (for server admin) - else { - this.checkForNewUpdates(); - } - - // Always update the cached version - localStorage.setItem(VersionService.SERVER_VERSION_KEY, serverVersion); } /** - * Shows a notification that client refresh is needed due to server update + * Checks if the admin should be notified of a new update or that the server is significantly out of date. + * Single API call to checkHowOutOfDate determines which modal (if any) to show. */ - private showClientRefreshNotification(newVersion: string): void { - this.pauseChecks(); - - // Client refresh notifications should always show (once) - this.modalOpen = true; - - this.serverService.getChangelog(1).subscribe(changelog => { - const ref = this.modalService.open(NewUpdateModalComponent, { - size: 'lg', - keyboard: false, - backdrop: 'static' // Prevent closing by clicking outside - }); - - ref.componentInstance.version = newVersion; - ref.componentInstance.update = changelog[0]; - ref.componentInstance.requiresRefresh = true; - - // Update the last shown timestamp - localStorage.setItem(VersionService.CLIENT_REFRESH_KEY, Date.now().toString()); - - ref.closed.subscribe(_ => this.onModalClosed()); - ref.dismissed.subscribe(_ => this.onModalClosed()); + handleUpdateCheck(): void { + if (!this.accountService.hasAdminRole()) return; + this.serverService.checkHowOutOfDate().pipe( + filter(versionsOutOfDate => !isNaN(versionsOutOfDate) && versionsOutOfDate > 0), + ).subscribe(versionsOutOfDate => { + if (versionsOutOfDate > this.OUT_OF_BAND_AMOUNT) { + this.handleOutOfDate(versionsOutOfDate); + } else { + this.handleUpdateAvailable(versionsOutOfDate); + } }); } /** - * Checks for new server updates and shows notification if appropriate + * Given a versionsOutOfDate count (1–3), fetches changelog and shows the + * update-available modal. Backoff is applied in showUpdateModal. */ - private checkForNewUpdates(): void { - this.accountService.currentUser$ - .pipe( - take(1), - filter(user => user !== undefined && this.accountService.hasAdminRole(user)), - switchMap(_ => this.serverService.checkHowOutOfDate()), - filter(versionsOutOfDate => !isNaN(versionsOutOfDate) && versionsOutOfDate > 0 && versionsOutOfDate <= this.OUT_Of_BAND_AMOUNT) - ) - .subscribe(versionsOutOfDate => { - const lastShown = Number(localStorage.getItem(VersionService.NEW_UPDATE_KEY) || '0'); - const currentTime = Date.now(); - - // Show notification if it hasn't been shown in the last week - if (currentTime - lastShown >= this.NEW_UPDATE_INTERVAL) { - this.pauseChecks(); - this.modalOpen = true; - - this.serverService.getChangelog(1).subscribe(changelog => { - const ref = this.modalService.open(NewUpdateModalComponent, { size: 'lg' }); - ref.componentInstance.versionsOutOfDate = versionsOutOfDate; - ref.componentInstance.update = changelog[0]; - ref.componentInstance.requiresRefresh = false; - - // Update the last shown timestamp - localStorage.setItem(VersionService.NEW_UPDATE_KEY, currentTime.toString()); - - ref.closed.subscribe(_ => this.onModalClosed()); - ref.dismissed.subscribe(_ => this.onModalClosed()); - }); - } - }); + handleUpdateAvailable(versionsOutOfDate: number): void { + this.serverService.getChangelog(1).subscribe(changelog => { + this.showUpdateAvailableModal(changelog[0], versionsOutOfDate); + }); } /** - * Handles the notification for servers that are significantly out of date + * Given a versionsOutOfDate count (4+), shows the out-of-date modal. + * Backoff is applied in showUpdateModal. */ - private handleOutOfDateNotification(versionsOutOfDate: number): void { - const lastShown = Number(localStorage.getItem(VersionService.OUT_OF_BAND_KEY) || '0'); - const currentTime = Date.now(); + handleOutOfDate(versionsOutOfDate: number): void { + this.showOutOfDateModal(versionsOutOfDate); + } - // Show notification if it hasn't been shown in the last month - if (currentTime - lastShown >= this.OUT_OF_BAND_INTERVAL) { - this.pauseChecks(); - this.modalOpen = true; + /** + * Single entry point for opening version update modals. + * Prevents stacking — only one modal can be open at a time. + * For non-refresh modes, applies per-version backoff before opening. + */ + showUpdateModal(mode: 'refresh' | 'update-available' | 'out-of-date', data: { update?: UpdateVersionEvent | null, versionsOutOfDate?: number } = {}, force: boolean = false): void { + if (this.modalOpen) return; - const ref = this.modalService.open(OutOfDateModalComponent, { size: 'xl', fullscreen: 'md' }); - ref.componentInstance.versionsOutOfDate = versionsOutOfDate; + // Per-version backoff for dismissible modes (skipped for refresh and user-initiated actions) + if (mode !== 'refresh' && !force) { + const backoffVersion = this.getBackoffVersion(mode, data); + if (backoffVersion && !this.shouldShowNotification(backoffVersion)) return; + this.activeModalVersion = backoffVersion; + } - // Update the last shown timestamp - localStorage.setItem(VersionService.OUT_OF_BAND_KEY, currentTime.toString()); + this.pauseChecks(); + this.modalOpen = true; - ref.closed.subscribe(_ => this.onModalClosed()); - ref.dismissed.subscribe(_ => this.onModalClosed()); + const options = mode === 'refresh' ? versionRefreshModal() : versionNotifyModal(); + const ref = this.modalService.open(VersionUpdateModalComponent, options); + ref.setInput('mode', mode); + + if (data?.update != null) ref.setInput('update', data.update); + if (data?.versionsOutOfDate != null) ref.setInput('versionsOutOfDate', data.versionsOutOfDate); + + ref.closed.subscribe(_ => this.onModalClosed()); + ref.dismissed.subscribe(_ => this.onModalClosed()); + } + + /** + * Shows the refresh-required modal. The server was updated mid-session + * and the browser needs to reload to pick up new client assets. + */ + showRefreshModal(update: UpdateVersionEvent): void { + this.showUpdateModal('refresh', { update }); + } + + /** + * Shows the update-available modal. A newer version exists that the admin can download. + */ + showUpdateAvailableModal(update: UpdateVersionEvent, versionsOutOfDate: number = 1): void { + this.showUpdateModal('update-available', { update, versionsOutOfDate }); + } + + /** + * Shows the out-of-date warning modal. The server is significantly behind the latest release. + */ + showOutOfDateModal(versionsOutOfDate: number): void { + this.showUpdateModal('out-of-date', { versionsOutOfDate }); + } + + /** + * Determines the version string used for backoff tracking. + * update-available: the version available to update to. + * out-of-date: the current server version (resets when user updates). + */ + private getBackoffVersion(mode: string, data: { update?: UpdateVersionEvent | null }): string | null { + if (mode === 'update-available') return data.update?.updateVersion ?? null; + if (mode === 'out-of-date') return this.loadedVersion; + return null; + } + + /** + * Checks per-version dismissal history to determine if we should show the notification. + * Returns false if the user has dismissed enough times or too recently. + */ + shouldShowNotification(targetVersion: string): boolean { + const raw = localStorage.getItem(VersionService.DISMISS_KEY_PREFIX + targetVersion); + if (!raw) return true; + + const { count, lastDismissed } = JSON.parse(raw) as { count: number; lastDismissed: number }; + if (count >= this.MAX_DISMISSALS) return false; + + const interval = this.BACKOFF_INTERVALS[Math.min(count - 1, this.BACKOFF_INTERVALS.length - 1)]; + return Date.now() - lastDismissed >= interval; + } + + /** + * Records a dismissal for the given version, incrementing the count and updating the timestamp. + */ + recordDismissal(targetVersion: string): void { + const raw = localStorage.getItem(VersionService.DISMISS_KEY_PREFIX + targetVersion); + const current = raw ? JSON.parse(raw) as { count: number } : { count: 0 }; + localStorage.setItem(VersionService.DISMISS_KEY_PREFIX + targetVersion, JSON.stringify({ + count: current.count + 1, + lastDismissed: Date.now(), + })); + } + + /** + * Removes dismiss keys for versions other than the current server version. + * Prevents stale backoff data from carrying over after an update. + */ + private cleanupOldDismissals(currentVersion: string): void { + const keepKey = VersionService.DISMISS_KEY_PREFIX + currentVersion; + for (let i = localStorage.length - 1; i >= 0; i--) { + const key = localStorage.key(i); + if (key && key.startsWith(VersionService.DISMISS_KEY_PREFIX) && key !== keepKey) { + localStorage.removeItem(key); + } } } - /** - * Pauses all version checks while modals are open - */ private pauseChecks(): void { this.versionCheckSubscription?.unsubscribe(); - this.outOfDateCheckSubscription?.unsubscribe(); } - /** - * Resumes all checks when modals are closed - */ private onModalClosed(): void { + if (this.activeModalVersion) { + this.recordDismissal(this.activeModalVersion); + this.activeModalVersion = null; + } this.modalOpen = false; this.startVersionCheck(); - this.startOutOfDateCheck(); } } diff --git a/UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.html b/UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.html deleted file mode 100644 index e7ffdfe28..000000000 --- a/UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.html +++ /dev/null @@ -1,29 +0,0 @@ - -
-

- {{t('title')}} -

- -
-
- @if (currentLevel.length > 0) { - - } - -
- @for (action of currentItems; track action.title) { - @if (willRenderAction(action, user!)) { - - } - } -
-
- diff --git a/UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.ts b/UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.ts deleted file mode 100644 index 56d83ec6f..000000000 --- a/UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.ts +++ /dev/null @@ -1,122 +0,0 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - DestroyRef, - EventEmitter, - inject, - Input, - OnInit, - Output -} from '@angular/core'; -import {translate, TranslocoDirective} from "@jsverse/transloco"; -import {UtilityService} from "../../shared/_services/utility.service"; -import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; -import {Action, ActionableEntity, ActionItem} from "../../_services/action-factory.service"; -import {AccountService} from "../../_services/account.service"; -import {tap} from "rxjs"; -import {User} from "../../_models/user/user"; -import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; - -@Component({ - selector: 'app-actionable-modal', - imports: [ - TranslocoDirective - ], - templateUrl: './actionable-modal.component.html', - styleUrl: './actionable-modal.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ActionableModalComponent implements OnInit { - - protected readonly utilityService = inject(UtilityService); - protected readonly modal = inject(NgbActiveModal); - protected readonly accountService = inject(AccountService); - protected readonly cdRef = inject(ChangeDetectorRef); - protected readonly destroyRef = inject(DestroyRef); - - @Input() entity: ActionableEntity = null; - @Input() actions: ActionItem[] = []; - @Input() willRenderAction!: (action: ActionItem, user: User) => boolean; - @Input() shouldRenderSubMenu!: (action: ActionItem, dynamicList: null | Array) => boolean; - @Output() actionPerformed = new EventEmitter>(); - - currentLevel: string[] = []; - currentItems: ActionItem[] = []; - user!: User | undefined; - - ngOnInit() { - // Copy as the list may be shared between entities - const actionItems = this.actions.map(action => this.utilityService.copyActionItem(action)); - - // On Mobile, surface download - const otherActionIndex = actionItems.findIndex(i => i.action === Action.Submenu && i.title === 'others') - if (otherActionIndex >= 0) { - const downloadActionIndex = actionItems[otherActionIndex].children.findIndex(a => a.action === Action.Download); - - if (downloadActionIndex >= 0) { - const downloadAction = actionItems[otherActionIndex].children.splice(downloadActionIndex, 1)[0]; - actionItems.push(downloadAction); - - // Check if Other has any other children, else remove - if (actionItems[otherActionIndex].children.length === 0) { - actionItems.splice(otherActionIndex, 1); - } - } - } - - this.actions = actionItems; - this.currentItems = this.translateOptions(this.actions) - - this.accountService.currentUser$.pipe(tap(user => { - this.user = user; - this.cdRef.markForCheck(); - }), takeUntilDestroyed(this.destroyRef)).subscribe(); - } - - handleItemClick(item: ActionItem) { - if (item.children && item.children.length > 0) { - this.currentLevel.push(item.title); - - if (item.children.length === 1 && item.children[0].dynamicList) { - item.children[0].dynamicList.subscribe(dynamicItems => { - this.currentItems = dynamicItems.map(di => ({ - ...item, - children: [], // Required as dynamic list is only one deep - title: di.title, - _extra: di, - action: item.children[0].action // override action to be correct from child - })); - }); - } else { - this.currentItems = this.translateOptions(item.children); - } - } - else { - this.actionPerformed.emit(item); - this.modal.close(item); - } - this.cdRef.markForCheck(); - } - - handleBack() { - if (this.currentLevel.length > 0) { - this.currentLevel.pop(); - - let items = this.actions; - for (let level of this.currentLevel) { - items = items.find(item => item.title === level)?.children || []; - } - - this.currentItems = this.translateOptions(items); - this.cdRef.markForCheck(); - } - } - - translateOptions(opts: Array>) { - return opts.map(a => { - return {...a, title: translate('actionable.' + a.title)}; - }) - } - -} diff --git a/UI/Web/src/app/_single-module/activity-card/activity-card.component.html b/UI/Web/src/app/_single-module/activity-card/activity-card.component.html index 22de2af16..a223f76a5 100644 --- a/UI/Web/src/app/_single-module/activity-card/activity-card.component.html +++ b/UI/Web/src/app/_single-module/activity-card/activity-card.component.html @@ -47,7 +47,7 @@
-
+
diff --git a/UI/Web/src/app/_single-module/activity-card/activity-card.component.scss b/UI/Web/src/app/_single-module/activity-card/activity-card.component.scss index f5966c759..65c532281 100644 --- a/UI/Web/src/app/_single-module/activity-card/activity-card.component.scss +++ b/UI/Web/src/app/_single-module/activity-card/activity-card.component.scss @@ -3,14 +3,14 @@ .activity-card { background: var(--elevation-layer1-dark-solid); - border-radius: 8px; + border-radius: 0.5rem; overflow: hidden; - margin-bottom: 20px; + margin-bottom: 1.25rem; transition: transform 0.2s ease; &:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px var(--elevation-layer10-dark); + transform: translateY(-0.125rem); + box-shadow: 0 0.25rem 0.75rem var(--elevation-layer10-dark); } .activity-content { @@ -22,8 +22,8 @@ .cover-container { position: relative; flex-shrink: 0; - width: 200px; - height: 300px; + width: 12.5rem; + height: 18.75rem; .series-cover { width: 100%; @@ -33,20 +33,20 @@ .chapter-cover { position: absolute; - bottom: 8px; - right: 8px; - width: 60px; - height: 85px; + bottom: 0.5rem; + right: 0.5rem; + width: 3.75rem; + height: 5.3125rem; object-fit: cover; - border: 2px solid var(--elevation-layer1-dark-solid); - border-radius: 4px; - box-shadow: 0 2px 8px var(--elevation-layer11-dark); + border: 0.125rem solid var(--elevation-layer1-dark-solid); + border-radius: 0.25rem; + box-shadow: 0 0.125rem 0.5rem var(--elevation-layer11-dark); } } .activity-details { flex: 1; - padding: 16px; + padding: 1rem; display: flex; flex-direction: column; background: linear-gradient(to right, var(--elevation-layer11-dark), var(--elevation-layer1-dark-solid)); @@ -57,76 +57,76 @@ display: flex; justify-content: space-between; align-items: flex-start; - margin-bottom: 12px; + margin-bottom: 0.75rem; flex-wrap: wrap; - gap: 8px; + gap: 0.5rem; } .media-info { display: flex; flex-wrap: wrap; - gap: 6px; + gap: 0.375rem; align-items: center; } .platform-badge { background: var(--activity-card-client-platform-badge-bg-color) !important; - font-size: 11px; - padding: 4px 8px; + font-size: 0.6875rem; + padding: 0.25rem 0.5rem; font-weight: 600; } .device-badge { background: var(--activity-card-client-device-badge-bg-color); - font-size: 11px; - padding: 4px 8px; + font-size: 0.6875rem; + padding: 0.25rem 0.5rem; } .session-metadata { - margin-bottom: 12px; + margin-bottom: 0.75rem; .metadata-row { display: flex; - gap: 8px; - margin-bottom: 4px; - font-size: 12px; + gap: 0.5rem; + margin-bottom: 0.25rem; + font-size: 0.75rem; .label { color: var(--offwhite-text-color); text-transform: uppercase; font-weight: 600; - min-width: 80px; + min-width: 5rem; } } } .progress-container { - margin-bottom: 12px; + margin-bottom: 0.75rem; .progress { background: var(--progress-bg-color); - border-radius: 2px; + border-radius: 0.125rem; } .progress-time { display: flex; justify-content: flex-end; - margin-top: 4px; - font-size: 11px; + margin-top: 0.25rem; + font-size: 0.6875rem; color: var(--offwhite-text-color); } } .title-section { display: flex; - gap: 12px; + gap: 0.75rem; align-items: center; - margin-bottom: 12px; + margin-bottom: 0.75rem; margin-top: auto; .play-icon { - font-size: 24px; + font-size: 1.5rem; color: var(--primary-color); flex-shrink: 0; } @@ -138,7 +138,7 @@ .series-title { color: var(--primary-color); - font-size: 16px; + font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; @@ -147,7 +147,7 @@ .chapter-info { color: var(--offwhite-text-color); - font-size: 13px; + font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -158,12 +158,12 @@ display: flex; justify-content: flex-end; align-items: center; - padding-top: 8px; + padding-top: 0.5rem; border-top: 1px solid var(--offwhite-text-color); .username { color: var(--offwhite-text-color); - font-size: 13px; + font-size: 0.8125rem; font-weight: 500; } } @@ -173,21 +173,21 @@ @media (max-width: 768px) { .activity-card { .cover-container { - width: 120px; - height: 180px; + width: 7.5rem; + height: 11.25rem; .chapter-cover { - width: 45px; - height: 65px; + width: 2.8125rem; + height: 4.0625rem; } } .activity-details { - padding: 12px; + padding: 0.75rem; } .series-title { - font-size: 14px; + font-size: 0.875rem; } } } diff --git a/UI/Web/src/app/_single-module/annotations-tab/annotations-tab.component.html b/UI/Web/src/app/_single-module/annotations-tab/annotations-tab.component.html index 03982f436..a61c93964 100644 --- a/UI/Web/src/app/_single-module/annotations-tab/annotations-tab.component.html +++ b/UI/Web/src/app/_single-module/annotations-tab/annotations-tab.component.html @@ -2,7 +2,7 @@
@for(item of scroll.viewPortItems; let idx = $index; track item.id) { -
+
+
+

+ {{t('title')}} +

+ +
+
+ @if (currentLevel().length > 0) { + + } + +
+ @for (action of currentItems(); track action.title) { + + } +
+
+ diff --git a/UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.scss b/UI/Web/src/app/_single-module/card-actionables/_modals/actionable-modal/actionable-modal.component.scss similarity index 100% rename from UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.scss rename to UI/Web/src/app/_single-module/card-actionables/_modals/actionable-modal/actionable-modal.component.scss diff --git a/UI/Web/src/app/_single-module/card-actionables/_modals/actionable-modal/actionable-modal.component.ts b/UI/Web/src/app/_single-module/card-actionables/_modals/actionable-modal/actionable-modal.component.ts new file mode 100644 index 000000000..b905a80fe --- /dev/null +++ b/UI/Web/src/app/_single-module/card-actionables/_modals/actionable-modal/actionable-modal.component.ts @@ -0,0 +1,129 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + DestroyRef, + inject, + input, + OnInit, + signal, + output +} from '@angular/core'; +import {translate, TranslocoDirective} from "@jsverse/transloco"; +import {UtilityService} from "../../../../shared/_services/utility.service"; +import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; +import {AccountService} from "../../../../_services/account.service"; +import {Observable} from "rxjs"; +import {ActionableEntity} from "../../../../_services/action-factory.service"; +import {ActionItem} from "../../../../_models/actionables/action-item"; +import {Action} from "../../../../_models/actionables/action"; +import {ActionResult} from "../../../../_models/actionables/action-result"; + +@Component({ + selector: 'app-actionable-modal', + imports: [ + TranslocoDirective + ], + templateUrl: './actionable-modal.component.html', + styleUrl: './actionable-modal.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ActionableModalComponent implements OnInit { + + protected readonly utilityService = inject(UtilityService); + protected readonly modal = inject(NgbActiveModal); + protected readonly accountService = inject(AccountService); + protected readonly cdRef = inject(ChangeDetectorRef); + protected readonly destroyRef = inject(DestroyRef); + + + entity = input(null); + /** This assumes these are filtered actions */ + filteredActions = input[]>([]); + readonly actionPerformed = output | ActionResult>(); + + currentItems = signal[]>([]); + currentLevel = signal([]); + + ngOnInit() { + // Copy as the list may be shared between entities + const actionItems = this.surfaceDownloadAction( + this.filteredActions().map(a => this.utilityService.copyActionItem(a)) + ); + this.currentItems.set(this.translateOptions(actionItems)); + } + + handleItemClick(item: ActionItem) { + if (item.children?.length > 0) { + this.currentLevel.update(levels => [...levels, item.title]); + + if (item.children.length === 1 && item.children[0].dynamicList) { + item.children[0].dynamicList.subscribe(dynamicItems => { + this.currentItems.set(dynamicItems.map(di => ({ + ...item, + children: [], // Required as dynamic list is only one deep + title: di.title, + _extra: di, + action: item.children[0].action // override action to be correct from child + }))); + }); + } else { + this.currentItems.set(this.translateOptions(item.children)); + } + return; + } + + const result = item.callback(item, this.entity()); + + if (result && typeof (result as any).subscribe === 'function') { + (result as Observable>).subscribe(actionResult => { + this.actionPerformed.emit(actionResult); + this.modal.close(actionResult); + }); + return; + } + this.modal.close(item); + } + + handleBack() { + this.currentLevel.update(levels => { + const next = levels.slice(0, -1); + + let items = this.filteredActions().map(a => this.utilityService.copyActionItem(a)); + items = this.surfaceDownloadAction(items); + + for (const level of next) { + items = items.find(i => i.title === level)?.children || []; + } + + this.currentItems.set(this.translateOptions(items)); + return next; + }); + } + + translateOptions(opts: Array>) { + return opts.map(a => { + return {...a, title: translate('actionable.' + a.title)}; + }) + } + + /** + * On mobile, pull the Download action out of the "Others" submenu to top-level. + */ + private surfaceDownloadAction(items: ActionItem[]): ActionItem[] { + const otherIdx = items.findIndex(i => i.action === Action.Submenu && i.title === 'others'); + if (otherIdx < 0) return items; + + const dlIdx = items[otherIdx].children.findIndex(a => a.action === Action.Download); + if (dlIdx < 0) return items; + + const downloadAction = items[otherIdx].children.splice(dlIdx, 1)[0]; + items.push(downloadAction); + + if (items[otherIdx].children.length === 0) { + items.splice(otherIdx, 1); + } + + return items; + } +} diff --git a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.html b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.html index 386ce9414..1db8558d1 100644 --- a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.html +++ b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.html @@ -1,6 +1,6 @@ @let labelId = 'actions-' + labelBy(); - @if (actions().length > 0) { + @if (filteredActions().length > 0) { @if (breakpointService.isTabletOrBelow()) {
- +
@@ -26,11 +26,11 @@ @for(dynamicItem of dList; track dynamicItem.title) { } - } @else if (willRenderAction(action, this.currentUser()!)) { + } @else { } } @else { - @if (shouldRenderSubMenu(action, action.children?.[0].dynamicList | async) && hasRenderableChildren(action, this.currentUser()!)) { + @if (shouldRenderSubMenu(action, action.children?.[0].dynamicList | async)) {
('fa-ellipsis-v'); @@ -44,9 +56,18 @@ export class CardActionablesComponent implements OnDestroy { /** * This will only emit when the action is clicked and the entity is null. Otherwise, the entity callback handler will be invoked. */ - @Output() actionHandler = new EventEmitter>(); + readonly actionHandler = output>(); - currentUser = this.accountService.currentUserSignal; + filteredActions = computed(() => { + const entity = this.entity(); + const user = this.accountService.currentUser(); + const actions = this.actions(); + if (!user || !actions.length) return []; + + return filterActionTree(actions, entity, user, this.accountService); + }); + + currentUser = this.accountService.currentUser; submenu: {[key: string]: NgbDropdown} = {}; private closeTimeout: any = null; @@ -62,13 +83,9 @@ export class CardActionablesComponent implements OnDestroy { performAction(event: any, action: ActionItem) { this.preventEvent(event); - if (typeof action.callback === 'function') { - if (this.entity() === null) { - this.actionHandler.emit(action); - } else { - action.callback(action, this.entity()); - } - } + action.callback(action, this.entity()).subscribe(actionResult => { + this.actionHandler.emit(actionResult); + }); } /** @@ -77,7 +94,11 @@ export class CardActionablesComponent implements OnDestroy { * @param user */ willRenderAction(action: ActionItem, user: User) { - return (!action.requiredRoles?.length || this.accountService.hasAnyRole(user, action.requiredRoles)) && action.shouldRender(action, this.entity(), user); + const hasValidRole = !action.requiredRoles?.length || this.accountService.hasAnyRole(user, action.requiredRoles); + const shouldRenderFuncPasses = action.shouldRender(action, this.entity(), user); + //console.log('Action: ', action, 'has valid role: ', hasValidRole, ' and should render func passes: ', shouldRenderFuncPasses); + + return hasValidRole && shouldRenderFuncPasses; } shouldRenderSubMenu(action: ActionItem, dynamicList: null | Array) { @@ -119,19 +140,6 @@ export class CardActionablesComponent implements OnDestroy { } } - hasRenderableChildren(action: ActionItem, user: User): boolean { - if (!action.children || action.children.length === 0) return false; - - for (const child of action.children) { - const dynamicList = child.dynamicList; - if (dynamicList !== undefined) return true; // Dynamic list gets rendered if loaded - - if (this.willRenderAction(child, user)) return true; - if (child.children?.length && this.hasRenderableChildren(child, user)) return true; - } - return false; - } - performDynamicClick(event: any, action: ActionItem, dynamicItem: any) { action._extra = dynamicItem; this.performAction(event, action); @@ -140,13 +148,13 @@ export class CardActionablesComponent implements OnDestroy { openMobileActionableMenu(event: any) { this.preventEvent(event); - const ref = this.modalService.open(ActionableModalComponent, {fullscreen: true, centered: true}); - ref.componentInstance.entity = this.entity(); - ref.componentInstance.actions = this.actions(); - ref.componentInstance.willRenderAction = this.willRenderAction.bind(this); - ref.componentInstance.shouldRenderSubMenu = this.shouldRenderSubMenu.bind(this); - ref.componentInstance.actionPerformed.subscribe((action: ActionItem) => { - this.performAction(event, action); + // TODO: See if we can use a drawer instead + const ref = this.modalService.open(ActionableModalComponent); + ref.setInput('entity', this.entity()); + ref.setInput('filteredActions', this.filteredActions()); + + ref.componentInstance.actionPerformed.subscribe((actionOrResult: any) => { + this.actionHandler.emit(actionOrResult); }); } } diff --git a/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.html b/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.html index 780b4d1b3..4c91a0ccc 100644 --- a/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.html +++ b/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.html @@ -30,7 +30,7 @@
- +
diff --git a/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.ts b/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.ts index 25cbc5670..94b2c42b8 100644 --- a/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.ts +++ b/UI/Web/src/app/_single-module/client-device-card/client-device-card.component.ts @@ -12,7 +12,6 @@ import {UtcToLocalDatePipe} from "../../_pipes/utc-to-locale-date.pipe"; import {DefaultDatePipe} from "../../_pipes/default-date.pipe"; import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe"; import {CardActionablesComponent} from "../card-actionables/card-actionables.component"; -import {Action, ActionFactoryService, ActionItem} from "../../_services/action-factory.service"; import {SentenceCasePipe} from "../../_pipes/sentence-case.pipe"; import {DeviceService} from "../../_services/device.service"; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; @@ -20,6 +19,9 @@ import {DOCUMENT} from "@angular/common"; import {AccountService} from "../../_services/account.service"; import {User} from "../../_models/user/user"; import {Breakpoint, BreakpointService} from "../../_services/breakpoint.service"; +import {ActionFactoryService} from "../../_services/action-factory.service"; +import {ActionItem} from "../../_models/actionables/action-item"; +import {ActionResult} from "../../_models/actionables/action-result"; @Component({ selector: 'app-client-device-card', @@ -69,7 +71,7 @@ export class ClientDeviceCardComponent { }); currentUserId = computed(() => { - return this.accountService.currentUserSignal()?.id; + return this.accountService.currentUser()?.id; }); ipAddress = computed(() => { @@ -154,25 +156,23 @@ export class ClientDeviceCardComponent { constructor() { - const user = this.accountService.currentUserSignal(); - if (user && !this.accountService.hasReadOnlyRole(user)) { - this.actions.set(this.actionFactoryService.getClientDeviceActions(this.handleActionCallback.bind(this), this.shouldRenderAction.bind(this))); + if (!this.accountService.hasReadOnlyRole()) { + this.actions.set(this.actionFactoryService.getClientDeviceActions(this.shouldRenderAction.bind(this))); } } shouldRenderAction(action: ActionItem, entity: ClientDevice, user: User) { - const loggedInUser = this.accountService.currentUserSignal(); + const loggedInUser = this.accountService.currentUser(); return entity.ownerUserId === loggedInUser?.id; // Only a user can manipulate their own devices } - handleActionCallback(action: ActionItem, entity: ClientDevice) { - switch (action.action) { - case Action.Delete: - this.deleteDevice(); - break; - case Action.Edit: + + handleActionCallback(event: ActionResult) { + switch (event.effect) { + case 'update': + // We have purposely encoded Edit as an Update // The actionable modal needs some time to clean up if (this.breakpointService.activeBreakpoint() < Breakpoint.Tablet) { setTimeout(() => this.toggleEdit(), 100); @@ -180,6 +180,12 @@ export class ClientDeviceCardComponent { this.toggleEdit(); } break; + case 'remove': + this.deviceDeleted.emit(event.entity.id); + break; + case 'reload': + case 'none': + break; } } @@ -191,20 +197,8 @@ export class ClientDeviceCardComponent { }); } - deleteDevice() { - const id = this.clientDevice().id; - this.deviceService.deleteClientDevice(id).subscribe(successful => { - if (successful) { - this.deviceDeleted.emit(id); - } - }); - } - toggleEdit() { this.deviceForm.get('name')!.setValue(this.clientDevice().friendlyName); this.isEditMode.update(x => !x); } - - - } diff --git a/UI/Web/src/app/_single-module/cover-image/cover-image.component.html b/UI/Web/src/app/_single-module/cover-image/cover-image.component.html index ffffa9736..482e5f8cf 100644 --- a/UI/Web/src/app/_single-module/cover-image/cover-image.component.html +++ b/UI/Web/src/app/_single-module/cover-image/cover-image.component.html @@ -7,7 +7,7 @@
- +
diff --git a/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss b/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss index a8071c571..848c092a6 100644 --- a/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss +++ b/UI/Web/src/app/_single-module/cover-image/cover-image.component.scss @@ -1,10 +1,10 @@ .overlay-information { position: relative; - top: -364px; - height: 364px; + top: -22.75rem; + height: 22.75rem; transition: all 0.2s; - border-top-left-radius: 4px; - border-top-right-radius: 4px; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; &:hover { cursor: pointer; @@ -17,9 +17,9 @@ .overlay-information--centered { position: absolute; - border-radius: 15px; + border-radius: 0.9375rem; background-color: rgba(0, 0, 0, 0.7); - border-radius: 50px; + border-radius: 3.125rem; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -32,11 +32,11 @@ } div { - width: 60px; - height: 60px; + width: 3.75rem; + height: 3.75rem; i { font-size: 1.6rem; - line-height: 60px; + line-height: 3.75rem; width: 100%; } } @@ -46,12 +46,12 @@ .overlay-information { position: absolute; top: 0; - left: 12px; - width: calc(100% - 24px); + left: 0.75rem; + width: calc(100% - 1.5rem); height: 100%; transition: all 0.2s; - border-top-left-radius: 4px; - border-top-right-radius: 4px; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; &:hover { background-color: var(--card-overlay-hover-bg-color); @@ -64,9 +64,9 @@ .overlay-information--centered { position: absolute; - border-radius: 15px; + border-radius: 0.9375rem; background-color: rgba(0, 0, 0, 0.7); - border-radius: 50px; + border-radius: 3.125rem; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -82,18 +82,18 @@ .series { .overlay-information--centered { div { - height: 32px; - width: 32px; + height: 2rem; + width: 2rem; i { font-size: 1.4rem; - line-height: 32px; + line-height: 2rem; } } } } ::ng-deep .image-container app-image img { - border-radius: 4px 4px 0 0; + border-radius: 0.25rem 0.25rem 0 0; } .progress { @@ -118,8 +118,8 @@ .continue-from { background-color: var(--breadcrumb-bg-color); color: white; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; + border-bottom-left-radius: 0.3125rem; + border-bottom-right-radius: 0.3125rem; text-align: center; position: absolute; width: 100%; @@ -129,7 +129,7 @@ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; - padding: 0 10px 0 0; + padding: 0 0.625rem 0 0; } } diff --git a/UI/Web/src/app/_single-module/cover-image/cover-image.component.ts b/UI/Web/src/app/_single-module/cover-image/cover-image.component.ts index 2622d0f1c..ce3206793 100644 --- a/UI/Web/src/app/_single-module/cover-image/cover-image.component.ts +++ b/UI/Web/src/app/_single-module/cover-image/cover-image.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, EventEmitter, inject, input, Output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, input, output} from '@angular/core'; import {DecimalPipe, DOCUMENT} from "@angular/common"; import {TranslocoDirective} from "@jsverse/transloco"; import {ImageComponent} from "../../shared/image/image.component"; @@ -28,7 +28,7 @@ export class CoverImageComponent { coverImage = input.required(); entity = input.required(); continueTitle = input(''); - @Output() read = new EventEmitter(); + readonly read = output(); mobileSeriesImgBackground = getComputedStyle(this.document.documentElement) .getPropertyValue('--mobile-series-img-background').trim(); diff --git a/UI/Web/src/app/_single-module/details-tab/details-tab.component.html b/UI/Web/src/app/_single-module/details-tab/details-tab.component.html index c25449495..4ec1dd735 100644 --- a/UI/Web/src/app/_single-module/details-tab/details-tab.component.html +++ b/UI/Web/src/app/_single-module/details-tab/details-tab.component.html @@ -4,7 +4,7 @@ @let filePathsValue = filePaths(); @let filesValue = files(); - @if (accountService.isAdmin() && (filePathsValue.length > 0 || filesValue.length > 0)) { + @if (accountService.hasAdminRole() && (filePathsValue.length > 0 || filesValue.length > 0)) {

{{t(filesValue.length > 0 ? 'file-path-title' : 'folder-path-title')}}

@@ -24,8 +24,7 @@
} - @if (!suppressEmptyGenres || genres().length > 0) { - + @if (showGenres()) {

{{t('genres-title')}}

@@ -38,7 +37,7 @@
} - @if (!suppressEmptyTags || tags().length > 0) { + @if (showTags()) {

{{t('tags-title')}}

@@ -68,7 +67,7 @@
- + @@ -76,7 +75,7 @@
- + @@ -84,7 +83,7 @@
- + @@ -93,7 +92,7 @@
- + @@ -101,7 +100,7 @@
- + @@ -109,7 +108,7 @@
- + @@ -117,7 +116,7 @@
- + @@ -125,7 +124,7 @@
- + @@ -133,7 +132,7 @@
- + @@ -141,7 +140,7 @@
- + @@ -149,7 +148,7 @@
- + @@ -157,7 +156,7 @@
- + diff --git a/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts b/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts index b91553e7b..3fe82f5e4 100644 --- a/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts +++ b/UI/Web/src/app/_single-module/details-tab/details-tab.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, computed, inject, input, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core'; import {CarouselReelComponent} from "../../carousel/_components/carousel-reel/carousel-reel.component"; import {PersonBadgeComponent} from "../../shared/person-badge/person-badge.component"; import {TranslocoDirective} from "@jsverse/transloco"; @@ -41,12 +41,12 @@ export class DetailsTabComponent { protected readonly FilterField = FilterField; protected readonly MangaFormat = MangaFormat; - @Input({required: true}) metadata!: IHasCast; + metadata = input.required(); genres = input([]); tags = input([]); webLinks = input([]); - @Input() suppressEmptyGenres: boolean = false; - @Input() suppressEmptyTags: boolean = false; + suppressEmptyGenres = input(false); + suppressEmptyTags = input(false); filePaths = input([]); files = input([]); @@ -54,6 +54,9 @@ export class DetailsTabComponent { return this.genres().length > 0 || this.tags().length > 0 || this.webLinks().length > 0; }); + showTags = computed(() => !this.suppressEmptyTags() || this.tags().length > 0); + showGenres = computed(() => !this.suppressEmptyGenres() || this.genres().length > 0); + openGeneric(queryParamName: FilterField, filter: string | number) { if (queryParamName === FilterField.None) return; this.filterUtilityService.applyFilter(['all-series'], queryParamName, FilterComparison.Equal, `${filter}`).subscribe(); diff --git a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html index cdb49a7e6..c6f437239 100644 --- a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html +++ b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html @@ -9,10 +9,10 @@
    + orientation="{{breakpointService.isMobile() ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;"> - @if (user && accountService.hasAdminRole(user)) + @if (accountService.hasAdminRole()) {
  • {{t(TabID.General)}} @@ -161,7 +161,7 @@ - @if (user && accountService.hasAdminRole(user)) + @if (accountService.hasAdminRole()) {
  • {{t(TabID.Tags)}} @@ -332,7 +332,7 @@ - @if (user && accountService.hasAdminRole(user)) + @if (accountService.hasAdminRole()) {
  • {{t(TabID.People)}} @@ -523,7 +523,7 @@ - @if (user && accountService.hasAdminRole(user)) + @if (accountService.hasAdminRole()) {
  • {{t(TabID.CoverImage)}} @@ -624,7 +624,7 @@
} - @if (accountService.isAdmin$ | async) { + @if (accountService.hasAdminRole()) {
@@ -647,7 +647,7 @@ {{t(TabID.Tasks)}} @for(task of tasks; track task.action) { - @if (accountService.canInvokeAction(user, task.action)) { + @if (accountService.canCurrentUserInvokeAction(task.action)) {
diff --git a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts index 5ba192a62..dcc89da40 100644 --- a/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts +++ b/UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts @@ -1,7 +1,16 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit} from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + DestroyRef, + effect, + inject, + Input, + OnInit +} from '@angular/core'; import {UtilityService} from "../../shared/_services/utility.service"; import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms"; -import {AsyncPipe, NgClass, NgTemplateOutlet, TitleCasePipe} from "@angular/common"; +import {NgClass, NgTemplateOutlet, TitleCasePipe} from "@angular/common"; import {NgbActiveModal, NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet} from "@ng-bootstrap/ng-bootstrap"; import {TranslocoDirective} from "@jsverse/transloco"; import {AccountService} from "../../_services/account.service"; @@ -16,7 +25,6 @@ import {AgeRatingDto} from "../../_models/metadata/age-rating-dto"; import {ImageService} from "../../_services/image.service"; import {UploadService} from "../../_services/upload.service"; import {MetadataService} from "../../_services/metadata.service"; -import {Action, ActionFactoryService, ActionItem} from "../../_services/action-factory.service"; import {ActionService} from "../../_services/action.service"; import {DownloadService} from "../../shared/_services/download.service"; import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component"; @@ -37,8 +45,11 @@ import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe"; import {ReadTimePipe} from "../../_pipes/read-time.pipe"; import {ChapterService} from "../../_services/chapter.service"; import {AgeRating} from "../../_models/metadata/age-rating"; -import {User} from "../../_models/user/user"; import {BreakpointService} from "../../_services/breakpoint.service"; +import {ActionItem} from "../../_models/actionables/action-item"; +import {Action} from "../../_models/actionables/action"; +import {ActionFactoryService} from "../../_services/action-factory.service"; +import {modalDeleted, modalSaved} from "../../_models/modal/modal-result"; enum TabID { General = 'general-tab', @@ -50,14 +61,6 @@ enum TabID { Weblinks = 'weblinks-tab', // TODO: Weblinks are not implemented } -export interface EditChapterModalCloseResult { - success: boolean; - chapter: Chapter; - coverImageUpdate: boolean; - needsReload: boolean; - isDeleted: boolean; -} - const blackList = [Action.Edit, Action.IncognitoRead, Action.AddToReadingList]; @Component({ @@ -68,7 +71,6 @@ const blackList = [Action.Edit, Action.IncognitoRead, Action.AddToReadingList]; NgbNavContent, NgbNavLink, TranslocoDirective, - AsyncPipe, NgbNavOutlet, ReactiveFormsModule, NgbNavItem, @@ -127,20 +129,28 @@ export class EditChapterModalComponent implements OnInit { genres: Genre[] = []; ageRatings: Array = []; - tasks = this.actionFactoryService.getActionablesForSettingsPage(this.actionFactoryService.getChapterActions(this.runTask.bind(this)), blackList); + tasks = this.actionFactoryService.getActionablesForSettingsPage( + this.actionFactoryService.getChapterActions(this.seriesId, this.libraryId, this.libraryType), blackList); /** * A copy of the chapter from init. This is used to compare values for name fields to see if lock was modified */ initChapter!: Chapter; imageUrls: Array = []; size: number = 0; - user!: User; get WebLinks() { if (this.chapter.webLinks === '') return []; return this.chapter.webLinks.split(','); } + constructor() { + effect(() => { + if (!this.accountService.hasAdminRole()) { + this.activeId = TabID.Info; + this.cdRef.markForCheck(); + } + }); + } ngOnInit() { @@ -148,16 +158,6 @@ export class EditChapterModalComponent implements OnInit { this.imageUrls.push(this.imageService.getChapterCoverImage(this.chapter.id)); this.size = this.utilityService.asChapter(this.chapter).files.reduce((sum, v) => sum + v.bytes, 0); - this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef), tap(u => { - if (!u) return; - this.user = u; - - if (!this.accountService.hasAdminRole(this.user)) { - this.activeId = TabID.Info; - } - this.cdRef.markForCheck(); - - })).subscribe(); this.editForm.addControl('titleName', new FormControl(this.chapter.titleName, [])); this.editForm.addControl('sortOrder', new FormControl(Math.max(0, this.chapter.sortOrder), [Validators.required, Validators.min(0)])); @@ -262,7 +262,8 @@ export class EditChapterModalComponent implements OnInit { } concat(...apis).subscribe(results => { - this.modal.close({success: true, chapter: model, coverImageUpdate: selectedIndex > 0 || this.coverImageReset, needsReload: needsReload, isDeleted: false} as EditChapterModalCloseResult); + const needsCoverUpdate = selectedIndex > 0 || this.coverImageReset; + this.modal.close(modalSaved(model, needsCoverUpdate)); }); } @@ -291,7 +292,7 @@ export class EditChapterModalComponent implements OnInit { case Action.Delete: await this.actionService.deleteChapter(this.chapter.id, (b) => { if (!b) return; - this.modal.close({success: b, chapter: this.chapter, coverImageUpdate: false, needsReload: true, isDeleted: b} as EditChapterModalCloseResult); + this.modal.close(modalDeleted(this.chapter)); }); break; case Action.Download: diff --git a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html index 9fe4a34fe..1188040b2 100644 --- a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html +++ b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html @@ -6,7 +6,7 @@
-
    +
    • @@ -76,7 +76,7 @@
- @if (user && accountService.hasAdminRole(user)) { + @if (accountService.hasAdminRole()) { @for (file of files; track file.id) { @@ -92,7 +92,7 @@ - @if (user && accountService.hasAdminRole(user)) { + @if (accountService.hasAdminRole()) {
  • {{t(TabID.CoverImage)}} @@ -110,7 +110,7 @@ {{t(TabID.Tasks)}} @for(task of tasks; track task.action) { - @if (accountService.canInvokeAction(user, task.action)) { + @if (accountService.canCurrentUserInvokeAction(task.action)) {
    diff --git a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.ts b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.ts index f7466473e..a7c9ea86e 100644 --- a/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.ts +++ b/UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.ts @@ -12,7 +12,6 @@ import {DefaultDatePipe} from "../../_pipes/default-date.pipe"; import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe"; import {BytesPipe} from "../../_pipes/bytes.pipe"; import {ReadTimePipe} from "../../_pipes/read-time.pipe"; -import {Action, ActionFactoryService, ActionItem} from "../../_services/action-factory.service"; import {Volume} from "../../_models/volume"; import {UtilityService} from "../../shared/_services/utility.service"; import {ImageService} from "../../_services/image.service"; @@ -25,8 +24,11 @@ import {PersonRole} from "../../_models/metadata/person"; import {forkJoin} from "rxjs"; import {MangaFormat} from 'src/app/_models/manga-format'; import {MangaFile} from "../../_models/manga-file"; -import {User} from "../../_models/user/user"; import {BreakpointService} from "../../_services/breakpoint.service"; +import {ActionFactoryService} from "../../_services/action-factory.service"; +import {ActionItem} from "../../_models/actionables/action-item"; +import {Action} from "../../_models/actionables/action"; +import {modalDeleted, modalSaved} from "../../_models/modal/modal-result"; enum TabID { General = 'general-tab', @@ -36,15 +38,6 @@ enum TabID { Progress = 'progress-tab', } -export interface EditVolumeModalCloseResult { - success: boolean; - volume: Volume; - coverImageUpdate: boolean; - needsReload: boolean; - isDeleted: boolean; -} - -const blackList = [Action.Edit, Action.IncognitoRead, Action.AddToReadingList]; @Component({ selector: 'app-edit-volume-modal', @@ -98,10 +91,8 @@ export class EditVolumeModalComponent implements OnInit { editForm: FormGroup = new FormGroup({}); selectedCover: string = ''; coverImageReset = false; - user!: User; - - - tasks = this.actionFactoryService.getActionablesForSettingsPage(this.actionFactoryService.getVolumeActions(this.runTask.bind(this)), blackList); + + tasks = this.actionFactoryService.getActionablesForSettingsPage(this.actionFactoryService.getVolumeActions(this.seriesId, this.libraryId, this.libraryType), this.blacklist); /** * A copy of the chapter from init. This is used to compare values for name fields to see if lock was modified */ @@ -111,14 +102,14 @@ export class EditVolumeModalComponent implements OnInit { files: Array = []; constructor() { - this.accountService.currentUser$.subscribe(user => { - this.user = user!; - - if (!this.accountService.hasAdminRole(user!)) { - this.activeId = TabID.Info; - } + if (!this.accountService.hasAdminRole()) { + this.activeId = TabID.Info; this.cdRef.markForCheck(); - }); + } + } + + get blacklist() { + return [Action.Edit, Action.IncognitoRead, Action.AddToReadingList]; } @@ -147,7 +138,8 @@ export class EditVolumeModalComponent implements OnInit { } forkJoin(apis).subscribe(results => { - this.modal.close({success: true, volume: this.volume, coverImageUpdate: selectedIndex > 0 || this.coverImageReset, needsReload: false, isDeleted: false} as EditVolumeModalCloseResult); + const needsCoverUpdate = selectedIndex > 0 || this.coverImageReset; + this.modal.close(modalSaved(this.volume, needsCoverUpdate)); }); } @@ -169,7 +161,7 @@ export class EditVolumeModalComponent implements OnInit { case Action.Delete: await this.actionService.deleteVolume(this.volume.id, (b) => { if (!b) return; - this.modal.close({success: b, volume: this.volume, coverImageUpdate: false, needsReload: true, isDeleted: b} as EditVolumeModalCloseResult); + this.modal.close(modalDeleted(this.volume)); }); break; case Action.Download: diff --git a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.html b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.html index 586829841..7cc9992bb 100644 --- a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.html +++ b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.html @@ -2,7 +2,7 @@
    @@ -48,11 +48,11 @@
    @if (!formGroup.get('dontMatch')?.value) { - - @for(item of matches; track item.series.name) { + + @for(item of matches(); track item.series.name) { } @empty { - @if (!isLoading) { + @if (!isLoading()) {

    {{t('no-results')}}

    } } diff --git a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts index d096c91dc..75c4627da 100644 --- a/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts +++ b/UI/Web/src/app/_single-module/match-series-modal/match-series-modal.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, OnInit, signal} from '@angular/core'; import {Series} from "../../_models/series"; import {SeriesService} from "../../_services/series.service"; import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; @@ -10,8 +10,8 @@ import {ExternalSeriesMatch} from "../../_models/series-detail/external-series-m import {ToastrService} from "ngx-toastr"; import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component"; import {SettingSwitchComponent} from "../../settings/_components/setting-switch/setting-switch.component"; -import { ThemeService } from 'src/app/_services/theme.service'; -import { AsyncPipe } from '@angular/common'; +import {ThemeService} from 'src/app/_services/theme.service'; +import {AsyncPipe} from '@angular/common'; import {catchError, of, tap} from "rxjs"; @Component({ @@ -36,59 +36,56 @@ export class MatchSeriesModalComponent implements OnInit { private readonly toastr = inject(ToastrService); protected readonly themeService = inject(ThemeService); - @Input({required: true}) series!: Series; + series = input.required(); formGroup = new FormGroup({}); - matches: Array = []; - isLoading = true; + matches = signal([]); + isLoading = signal(true); ngOnInit() { this.formGroup.addControl('query', new FormControl('', [])); - this.formGroup.addControl('dontMatch', new FormControl(this.series?.dontMatch || false, [])); + this.formGroup.addControl('dontMatch', new FormControl(this.series().dontMatch || false, [])); this.search(); } search() { - this.isLoading = true; - this.cdRef.markForCheck(); + this.isLoading.set(true); const model: any = this.formGroup.value; - model.seriesId = this.series.id; + model.seriesId = this.series().id; if (model.dontMatch) { - this.isLoading = false; + this.isLoading.set(false); return; } this.seriesService.matchSeries(model).pipe( tap(results => { - this.isLoading = false; - this.matches = results; - this.cdRef.markForCheck(); + this.isLoading.set(false); + this.matches.set(results); }), catchError(() => { - this.isLoading = false; - this.cdRef.markForCheck(); + this.isLoading.set(false); return of([]); }) ).subscribe(); } close() { - this.modalService.close(false); + this.modalService.dismiss(); } save() { const model: any = this.formGroup.value; - model.seriesId = this.series.id; + model.seriesId = this.series().id; - const dontMatchChanged = this.series.dontMatch !== model.dontMatch; + const dontMatchChanged = this.series().dontMatch !== model.dontMatch; // We need to update the dontMatch status if (dontMatchChanged) { - this.seriesService.updateDontMatch(this.series.id, model.dontMatch).subscribe(_ => { + this.seriesService.updateDontMatch(this.series().id, model.dontMatch).subscribe(_ => { this.modalService.close(true); }); } else { @@ -102,7 +99,7 @@ export class MatchSeriesModalComponent implements OnInit { data.tags = data.tags || []; data.genres = data.genres || []; - this.seriesService.updateMatch(this.series.id, item.series).subscribe(_ => { + this.seriesService.updateMatch(this.series().id, item.series).subscribe(_ => { this.save(); }); } diff --git a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html index c0fdbbd55..336bf448c 100644 --- a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html +++ b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.html @@ -1,49 +1,50 @@ -
    +
    - @if (item.series.coverUrl) { - + @let coverUrl = item().series.coverUrl; + @if (coverUrl) { + }
    -
    {{item.series.name}} ({{item.matchRating | translocoPercent}})
    +
    {{item().series.name}} ({{item().matchRating | translocoPercent}})
    - @for(synm of item.series.synonyms; track synm; let last = $last) { + @for(synm of item().series.synonyms; track synm; let last = $last) { {{synm}} @if (!last) { , } }
    - @if (item.series.summary) { + @if (item().series.summary) { }
    - @if (isSelected) { + @if (isSelected()) {
    {{t('updating-metadata-status')}}
    } @else {
    - @if ((item.series.volumes || 0) > 0 || (item.series.chapters || 0) > 0) { - @if (item.series.plusMediaFormat === PlusMediaFormat.Comic) { - {{t('issue-count', {num: item.series.chapters})}} + @if ((item().series.volumes || 0) > 0 || (item().series.chapters || 0) > 0) { + @if (item().series.plusMediaFormat === PlusMediaFormat.Comic) { + {{t('issue-count', {num: item().series.chapters})}} } @else { - {{t('volume-count', {num: item.series.volumes})}} - {{t('chapter-count', {num: item.series.chapters})}} + {{t('volume-count', {num: item().series.volumes})}} + {{t('chapter-count', {num: item().series.chapters})}} } } @else { {{t('releasing')}} } - {{item.series.plusMediaFormat | plusMediaFormat}} + {{item().series.plusMediaFormat | plusMediaFormat}}
    } diff --git a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss index 5df806397..a6360d9c6 100644 --- a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss +++ b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.scss @@ -1,7 +1,7 @@ .search-result { img { - max-width: 100px; - min-width: 100px; + max-width: 6.25rem; + min-width: 6.25rem; } } .title { @@ -19,7 +19,7 @@ &.light { background-color: var(--elevation-layer6); } - border-radius: 15px; + border-radius: 0.9375rem; &:hover { &.dark { diff --git a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts index 9e3044884..ad57702f7 100644 --- a/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts +++ b/UI/Web/src/app/_single-module/match-series-result-item/match-series-result-item.component.ts @@ -1,12 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - EventEmitter, - inject, - Input, - Output -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input, output, signal} from '@angular/core'; import {ImageComponent} from "../../shared/image/image.component"; import {ExternalSeriesMatch} from "../../_models/series-detail/external-series-match"; import {TranslocoPercentPipe} from "@jsverse/transloco-locale"; @@ -32,20 +24,18 @@ import {PlusMediaFormat} from "../../_models/series-detail/external-series-detai }) export class MatchSeriesResultItemComponent { - private readonly cdRef = inject(ChangeDetectorRef); + item = input.required(); + isDarkMode = input(true); + selected = output(); - @Input({required: true}) item!: ExternalSeriesMatch; - @Input({required: true}) isDarkMode = true; - @Output() selected: EventEmitter = new EventEmitter(); - - isSelected = false; + isSelected = signal(false); selectItem() { - if (this.isSelected) return; + if (this.isSelected()) return; - this.isSelected = true; - this.cdRef.markForCheck(); - this.selected.emit(this.item); + this.isSelected.set(true); + + this.selected.emit(this.item()); } protected readonly PlusMediaFormat = PlusMediaFormat; diff --git a/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.html b/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.html index 4a7fe4f6d..fb67b8934 100644 --- a/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.html +++ b/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.html @@ -11,5 +11,5 @@ [hideOnError]="true" /> } @else { - + } diff --git a/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.scss b/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.scss index 8b1378917..ffe1ec588 100644 --- a/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.scss +++ b/UI/Web/src/app/_single-module/profile-icon/profile-icon.component.scss @@ -1 +1,3 @@ - +.profile-icon { + color: var(--body-text-color); +} diff --git a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html index b9a2e88a2..55f55d14d 100644 --- a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html +++ b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html @@ -1,34 +1,38 @@ -@if (publishers.length > 0) { +@let currentPublisherValue = currentPublisher(); +@let nextPublisherValue = nextPublisher(); + +@if (currentPublisherValue) {
    -
    +
    -
    -
    -
    -
    } diff --git a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss index 9f4486d16..686ef9bc0 100644 --- a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss +++ b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss @@ -15,18 +15,18 @@ // Animation code .publisher-wrapper { - perspective: 1000px; - height: 32px; + perspective: 62.5rem; + height: 2rem; background-color: var(--card-bg-color); - border-radius: 3px; - padding: 2px 5px; + border-radius: 0.1875rem; + padding: 0.125rem 0.3125rem; font-size: 0.8rem; vertical-align: middle; div { - min-height: 32px; - line-height: 32px; + min-height: 2rem; + line-height: 2rem; } } diff --git a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.ts b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.ts index fe54cdaa1..61f336fab 100644 --- a/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.ts +++ b/UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.ts @@ -1,21 +1,10 @@ -import { - AfterViewChecked, - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - inject, - Input, - OnDestroy, - OnInit -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, input, signal} from '@angular/core'; import {ImageComponent} from "../../shared/image/image.component"; import {FilterField} from "../../_models/metadata/v2/filter-field"; import {Person} from "../../_models/metadata/person"; import {ImageService} from "../../_services/image.service"; import {FilterComparison} from "../../_models/metadata/v2/filter-comparison"; import {FilterUtilitiesService} from "../../shared/_services/filter-utilities.service"; -import {Router} from "@angular/router"; const ANIMATION_TIME = 3000; @@ -28,58 +17,48 @@ const ANIMATION_TIME = 3000; styleUrl: './publisher-flipper.component.scss', changeDetection: ChangeDetectionStrategy.OnPush }) -export class PublisherFlipperComponent implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked { +export class PublisherFlipperComponent { protected readonly imageService = inject(ImageService); private readonly filterUtilityService = inject(FilterUtilitiesService); - private readonly cdRef = inject(ChangeDetectorRef); - private readonly router = inject(Router); + private readonly destroyRef = inject(DestroyRef); - @Input() publishers: Array = []; + publishers = input([]); - currentPublisher: Person | undefined = undefined; - nextPublisher: Person | undefined = undefined; + currentIndex = signal(0); + isFlipped = signal(false); - currentIndex = 0; - isFlipped = false; - private intervalId: any; + currentPublisher = computed(() => { + const publishers = this.publishers(); + if (publishers.length === 0) return undefined; + return publishers[this.currentIndex() % publishers.length]; + }); - ngOnInit() { - if (this.publishers.length > 0) { - this.currentPublisher = this.publishers[0]; - this.nextPublisher = this.publishers[1] || this.publishers[0]; - } - } + nextPublisher = computed(() => { + const publishers = this.publishers(); + if (publishers.length === 0) return undefined; + if (publishers.length === 1) return publishers[0]; + return publishers[(this.currentIndex() + 1) % publishers.length]; + }); - ngAfterViewInit() { - if (this.publishers.length > 1) { - this.startFlipping(); // Start flipping cycle once the view is initialized - } - } + constructor() { + // Start flipping when publishers has more than 1 item + effect(() => { + const publishers = this.publishers(); + if (publishers.length <= 1) return; - ngAfterViewChecked() { - // This lifecycle hook will be called after Angular performs change detection in each cycle - if (this.isFlipped) { - // Only update publishers after the flip is complete - this.currentIndex = (this.currentIndex + 1) % this.publishers.length; - this.currentPublisher = this.publishers[this.currentIndex]; - this.nextPublisher = this.publishers[(this.currentIndex + 1) % this.publishers.length]; - } - } + const intervalId = setInterval(() => { + this.isFlipped.update(v => !v); - ngOnDestroy() { - if (this.intervalId) { - clearInterval(this.intervalId); - } - } + // Advance index on every other toggle (when flipping back) + if (!this.isFlipped()) { + this.currentIndex.update(i => (i + 1) % publishers.length); + } + }, ANIMATION_TIME); - private startFlipping() { - this.intervalId = setInterval(() => { - // Toggle flip state, initiating the flip animation - this.isFlipped = !this.isFlipped; - this.cdRef.detectChanges(); // Explicitly detect changes to trigger re-render - }, ANIMATION_TIME); + this.destroyRef.onDestroy(() => clearInterval(intervalId)); + }); } openPublisher(filter: string | number) { diff --git a/UI/Web/src/app/_single-module/related-tab/related-tab.component.html b/UI/Web/src/app/_single-module/related-tab/related-tab.component.html index f1a1c99a7..f3469fc97 100644 --- a/UI/Web/src/app/_single-module/related-tab/related-tab.component.html +++ b/UI/Web/src/app/_single-module/related-tab/related-tab.component.html @@ -1,45 +1,49 @@
    - @if (relations.length > 0) { - - - + @if (relationEntities().length > 0) { + + + } - @if (collections.length > 0) { - - - + @if (collectionEntities().length > 0) { + + + + + + + + {{entity.data.title}} + + } - @if (readingLists.length > 0) { - - - + @if (readingListEntities().length > 0) { + + + + + {{entity.data.title}} + + } - @if (bookmarks.length > 0) { - - - + @if (bookmarks().length > 0) { + + + } diff --git a/UI/Web/src/app/_single-module/related-tab/related-tab.component.ts b/UI/Web/src/app/_single-module/related-tab/related-tab.component.ts index 8d8a767d5..a6c1507e7 100644 --- a/UI/Web/src/app/_single-module/related-tab/related-tab.component.ts +++ b/UI/Web/src/app/_single-module/related-tab/related-tab.component.ts @@ -1,54 +1,83 @@ -import {ChangeDetectionStrategy, Component, inject, Input, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core'; import {ReadingList} from "../../_models/reading-list"; -import {CardItemComponent} from "../../cards/card-item/card-item.component"; import {CarouselReelComponent} from "../../carousel/_components/carousel-reel/carousel-reel.component"; import {ImageService} from "../../_services/image.service"; -import {TranslocoDirective} from "@jsverse/transloco"; +import {translate, TranslocoDirective} from "@jsverse/transloco"; import {UserCollection} from "../../_models/collection-tag"; -import {Router} from "@angular/router"; -import {SeriesCardComponent} from "../../cards/series-card/series-card.component"; import {Series} from "../../_models/series"; import {RelationKind} from "../../_models/series-detail/relation-kind"; import {PageBookmark} from "../../_models/readers/page-bookmark"; +import {CardConfigFactory} from "../../_services/card-config-factory.service"; +import {EntityCardComponent} from "../../cards/entity-card/entity-card.component"; +import {CardEntityFactory} from "../../_models/card/card-entity"; +import {CollectionOwnerComponent} from "../../collections/_components/collection-owner/collection-owner.component"; +import {PromotedIconComponent} from "../../shared/_components/promoted-icon/promoted-icon.component"; export interface RelatedSeriesPair { series: Series; relation: RelationKind; } +/** + * Fires when a card on Related Tab is mutated or deleted + */ +export interface RelatedTabChangeEvent { + entity: 'bookmark' | 'collection' | 'readingList' | 'relation'; + /** + * Entity Id - Relation's will have the underlying seriesId + */ + id: number; +} + @Component({ - selector: 'app-related-tab', - imports: [ - CardItemComponent, - CarouselReelComponent, - TranslocoDirective, - SeriesCardComponent - ], - templateUrl: './related-tab.component.html', - styleUrl: './related-tab.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-related-tab', + imports: [ + CarouselReelComponent, + TranslocoDirective, + EntityCardComponent, + CollectionOwnerComponent, + PromotedIconComponent + ], + templateUrl: './related-tab.component.html', + styleUrl: './related-tab.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class RelatedTabComponent { protected readonly imageService = inject(ImageService); - protected readonly router = inject(Router); + private readonly cardConfigFactory = inject(CardConfigFactory); - @Input() readingLists: Array = []; - @Input() collections: Array = []; - @Input() relations: Array = []; - @Input() bookmarks: Array = []; - @Input() libraryId!: number; + readingLists = input([]); + readingListEntities = computed(() => this.readingLists().map(r => CardEntityFactory.readingList(r))); + readingListConfig = computed(() => this.cardConfigFactory.forReadingList({overrides: { + actionableFunc: () => [], + allowSelection: false + }})); - openReadingList(readingList: ReadingList) { - this.router.navigate(['lists', readingList.id]); - } + collections = input([]); + collectionEntities = computed(() => this.collections().map(c => CardEntityFactory.collection(c))); + collectionConfig = computed(() => this.cardConfigFactory.forCollection({overrides: {allowSelection: false}})) - openCollection(collection: UserCollection) { - this.router.navigate(['collections', collection.id]); - } - viewBookmark(bookmark: PageBookmark) { - this.router.navigate(['library', this.libraryId, 'series', bookmark.seriesId, 'manga', 0], {queryParams: {incognitoMode: false, bookmarkMode: true}}); - } + bookmarks = input([]); + bookmarkEntities = computed(() => this.bookmarks().map(b => CardEntityFactory.bookmark(b))); + bookmarkConfig = computed(() => { + return this.cardConfigFactory.forBookmark({ + overrides: { + titleFunc: (d) => translate('related-tab.bookmarks-title'), + coverFunc: (d) => this.imageService.getSeriesCoverImage(d.seriesId), + metaTitleFunc: d => '', + allowSelection: false + } + }); + }) + relations = input([]); + relationEntities = computed(() => this.relations().map(r => CardEntityFactory.related(r))); + relatedConfig = computed(() => this.cardConfigFactory.forRelationship()); + + /** Emits when an entity type is deleted and a full refresh is needed **/ + readonly reload = output(); + /** Emits when an entity's internal state is changed and it needs to be updated **/ + readonly dataChanged = output(); } diff --git a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.html b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.html index ddc78cbc8..8796fcd7d 100644 --- a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.html +++ b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.html @@ -2,22 +2,22 @@
    - @if (review.tagline) { -

    + @if (review().tagline) { +

    } -

    +

    - @if (review.siteUrl) { - + @if (review().siteUrl) { + {{t('go-to-review')}} } diff --git a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss index eedc6041c..487f6063a 100644 --- a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss +++ b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.scss @@ -1,11 +1,11 @@ .img-max-width { hr { - border: solid 2px rgba(var(--primary-color), 0.5) !important; + border: solid 0.125rem rgba(var(--primary-color), 0.5) !important; } img { max-width: 100%; - max-height: 800px; + max-height: 50rem; } h1 { diff --git a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts index 64813d2da..86e77b436 100644 --- a/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts +++ b/UI/Web/src/app/_single-module/review-card-modal/review-card-modal.component.ts @@ -1,10 +1,10 @@ import { - AfterViewInit, + afterNextRender, ChangeDetectionStrategy, Component, inject, - Input, - ViewChild, + input, + viewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; @@ -25,33 +25,32 @@ import {ProviderImagePipe} from "../../_pipes/provider-image.pipe"; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }) -export class ReviewCardModalComponent implements AfterViewInit { - private document = inject(DOCUMENT); +export class ReviewCardModalComponent { + private readonly document = inject(DOCUMENT); + private readonly modal = inject(NgbActiveModal); - private modal = inject(NgbActiveModal); + review = input.required(); + container = viewChild.required('container', { read: ViewContainerRef }); - @Input({required: true}) review!: UserReview; - @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef; + constructor() { + afterNextRender(() => { + const spoilers = this.document.querySelectorAll('span.spoiler'); + + for (let i = 0; i < spoilers.length; i++) { + const spoiler = spoilers[i]; + const componentRef = this.container().createComponent(SpoilerComponent, { + projectableNodes: [[document.createTextNode('')]] + }); + componentRef.setInput('html', spoiler.innerHTML); + if (spoiler.parentNode != null) { + spoiler.parentNode.replaceChild(componentRef.location.nativeElement, spoiler); + } + } + }); + } close() { - this.modal.close(); + this.modal.dismiss(); } - - ngAfterViewInit() { - const spoilers = this.document.querySelectorAll('span.spoiler'); - - for (let i = 0; i < spoilers.length; i++) { - const spoiler = spoilers[i]; - const componentRef = this.container.createComponent(SpoilerComponent, - {projectableNodes: [[document.createTextNode('')]]}); - componentRef.instance.html = spoiler.innerHTML; - if (spoiler.parentNode != null) { - spoiler.parentNode.replaceChild(componentRef.location.nativeElement, spoiler); - } - componentRef.instance.cdRef.markForCheck(); - } - } - - } diff --git a/UI/Web/src/app/_single-module/review-card/review-card.component.scss b/UI/Web/src/app/_single-module/review-card/review-card.component.scss index 7859ba11c..55db18022 100644 --- a/UI/Web/src/app/_single-module/review-card/review-card.component.scss +++ b/UI/Web/src/app/_single-module/review-card/review-card.component.scss @@ -1,20 +1,20 @@ .review-card { - max-width: 320px; - max-height: 130px; - height: 130px; - width: 320px; + max-width: 20rem; + max-height: 8.125rem; + height: 8.125rem; + width: 20rem; } .profile-image { font-size: 1.2rem; - padding: 20px; + padding: 1.25rem; } .my-review { position: absolute; z-index: 20; - top: 38px; - left: 38px; + top: 2.375rem; + left: 2.375rem; } .fa-star { @@ -22,14 +22,14 @@ } .card-text { - font-size: 14px; + font-size: 0.875rem; } .card-title { overflow: hidden; - width: 235px; + width: 14.6875rem; word-break: break-all; - height: 20px; + height: 1.25rem; } .card-text.no-images { @@ -42,14 +42,14 @@ } .card-footer { - font-size: 13px; + font-size: 0.8125rem; display: flex; - max-width: 319px; + max-width: 19.9375rem; justify-content: space-between; margin: 0 auto; & > * { - margin: 0 5px; + margin: 0 0.3125rem; display: inline-flex; } } @@ -57,6 +57,6 @@ .card-body { display: block; visibility: visible; - min-height: 93.5px; - max-height: 93.5px; + min-height: 5.8438rem; + max-height: 5.8438rem; } \ No newline at end of file diff --git a/UI/Web/src/app/_single-module/review-card/review-card.component.ts b/UI/Web/src/app/_single-module/review-card/review-card.component.ts index c94550fd4..707eb714b 100644 --- a/UI/Web/src/app/_single-module/review-card/review-card.component.ts +++ b/UI/Web/src/app/_single-module/review-card/review-card.component.ts @@ -1,7 +1,6 @@ -import {ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core'; import {NgOptimizedImage} from '@angular/common'; import {UserReview} from "../../_models/user-review"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; import {ReviewCardModalComponent} from "../review-card-modal/review-card-modal.component"; import {AccountService} from "../../_services/account.service"; import {ReviewModalCloseEvent, ReviewModalComponent} from "../review-modal/review-modal.component"; @@ -13,6 +12,7 @@ import {RatingAuthority} from "../../_models/rating"; import {ProfileIconComponent} from "../profile-icon/profile-icon.component"; import {RouterLink} from "@angular/router"; import {DefaultValuePipe} from "../../_pipes/default-value.pipe"; +import {ModalService} from "../../_services/modal.service"; @Component({ selector: 'app-review-card', @@ -22,27 +22,25 @@ import {DefaultValuePipe} from "../../_pipes/default-value.pipe"; changeDetection: ChangeDetectionStrategy.OnPush }) export class ReviewCardComponent { - private readonly modalService = inject(NgbModal); - + private readonly modalService = inject(ModalService); private readonly accountService = inject(AccountService); - protected readonly ScrobbleProvider = ScrobbleProvider; + review = input.required(); - @Output() refresh = new EventEmitter(); + readonly refresh = output(); isMyReview = computed(() => - this.review().username === this.accountService.currentUserSignal()?.username && !this.review().isExternal); + this.review().username === this.accountService.currentUser()?.username && !this.review().isExternal); showModal() { - let component; + let ref; if (this.isMyReview()) { - component = ReviewModalComponent; + ref = this.modalService.open(ReviewModalComponent); } else { - component = ReviewCardModalComponent; + ref = this.modalService.open(ReviewCardModalComponent); } - const ref = this.modalService.open(component, {size: 'lg', fullscreen: 'md'}); - ref.componentInstance.review = this.review(); + ref.setInput('review', this.review()); ref.closed.subscribe((res: ReviewModalCloseEvent | undefined) => { if (res) { this.refresh.emit(res); @@ -51,4 +49,5 @@ export class ReviewCardComponent { } protected readonly RatingAuthority = RatingAuthority; + protected readonly ScrobbleProvider = ScrobbleProvider; } diff --git a/UI/Web/src/app/_single-module/review-modal/review-modal.component.ts b/UI/Web/src/app/_single-module/review-modal/review-modal.component.ts index 4f49e15bd..56a444110 100644 --- a/UI/Web/src/app/_single-module/review-modal/review-modal.component.ts +++ b/UI/Web/src/app/_single-module/review-modal/review-modal.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input, OnInit} from '@angular/core'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {UserReview} from "../../_models/user-review"; @@ -11,8 +11,7 @@ import {ReviewService} from "../../_services/review.service"; export enum ReviewModalCloseAction { Create, Edit, - Delete, - Close + Delete } export interface ReviewModalCloseEvent { success: boolean, @@ -36,24 +35,24 @@ export class ReviewModalComponent implements OnInit { private readonly toastr = inject(ToastrService); protected readonly minLength = 5; - @Input({required: true}) review!: UserReview; + review = input.required(); reviewGroup!: FormGroup; ngOnInit(): void { this.reviewGroup = new FormGroup({ - reviewBody: new FormControl(this.review.body, [Validators.required, Validators.minLength(this.minLength)]), + reviewBody: new FormControl(this.review().body, [Validators.required, Validators.minLength(this.minLength)]), }); this.cdRef.markForCheck(); } close() { - this.modal.close({success: false, review: this.review, action: ReviewModalCloseAction.Close}); + this.modal.dismiss(); } async delete() { if (!await this.confirmService.confirm(translate('toasts.delete-review'))) return; - this.reviewService.deleteReview(this.review.seriesId, this.review.chapterId).subscribe(() => { + this.reviewService.deleteReview(this.review().seriesId, this.review().chapterId).subscribe(() => { this.toastr.success(translate('toasts.review-deleted')); this.modal.close({success: true, review: this.review, action: ReviewModalCloseAction.Delete}); }); @@ -65,7 +64,7 @@ export class ReviewModalComponent implements OnInit { return; } - this.reviewService.updateReview(this.review.seriesId, model.reviewBody, this.review.chapterId).subscribe(review => { + this.reviewService.updateReview(this.review().seriesId, model.reviewBody, this.review().chapterId).subscribe(review => { this.modal.close({success: true, review: review, action: ReviewModalCloseAction.Edit}); }); diff --git a/UI/Web/src/app/_single-module/reviews/reviews.component.html b/UI/Web/src/app/_single-module/reviews/reviews.component.html index b3766602c..062d5c72e 100644 --- a/UI/Web/src/app/_single-module/reviews/reviews.component.html +++ b/UI/Web/src/app/_single-module/reviews/reviews.component.html @@ -1,6 +1,6 @@
    - @@ -9,7 +9,7 @@
    - + diff --git a/UI/Web/src/app/_single-module/reviews/reviews.component.ts b/UI/Web/src/app/_single-module/reviews/reviews.component.ts index f9bc175f6..6dd00b88b 100644 --- a/UI/Web/src/app/_single-module/reviews/reviews.component.ts +++ b/UI/Web/src/app/_single-module/reviews/reviews.component.ts @@ -1,19 +1,17 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, model} from '@angular/core'; import {CarouselReelComponent} from "../../carousel/_components/carousel-reel/carousel-reel.component"; import {ReviewCardComponent} from "../review-card/review-card.component"; import {TranslocoDirective} from "@jsverse/transloco"; import {UserReview} from "../../_models/user-review"; -import {User} from "../../_models/user/user"; -import {AccountService} from "../../_services/account.service"; import { ReviewModalCloseAction, ReviewModalCloseEvent, ReviewModalComponent } from "../review-modal/review-modal.component"; -import {DefaultModalOptions} from "../../_models/default-modal-options"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; import {Series} from "../../_models/series"; import {Chapter} from "../../_models/chapter"; +import {ModalService} from "../../_services/modal.service"; +import {AccountService} from "../../_services/account.service"; @Component({ selector: 'app-reviews', @@ -29,75 +27,53 @@ import {Chapter} from "../../_models/chapter"; export class ReviewsComponent { private readonly accountService = inject(AccountService); - private readonly modalService = inject(NgbModal); - private readonly cdRef = inject(ChangeDetectorRef); + private readonly modalService = inject(ModalService); - @Input({required: true}) userReviews!: Array; - @Input({required: true}) plusReviews!: Array; - @Input({required: true}) series!: Series; - @Input() volumeId: number | undefined; - @Input() chapter: Chapter | undefined; + userReviews = model.required(); + plusReviews = input.required(); + series = input.required(); + volumeId = input(undefined); + chapter = input(undefined); - user: User | undefined = undefined; - - constructor() { - this.accountService.currentUser$.subscribe(user => { - if (user) { - this.user = user; - } - }); - } + myReviews = computed(() => this.userReviews().filter(r => r.username === this.accountService.currentUser()!.username && !r.isExternal)); openReviewModal() { - const userReview = this.getUserReviews(); + const userReview = this.myReviews(); - const modalRef = this.modalService.open(ReviewModalComponent, DefaultModalOptions); + const modalRef = this.modalService.open(ReviewModalComponent); if (userReview.length > 0) { - modalRef.componentInstance.review = userReview[0]; + modalRef.setInput('review', userReview[0]); } else { - modalRef.componentInstance.review = { - seriesId: this.series.id, - volumeId: this.volumeId, - chapterId: this.chapter?.id, + modalRef.setInput('review', { + seriesId: this.series().id, + volumeId: this.volumeId(), + chapterId: this.chapter()?.id, tagline: '', body: '' - }; + }); } modalRef.closed.subscribe((closeResult) => { this.updateOrDeleteReview(closeResult); }); - } updateOrDeleteReview(closeResult: ReviewModalCloseEvent) { - if (closeResult.action === ReviewModalCloseAction.Close) return; + const reviews = this.userReviews(); + const index = reviews.findIndex(r => r.username === closeResult.review!.username); - const index = this.userReviews.findIndex(r => r.username === closeResult.review!.username); if (closeResult.action === ReviewModalCloseAction.Edit) { - if (index === -1 ) { - this.userReviews = [closeResult.review, ...this.userReviews]; - this.cdRef.markForCheck(); - return; + if (index === -1) { + this.userReviews.set([closeResult.review!, ...reviews]); + } else { + this.userReviews.set(reviews.map((r, i) => i === index ? closeResult.review! : r)); } - this.userReviews[index] = closeResult.review; - this.cdRef.markForCheck(); return; } if (closeResult.action === ReviewModalCloseAction.Delete) { - this.userReviews = [...this.userReviews.filter(r => r.username !== closeResult.review!.username)]; - this.cdRef.markForCheck(); - return; + this.userReviews.set(reviews.filter(r => r.username !== closeResult.review!.username)); } } - - getUserReviews() { - if (!this.user) { - return []; - } - return this.userReviews.filter(r => r.username === this.user?.username && !r.isExternal); - } - } diff --git a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html index 750ebb104..b9c3667b1 100644 --- a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html +++ b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html @@ -1,46 +1,46 @@
    - {{name}} + {{name()}}
    - @if (CoverUrl; as coverUrl) { -
    - @if (coverUrl) { - - } +
    + @let cover = coverUrl(); + @if (cover) { + + } +
    + + @let externalSeriesValue = externalSeries(); + @let localSeriesValue = localSeries(); + + @if (externalSeriesValue) { + @if ((externalSeriesValue.volumeCount || 0) > 0 || (externalSeriesValue.chapterCount || 0) > 0) { +
    + {{t('series-preview-drawer.vols-and-chapters', {volCount: externalSeriesValue.volumeCount, chpCount: externalSeriesValue.chapterCount})}} +
    + } + +
    + {{t('series-preview-drawer.provided-by-label')}} +
    - } - @if (externalSeries) { - @if ((externalSeries.volumeCount || 0) > 0 || (externalSeries.chapterCount || 0) > 0) { -
    - {{t('series-preview-drawer.vols-and-chapters', {volCount: externalSeries.volumeCount, chpCount: externalSeries.chapterCount})}} -
    - } - - @if(isExternalSeries && externalSeries) { -
    - {{t('series-preview-drawer.provided-by-label')}} - -
    - } - - @if (externalSeries.summary) { - + @if (externalSeriesValue.summary) { + } } - + {{t('series-preview-drawer.view-series')}} - @if (externalSeries) { + @if (externalSeriesValue) {
    - + {{item}} @@ -48,7 +48,7 @@
    - + {{item.name}} @@ -56,7 +56,7 @@
    - +
    @@ -64,13 +64,13 @@ @if (item.imageUrl && !item.imageUrl.endsWith('default.jpg')) { } @else { - + }
    {{item.name}}
    -

    {{item.role}}

    +

    {{item.role}}

    @@ -79,20 +79,20 @@
    } - @else if(localSeries) { + @else if(localSeriesValue) {
    - {{localSeries.publicationStatus | publicationStatus}} + {{localSeriesValue.publicationStatus | publicationStatus}}
    - +
    - + {{item.title}} @@ -100,7 +100,7 @@
    - + {{item.title}} @@ -108,17 +108,17 @@
    - +
    - +
    {{item.name}}
    -

    {{item.role}}

    +

    {{item.role}}

    @@ -128,6 +128,6 @@
    } - +
    diff --git a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss index d3c04eff2..56bc3994d 100644 --- a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss +++ b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss @@ -6,11 +6,11 @@ } ::ng-deep .person-img { - margin-top: 24px; margin-left: 24px; + margin-top: 1.5rem; margin-left: 1.5rem; } .muted { - font-size: 14px; + font-size: 0.875rem; } a.read-more-link { diff --git a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.ts b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.ts index 46afe7f17..67f33c8d4 100644 --- a/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.ts +++ b/UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.ts @@ -1,6 +1,6 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, input, model, OnInit, signal} from '@angular/core'; import {NgOptimizedImage} from '@angular/common'; -import {TranslocoDirective} from "@jsverse/transloco"; +import {translate, TranslocoDirective} from "@jsverse/transloco"; import {NgbActiveOffcanvas, NgbTooltip} from "@ng-bootstrap/ng-bootstrap"; import {ExternalSeriesDetail, SeriesStaff} from "../../_models/series-detail/external-series-detail"; import {SeriesService} from "../../_services/series.service"; @@ -29,84 +29,83 @@ export class SeriesPreviewDrawerComponent implements OnInit { private readonly seriesService = inject(SeriesService); private readonly imageService = inject(ImageService); private readonly actionService = inject(ActionService); - private readonly cdRef = inject(ChangeDetectorRef); protected readonly FilterField = FilterField; - @Input({required: true}) name!: string; - @Input() aniListId?: number; - @Input() malId?: number; - @Input() seriesId?: number; - @Input() libraryId: number = 0; - @Input({required: true}) isExternalSeries: boolean = true; - - isLoading: boolean = true; - localStaff: Array = []; - externalSeries: ExternalSeriesDetail | undefined; - localSeries: SeriesMetadata | undefined; - url: string = ''; - wantToRead: boolean = false; + name = input.required(); + seriesId = input.required(); + libraryId = input.required(); + aniListId = input(undefined); + malId = input(undefined); + isExternalSeries = model(true); + isLoading = signal(true); + localStaff = signal([]); + externalSeries = signal(undefined); + localSeries = signal(undefined); + viewSeriesUrl = computed(() => { + const externalSeriesUrl = this.externalSeries()?.siteUrl; + const libraryId = this.libraryId(); + const seriesId = this.seriesId(); - get CoverUrl() { - if (this.isExternalSeries) { - if (this.externalSeries) return this.externalSeries.coverUrl; + return externalSeriesUrl ?? 'library/' + libraryId + '/series/' + seriesId; + }); + wantToRead = signal(false); + + coverUrl = computed(() => { + const isExternal = this.isExternalSeries(); + const seriesId = this.seriesId(); + const externalSeries = this.externalSeries(); + + if (isExternal) { + if (externalSeries) return externalSeries.coverUrl; return this.imageService.placeholderImage; } - return this.imageService.getSeriesCoverImage(this.seriesId!); - } + + return this.imageService.getSeriesCoverImage(seriesId!); + }); ngOnInit() { - if (this.isExternalSeries) { - this.seriesService.getExternalSeriesDetails(this.aniListId, this.malId).subscribe(externalSeries => { - this.externalSeries = externalSeries; - this.isLoading = false; - if (this.externalSeries.siteUrl) { - this.url = this.externalSeries.siteUrl; - } - - this.cdRef.markForCheck(); + if (this.isExternalSeries()) { + this.seriesService.getExternalSeriesDetails(this.aniListId(), this.malId()).subscribe(externalSeries => { + this.externalSeries.set(externalSeries); + this.isLoading.set(false); }); } else { - this.seriesService.getMetadata(this.seriesId!).subscribe(data => { - this.localSeries = data; + this.seriesService.getMetadata(this.seriesId()).subscribe(data => { + this.localSeries.set(data); // Consider the localSeries has no metadata, try to merge the external Series metadata - if (this.localSeries.summary === '' && this.localSeries.genres.length === 0) { - this.seriesService.getExternalSeriesDetails(0, 0, this.seriesId).subscribe(externalSeriesData => { - this.isExternalSeries = true; - this.externalSeries = externalSeriesData; - this.cdRef.markForCheck(); + if (this.localSeries()!.summary === '' && this.localSeries()!.genres.length === 0) { + this.seriesService.getExternalSeriesDetails(0, 0, this.seriesId()).subscribe(externalSeriesData => { + this.isExternalSeries.set(true); + this.externalSeries.set(externalSeriesData); }) } - this.seriesService.isWantToRead(this.seriesId!).subscribe(wantToRead => { - this.wantToRead = wantToRead; - this.cdRef.markForCheck(); + this.seriesService.isWantToRead(this.seriesId()).subscribe(wantToRead => { + this.wantToRead.set(wantToRead); }); - this.isLoading = false; - this.url = 'library/' + this.libraryId + '/series/' + this.seriesId; - this.localStaff = data.writers.map(p => { - return {name: p.name, role: 'Story & Art'} as SeriesStaff; - }); - this.cdRef.markForCheck(); + this.isLoading.set(false); + + this.localStaff.set(data.writers.map(p => { + return {name: p.name, role: translate('series-preview-drawer.story-and-art-label')} as SeriesStaff; + })); }); } - } toggleWantToRead() { - if (this.wantToRead) { - this.actionService.removeMultipleSeriesFromWantToReadList([this.seriesId!]); + if (this.wantToRead()) { + this.actionService.removeMultipleSeriesFromWantToReadList([this.seriesId()]); } else { - this.actionService.addMultipleSeriesToWantToReadList([this.seriesId!]); + this.actionService.addMultipleSeriesToWantToReadList([this.seriesId()]); } - this.wantToRead = !this.wantToRead; - this.cdRef.markForCheck(); + this.wantToRead.update(x => !x); } close() { diff --git a/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html b/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html index 525155e6a..0cf0ba471 100644 --- a/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html +++ b/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.html @@ -1,7 +1,7 @@
    - {{collection.title}} + {{collection().title}}
    @@ -12,7 +12,7 @@ - {{collection.lastSyncUtc | utcToLocalTime:'shortDate' | defaultDate}} + {{collection().lastSyncUtc | utcToLocalTime:'shortDate' | defaultDate}}
    @@ -21,14 +21,14 @@
    - {{collection.totalSourceCount - series.length}} / {{collection.totalSourceCount | number}} + {{collection().totalSourceCount - series().length}} / {{collection().totalSourceCount | number}} - @if(collection.missingSeriesFromSource) { -

    + @if(collection().missingSeriesFromSource) { +

    } - @for(s of series; track s.name) { + @for(s of series(); track s.name) {
    {{s.name}}
    diff --git a/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.ts b/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.ts index ec67ecf7a..199f55332 100644 --- a/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.ts +++ b/UI/Web/src/app/_single-module/smart-collection-drawer/smart-collection-drawer.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, input} from '@angular/core'; import {NgbActiveOffcanvas} from "@ng-bootstrap/ng-bootstrap"; import {UserCollection} from "../../_models/collection-tag"; import {DecimalPipe} from "@angular/common"; @@ -11,30 +11,25 @@ import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe"; import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component"; @Component({ - selector: 'app-smart-collection-drawer', - imports: [ - TranslocoDirective, - SafeHtmlPipe, - RouterLink, - DefaultDatePipe, - UtcToLocalTimePipe, - SettingItemComponent, - DecimalPipe - ], - templateUrl: './smart-collection-drawer.component.html', - styleUrl: './smart-collection-drawer.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-smart-collection-drawer', + imports: [ + TranslocoDirective, + SafeHtmlPipe, + RouterLink, + DefaultDatePipe, + UtcToLocalTimePipe, + SettingItemComponent, + DecimalPipe + ], + templateUrl: './smart-collection-drawer.component.html', + styleUrl: './smart-collection-drawer.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) -export class SmartCollectionDrawerComponent implements OnInit { +export class SmartCollectionDrawerComponent { private readonly activeOffcanvas = inject(NgbActiveOffcanvas); - private readonly cdRef = inject(ChangeDetectorRef); - @Input({required: true}) collection!: UserCollection; - @Input({required: true}) series: Series[] = []; - - ngOnInit() { - - } + collection = input.required(); + series = input.required(); close() { this.activeOffcanvas.close(); diff --git a/UI/Web/src/app/_single-module/sort-button/sort-button.component.html b/UI/Web/src/app/_single-module/sort-button/sort-button.component.html index bc02c743d..59b0043dd 100644 --- a/UI/Web/src/app/_single-module/sort-button/sort-button.component.html +++ b/UI/Web/src/app/_single-module/sort-button/sort-button.component.html @@ -1,5 +1,5 @@ -
    - @if (tokenExpired) { + @if (tokenExpired()) {

    {{t('token-expired')}}

    - } @else if (!currentUser!.preferences.aniListScrobblingEnabled) { + } @else if (!accountService.currentUser()!.preferences.aniListScrobblingEnabled) {

    {{t('scrobbling-disabled')}}

    } @@ -22,31 +20,31 @@
    - +
    - @@ -54,13 +52,13 @@
    + [checked]="selectAll()" (change)="toggleAll()" [indeterminate]="selections().hasSomeSelected()">
    + [checked]="selections().isSelected(event)" (change)="handleSelection(event, rowIndex)"> @@ -87,7 +85,7 @@ {{t('series-header')}}     - {{item.seriesName}} + {{item.seriesName}} @@ -150,7 +148,7 @@
    + [checked]="selectAll()" (change)="toggleAll()" [indeterminate]="selections().hasSomeSelected()">
    @@ -162,7 +160,7 @@
    - {{event.seriesName}} diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss index bf691441b..7a943d681 100644 --- a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss +++ b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.scss @@ -7,6 +7,6 @@ } .custom-position { - right: 15px; - top: -42px; + right: 0.9375rem; + top: -2.625rem; } diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts index 1218cf468..4f0190d44 100644 --- a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts +++ b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts @@ -1,11 +1,12 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, + computed, DestroyRef, HostListener, inject, - OnInit + OnInit, + signal } from '@angular/core'; import {ScrobbleProvider, ScrobblingService} from "../../_services/scrobbling.service"; @@ -16,19 +17,19 @@ import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap"; import {ScrobbleEventSortField} from "../../_models/scrobbling/scrobble-event-filter"; import {debounceTime, take} from "rxjs/operators"; import {PaginatedResult} from "../../_models/pagination"; -import {SortEvent} from "../table/_directives/sortable-header.directive"; -import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms"; +import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; import {translate, TranslocoModule} from "@jsverse/transloco"; import {DefaultValuePipe} from "../../_pipes/default-value.pipe"; import {TranslocoLocaleModule} from "@jsverse/transloco-locale"; import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe"; import {LooseLeafOrDefaultNumber, SpecialVolumeNumber} from "../../_models/chapter"; import {ColumnMode, NgxDatatableModule} from "@siemens/ngx-datatable"; -import {APP_BASE_HREF, AsyncPipe} from "@angular/common"; +import {APP_BASE_HREF} from "@angular/common"; import {AccountService} from "../../_services/account.service"; import {ToastrService} from "ngx-toastr"; import {SelectionModel} from "../../typeahead/_models/selection-model"; import {ResponsiveTableComponent} from "../../shared/_components/responsive-table/responsive-table.component"; +import {RouterLink} from "@angular/router"; export interface DataTablePage { pageNumber: number, @@ -38,12 +39,13 @@ export interface DataTablePage { } @Component({ - selector: 'app-user-scrobble-history', + selector: 'app-user-scrobble-history', imports: [ScrobbleEventTypePipe, ReactiveFormsModule, TranslocoModule, - DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe, NgbTooltip, NgxDatatableModule, AsyncPipe, FormsModule, ResponsiveTableComponent], - templateUrl: './user-scrobble-history.component.html', - styleUrls: ['./user-scrobble-history.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + DefaultValuePipe, TranslocoLocaleModule, UtcToLocalTimePipe, NgbTooltip, NgxDatatableModule, + ResponsiveTableComponent, RouterLink], + templateUrl: './user-scrobble-history.component.html', + styleUrls: ['./user-scrobble-history.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class UserScrobbleHistoryComponent implements OnInit { @@ -53,35 +55,36 @@ export class UserScrobbleHistoryComponent implements OnInit { protected readonly ScrobbleEventType = ScrobbleEventType; private readonly scrobblingService = inject(ScrobblingService); - private readonly cdRef = inject(ChangeDetectorRef); private readonly destroyRef = inject(DestroyRef); private readonly toastr = inject(ToastrService); protected readonly accountService = inject(AccountService); protected readonly baseUrl = inject(APP_BASE_HREF); - tokenExpired = false; + tokenExpired = signal(false); formGroup: FormGroup = new FormGroup({ 'filter': new FormControl('', []) }); - events: Array = []; - isLoading: boolean = true; - pageInfo: DataTablePage = { + events = signal([]); + isLoading = signal(true); + pageInfo = signal({ pageNumber: 0, size: 10, totalElements: 0, totalPages: 0 - } - private currentSort: SortEvent = { + }); + private currentSort: {column: string; direction: string} = { column: 'lastModifiedUtc', direction: 'desc' }; - hasRunScrobbleGen: boolean = false; + hasRunScrobbleGen = signal(false); - selections: SelectionModel = new SelectionModel(); - selectAll: boolean = false; - isShiftDown: boolean = false; + selections = signal(new SelectionModel()); + selectAll = signal(false); + isShiftDown = false; lastSelectedIndex: number | null = null; + hasAnySelected = computed(() => this.selections().hasAnySelected()); + trackByEvents = (idx: number, data: ScrobbleEvent) => `${data.isProcessed}_${data.isErrored}_${data.id}`; @HostListener('document:keydown.shift', ['$event']) @@ -95,21 +98,15 @@ export class UserScrobbleHistoryComponent implements OnInit { } ngOnInit() { - - this.pageInfo.pageNumber = 0; - this.cdRef.markForCheck(); - this.scrobblingService.hasRunScrobbleGen().subscribe(res => { - this.hasRunScrobbleGen = res; - this.cdRef.markForCheck(); - }) - - this.scrobblingService.hasTokenExpired(ScrobbleProvider.AniList).subscribe(hasExpired => { - this.tokenExpired = hasExpired; - this.cdRef.markForCheck(); + this.hasRunScrobbleGen.set(res); }); - this.formGroup.get('filter')?.valueChanges.pipe(debounceTime(200), takeUntilDestroyed(this.destroyRef)).subscribe(query => { + this.scrobblingService.hasTokenExpired(ScrobbleProvider.AniList).subscribe(hasExpired => { + this.tokenExpired.set(hasExpired); + }); + + this.formGroup.get('filter')?.valueChanges.pipe(debounceTime(200), takeUntilDestroyed(this.destroyRef)).subscribe(() => { this.loadPage(); }); @@ -117,9 +114,7 @@ export class UserScrobbleHistoryComponent implements OnInit { } onPageChange(pageInfo: any) { - this.pageInfo.pageNumber = pageInfo.offset; - this.cdRef.markForCheck(); - + this.pageInfo.update(p => ({...p, pageNumber: pageInfo.offset})); this.loadPage(this.currentSort); } @@ -130,27 +125,28 @@ export class UserScrobbleHistoryComponent implements OnInit { }; } - loadPage(sortEvent?: SortEvent) { - const page = (this.pageInfo?.pageNumber || 0) + 1; - const pageSize = this.pageInfo?.size || 0; + loadPage(sortEvent?: {column: string; direction: string}) { + const page = (this.pageInfo().pageNumber || 0) + 1; + const pageSize = this.pageInfo().size || 0; const isDescending = sortEvent?.direction === 'desc'; const field = this.mapSortColumnField(sortEvent?.column); const query = this.formGroup.get('filter')?.value; - this.isLoading = true; - this.cdRef.markForCheck(); + this.isLoading.set(true); this.scrobblingService.getScrobbleEvents({query, field, isDescending}, page, pageSize) .pipe(take(1)) .subscribe((result: PaginatedResult) => { - this.events = result.result; - this.selections = new SelectionModel(false, this.events); + this.events.set(result.result); + this.selections.set(new SelectionModel(false, result.result)); - this.pageInfo.totalPages = result.pagination.totalPages - 1; // ngx-datatable is 0 based, Kavita is 1 based - this.pageInfo.size = result.pagination.itemsPerPage; - this.pageInfo.totalElements = result.pagination.totalItems; - this.isLoading = false; - this.cdRef.markForCheck(); + this.pageInfo.set({ + pageNumber: this.pageInfo().pageNumber, + totalPages: result.pagination.totalPages - 1, + size: result.pagination.itemsPerPage, + totalElements: result.pagination.totalItems + }); + this.isLoading.set(false); }); } @@ -172,19 +168,18 @@ export class UserScrobbleHistoryComponent implements OnInit { } bulkDelete() { - if (!this.selections.hasAnySelected()) { + if (!this.selections().hasAnySelected()) { return; } - const eventIds = this.selections.selected().map(e => e.id); + const eventIds = this.selections().selected().map(e => e.id); this.scrobblingService.bulkRemoveEvents(eventIds).subscribe({ next: () => { - this.events = this.events.filter(e => !eventIds.includes(e.id)); - this.selectAll = false; - this.selections.clearSelected(); - this.pageInfo.totalElements -= eventIds.length; - this.cdRef.markForCheck(); + this.events.update(events => events.filter(e => !eventIds.includes(e.id))); + this.selectAll.set(false); + this.selections().clearSelected(); + this.pageInfo.update(p => ({...p, totalElements: p.totalElements - eventIds.length})); }, error: err => { console.error(err); @@ -193,32 +188,29 @@ export class UserScrobbleHistoryComponent implements OnInit { } toggleAll() { - this.selectAll = !this.selectAll; - this.events.forEach(e => this.selections.toggle(e, this.selectAll)); - this.cdRef.markForCheck(); + const newSelectAll = !this.selectAll(); + this.selectAll.set(newSelectAll); + this.events().forEach(e => this.selections().toggle(e, newSelectAll)); } handleSelection(item: ScrobbleEvent, index: number) { if (this.isShiftDown && this.lastSelectedIndex !== null) { - // Bulk select items between the last selected item and the current one const start = Math.min(this.lastSelectedIndex, index); const end = Math.max(this.lastSelectedIndex, index); for (let i = start; i <= end; i++) { - const event = this.events[i]; - if (!this.selections.isSelected(event, (e1, e2) => e1.id == e2.id)) { - this.selections.toggle(event, true); + const event = this.events()[i]; + if (!this.selections().isSelected(event, (e1, e2) => e1.id == e2.id)) { + this.selections().toggle(event, true); } } } else { - this.selections.toggle(item); + this.selections().toggle(item); } this.lastSelectedIndex = index; - - const numberOfSelected = this.selections.selected().length; - this.selectAll = numberOfSelected === this.events.length; - this.cdRef.markForCheck(); + const numberOfSelected = this.selections().selected().length; + this.selectAll.set(numberOfSelected === this.events().length); } } diff --git a/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.html b/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.html index 93c71176f..28801339e 100644 --- a/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.html +++ b/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.html @@ -2,21 +2,21 @@
    - +

    {{t('description')}}

    - +
    diff --git a/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.ts b/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.ts index b8a1b41ea..74f9c48fb 100644 --- a/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.ts +++ b/UI/Web/src/app/admin/_modals/copy-settings-from-library-modal/copy-settings-from-library-modal.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, input} from '@angular/core'; import {Library} from "../../../_models/library/library"; import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; import {TranslocoDirective} from "@jsverse/transloco"; @@ -17,7 +17,7 @@ import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; export class CopySettingsFromLibraryModalComponent { protected readonly modal = inject(NgbActiveModal); - @Input() libraries: Array = []; + libraries = input([]); libForm = new FormGroup({ 'library': new FormControl(null), diff --git a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html index 017f3701a..c211dae2e 100644 --- a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html +++ b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html @@ -8,9 +8,9 @@
    -
    @@ -19,10 +19,10 @@
    - @if (helpUrl.length > 0) { - {{t('help')}} + @if (helpUrl().length > 0) { + {{t('help')}} } diff --git a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss index a086f4ecf..eb5d76ffa 100644 --- a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss +++ b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.scss @@ -7,7 +7,7 @@ $breadcrumb-divider: quote(">"); .scrollable { overflow-y: auto; - max-height: 400px; + max-height: 25rem; } .btn-outline-secondary { diff --git a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts index c05e099e3..2f951468c 100644 --- a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts +++ b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts @@ -1,11 +1,25 @@ -import { Component, Input, OnInit, ViewChild, inject } from '@angular/core'; -import { NgbActiveModal, NgbTypeahead, NgbHighlight } from '@ng-bootstrap/ng-bootstrap'; -import { catchError, debounceTime, distinctUntilChanged, filter, map, merge, Observable, of, OperatorFunction, Subject, switchMap, tap } from 'rxjs'; -import { Stack } from 'src/app/shared/data-structures/stack'; -import { DirectoryDto } from 'src/app/_models/system/directory-dto'; -import { LibraryService } from '../../../_services/library.service'; -import { NgClass } from '@angular/common'; -import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import {Component, computed, DestroyRef, inject, input, OnInit, signal, viewChild} from '@angular/core'; +import {NgbActiveModal, NgbHighlight, NgbTypeahead} from '@ng-bootstrap/ng-bootstrap'; +import { + catchError, + debounceTime, + distinctUntilChanged, + filter, + map, + merge, + Observable, + of, + OperatorFunction, + Subject, + switchMap, + tap +} from 'rxjs'; +import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; +import {Stack} from 'src/app/shared/data-structures/stack'; +import {DirectoryDto} from 'src/app/_models/system/directory-dto'; +import {LibraryService} from '../../../_services/library.service'; +import {NgClass} from '@angular/common'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {TranslocoDirective} from "@jsverse/transloco"; import {WikiLink} from "../../../_models/wiki"; @@ -19,59 +33,67 @@ export interface DirectoryPickerResult { selector: 'app-directory-picker', templateUrl: './directory-picker.component.html', styleUrls: ['./directory-picker.component.scss'], - imports: [ReactiveFormsModule, NgbTypeahead, FormsModule, NgbHighlight, NgClass, TranslocoDirective] + imports: [ReactiveFormsModule, NgbTypeahead, NgbHighlight, NgClass, TranslocoDirective] }) export class DirectoryPickerComponent implements OnInit { - modal = inject(NgbActiveModal); - private libraryService = inject(LibraryService); + protected readonly modal = inject(NgbActiveModal); + private readonly libraryService = inject(LibraryService); + private readonly destroyRef = inject(DestroyRef); - - @Input() startingFolder: string = ''; + startingFolder = input(''); /** * Url to give more information about selecting directories. Passing nothing will suppress. */ - @Input() helpUrl: string = WikiLink.Library; + helpUrl = input(WikiLink.Library); - currentRoot = ''; - folders: DirectoryDto[] = []; - routeStack: Stack = new Stack(); + currentRoot = signal(''); + folders = signal([]); + routeStack = new Stack(); + routeItems = signal([]); + routeStackPeek = computed(() => { + const items = this.routeItems(); + return items.length > 0 ? items[items.length - 1] : undefined; + }); - - path: string = ''; - @ViewChild('instance', {static: false}) instance!: NgbTypeahead; + pathControl = new FormControl('', {nonNullable: true}); + instance = viewChild('instance'); focus$ = new Subject(); click$ = new Subject(); - searching: boolean = false; - searchFailed: boolean = false; + searching = signal(false); + searchFailed = signal(false); search: OperatorFunction = (text$: Observable) => { const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged()); - const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen())); + const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance()!.isPopupOpen())); const inputFocus$ = this.focus$; return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$, text$).pipe( debounceTime(300), distinctUntilChanged(), - tap(() => this.searching = true), + tap(() => this.searching.set(true)), switchMap(term => - this.libraryService.listDirectories(this.path).pipe( - tap(() => this.searchFailed = false), - tap((folders) => this.folders = folders), + this.libraryService.listDirectories(this.pathControl.value).pipe( + tap(() => this.searchFailed.set(false)), + tap((folders) => this.folders.set(folders)), map(folders => folders.map(f => f.fullPath)), catchError(() => { - this.searchFailed = true; + this.searchFailed.set(true); return of([]); })) ), - tap(() => this.searching = false) + tap(() => this.searching.set(false)) ) } ngOnInit(): void { - if (this.startingFolder && this.startingFolder.length > 0) { - let folders = this.startingFolder.split('/'); - let folders2 = this.startingFolder.split('\\'); + this.pathControl.valueChanges.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(() => this.updateTable()); + + if (this.startingFolder() && this.startingFolder().length > 0) { + let folders = this.startingFolder().split('/'); + let folders2 = this.startingFolder().split('\\'); if (folders.length === 1 && folders2.length > 1) { folders = folders2; } @@ -79,55 +101,60 @@ export class DirectoryPickerComponent implements OnInit { folders[0] = folders[0] + '/'; } folders.forEach(folder => this.routeStack.push(folder)); + this.syncRouteItems(); const fullPath = this.routeStack.items.join('/'); this.loadChildren(fullPath); } else { - this.loadChildren(this.currentRoot); + this.loadChildren(this.currentRoot()); } } updateTable() { - this.loadChildren(this.path); + this.loadChildren(this.pathControl.value); } - selectNode(folder: DirectoryDto) { if (folder.disabled) return; - this.currentRoot = folder.name; + this.currentRoot.set(folder.name); this.routeStack.push(folder.name); - this.path = folder.fullPath; - this.loadChildren(this.path); + this.syncRouteItems(); + this.pathControl.setValue(folder.fullPath, {emitEvent: false}); + this.loadChildren(this.pathControl.value); } goBack() { this.routeStack.pop(); + this.syncRouteItems(); const stackPeek = this.routeStack.peek(); if (stackPeek !== undefined) { - this.currentRoot = stackPeek; + this.currentRoot.set(stackPeek); const fullPath = this.routeStack.items.join('/'); this.loadChildren(fullPath); } else { - this.currentRoot = ''; - this.loadChildren(this.currentRoot); + this.currentRoot.set(''); + this.loadChildren(this.currentRoot()); } } loadChildren(path: string) { - this.libraryService.listDirectories(path).subscribe(folders => { - this.folders = folders; - }, err => { - // If there was an error, pop off last directory added to stack - this.routeStack.pop(); - const item = this.folders.find(f => f.fullPath === path); - if (item) { - item.disabled = true; + this.libraryService.listDirectories(path).subscribe({ + next: folders => { + this.folders.set(folders); + }, + error: err => { + // If there was an error, pop off last directory added to stack + this.routeStack.pop(); + this.syncRouteItems(); + this.folders.update(current => { + return current.map(f => f.fullPath === path ? {...f, disabled: true} : f); + }); } }); } share() { - this.modal.close({success: true, folderPath: this.path}); + this.modal.close({success: true, folderPath: this.pathControl.value}); } close() { @@ -138,11 +165,14 @@ export class DirectoryPickerComponent implements OnInit { while(this.routeStack.items.length - 1 > index) { this.routeStack.pop(); } + this.syncRouteItems(); const fullPath = this.routeStack.items.join('/'); - this.path = fullPath; + this.pathControl.setValue(fullPath, {emitEvent: false}); this.loadChildren(fullPath); } + + private syncRouteItems() { + this.routeItems.set([...this.routeStack.items]); + } } - - diff --git a/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.html b/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.html deleted file mode 100644 index d58548f4a..000000000 --- a/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.html +++ /dev/null @@ -1,39 +0,0 @@ - - -
    - - -
    -
    -
    -
    - - -
    -
      - @for (library of allLibraries; track library.name; let i = $index) { -
    • -
      - - -
      -
      • - } @empty { -
    • - {{t('no-data')}} -
      • - } -
    -
    -
    -
    - - - -
    - -     diff --git a/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.scss b/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts b/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts deleted file mode 100644 index 3eb8c080c..000000000 --- a/UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core'; -import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; -import {Library} from 'src/app/_models/library/library'; -import {Member} from 'src/app/_models/auth/member'; -import {LibraryService} from 'src/app/_services/library.service'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {TranslocoDirective} from "@jsverse/transloco"; -import {SelectionModel} from "../../../typeahead/_models/selection-model"; - -@Component({ - selector: 'app-library-access-modal', - templateUrl: './library-access-modal.component.html', - styleUrls: ['./library-access-modal.component.scss'], - standalone: true, - imports: [ReactiveFormsModule, FormsModule, TranslocoDirective], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class LibraryAccessModalComponent implements OnInit { - - protected readonly modal = inject(NgbActiveModal); - private readonly cdRef = inject(ChangeDetectorRef); - private readonly libraryService = inject(LibraryService); - - @Input() member: Member | undefined; - - allLibraries: Library[] = []; - selectedLibraries: Array<{selected: boolean, data: Library}> = []; - selections!: SelectionModel; - selectAll: boolean = false; - - get hasSomeSelected() { - return this.selections != null && this.selections.hasSomeSelected(); - } - - - ngOnInit(): void { - this.libraryService.getLibraries().subscribe(libs => { - this.allLibraries = libs; - this.setupSelections(); - }); - } - - close() { - this.modal.dismiss(); - } - - save() { - if (this.member?.username === undefined) { - return; - } - - const selectedLibraries = this.selections.selected(); - this.libraryService.updateLibrariesForMember(this.member?.username, selectedLibraries).subscribe(() => { - this.modal.close(true); - }); - } - - setupSelections() { - this.selections = new SelectionModel(false, this.allLibraries); - - // If a member is passed in, then auto-select their libraries - if (this.member !== undefined) { - this.member.libraries.forEach(lib => { - this.selections.toggle(lib, true, (a, b) => a.name === b.name); - }); - this.selectAll = this.selections.selected().length === this.allLibraries.length; - } - this.cdRef.markForCheck(); - } - - reset() { - this.setupSelections(); - } - - toggleAll() { - this.selectAll = !this.selectAll; - this.allLibraries.forEach(s => this.selections.toggle(s, this.selectAll)); - this.cdRef.markForCheck(); - } - - handleSelection(item: Library) { - this.selections.toggle(item); - const numberOfSelected = this.selections.selected().length; - if (numberOfSelected == 0) { - this.selectAll = false; - } else if (numberOfSelected == this.selectedLibraries.length) { - this.selectAll = true; - } - this.cdRef.markForCheck(); - } - -} diff --git a/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.html b/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.html index 9ea5a174d..0bab93a0c 100644 --- a/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.html +++ b/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.html @@ -1,10 +1,8 @@
    - - + +
    @if (errorMessage !== '') { diff --git a/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.ts b/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.ts index 841fb76e7..00accc997 100644 --- a/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.ts +++ b/UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.ts @@ -1,4 +1,4 @@ -import {Component, inject, Input} from '@angular/core'; +import {Component, inject, input} from '@angular/core'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {Member} from 'src/app/_models/auth/member'; @@ -19,7 +19,7 @@ export class ResetPasswordModalComponent { private readonly accountService = inject(AccountService); protected readonly modal = inject(NgbActiveModal); - @Input({required: true}) member!: Member; + member = input.required(); errorMessage = ''; resetPasswordForm: FormGroup = new FormGroup({ @@ -28,14 +28,14 @@ export class ResetPasswordModalComponent { save() { - this.accountService.resetPassword(this.member.username, this.resetPasswordForm.value.password,'').subscribe(() => { + this.accountService.resetPassword(this.member().username, this.resetPasswordForm.value.password,'').subscribe(() => { this.toastr.success(translate('toasts.password-updated')) this.modal.close(); }); } close() { - this.modal.close(); + this.modal.dismiss(); } } diff --git a/UI/Web/src/app/admin/email-history/email-history.component.html b/UI/Web/src/app/admin/email-history/email-history.component.html index 97f17493e..52956b5bd 100644 --- a/UI/Web/src/app/admin/email-history/email-history.component.html +++ b/UI/Web/src/app/admin/email-history/email-history.component.html @@ -1,15 +1,19 @@

    {{t('description')}}

    - @if (data.length === 0) { -

    {{t('no-data')}}

    + @if (data().length === 0) { + @if (!isLoading()) { +

    {{t('no-data')}}

    + } + + } @else { - + diff --git a/UI/Web/src/app/admin/email-history/email-history.component.ts b/UI/Web/src/app/admin/email-history/email-history.component.ts index 946c24b18..125b00415 100644 --- a/UI/Web/src/app/admin/email-history/email-history.component.ts +++ b/UI/Web/src/app/admin/email-history/email-history.component.ts @@ -1,11 +1,12 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit, signal} from '@angular/core'; import {TranslocoDirective} from "@jsverse/transloco"; import {VirtualScrollerModule} from "@iharbeck/ngx-virtual-scroller"; import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe"; import {EmailHistory} from "../../_models/email-history"; import {EmailService} from "../../_services/email.service"; -import {ColumnMode, NgxDatatableModule} from "@siemens/ngx-datatable"; +import {NgxDatatableModule} from "@siemens/ngx-datatable"; import {ResponsiveTableComponent} from "../../shared/_components/responsive-table/responsive-table.component"; +import {LoadingComponent} from "../../shared/loading/loading.component"; @Component({ selector: 'app-email-history', @@ -14,7 +15,8 @@ import {ResponsiveTableComponent} from "../../shared/_components/responsive-tabl VirtualScrollerModule, UtcToLocalTimePipe, NgxDatatableModule, - ResponsiveTableComponent + ResponsiveTableComponent, + LoadingComponent ], templateUrl: './email-history.component.html', styleUrl: './email-history.component.scss', @@ -24,18 +26,15 @@ export class EmailHistoryComponent implements OnInit { private readonly cdRef = inject(ChangeDetectorRef); private readonly emailService = inject(EmailService) - isLoading = true; - data: Array = []; + isLoading = signal(true); + data = signal([]); trackBy = (index: number, item: EmailHistory) => `${item.sent}_${item.emailTemplate}_${index}`; ngOnInit() { this.emailService.getEmailHistory().subscribe(data => { - this.data = data; - this.isLoading = false; - this.cdRef.markForCheck(); + this.data.set(data); + this.isLoading.set(false); }); } - - protected readonly ColumnMode = ColumnMode; } diff --git a/UI/Web/src/app/admin/import-mappings/import-mappings.component.html b/UI/Web/src/app/admin/import-mappings/import-mappings.component.html index efb939c75..af60336ab 100644 --- a/UI/Web/src/app/admin/import-mappings/import-mappings.component.html +++ b/UI/Web/src/app/admin/import-mappings/import-mappings.component.html @@ -1,6 +1,6 @@ -
    +
    diff --git a/UI/Web/src/app/admin/import-mappings/import-mappings.component.scss b/UI/Web/src/app/admin/import-mappings/import-mappings.component.scss index bbd8a26bb..7e58fceb5 100644 --- a/UI/Web/src/app/admin/import-mappings/import-mappings.component.scss +++ b/UI/Web/src/app/admin/import-mappings/import-mappings.component.scss @@ -44,7 +44,7 @@ file-upload { } .break { - height: 1px; + height: 0.0625rem; background-color: var(--setting-break-color); - margin: 10px 0; + margin: 0.625rem 0; } diff --git a/UI/Web/src/app/admin/import-mappings/import-mappings.component.ts b/UI/Web/src/app/admin/import-mappings/import-mappings.component.ts index 3e0f88860..67a516f4f 100644 --- a/UI/Web/src/app/admin/import-mappings/import-mappings.component.ts +++ b/UI/Web/src/app/admin/import-mappings/import-mappings.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, inject, OnInit, signal, ViewChild} from '@angular/core'; +import {Component, computed, inject, OnInit, signal, viewChild} from '@angular/core'; import {translate, TranslocoDirective, TranslocoPipe} from "@jsverse/transloco"; import {StepTrackerComponent, TimelineStep} from "../../reading-list/_components/step-tracker/step-tracker.component"; import {WikiLink} from "../../_models/wiki"; @@ -77,7 +77,7 @@ export class ImportMappingsComponent implements OnInit { private readonly settingsService = inject(SettingsService); private readonly toastr = inject(ToastrService); - @ViewChild(ManageMetadataMappingsComponent) manageMetadataMappingsComponent!: ManageMetadataMappingsComponent; + readonly manageMetadataMappingsComponent = viewChild.required(ManageMetadataMappingsComponent); steps: TimelineStep[] = [ {title: translate('import-mappings.import-step'), index: Step.Import, active: true, icon: 'fa-solid fa-file-arrow-up'}, @@ -185,7 +185,7 @@ export class ImportMappingsComponent implements OnInit { if (!res) return; const newSettings = res.resultingMetadataSettings; - const data = this.manageMetadataMappingsComponent.packData(); + const data = this.manageMetadataMappingsComponent().packData(); // Update settings with data from the final step newSettings.whitelist = data.whitelist; diff --git a/UI/Web/src/app/admin/invite-user/invite-user.component.scss b/UI/Web/src/app/admin/invite-user/invite-user.component.scss index 8d2460659..de10e5413 100644 --- a/UI/Web/src/app/admin/invite-user/invite-user.component.scss +++ b/UI/Web/src/app/admin/invite-user/invite-user.component.scss @@ -1,5 +1,5 @@ .email-link { word-break: break-all; - margin-bottom: 15px; + margin-bottom: 0.9375rem; display: block; } \ No newline at end of file diff --git a/UI/Web/src/app/admin/license/license.component.html b/UI/Web/src/app/admin/license/license.component.html index a1a9afd5f..55cd68464 100644 --- a/UI/Web/src/app/admin/license/license.component.html +++ b/UI/Web/src/app/admin/license/license.component.html @@ -11,7 +11,7 @@
    - + diff --git a/UI/Web/src/app/admin/manage-library/manage-library.component.scss b/UI/Web/src/app/admin/manage-library/manage-library.component.scss index e55bae653..f10691453 100644 --- a/UI/Web/src/app/admin/manage-library/manage-library.component.scss +++ b/UI/Web/src/app/admin/manage-library/manage-library.component.scss @@ -1,8 +1,8 @@ @use "../../../theme/variables" as theme; .custom-position { - right: 15px; - top: -60px; + right: 0.9375rem; + top: -3.75rem; } .member-name { @@ -29,7 +29,7 @@ justify-content: center; } .btn { - width: 32px; + width: 2rem; } } } diff --git a/UI/Web/src/app/admin/manage-library/manage-library.component.ts b/UI/Web/src/app/admin/manage-library/manage-library.component.ts index 03d61d5e2..94e337eb7 100644 --- a/UI/Web/src/app/admin/manage-library/manage-library.component.ts +++ b/UI/Web/src/app/admin/manage-library/manage-library.component.ts @@ -9,7 +9,7 @@ import { OnInit, TrackByFunction } from '@angular/core'; -import {NgbModal, NgbTooltip} from '@ng-bootstrap/ng-bootstrap'; +import {NgbTooltip} from '@ng-bootstrap/ng-bootstrap'; import {ToastrService} from 'ngx-toastr'; import {distinctUntilChanged, filter, take} from 'rxjs/operators'; import {ConfirmService} from 'src/app/shared/confirm.service'; @@ -31,7 +31,6 @@ import {DefaultDatePipe} from "../../_pipes/default-date.pipe"; import {NgTemplateOutlet} from "@angular/common"; import {LoadingComponent} from "../../shared/loading/loading.component"; import {UtilityService} from "../../shared/_services/utility.service"; -import {Action, ActionFactoryService, ActionItem} from "../../_services/action-factory.service"; import {ActionService} from "../../_services/action.service"; import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component"; import {catchError} from "rxjs"; @@ -48,6 +47,12 @@ import { DatatableComponent } from "@siemens/ngx-datatable"; import {BreakpointService} from "../../_services/breakpoint.service"; +import {ActionFactoryService} from "../../_services/action-factory.service"; +import {Action} from "../../_models/actionables/action"; +import {ActionResult} from "../../_models/actionables/action-result"; +import {ModalResult} from "../../_models/modal/modal-result"; +import {editModal} from "../../_models/modal/modal-options"; +import {ModalService} from "../../_services/modal.service"; @Component({ selector: 'app-manage-library', @@ -60,7 +65,7 @@ import {BreakpointService} from "../../_services/breakpoint.service"; export class ManageLibraryComponent implements OnInit { private readonly libraryService = inject(LibraryService); - private readonly modalService = inject(NgbModal); + private readonly modalService = inject(ModalService); private readonly toastr = inject(ToastrService); private readonly confirmService = inject(ConfirmService); private readonly hubService = inject(MessageHubService); @@ -71,10 +76,8 @@ export class ManageLibraryComponent implements OnInit { private readonly actionService = inject(ActionService); protected readonly breakpointService = inject(BreakpointService); - protected readonly Action = Action; - - actions = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this)); - bulkActions = this.actionFactoryService.getBulkLibraryActions(this.handleBulkAction.bind(this)); + actions = this.actionFactoryService.getLibraryActions(); + bulkActions = this.actionFactoryService.getBulkLibraryActions(); libraries: Library[] = []; loading = false; /** @@ -163,21 +166,17 @@ export class ManageLibraryComponent implements OnInit { } editLibrary(library: Library) { - const modalRef = this.modalService.open(LibrarySettingsModalComponent, { size: 'xl', fullscreen: 'md' }); + const modalRef = this.modalService.open(LibrarySettingsModalComponent, editModal()); modalRef.componentInstance.library = library; - modalRef.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(refresh => { - if (refresh) { - this.getLibraries(); - } + modalRef.closed.subscribe((result: ModalResult) => { + this.getLibraries(); }); } addLibrary() { - const modalRef = this.modalService.open(LibrarySettingsModalComponent, { size: 'xl', fullscreen: 'md' }); - modalRef.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(refresh => { - if (refresh) { - this.getLibraries(); - } + const modalRef = this.modalService.open(LibrarySettingsModalComponent, editModal()); + modalRef.closed.subscribe((result: ModalResult) => { + this.getLibraries(); }); } @@ -269,12 +268,11 @@ export class ManageLibraryComponent implements OnInit { } } - async handleBulkAction(action: ActionItem, _: Library) { - //Library is null for bulk actions - this.bulkAction = action.action; + async handleBulkAction(event: ActionResult) { + this.bulkAction = event.action; this.cdRef.markForCheck(); - switch (action.action) { + switch (event.action) { case(Action.Scan): case(Action.RefreshMetadata): case(Action.GenerateColorScape): @@ -286,8 +284,7 @@ export class ManageLibraryComponent implements OnInit { // Prompt the user for the library, then wait for them to manually trigger applyBulkAction const ref = this.modalService.open(CopySettingsFromLibraryModalComponent, {size: 'lg', fullscreen: 'md'}); ref.componentInstance.libraries = this.libraries; - ref.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((res: number | null) => { - if (res === null) return; + ref.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((res: number) => { // res will be the library the user chose this.bulkMode = true; this.sourceCopyToLibrary = this.libraries.filter(l => l.id === res)[0]; @@ -297,28 +294,6 @@ export class ManageLibraryComponent implements OnInit { } } - async handleAction(action: ActionItem, library: Library) { - switch (action.action) { - case(Action.Scan): - await this.actionService.scanLibrary(library); - break; - case(Action.RefreshMetadata): - await this.actionService.refreshLibraryMetadata(library); - break; - case(Action.GenerateColorScape): - await this.actionService.refreshLibraryMetadata(library, undefined, false, true); - break; - case(Action.Edit): - this.editLibrary(library) - break; - case (Action.Delete): - await this.deleteLibrary(library); - break; - default: - break; - } - } - setupSelections() { this.selections = new SelectionModel(false, this.libraries); this.cdRef.markForCheck(); @@ -370,4 +345,6 @@ export class ManageLibraryComponent implements OnInit { this.selectAll = false; this.cdRef.markForCheck(); } + + protected readonly Action = Action; } diff --git a/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss b/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss index 1e6162074..cab162a93 100644 --- a/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss +++ b/UI/Web/src/app/admin/manage-matched-metadata/manage-matched-metadata.component.scss @@ -1,9 +1,9 @@ .table { - min-height: 60px; + min-height: 3.75rem; width: 100%; } .tr { - height: 60px; + height: 3.75rem; } diff --git a/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss b/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss index 3929527f9..b3b043e47 100644 --- a/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss +++ b/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.scss @@ -15,7 +15,7 @@ justify-content: center; } .btn { - width: 32px; + width: 2rem; } } } diff --git a/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.ts b/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.ts index 4ab701a79..aeedd1829 100644 --- a/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.ts +++ b/UI/Web/src/app/admin/manage-media-issues/manage-media-issues.component.ts @@ -3,10 +3,9 @@ import { ChangeDetectorRef, Component, DestroyRef, - EventEmitter, inject, OnInit, - Output + output } from '@angular/core'; import {filter, shareReplay} from 'rxjs'; import {KavitaMediaError} from '../_models/media-error'; @@ -31,7 +30,7 @@ import {ResponsiveTableComponent} from "../../shared/_components/responsive-tabl }) export class ManageMediaIssuesComponent implements OnInit { - @Output() alertCount = new EventEmitter(); + readonly alertCount = output(); private readonly serverService = inject(ServerService); private readonly messageHub = inject(MessageHubService); diff --git a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts index a3ac55ce2..809475daa 100644 --- a/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts +++ b/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts @@ -1,15 +1,14 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit} from '@angular/core'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {ToastrService} from 'ngx-toastr'; -import {catchError, debounceTime, distinctUntilChanged, filter, of, switchMap, take, tap} from 'rxjs'; +import {catchError, debounceTime, distinctUntilChanged, filter, of, switchMap, tap} from 'rxjs'; import {SettingsService} from '../settings.service'; import {ServerSettings} from '../_models/server-settings'; import {DirectoryPickerComponent, DirectoryPickerResult} from '../_modals/directory-picker/directory-picker.component'; -import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {allEncodeFormats} from '../_models/encode-format'; import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco"; import {allCoverImageSizes, CoverImageSize} from '../_models/cover-image-size'; -import {PdfRenderResolution, allPdfRenderResolutions} from '../_models/pdf-render-resolution'; +import {allPdfRenderResolutions, PdfRenderResolution} from '../_models/pdf-render-resolution'; import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component"; import {EncodeFormatPipe} from "../../_pipes/encode-format.pipe"; import {CoverImageSizePipe} from "../../_pipes/cover-image-size.pipe"; @@ -17,6 +16,7 @@ import {PdfRenderResolutionPipe} from "../../_pipes/pdf-render-resolution.pipe" import {ConfirmService} from "../../shared/confirm.service"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {pageLayoutModes} from "../../_models/preferences/reading-profiles"; +import {ModalService} from "../../_services/modal.service"; @Component({ selector: 'app-manage-media-settings', @@ -32,7 +32,7 @@ export class ManageMediaSettingsComponent implements OnInit { private readonly confirmService = inject(ConfirmService); private readonly settingsService = inject(SettingsService); private readonly toastr = inject(ToastrService); - private readonly modalService = inject(NgbModal); + private readonly modalService = inject(ModalService); private readonly destroyRef = inject(DestroyRef); protected readonly allEncodeFormats = allEncodeFormats; @@ -123,7 +123,7 @@ export class ManageMediaSettingsComponent implements OnInit { } openDirectoryChooser(existingDirectory: string, formControl: string) { - const modalRef = this.modalService.open(DirectoryPickerComponent, { scrollable: true, size: 'lg', fullscreen: 'md' }); + const modalRef = this.modalService.open(DirectoryPickerComponent); modalRef.componentInstance.startingFolder = existingDirectory || ''; modalRef.componentInstance.helpUrl = ''; modalRef.closed.subscribe((closeResult: DirectoryPickerResult) => { diff --git a/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.html b/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.html index 8f609501a..6e8507a59 100644 --- a/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.html +++ b/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.html @@ -32,7 +32,7 @@
    -
    {{t('export-tooltip')}}
    diff --git a/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.ts b/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.ts index 7c870096b..a5c67ff2b 100644 --- a/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.ts +++ b/UI/Web/src/app/admin/manage-metadata-settings/manage-metadata-settings.component.ts @@ -5,7 +5,7 @@ import { DestroyRef, inject, OnInit, - ViewChild + viewChild } from '@angular/core'; import {TranslocoDirective} from "@jsverse/transloco"; import {FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; @@ -46,7 +46,7 @@ import {SettingsTabId} from "../../sidenav/preference-nav/preference-nav.compone }) export class ManageMetadataSettingsComponent implements OnInit { - @ViewChild(ManageMetadataMappingsComponent) manageMetadataMappingsComponent!: ManageMetadataMappingsComponent; + readonly manageMetadataMappingsComponent = viewChild.required(ManageMetadataMappingsComponent); private readonly settingService = inject(SettingsService); private readonly cdRef = inject(ChangeDetectorRef); @@ -142,7 +142,7 @@ export class ManageMetadataSettingsComponent implements OnInit { packData(withFieldMappings: boolean = true) { const model = this.settingsForm.value; - const exp: MetadataMappingsExport = this.manageMetadataMappingsComponent.packData() + const exp: MetadataMappingsExport = this.manageMetadataMappingsComponent().packData() return { ...model, diff --git a/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.html b/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.html index e1a4e96ee..9ef07b2a9 100644 --- a/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.html +++ b/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.html @@ -20,7 +20,7 @@
    -
    {{t('export-tooltip')}}
    diff --git a/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.ts b/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.ts index 7ea08ce0d..9309dad90 100644 --- a/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.ts +++ b/UI/Web/src/app/admin/manage-public-metadata-settings/manage-public-metadata-settings.component.ts @@ -5,7 +5,7 @@ import { DestroyRef, inject, OnInit, - ViewChild + viewChild } from '@angular/core'; import {SettingsService} from "../settings.service"; import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; @@ -41,7 +41,7 @@ import {SettingsTabId} from "../../sidenav/preference-nav/preference-nav.compone }) export class ManagePublicMetadataSettingsComponent implements OnInit { - @ViewChild(ManageMetadataMappingsComponent) manageMetadataMappingsComponent!: ManageMetadataMappingsComponent; + readonly manageMetadataMappingsComponent = viewChild.required(ManageMetadataMappingsComponent); private readonly settingService = inject(SettingsService); private readonly cdRef = inject(ChangeDetectorRef); @@ -71,7 +71,7 @@ export class ManagePublicMetadataSettingsComponent implements OnInit { const model = Object.assign({}, this.settings); const formValue = this.settingsForm.value; - const exp: MetadataMappingsExport = this.manageMetadataMappingsComponent.packData() + const exp: MetadataMappingsExport = this.manageMetadataMappingsComponent().packData() model.enableExtendedMetadataProcessing = formValue.enableExtendedMetadataProcessing; model.ageRatingMappings = exp.ageRatingMappings; diff --git a/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts b/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts index eaa8f87e1..b2aeb6ea7 100644 --- a/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts +++ b/UI/Web/src/app/admin/manage-scrobble-errors/manage-scrobble-errors.component.ts @@ -3,11 +3,10 @@ import { ChangeDetectorRef, Component, DestroyRef, - EventEmitter, inject, OnInit, - Output, - signal + signal, + output } from '@angular/core'; import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; import {EVENTS, MessageHubService} from "../../_services/message-hub.service"; @@ -44,7 +43,7 @@ export class ManageScrobbleErrorsComponent implements OnInit { private readonly seriesService = inject(SeriesService); private readonly actionService = inject(ActionService); - @Output() scrobbleCount = new EventEmitter(); + readonly scrobbleCount = output(); messageHubUpdate$ = this.messageHub.messages$.pipe(takeUntilDestroyed(this.destroyRef), diff --git a/UI/Web/src/app/admin/manage-scrobling/manage-scrobbling.component.html b/UI/Web/src/app/admin/manage-scrobling/manage-scrobbling.component.html index d1b65593a..70674b634 100644 --- a/UI/Web/src/app/admin/manage-scrobling/manage-scrobbling.component.html +++ b/UI/Web/src/app/admin/manage-scrobling/manage-scrobbling.component.html @@ -1,7 +1,7 @@ -@if(accountService.isAdmin$ | async) { +@if(accountService.hasAdminRole()) {
    diff --git a/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss b/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss index 2d2d758c2..99d57e175 100644 --- a/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss +++ b/UI/Web/src/app/admin/manage-settings/manage-settings.component.scss @@ -2,6 +2,6 @@ display: inherit; } .custom-position { - right: 5px; - top: -42px; + right: 0.3125rem; + top: -2.625rem; } diff --git a/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts b/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts index f452a95e5..0556849fb 100644 --- a/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts +++ b/UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts @@ -18,10 +18,6 @@ import { } from 'rxjs'; import {ServerService} from 'src/app/_services/server.service'; import {Job} from 'src/app/_models/job/job'; -import { - UpdateNotificationModalComponent -} from 'src/app/announcements/_components/update-notification/update-notification-modal.component'; -import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {DownloadService} from 'src/app/shared/_services/download.service'; import {DefaultValuePipe} from '../../_pipes/default-value.pipe'; import {AsyncPipe, TitleCasePipe} from '@angular/common'; @@ -32,9 +28,9 @@ import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component"; import {SettingButtonComponent} from "../../settings/_components/setting-button/setting-button.component"; -import {DefaultModalOptions} from "../../_models/default-modal-options"; import {ColumnMode, NgxDatatableModule} from "@siemens/ngx-datatable"; import {ResponsiveTableComponent} from "../../shared/_components/responsive-table/responsive-table.component"; +import {VersionService} from "../../_services/version.service"; interface AdhocTask { name: string; @@ -60,7 +56,7 @@ export class ManageTasksSettingsComponent implements OnInit { private readonly settingsService = inject(SettingsService); private readonly toastr = inject(ToastrService); private readonly serverService = inject(ServerService); - private readonly modalService = inject(NgbModal); + private readonly versionService = inject(VersionService); private readonly downloadService = inject(DownloadService); serverSettings!: ServerSettings; @@ -135,8 +131,7 @@ export class ManageTasksSettingsComponent implements OnInit { this.toastr.info(translate('toasts.no-updates')); return; } - const modalRef = this.modalService.open(UpdateNotificationModalComponent, DefaultModalOptions); - modalRef.componentInstance.updateData = update; + this.versionService.showUpdateModal('update-available', { update }, true); } }, ]; diff --git a/UI/Web/src/app/admin/manage-users/manage-users.component.html b/UI/Web/src/app/admin/manage-users/manage-users.component.html index 96bd28767..f522d48e8 100644 --- a/UI/Web/src/app/admin/manage-users/manage-users.component.html +++ b/UI/Web/src/app/admin/manage-users/manage-users.component.html @@ -37,7 +37,7 @@ } - + {{member.username | titlecase}} @if (member.isPending) { @@ -51,7 +51,7 @@ {{t('last-active-header')}} - @if ((messageHub.onlineUsers$ | async)?.includes(member.username)) { + @if ((messageHub.onlineUsersSignal() ?? []).includes(member.username)) { {{t('online-now-tooltip')}} } @else { {{member.lastActiveUtc | utcToLocalDate | timeAgo | sentenceCase | defaultDate}} @@ -103,7 +103,7 @@ } } -
    +
    {{member.username | titlecase}}
    @if (member.isPending) { @@ -176,7 +176,7 @@     - @if (canEditMember(member)) { + @if (!isMemberYou(member) && accountService.hasAdminRole()) {
    -
    - - diff --git a/UI/Web/src/app/announcements/_components/new-update-modal/new-update-modal.component.scss b/UI/Web/src/app/announcements/_components/new-update-modal/new-update-modal.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/UI/Web/src/app/announcements/_components/new-update-modal/new-update-modal.component.ts b/UI/Web/src/app/announcements/_components/new-update-modal/new-update-modal.component.ts deleted file mode 100644 index 39268577a..000000000 --- a/UI/Web/src/app/announcements/_components/new-update-modal/new-update-modal.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core'; -import {TranslocoDirective, TranslocoService} from "@jsverse/transloco"; -import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; -import {UpdateVersionEvent} from "../../../_models/events/update-version-event"; -import {UpdateSectionComponent} from "../update-section/update-section.component"; -import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe"; -import {VersionService} from "../../../_services/version.service"; -import {ChangelogUpdateItemComponent} from "../changelog-update-item/changelog-update-item.component"; - -/** - * This modal is used when an update occurred and the UI needs to be refreshed to get the latest JS libraries - */ -@Component({ - selector: 'app-new-update-modal', - imports: [ - TranslocoDirective, - ChangelogUpdateItemComponent - ], - templateUrl: './new-update-modal.component.html', - styleUrl: './new-update-modal.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class NewUpdateModalComponent { - - private readonly ngbModal = inject(NgbActiveModal); - private readonly translocoService = inject(TranslocoService); - - @Input({required: true}) version: string = ''; - @Input({required: true}) update: UpdateVersionEvent | null = null; - - close() { - this.ngbModal.dismiss(); - } - - refresh() { - this.bustLocaleCache(); - this.applyUpdate(this.version); - // Refresh manually - location.reload(); - } - - private applyUpdate(version: string): void { - this.bustLocaleCache(); - location.reload(); - } - - private bustLocaleCache() { - localStorage.removeItem('@transloco/translations/timestamp'); - localStorage.removeItem('@transloco/translations'); - localStorage.removeItem('translocoLang'); - const locale = localStorage.getItem('kavita-locale') || 'en'; - (this.translocoService as any).cache.delete(locale); - (this.translocoService as any).cache.clear(); - - // Retrigger transloco - setTimeout(() => { - this.translocoService.setActiveLang(locale); - }, 10); - } - -} diff --git a/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.html b/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.html deleted file mode 100644 index 18714307f..000000000 --- a/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.html +++ /dev/null @@ -1,18 +0,0 @@ - -
    - - -
    -
    - -

    {{t('subtitle', {count: versionsOutOfDate})}}

    -

    {{t('description-1')}}

    -

    -

    {{t('description-3')}}

    -
    -
    - Discord - -
    - -     diff --git a/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.scss b/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.ts b/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.ts deleted file mode 100644 index 7602737a9..000000000 --- a/UI/Web/src/app/announcements/_components/out-of-date-modal/out-of-date-modal.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {Component, inject, Input} from '@angular/core'; -import {FormsModule} from "@angular/forms"; -import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; -import {TranslocoDirective} from "@jsverse/transloco"; -import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe"; - -@Component({ - selector: 'app-out-of-date-modal', - imports: [ - FormsModule, - TranslocoDirective, - SafeHtmlPipe - ], - templateUrl: './out-of-date-modal.component.html', - styleUrl: './out-of-date-modal.component.scss' -}) -export class OutOfDateModalComponent { - - private readonly ngbModal = inject(NgbActiveModal); - - @Input({required: true}) versionsOutOfDate: number = 0; - - close() { - this.ngbModal.close(); - } -} diff --git a/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.html b/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.html deleted file mode 100644 index 52a20e89d..000000000 --- a/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.html +++ /dev/null @@ -1,19 +0,0 @@ - -
    -

    {{t('title')}}

    - -
    -
    - @if (updateData) { - - } -
    - -
    - {{t('help')}} - - @if(!updateData.isDocker) { - {{t('download')}} - } -
    -     diff --git a/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.ts b/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.ts deleted file mode 100644 index 4517dcffc..000000000 --- a/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {ChangeDetectionStrategy, Component, inject, Input, OnInit} from '@angular/core'; -import {NgbActiveModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap'; -import {UpdateVersionEvent} from 'src/app/_models/events/update-version-event'; - -import {TranslocoDirective} from "@jsverse/transloco"; -import {WikiLink} from "../../../_models/wiki"; -import {ChangelogUpdateItemComponent} from "../changelog-update-item/changelog-update-item.component"; - - -@Component({ - selector: 'app-update-notification-modal', - imports: [NgbModalModule, TranslocoDirective, ChangelogUpdateItemComponent], - templateUrl: './update-notification-modal.component.html', - styleUrls: ['./update-notification-modal.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class UpdateNotificationModalComponent implements OnInit { - - private readonly modal = inject(NgbActiveModal); - @Input({required: true}) updateData!: UpdateVersionEvent; - updateUrl: string = WikiLink.UpdateNative; - - // TODO: I think I can remove this and just use NewUpdateModalComponent instead which handles both Nightly/Stable - - ngOnInit() { - if (this.updateData.isDocker) { - this.updateUrl = WikiLink.UpdateDocker; - } else { - this.updateUrl = WikiLink.UpdateNative; - } - } - - close() { - this.modal.close({success: false, series: undefined}); - } -} diff --git a/UI/Web/src/app/announcements/_components/update-section/update-section.component.html b/UI/Web/src/app/announcements/_components/update-section/update-section.component.html index 45db97bac..e9bc3536a 100644 --- a/UI/Web/src/app/announcements/_components/update-section/update-section.component.html +++ b/UI/Web/src/app/announcements/_components/update-section/update-section.component.html @@ -1,9 +1,11 @@ -@if (items.length > 0) { -
    {{ title }} - {{items.length}} +@let totalItems = items().length; + +@if (totalItems > 0) { +
    {{ title() }} + {{totalItems}}
      - @for(item of items; track item;) { + @for(item of items(); track item;) {
    • {{item}}
      • }
    diff --git a/UI/Web/src/app/announcements/_components/update-section/update-section.component.ts b/UI/Web/src/app/announcements/_components/update-section/update-section.component.ts index 129174424..b4e276db7 100644 --- a/UI/Web/src/app/announcements/_components/update-section/update-section.component.ts +++ b/UI/Web/src/app/announcements/_components/update-section/update-section.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input} from '@angular/core'; @Component({ selector: 'app-update-section', @@ -8,6 +8,6 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; changeDetection: ChangeDetectionStrategy.OnPush }) export class UpdateSectionComponent { - @Input({required: true}) items: Array = []; - @Input({required: true}) title: string = ''; + items = input.required(); + title = input.required(); } diff --git a/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.html b/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.html new file mode 100644 index 000000000..96f30fc1d --- /dev/null +++ b/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.html @@ -0,0 +1,38 @@ + +
    +

    {{t(title())}}

    + @if (mode() !== 'refresh') { + + } +
    + +
    + @if (mode() === 'out-of-date') { +

    {{t('out-of-date.subtitle', {count: versionsOutOfDate()})}}

    +

    {{t('out-of-date.description-1')}}

    +

    +

    {{t('out-of-date.description-3')}}

    + } @else if (update()) { + + } +
    + +
    + @switch (mode()) { + @case ('refresh') { + + } + @case ('update-available') { + {{t('update-notification.help')}} + + @if (!isDocker()) { + {{t('update-notification.download')}} + } + } + @case ('out-of-date') { + Discord + + } + } +
    +     diff --git a/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.scss b/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.scss similarity index 53% rename from UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.scss rename to UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.scss index b61e3b7b5..4bd1e0e08 100644 --- a/UI/Web/src/app/announcements/_components/update-notification/update-notification-modal.component.scss +++ b/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.scss @@ -1,7 +1,7 @@ .update-body { - width: 100%; - word-wrap: break-word; - white-space: pre-wrap; + width: 100%; + word-wrap: break-word; + white-space: pre-wrap; } diff --git a/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.ts b/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.ts new file mode 100644 index 000000000..ff3e45bfe --- /dev/null +++ b/UI/Web/src/app/announcements/_components/version-update-modal/version-update-modal.component.ts @@ -0,0 +1,68 @@ +import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core'; +import {UpdateVersionEvent} from "../../../_models/events/update-version-event"; +import {TranslocoDirective, TranslocoService} from "@jsverse/transloco"; +import {WikiLink} from "../../../_models/wiki"; +import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; +import {ChangelogUpdateItemComponent} from "../changelog-update-item/changelog-update-item.component"; +import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe"; + +@Component({ + selector: 'app-version-update-modal', + imports: [ + ChangelogUpdateItemComponent, + TranslocoDirective, + SafeHtmlPipe + ], + templateUrl: './version-update-modal.component.html', + styleUrl: './version-update-modal.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class VersionUpdateModalComponent { + private readonly translocoService = inject(TranslocoService); + private readonly modal = inject(NgbActiveModal); + + /** Determines which modal variant to show, drives messaging and buttons */ + mode = input<'refresh' | 'update-available' | 'out-of-date'>('refresh'); + /** Changelog data, null for 'out-of-date' modal*/ + update = input(null); + /** Number of versions out of date, only applicable for 'out-of-date' modal */ + versionsOutOfDate = input(0); + + isDocker = computed(() => this.update()?.isDocker ?? false); + /** Wiki help link — Docker or native install guide */ + helpUrl = computed(() => { + return this.isDocker() ? WikiLink.UpdateDocker : WikiLink.UpdateNative; + }); + private readonly localePrefix: Record = { + 'refresh': 'new-version', + 'update-available': 'update-notification', + 'out-of-date': 'out-of-date', + }; + title = computed(() => `${this.localePrefix[this.mode()]}.title`); + + close() { + this.modal.dismiss(); + } + + refresh() { + this.bustLocaleCache(); + // Refresh manually + location.reload(); + } + + + private bustLocaleCache() { + localStorage.removeItem('@transloco/translations/timestamp'); + localStorage.removeItem('@transloco/translations'); + localStorage.removeItem('translocoLang'); + const locale = localStorage.getItem('kavita-locale') || 'en'; + (this.translocoService as any).cache.delete(locale); + (this.translocoService as any).cache.clear(); + + // Retrigger transloco + setTimeout(() => { + this.translocoService.setActiveLang(locale); + }, 10); + } + +} diff --git a/UI/Web/src/app/app-routing.module.ts b/UI/Web/src/app/app-routing.module.ts index e02c79556..be41214e9 100644 --- a/UI/Web/src/app/app-routing.module.ts +++ b/UI/Web/src/app/app-routing.module.ts @@ -1,12 +1,17 @@ -import {NgModule} from '@angular/core'; -import {PreloadAllModules, RouterModule, Routes} from '@angular/router'; -import {AuthGuard} from './_guards/auth.guard'; -import {LibraryAccessGuard} from './_guards/library-access.guard'; +import {Routes} from '@angular/router'; +import {authGuard} from './_guards/auth.guard'; +import {libraryAccessGuard} from './_guards/library-access.guard'; +import {libraryResolver} from "./_resolvers/library.resolver"; +import {seriesResolver} from "./_resolvers/series.resolver"; +import {volumeResolver} from "./_resolvers/volume.resolver"; +import {chapterResolver} from "./_resolvers/chapter.resolver"; +import {personResolver} from "./_resolvers/person.resolver"; +import {readingListResolver} from "./_resolvers/reading-list.resolver"; export const routes: Routes = [ { path: '', - canActivate: [AuthGuard], + canActivate: [authGuard], runGuardsAndResolvers: 'always', children: [ { @@ -17,10 +22,6 @@ export const routes: Routes = [ path: 'collections', loadChildren: () => import('./_routes/collections-routing.module').then(m => m.routes) }, - { - path: 'lists', - loadChildren: () => import('./_routes/reading-list-routing.module').then(m => m.routes) - }, { path: 'announcements', loadChildren: () => import('./_routes/announcements-routing.module').then(m => m.routes) @@ -46,8 +47,11 @@ export const routes: Routes = [ loadChildren: () => import('./_routes/dashboard-routing.module').then(m => m.routes) }, { - path: 'person', - loadChildren: () => import('./_routes/person-detail-routing.module').then(m => m.routes) + path: 'person/:name', + runGuardsAndResolvers: 'always', + canActivate: [authGuard], + resolve: { person: personResolver }, + loadComponent: () => import('./person-detail/person-detail.component').then(m => m.PersonDetailComponent) }, { path: 'browse', @@ -58,45 +62,64 @@ export const routes: Routes = [ loadChildren: () => import('./_routes/profile-routing.module').then(m => m.routes) }, { - path: 'library', + path: 'lists', + pathMatch: 'full', + title: 'title.reading-lists', + loadComponent: () => import('./reading-list/_components/reading-lists/reading-lists.component').then(c => c.ReadingListsComponent) + }, + { + path: 'lists/:readingListId', runGuardsAndResolvers: 'always', - canActivate: [AuthGuard, LibraryAccessGuard], + canActivate: [authGuard], + data: {titleField: 'readingList', titleProp: 'title'}, + resolve: { readingList: readingListResolver }, + loadComponent: () => import('./reading-list/_components/reading-list-detail/reading-list-detail.component').then(c => c.ReadingListDetailComponent) + }, + { + path: 'library/:libraryId', + runGuardsAndResolvers: 'always', + canActivate: [libraryAccessGuard], + resolve: { library: libraryResolver }, children: [ { - path: ':libraryId', + path: '', pathMatch: 'full', loadChildren: () => import('./_routes/library-detail-routing.module').then(m => m.routes) }, { - path: ':libraryId/series/:seriesId', + path: 'series/:seriesId', pathMatch: 'full', - loadComponent: () => import('../app/series-detail/_components/series-detail/series-detail.component').then(c => c.SeriesDetailComponent) + data: {titleField: 'series', titleProp: 'name', titleSuffix: ' Details'}, + resolve: { series: seriesResolver }, + loadComponent: () => import('./series-detail/_components/series-detail/series-detail.component').then(c => c.default) }, { - path: ':libraryId/series/:seriesId/chapter/:chapterId', - pathMatch: 'full', - loadComponent: () => import('./chapter-detail/chapter-detail.component').then(c => c.ChapterDetailComponent) - }, - { - path: ':libraryId/series/:seriesId/volume/:volumeId', + path: 'series/:seriesId/volume/:volumeId', pathMatch: 'full', + resolve: { series: seriesResolver, volume: volumeResolver }, loadComponent: () => import('./volume-detail/volume-detail.component').then(c => c.VolumeDetailComponent) }, { - path: ':libraryId/series/:seriesId/manga', + path: 'series/:seriesId/chapter/:chapterId', + pathMatch: 'full', + resolve: { series: seriesResolver, chapter: chapterResolver }, + loadComponent: () => import('./chapter-detail/chapter-detail.component').then(c => c.ChapterDetailComponent) + }, + { + path: 'series/:seriesId/manga', loadChildren: () => import('./_routes/manga-reader.router.module').then(m => m.routes) }, { - path: ':libraryId/series/:seriesId/book', + path: 'series/:seriesId/book', loadChildren: () => import('./_routes/book-reader.router.module').then(m => m.routes) }, { - path: ':libraryId/series/:seriesId/pdf', + path: 'series/:seriesId/pdf', loadChildren: () => import('./_routes/pdf-reader.router.module').then(m => m.routes) - }, + } ] }, - {path: '', pathMatch: 'full', redirectTo: 'home'}, + { path: '', pathMatch: 'full', redirectTo: 'home' } ] }, { @@ -105,10 +128,8 @@ export const routes: Routes = [ }, { path: 'login', - loadChildren: () => import('./_routes/registration.router.module').then(m => m.routes) // TODO: Refactor so we just use /registration/login going forward + loadChildren: () => import('./_routes/registration.router.module').then(m => m.routes) }, - {path: 'libraries', pathMatch: 'full', redirectTo: 'home'}, - {path: '**', pathMatch: 'prefix', redirectTo: 'home'}, - {path: '**', pathMatch: 'full', redirectTo: 'home'}, - {path: '', pathMatch: 'full', redirectTo: 'home'}, + { path: 'libraries', pathMatch: 'full', redirectTo: 'home' }, + { path: '**', redirectTo: 'home' } ]; diff --git a/UI/Web/src/app/app.component.html b/UI/Web/src/app/app.component.html index b05dae600..ea773c96c 100644 --- a/UI/Web/src/app/app.component.html +++ b/UI/Web/src/app/app.component.html @@ -1,12 +1,11 @@ -
    - @if (accountService.currentUser$ | async; as currentUser) { - @if (currentUser && (navService.navbarVisible$ | async) === true) { -
    -
    - -
    +
    + @let currentUser = accountService.currentUser(); + @if (currentUser && (navService.navbarVisible$ | async) === true) { +
    +
    +
    - } +
    } diff --git a/UI/Web/src/app/app.component.scss b/UI/Web/src/app/app.component.scss index f5b3cfda3..d34af3501 100644 --- a/UI/Web/src/app/app.component.scss +++ b/UI/Web/src/app/app.component.scss @@ -1,13 +1,13 @@ @use '../theme/variables' as theme; .content-wrapper { - padding: 0 0 0 10px; + padding: 0 0 0 0.625rem; height: calc(var(--vh)* 100 - var(--nav-offset)); } .companion-bar { transition: all var(--side-nav-companion-bar-transistion); - margin-left: 45px; + margin-left: 2.8125rem; overflow-y: hidden; overflow-x: hidden; height: calc(var(--vh)* 100 - var(--nav-mobile-offset)); @@ -86,7 +86,7 @@ height: calc(var(--vh) * 100 - var(--nav-mobile-offset)); scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0.1); scrollbar-width: thin; - margin-bottom: 20px; + margin-bottom: 1.25rem; overflow-y: auto; } @@ -120,7 +120,7 @@ z-index: -1; pointer-events: none; background-color: var(--bs-body-bg); - filter: blur(20px); + filter: blur(1.25rem); object-fit: contain; transform: scale(1.1); mix-blend-mode: color; diff --git a/UI/Web/src/app/app.component.ts b/UI/Web/src/app/app.component.ts index 35e405a8b..d37922abf 100644 --- a/UI/Web/src/app/app.component.ts +++ b/UI/Web/src/app/app.component.ts @@ -1,12 +1,12 @@ -import {ChangeDetectionStrategy, Component, DestroyRef, HostListener, inject, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, DestroyRef, HostListener, inject, OnInit} from '@angular/core'; import {NavigationStart, Router, RouterOutlet} from '@angular/router'; -import {map, shareReplay, take} from 'rxjs/operators'; +import {shareReplay, take} from 'rxjs/operators'; import {AccountService} from './_services/account.service'; import {LibraryService} from './_services/library.service'; import {NavService} from './_services/nav.service'; -import {NgbModal, NgbModalConfig, NgbOffcanvas, NgbRatingConfig} from '@ng-bootstrap/ng-bootstrap'; +import {NgbModal, NgbOffcanvas} from '@ng-bootstrap/ng-bootstrap'; import {AsyncPipe, DOCUMENT, NgClass} from '@angular/common'; -import {filter, Observable} from 'rxjs'; +import {filter} from 'rxjs'; import {ThemeService} from "./_services/theme.service"; import {SideNavComponent} from './sidenav/_components/side-nav/side-nav.component'; import {NavHeaderComponent} from "./nav/_components/nav-header/nav-header.component"; @@ -44,21 +44,10 @@ export class AppComponent implements OnInit { private readonly breakpointService = inject(BreakpointService); // Needs to be injected to run background job private readonly licenseService = inject(LicenseService); private readonly localizationService = inject(LocalizationService); - - transitionState$!: Observable; + transitionState = computed(() => this.accountService.userPreferences()?.noTransitions ?? false); constructor() { - const ratingConfig = inject(NgbRatingConfig); - const modalConfig = inject(NgbModalConfig); - - - modalConfig.fullscreen = 'lg'; - - // Setup default rating config - ratingConfig.max = 5; - ratingConfig.resettable = true; - // Close any open modals when a route change occurs this.router.events .pipe( @@ -83,13 +72,6 @@ export class AppComponent implements OnInit { } }); - - this.transitionState$ = this.accountService.currentUser$.pipe( - map((user) => { - if (!user) return false; - return user.preferences.noTransitions; - }), takeUntilDestroyed(this.destroyRef)); - this.localizationService.getLocales().subscribe(); // This will cache the localizations on startup } @@ -109,12 +91,12 @@ export class AppComponent implements OnInit { setCurrentUser() { - const user = this.accountService.currentUserSignal(); + const user = this.accountService.currentUser(); if (!user) return; // Refresh the user data this.accountService.refreshAccount().subscribe(account => { - if (this.accountService.hasAdminRole(user)) { + if (this.accountService.hasAdminRole()) { this.licenseService.licenseInfo().subscribe(); } }); diff --git a/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.scss b/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.scss index 4e032c440..5f76a9b4f 100644 --- a/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.scss +++ b/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.scss @@ -19,7 +19,7 @@ } .spoilers { - filter: blur(3px); + filter: blur(0.1875rem); } :host ::ng-deep quill-view { diff --git a/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.ts b/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.ts index 4040090d4..bcd93fa4e 100644 --- a/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.ts +++ b/UI/Web/src/app/book-reader/_components/_annotations/annotation-card/annotation-card.component.ts @@ -3,11 +3,10 @@ import { Component, computed, effect, - EventEmitter, inject, input, model, - Output, + output, signal, Signal } from '@angular/core'; @@ -96,12 +95,12 @@ export class AnnotationCardComponent { inBookReader = input(false); selected = input(false); - @Output() delete = new EventEmitter(); - @Output() navigate = new EventEmitter(); + readonly delete = output(); + readonly navigate = output(); /** * Fire when the checkbox is pressed, with the last known state (inverse of checked state) */ - @Output() selection = new EventEmitter(); + readonly selection = output(); titleColor: Signal; hasClicked = signal(false); @@ -170,7 +169,7 @@ export class AnnotationCardComponent { if (!annotation) return; this.annotationService.delete(annotation.id).subscribe(_ => { - this.delete.emit(); + this.delete.emit(undefined); }); } } diff --git a/UI/Web/src/app/book-reader/_components/_annotations/epub-highlight/epub-highlight.component.ts b/UI/Web/src/app/book-reader/_components/_annotations/epub-highlight/epub-highlight.component.ts index b8d1c7f5f..82a55c43c 100644 --- a/UI/Web/src/app/book-reader/_components/_annotations/epub-highlight/epub-highlight.component.ts +++ b/UI/Web/src/app/book-reader/_components/_annotations/epub-highlight/epub-highlight.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, effect, ElementRef, inject, model, ViewChild} from '@angular/core'; +import {Component, computed, effect, ElementRef, inject, model, viewChild} from '@angular/core'; import {Annotation} from "../../../_models/annotations/annotation"; import {EpubReaderMenuService} from "../../../../_services/epub-reader-menu.service"; import {AnnotationService} from "../../../../_services/annotation.service"; @@ -21,7 +21,7 @@ export class EpubHighlightComponent { annotation = model.required(); - @ViewChild('highlightSpan', { static: false }) highlightSpan!: ElementRef; + readonly highlightSpan = viewChild.required('highlightSpan'); private readonly highlightSlotPipe = new SlotColorPipe(); diff --git a/UI/Web/src/app/book-reader/_components/_annotations/highlight-bar/highlight-bar.component.html b/UI/Web/src/app/book-reader/_components/_annotations/highlight-bar/highlight-bar.component.html index e9bed0e2d..11a9175a7 100644 --- a/UI/Web/src/app/book-reader/_components/_annotations/highlight-bar/highlight-bar.component.html +++ b/UI/Web/src/app/book-reader/_components/_annotations/highlight-bar/highlight-bar.component.html @@ -1,12 +1,12 @@ -
    +
    @let collapsed = isCollapsed(); @if (desktopLayout() && canCollapse()) { } @@ -100,7 +100,7 @@ @if (annotation() && formGroup) {
    -
    +

    diff --git a/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.scss b/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.scss index eb96a89e7..285d4c06d 100644 --- a/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.scss +++ b/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.scss @@ -11,7 +11,7 @@ .content-quote { color: var(--drawer-text-color); - max-height: 320px; + max-height: 20rem; overflow: hidden; display: -webkit-box; line-clamp: 2; @@ -24,7 +24,7 @@ } .setting-section-break { - margin: 10px 0 !important; + margin: 0.625rem 0 !important; } .offcanvas-title-right { diff --git a/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.ts b/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.ts index 69f1c4de8..0b0df548e 100644 --- a/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.ts +++ b/UI/Web/src/app/book-reader/_components/_drawers/view-edit-annotation-drawer/view-edit-annotation-drawer.component.ts @@ -8,8 +8,8 @@ import { OnInit, signal, Signal, - ViewChild, - ViewContainerRef + ViewContainerRef, + viewChild } from '@angular/core'; import {NgbActiveOffcanvas, NgbOffcanvas} from "@ng-bootstrap/ng-bootstrap"; import {AnnotationService} from "../../../../_services/annotation.service"; @@ -89,7 +89,7 @@ export class ViewEditAnnotationDrawerComponent implements OnInit { private readonly offcanvasService = inject(NgbOffcanvas); protected readonly breakpointService = inject(BreakpointService); - @ViewChild('renderTarget', {read: ViewContainerRef}) renderTarget!: ViewContainerRef; + readonly renderTarget = viewChild.required('renderTarget', { read: ViewContainerRef }); annotation = signal(null); mode = signal(AnnotationMode.View); @@ -267,7 +267,7 @@ export class ViewEditAnnotationDrawerComponent implements OnInit { if (this.isEditMode()) return; const annotation = this.annotation(); - if (annotation == null || annotation.ownerUsername !== this.accountService.currentUserSignal()?.username) return; + if (annotation == null || annotation.ownerUsername !== this.accountService.currentUser()?.username) return; this.mode.set(AnnotationMode.Edit); } @@ -295,10 +295,10 @@ export class ViewEditAnnotationDrawerComponent implements OnInit { if (highlightAnnotation === null) return; // Clear any existing components first - this.renderTarget.clear(); + this.renderTarget().clear(); const parentElem = this.document.querySelector('#render-target'); - this.epubHighlightService.initializeHighlightElements([highlightAnnotation], this.renderTarget, parentElem, {showIcon: false, showHighlight: true}); + this.epubHighlightService.initializeHighlightElements([highlightAnnotation], this.renderTarget(), parentElem, {showIcon: false, showHighlight: true}); } private isSelectedTextAfterPunctuation(contextText: string, selectedIndex: number): boolean { diff --git a/UI/Web/src/app/book-reader/_components/_drawers/view-toc-drawer/view-toc-drawer.component.scss b/UI/Web/src/app/book-reader/_components/_drawers/view-toc-drawer/view-toc-drawer.component.scss index 7e6e64c65..1d64cda15 100644 --- a/UI/Web/src/app/book-reader/_components/_drawers/view-toc-drawer/view-toc-drawer.component.scss +++ b/UI/Web/src/app/book-reader/_components/_drawers/view-toc-drawer/view-toc-drawer.component.scss @@ -7,7 +7,7 @@ .drawer-text i { color: var(--drawer-text-color); - font-size: 16px; + font-size: 1rem; } .drawer-text:hover i { diff --git a/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.html b/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.html index 46133d9c3..cbef4a529 100644 --- a/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.html +++ b/UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.html @@ -1,9 +1,9 @@ - @if(selectedText.length > 0 || mode !== BookLineOverlayMode.None) { + @if(showOverlay()) {
    - @switch (mode) { + @switch (mode()) { @case (BookLineOverlayMode.None) {
    -
    - -
    - @if (lists.length >= MaxItems) { -
    - -
    - - -
    -
    - } - -
      - @for(collectionTag of lists | filter: filterList; let i = $index; track collectionTag.title + collectionTag.promoted) { -
    • - {{collectionTag.title}} - @if (collectionTag.promoted) { - - } -
      • - } - - @if (lists.length === 0 && !loading) { -
    • {{t('no-data')}}
      • - } - - @if (loading) { -
    • - -
      • - } -
    -
    -
    -
    -
    -
    - - -
    -
    - -
    -
    -
    -
    - - - - - diff --git a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss b/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss deleted file mode 100644 index 3a83e4f0e..000000000 --- a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss +++ /dev/null @@ -1,16 +0,0 @@ -.clickable:hover, .clickable:focus { - background-color: var(--list-group-hover-bg-color, var(--primary-color)); -} - -.collection { - overflow: auto; - .modal-body { - max-height: calc(100vh - 235px); - min-height: 150px; - .list-group { - overflow: auto; - max-height: calc(100vh - 355px); - min-height: 32px; - } - } -} diff --git a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts b/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts deleted file mode 100644 index e28713a13..000000000 --- a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - inject, - Input, - OnInit, - ViewChild, - ViewEncapsulation -} from '@angular/core'; -import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; -import {NgbActiveModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap'; -import {ToastrService} from 'ngx-toastr'; -import {UserCollection} from 'src/app/_models/collection-tag'; -import {ReadingList} from 'src/app/_models/reading-list'; -import {CollectionTagService} from 'src/app/_services/collection-tag.service'; - -import {FilterPipe} from "../../../_pipes/filter.pipe"; -import {translate, TranslocoDirective} from "@jsverse/transloco"; -import {ScrobbleProvider} from "../../../_services/scrobbling.service"; - -@Component({ - selector: 'app-bulk-add-to-collection', - imports: [ReactiveFormsModule, FilterPipe, NgbModalModule, TranslocoDirective], - templateUrl: './bulk-add-to-collection.component.html', - styleUrls: ['./bulk-add-to-collection.component.scss'], - encapsulation: ViewEncapsulation.None, // This is needed as per the bootstrap modal documentation to get styles to work. - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class BulkAddToCollectionComponent implements OnInit, AfterViewInit { - - private readonly modal = inject(NgbActiveModal); - private readonly collectionService = inject(CollectionTagService); - private readonly toastr = inject(ToastrService); - private readonly cdRef = inject(ChangeDetectorRef); - protected readonly MaxItems = 8; - - @Input({required: true}) title!: string; - /** - * Series Ids to add to Collection Tag - */ - @Input() seriesIds: Array = []; - @ViewChild('title') inputElem!: ElementRef; - - /** - * All existing collections sorted by recent use date - */ - lists: Array = []; - loading: boolean = false; - isCreating: boolean = false; - listForm: FormGroup = new FormGroup({}); - - ngOnInit(): void { - - this.listForm.addControl('title', new FormControl(this.title, [])); - this.listForm.addControl('filterQuery', new FormControl('', [])); - - this.loading = true; - this.cdRef.markForCheck(); - this.collectionService.allCollections(true).subscribe(tags => { - // Don't allow Smart Collections in - this.lists = tags.filter(t => t.source === ScrobbleProvider.Kavita); - this.loading = false; - this.cdRef.markForCheck(); - }); - } - - ngAfterViewInit() { - // Shift focus to input - if (this.inputElem) { - this.inputElem.nativeElement.select(); - this.cdRef.markForCheck(); - } - } - - close() { - this.modal.close(); - } - - create() { - if (this.isCreating) return; - const tagName = this.listForm.value.title; - this.isCreating = true; - this.cdRef.markForCheck(); - this.collectionService.addByMultiple(0, this.seriesIds, tagName).subscribe(() => { - this.toastr.success(translate('toasts.series-added-to-collection', {collectionName: tagName})); - this.isCreating = false; - this.modal.close(); - }); - } - - addToCollection(tag: UserCollection) { - if (this.seriesIds.length === 0) return; - - this.collectionService.addByMultiple(tag.id, this.seriesIds, '').subscribe(() => { - this.toastr.success(translate('toasts.series-added-to-collection', {collectionName: tag.title})); - this.modal.close(); - }); - - } - - filterList = (listItem: ReadingList) => { - return listItem.title.toLowerCase().indexOf((this.listForm.value.filterQuery || '').toLowerCase()) >= 0; - } - -} diff --git a/UI/Web/src/app/cards/_modals/bulk-set-reading-profile-modal/bulk-set-reading-profile-modal.component.ts b/UI/Web/src/app/cards/_modals/bulk-set-reading-profile-modal/bulk-set-reading-profile-modal.component.ts index 6fe56119c..9efd16166 100644 --- a/UI/Web/src/app/cards/_modals/bulk-set-reading-profile-modal/bulk-set-reading-profile-modal.component.ts +++ b/UI/Web/src/app/cards/_modals/bulk-set-reading-profile-modal/bulk-set-reading-profile-modal.component.ts @@ -1,21 +1,10 @@ -import { - AfterViewInit, - ChangeDetectorRef, - Component, computed, - ElementRef, - inject, - Input, - model, - OnInit, signal, TemplateRef, viewChild, - ViewChild -} from '@angular/core'; +import {Component, computed, inject, input, OnInit, signal, TemplateRef, viewChild} from '@angular/core'; import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; import {ToastrService} from "ngx-toastr"; -import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; +import {ReactiveFormsModule} from "@angular/forms"; import {translate, TranslocoDirective} from "@jsverse/transloco"; import {ReadingProfileService} from "../../../_services/reading-profile.service"; -import {ReadingProfile, ReadingProfileKind} from "../../../_models/preferences/reading-profiles"; -import {FilterPipe} from "../../../_pipes/filter.pipe"; +import {ReadingProfile} from "../../../_models/preferences/reading-profiles"; import {SentenceCasePipe} from "../../../_pipes/sentence-case.pipe"; import {ListSelectModalComponent} from "../../../shared/_components/list-select-modal/list-select-modal.component"; import {ClientDevice} from "../../../_models/client-device"; @@ -45,8 +34,8 @@ export class BulkSetReadingProfileModalComponent implements OnInit { /** * Series Ids to add to Reading Profile */ - @Input() seriesIds: Array = []; - @Input() libraryId: number | undefined; + seriesIds = input([]); + libraryId = input(); private profiles = signal([]); private currentlyBoundProfiles = signal([]); @@ -61,12 +50,15 @@ export class BulkSetReadingProfileModalComponent implements OnInit { this.currentlyBoundProfiles().map(profile => profile.id)); ngOnInit(): void { - if (this.libraryId !== undefined) { - this.readingProfileService.getForLibrary(this.libraryId).subscribe(profiles => { + const seriesIds = this.seriesIds(); + const libraryId = this.libraryId(); + + if (libraryId !== undefined) { + this.readingProfileService.getForLibrary(libraryId).subscribe(profiles => { this.currentlyBoundProfiles.set(profiles) }); - } else if (this.seriesIds.length === 1) { - this.readingProfileService.getAllForSeries(this.seriesIds[0]).subscribe(profiles => { + } else if (seriesIds.length === 1) { + this.readingProfileService.getAllForSeries(seriesIds[0]).subscribe(profiles => { this.currentlyBoundProfiles.set(profiles); }); } @@ -118,29 +110,30 @@ export class BulkSetReadingProfileModalComponent implements OnInit { addToProfile(profileIds: number | number[]) { profileIds = Array.isArray(profileIds) ? profileIds : [profileIds]; - if (this.seriesIds.length == 1) { - this.readingProfileService.addToSeries(profileIds, this.seriesIds[0]).subscribe(() => { + const seriesIds = this.seriesIds(); + const libraryId = this.libraryId(); + + if (seriesIds.length == 1) { + this.readingProfileService.addToSeries(profileIds, seriesIds[0]).subscribe(() => { this.toastr.success(translate('toasts.series-bound-to-reading-profile', {amount: profileIds.length})); this.modal.close(); }); return; } - if (this.seriesIds.length > 1) { - this.readingProfileService.bulkAddToSeries(profileIds, this.seriesIds).subscribe(() => { + if (seriesIds.length > 1) { + this.readingProfileService.bulkAddToSeries(profileIds, seriesIds).subscribe(() => { this.toastr.success(translate('toasts.series-bound-to-reading-profile', {amount: profileIds.length})); this.modal.close(); }); return; } - if (this.libraryId) { - this.readingProfileService.addToLibrary(profileIds, this.libraryId).subscribe(() => { + if (libraryId) { + this.readingProfileService.addToLibrary(profileIds, libraryId).subscribe(() => { this.toastr.success(translate('toasts.library-bound-to-reading-profile', {amount: profileIds.length})); this.modal.close(); }); } } - - protected readonly ReadingProfileKind = ReadingProfileKind; } diff --git a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.html similarity index 87% rename from UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html rename to UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.html index d86f6c9f1..68769b013 100644 --- a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html +++ b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.html @@ -1,12 +1,12 @@
    - +
      + orientation="{{breakpointService.isMobile() ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
    • {{t(TabID.General)}} @@ -48,7 +48,7 @@
      • - @if (tag.source === ScrobbleProvider.Kavita) { + @if (tag().source === ScrobbleProvider.Kavita) {
    • {{t(TabID.Series)}} @@ -65,7 +65,7 @@
    -
    @@ -73,7 +73,7 @@ @for (item of series | filter: filterList; let i = $index; track item.id) {
  • -
    @@ -99,41 +99,41 @@ {{t(TabID.CoverImage)}}
    • - @if (tag.source !== ScrobbleProvider.Kavita) { + @if (tag().source !== ScrobbleProvider.Kavita) {
  • {{t(TabID.Info)}}
    {{t('last-sync-title')}}
    -
    {{tag.lastSyncUtc | utcToLocalTime:'shortDate' | defaultDate}}
    +
    {{tag().lastSyncUtc | utcToLocalTime:'shortDate' | defaultDate}}
    {{t('source-url-title')}}
    - {{tag.sourceUrl}} + {{tag().sourceUrl}}
    {{t('total-series-title')}}
    -
    {{tag.totalSourceCount | number}}
    +
    {{tag().totalSourceCount | number}}
    {{t('missing-series-title')}}
    -
    {{tag.totalSourceCount - series.length}}
    +
    {{tag().totalSourceCount - series.length}}
    - - @if (tag.missingSeriesFromSource !== null && (tag.totalSourceCount - series.length) > 0) { + @let missingSeriesFromSource = tag().missingSeriesFromSource; + @if (missingSeriesFromSource !== null && (tag().totalSourceCount - series.length) > 0) {
    {{t('missing-series-title')}}
    -

    +

    }     diff --git a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.scss b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.scss similarity index 100% rename from UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.scss rename to UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.scss diff --git a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.ts b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.ts similarity index 81% rename from UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.ts rename to UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.ts index 7b7da55c8..5f9ed64bb 100644 --- a/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.ts +++ b/UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags-modal.component.ts @@ -1,4 +1,13 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit} from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + DestroyRef, + effect, + inject, + input, + OnInit +} from '@angular/core'; import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; import { NgbActiveModal, @@ -11,7 +20,7 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import {ToastrService} from 'ngx-toastr'; -import {concat, debounceTime, distinctUntilChanged, forkJoin, switchMap, tap} from 'rxjs'; +import {concat, debounceTime, delay, distinctUntilChanged, forkJoin, last, Observable, switchMap, tap} from 'rxjs'; import {ConfirmService} from 'src/app/shared/confirm.service'; import {UtilityService} from 'src/app/shared/_services/utility.service'; import {UserCollection} from 'src/app/_models/collection-tag'; @@ -35,6 +44,7 @@ import {SafeUrlPipe} from "../../../_pipes/safe-url.pipe"; import {SelectionModel} from "../../../typeahead/_models/selection-model"; import {UtcToLocalTimePipe} from "../../../_pipes/utc-to-local-time.pipe"; import {BreakpointService} from "../../../_services/breakpoint.service"; +import {modalSaved} from "../../../_models/modal/modal-result"; enum TabID { @@ -49,11 +59,11 @@ enum TabID { imports: [NgbNav, NgbNavItem, NgbNavLink, NgbNavContent, ReactiveFormsModule, FormsModule, NgbPagination, CoverImageChooserComponent, NgbNavOutlet, NgbTooltip, TranslocoDirective, NgTemplateOutlet, FilterPipe, DefaultDatePipe, SafeHtmlPipe, SafeUrlPipe, DecimalPipe, UtcToLocalTimePipe], - templateUrl: './edit-collection-tags.component.html', - styleUrls: ['./edit-collection-tags.component.scss'], + templateUrl: './edit-collection-tags-modal.component.html', + styleUrls: ['./edit-collection-tags-modal.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class EditCollectionTagsComponent implements OnInit { +export class EditCollectionTagsModalComponent implements OnInit { public readonly modal = inject(NgbActiveModal); public readonly utilityService = inject(UtilityService); @@ -69,10 +79,10 @@ export class EditCollectionTagsComponent implements OnInit { private readonly accountService = inject(AccountService); protected readonly breakpointService = inject(BreakpointService); - protected readonly TabID = TabID; - protected readonly ScrobbleProvider = ScrobbleProvider; - @Input({required: true}) tag!: UserCollection; + + + tag = input.required(); series: Array = []; selections!: SelectionModel; @@ -97,39 +107,41 @@ export class EditCollectionTagsComponent implements OnInit { return listItem.name.toLowerCase().indexOf(query) >= 0 || listItem.localizedName.toLowerCase().indexOf(query) >= 0; } + constructor() { + effect(() => { + if (!this.accountService.hasPromoteRole()) { + this.collectionTagForm.get('promoted')?.disable(); + this.cdRef.markForCheck(); + } + }); + } + ngOnInit(): void { if (this.pagination == undefined) { this.pagination = {totalPages: 1, totalItems: 200, itemsPerPage: 200, currentPage: 0}; } + const tag = this.tag(); this.collectionTagForm = new FormGroup({ - title: new FormControl(this.tag.title, { nonNullable: true, validators: [Validators.required] }), - summary: new FormControl(this.tag.summary, { nonNullable: true, validators: [] }), - coverImageLocked: new FormControl(this.tag.coverImageLocked, { nonNullable: true, validators: [] }), + title: new FormControl(tag.title, { nonNullable: true, validators: [Validators.required] }), + summary: new FormControl(tag.summary, { nonNullable: true, validators: [] }), + coverImageLocked: new FormControl(tag.coverImageLocked, { nonNullable: true, validators: [] }), coverImageIndex: new FormControl(0, { nonNullable: true, validators: [] }), - promoted: new FormControl(this.tag.promoted, { nonNullable: true, validators: [] }), + promoted: new FormControl(tag.promoted, { nonNullable: true, validators: [] }), }); - if (this.tag.source !== ScrobbleProvider.Kavita) { + if (tag.source !== ScrobbleProvider.Kavita) { this.collectionTagForm.get('title')?.disable(); this.collectionTagForm.get('summary')?.disable(); } - this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(user => { - if (!user) return; - if (!this.accountService.hasPromoteRole(user)) { - this.collectionTagForm.get('promoted')?.disable(); - this.cdRef.markForCheck(); - } - }); - this.collectionTagForm.get('title')?.valueChanges.pipe( debounceTime(100), distinctUntilChanged(), switchMap(name => this.collectionService.tagNameExists(name)), tap(exists => { - const isExistingName = this.collectionTagForm.get('title')?.value === this.tag.title; + const isExistingName = this.collectionTagForm.get('title')?.value === this.tag().title; if (!exists || isExistingName) { this.collectionTagForm.get('title')?.setErrors(null); } else { @@ -140,7 +152,7 @@ export class EditCollectionTagsComponent implements OnInit { takeUntilDestroyed(this.destroyRef) ).subscribe(); - this.imageUrls.push(this.imageService.randomize(this.imageService.getCollectionCoverImage(this.tag.id))); + this.imageUrls.push(this.imageService.randomize(this.imageService.getCollectionCoverImage(this.tag().id))); this.loadSeries(); } @@ -157,7 +169,7 @@ export class EditCollectionTagsComponent implements OnInit { loadSeries() { forkJoin([ - this.seriesService.getSeriesForTag(this.tag.id, this.pagination.currentPage, this.pagination.itemsPerPage), + this.seriesService.getSeriesForTag(this.tag().id, this.pagination.currentPage, this.pagination.itemsPerPage), this.libraryService.getLibraryNames() ]).subscribe(results => { const series = results[0]; @@ -196,7 +208,8 @@ export class EditCollectionTagsComponent implements OnInit { const selectedIndex = this.collectionTagForm.get('coverImageIndex')?.value || 0; const unselectedIds = this.selections.unselected().map(s => s.id); const tag = this.collectionTagForm.value; - tag.id = this.tag.id; + + tag.id = this.tag().id; tag.title = this.collectionTagForm.get('title')!.value; tag.summary = this.collectionTagForm.get('summary')!.value; @@ -206,8 +219,9 @@ export class EditCollectionTagsComponent implements OnInit { return; } - const apis = [ - this.collectionService.updateTag(tag), + let updatedTag: UserCollection | null = null; + const apis: Observable[] = [ + this.collectionService.updateTag(tag).pipe(tap(t => updatedTag = t)), ]; const unselectedSeries = this.selections.unselected().map(s => s.id); @@ -216,12 +230,15 @@ export class EditCollectionTagsComponent implements OnInit { } if (selectedIndex > 0) { - apis.push(this.uploadService.updateCollectionCoverImage(this.tag.id, this.selectedCover)); + apis.push(this.uploadService.updateCollectionCoverImage(this.tag().id, this.selectedCover)); } - concat(...apis).subscribe(() => { - this.modal.close({success: true, coverImageUpdated: selectedIndex > 0}); + concat(...apis).pipe( + delay(10), + last() + ).subscribe(() => { this.toastr.success(translate('toasts.collection-updated')); + this.modal.close(modalSaved(updatedTag ?? tag, selectedIndex > 0)); }); } @@ -242,4 +259,7 @@ export class EditCollectionTagsComponent implements OnInit { }); this.cdRef.markForCheck(); } + + protected readonly TabID = TabID; + protected readonly ScrobbleProvider = ScrobbleProvider; } 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 4c5724129..47015f545 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 @@ -9,7 +9,7 @@
      + orientation="{{breakpointService.isMobile() ? 'horizontal' : 'vertical'}}" style="min-width: 8.4375rem;">
    • {{t(tabs[TabID.General])}} @@ -693,7 +693,7 @@
        @for (volume of seriesVolumes; track volume.id) {
      • - +
        {{formatVolumeName(volume)}}
        @@ -708,7 +708,7 @@
        @@ -749,15 +749,13 @@
      • {{t(tabs[TabID.Tasks])}} - @if (accountService.currentUser$ | async; as user) { - @for(task of tasks; track task.action) { - @if (accountService.canInvokeAction(user, task.action)) { -
        - - - -
        - } + @for(task of tasks; track task.action) { + @if (accountService.canCurrentUserInvokeAction(task.action)) { +
        + + + +
        } }         diff --git a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts index 4f1b90712..b4bc269bf 100644 --- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts +++ b/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts @@ -18,7 +18,7 @@ import { NgbNavLink, NgbNavOutlet } from '@ng-bootstrap/ng-bootstrap'; -import {concat, forkJoin, Observable, of, tap} from 'rxjs'; +import {concat, delay, forkJoin, last, Observable, of, tap} from 'rxjs'; import {map, switchMap} from 'rxjs/operators'; import {UtilityService} from 'src/app/shared/_services/utility.service'; import {setupLanguageSettings, TypeaheadSettings} from 'src/app/typeahead/_models/typeahead-settings'; @@ -52,16 +52,16 @@ import {translate, TranslocoModule} from "@jsverse/transloco"; import {UtcToLocalTimePipe} from "../../../_pipes/utc-to-local-time.pipe"; import {EditListComponent} from "../../../shared/edit-list/edit-list.component"; import {AccountService} from "../../../_services/account.service"; -import {ToastrService} from "ngx-toastr"; import {Volume} from "../../../_models/volume"; -import {Action, ActionFactoryService, ActionItem} from "../../../_services/action-factory.service"; import {SettingButtonComponent} from "../../../settings/_components/setting-button/setting-button.component"; -import {ActionService} from "../../../_services/action.service"; -import {DownloadService} from "../../../shared/_services/download.service"; import {SettingItemComponent} from "../../../settings/_components/setting-item/setting-item.component"; import {LicenseService} from "../../../_services/license.service"; import {AsyncPipe, DecimalPipe, NgTemplateOutlet, TitleCasePipe} from "@angular/common"; import {BreakpointService} from "../../../_services/breakpoint.service"; +import {ActionFactoryService} from "../../../_services/action-factory.service"; +import {ActionItem} from "../../../_models/actionables/action-item"; +import {Action} from "../../../_models/actionables/action"; +import {modalSaved} from "../../../_models/modal/modal-result"; enum TabID { General = 0, @@ -74,17 +74,6 @@ enum TabID { Tasks = 7 } -export interface EditSeriesModalCloseResult { - success: boolean; - series: Series; - coverImageUpdate: boolean; - updateExternal: boolean -} - -const blackList = [Action.Edit, Action.Info, Action.IncognitoRead, Action.Read, Action.SendTo, - Action.AddToWantToReadList, Action.AddToCollection, Action.AddToReadingList, Action.RemoveFromWantToReadList, - Action.RemoveFromWantToReadList]; - @Component({ selector: 'app-edit-series-modal', imports: [ @@ -134,10 +123,7 @@ export class EditSeriesModalComponent implements OnInit { protected readonly accountService = inject(AccountService); protected readonly licenseService = inject(LicenseService); private readonly destroyRef = inject(DestroyRef); - private readonly toastr = inject(ToastrService); private readonly actionFactoryService = inject(ActionFactoryService); - private readonly actionService = inject(ActionService); - private readonly downloadService = inject(DownloadService); protected readonly breakpointService = inject(BreakpointService); protected readonly TabID = TabID; @@ -153,15 +139,14 @@ export class EditSeriesModalComponent implements OnInit { * A copy of the series from init. This is used to compare values for name fields to see if lock was modified */ initSeries!: Series; - tasks = this.actionFactoryService.getActionablesForSettingsPage(this.actionFactoryService.getSeriesActions(this.runTask.bind(this)), blackList); + tasks = this.actionFactoryService.getActionablesForSettingsPage( + this.actionFactoryService.getSeriesActions(), this.blacklist); volumeCollapsed: any = {}; tabs = ['general-tab', 'metadata-tab', 'people-tab', 'web-links-tab', 'cover-image-tab', 'related-tab', 'info-tab', 'tasks-tab']; active = this.tabs[0]; editSeriesForm!: FormGroup; libraryName: string | undefined = undefined; size: number = 0; - hasForcedKPlus = false; - forceIsLoading = false; // Typeaheads @@ -182,10 +167,15 @@ export class EditSeriesModalComponent implements OnInit { */ selectedCover: string = ''; coverImageReset = false; - isAdmin: boolean = false; saveNestedComponents: EventEmitter = new EventEmitter(); + get blacklist() { + return [Action.Edit, Action.Info, Action.IncognitoRead, Action.Read, Action.SendTo, + Action.AddToWantToReadList, Action.AddToCollection, Action.AddToReadingList, Action.RemoveFromWantToReadList, + Action.RemoveFromWantToReadList]; + } + get WebLinks() { return this.metadata?.webLinks.split(',') || ['']; } @@ -201,11 +191,6 @@ export class EditSeriesModalComponent implements OnInit { this.libraryName = names[this.series.libraryId]; }); - this.accountService.isAdmin$.pipe(takeUntilDestroyed(this.destroyRef), tap(isAdmin => { - this.isAdmin = isAdmin; - this.cdRef.markForCheck(); - })).subscribe(); - this.initSeries = Object.assign({}, this.series); this.editSeriesForm = this.fb.group({ @@ -505,17 +490,7 @@ export class EditSeriesModalComponent implements OnInit { } close() { - this.modal.close({success: false, series: undefined, coverImageUpdate: this.coverImageReset, updateExternal: this.hasForcedKPlus}); - } - - forceScan() { - this.forceIsLoading = true; - this.metadataService.forceRefreshFromPlus(this.series.id).subscribe(() => { - this.hasForcedKPlus = true; - this.forceIsLoading = false; - this.toastr.info(translate('toasts.force-kavita+-refresh-success')); - this.cdRef.markForCheck(); - }); + this.modal.dismiss(); } updateWeblinks(items: Array) { @@ -535,12 +510,21 @@ export class EditSeriesModalComponent implements OnInit { const nameFieldsDirty = this.editSeriesForm.get('name')?.dirty || this.editSeriesForm.get('sortName')?.dirty || this.editSeriesForm.get('localizedName')?.dirty; const nameFieldLockChanged = this.series.nameLocked !== this.initSeries.nameLocked || this.series.sortNameLocked !== this.initSeries.sortNameLocked || this.series.localizedNameLocked !== this.initSeries.localizedNameLocked; + let updatedSeries: Series | null = null; + if (nameFieldsDirty || nameFieldLockChanged || this.coverImageReset) { model.nameLocked = this.series.nameLocked; model.sortNameLocked = this.series.sortNameLocked; model.localizedNameLocked = this.series.localizedNameLocked; model.language = this.metadata.language; - apis.push(this.seriesService.updateSeries(model)); + apis.push(this.seriesService.updateSeries(model).pipe( + tap(result => updatedSeries = result) + )); + } else { + // We need to ensure we at least update or get the series to return it to action service + apis.push(this.seriesService.getSeries(this.series.id).pipe( + tap(result => updatedSeries = result) + )); } @@ -550,8 +534,12 @@ export class EditSeriesModalComponent implements OnInit { this.saveNestedComponents.emit(); - concat(...apis).subscribe(results => { - this.modal.close({success: true, series: model, coverImageUpdate: selectedIndex > 0 || this.coverImageReset, updateExternal: this.hasForcedKPlus}); + // Run api calls sequentially to prevent them from overwriting each other in a race condition + concat(...apis).pipe( + delay(10), + last() + ).subscribe(() => { + this.modal.close(modalSaved(updatedSeries ?? model, selectedIndex > 0 || this.coverImageReset)); }); } @@ -610,37 +598,7 @@ export class EditSeriesModalComponent implements OnInit { } async runTask(action: ActionItem) { - switch (action.action) { - case Action.Scan: - await this.actionService.scanSeries(this.series); - break; - case Action.RefreshMetadata: - await this.actionService.refreshSeriesMetadata(this.series); - break; - case Action.GenerateColorScape: - await this.actionService.refreshSeriesMetadata(this.series, undefined, false, true); - break; - case Action.AnalyzeFiles: - this.actionService.analyzeFilesForSeries(this.series); - break; - case Action.MarkAsRead: - this.actionService.markSeriesAsRead(this.series); - break; - case Action.MarkAsUnread: - this.actionService.markSeriesAsUnread(this.series); - break; - case Action.Delete: - await this.actionService.deleteSeries(this.series); - break; - case Action.Download: - this.downloadService.download('series', this.series); - break; - case Action.Match: - this.actionService.matchSeries(this.series, _ => { - this.modal.close({success: true, series: this.series, coverImageUpdate: false, updateExternal: true}); - }); - break; - } + } protected readonly LooseLeafOrDefaultNumber = LooseLeafOrDefaultNumber; diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html index 29dd8be89..cb3cf314b 100644 --- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html +++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html @@ -1,38 +1,40 @@ - @if (bulkSelectionService.selections$ | async; as selectionCount) { - @if (selectionCount > 0) { -
        -
        -
        + @let selectionCount = bulkSelectionService.selectionSignal() ?? 0; + + @if (selectionCount > 0) { +
        +
        +
        - - {{t('items-selected',{num: selectionCount | number})}} + + {{t('items-selected', {num: selectionCount | number})}} - - @if (hasMarkAsUnread) { - - } - @if (hasMarkAsRead) { - + } + @if (hasMarkAsRead()) { + - } - - + + } + + - + - -
        +
        - } - +
        } diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss index 608b891e9..82e38b8a6 100644 --- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss +++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss @@ -5,7 +5,7 @@ .bulk-select { background-color: var(--bulk-selection-bg-color); - border-bottom: 2px solid var(--primary-color); + border-bottom: 0.125rem solid var(--primary-color); color: var(--bulk-selection-text-color) !important; .btn-icon { diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.ts b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.ts index ae6d60d51..05261af0f 100644 --- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.ts +++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.ts @@ -1,66 +1,45 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - DestroyRef, - HostListener, - inject, - Input, - OnInit -} from '@angular/core'; -import { - Action, - ActionFactoryService, - ActionItem, - ActionShouldRenderFunc -} from 'src/app/_services/action-factory.service'; +import {ChangeDetectionStrategy, Component, computed, HostListener, inject, input} from '@angular/core'; import {BulkSelectionService} from '../bulk-selection.service'; -import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; -import {AsyncPipe, DecimalPipe, NgStyle} from "@angular/common"; +import {DecimalPipe} from "@angular/common"; import {TranslocoModule} from "@jsverse/transloco"; import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap"; import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component"; import {KEY_CODES} from "../../shared/_services/utility.service"; +import {ActionItem} from "../../_models/actionables/action-item"; +import {Action} from "../../_models/actionables/action"; +import {ActionFactoryService} from "../../_services/action-factory.service"; +import {ActionResult} from "../../_models/actionables/action-result"; @Component({ selector: 'app-bulk-operations', imports: [ - AsyncPipe, CardActionablesComponent, TranslocoModule, NgbTooltip, - NgStyle, DecimalPipe ], templateUrl: './bulk-operations.component.html', styleUrls: ['./bulk-operations.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class BulkOperationsComponent implements OnInit { +export class BulkOperationsComponent { - @Input({required: true}) actionCallback!: (action: ActionItem, data: any) => void; - @Input() shouldRenderFunc?: ActionShouldRenderFunc; - /** - * Modal mode means don't fix to the top - */ - @Input() modalMode = false; - /** - * On Series Detail this should be 12 - */ - @Input() marginLeft: number = 0; - /** - * On Series Detail this should be 12 - */ - @Input() marginRight: number = 8; - hasMarkAsRead: boolean = false; - hasMarkAsUnread: boolean = false; - actions: Array> = []; - - private readonly destroyRef = inject(DestroyRef); - private readonly cdRef = inject(ChangeDetectorRef); private readonly actionFactoryService = inject(ActionFactoryService); - public readonly bulkSelectionService = inject(BulkSelectionService); - protected readonly Action = Action; + protected readonly bulkSelectionService = inject(BulkSelectionService); + + /** + * On Series Detail this should be 0 + */ + marginLeft = input(0); + /** + * On Series Detail this should be 0 + */ + marginRight = input(8); + + actions = computed(() => this.bulkSelectionService.actionsSignal() ?? []); + hasMarkAsRead = computed(() => this.actionFactoryService.hasAction(this.actions(), Action.MarkAsRead)); + hasMarkAsUnread = computed(() => this.actionFactoryService.hasAction(this.actions(), Action.MarkAsUnread)); + @HostListener('document:keydown.shift', ['$event']) handleKeypress(event: Event) { @@ -79,25 +58,19 @@ export class BulkOperationsComponent implements OnInit { } } - ngOnInit(): void { - this.bulkSelectionService.actions$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(actions => { - // We need to do a recursive callback apply - const shouldRender = this.shouldRenderFunc ? this.shouldRenderFunc.bind(this) : this.actionFactoryService.dummyShouldRender; - this.actions = this.actionFactoryService.applyCallbackToList(actions, this.actionCallback.bind(this), shouldRender); - this.hasMarkAsRead = this.actionFactoryService.hasAction(this.actions, Action.MarkAsRead); - this.hasMarkAsUnread = this.actionFactoryService.hasAction(this.actions, Action.MarkAsUnread); - this.cdRef.markForCheck(); - }); - } + performAction(event: ActionItem | ActionResult) { + // Skip ActionResults — they've already been handled + if ('effect' in event) return; - performAction(action: ActionItem) { - this.actionCallback(action, null); + event.callback(event, null).subscribe(); } executeAction(action: Action) { - const foundActions = this.actions.filter(act => act.action === action); + const foundActions = this.actions().filter(act => act.action === action); if (foundActions.length > 0) { this.performAction(foundActions[0]); } } + + protected readonly Action = Action; } diff --git a/UI/Web/src/app/cards/bulk-selection.service.ts b/UI/Web/src/app/cards/bulk-selection.service.ts index 55a3bb8fd..281f854bf 100644 --- a/UI/Web/src/app/cards/bulk-selection.service.ts +++ b/UI/Web/src/app/cards/bulk-selection.service.ts @@ -1,10 +1,37 @@ import {inject, Injectable} from '@angular/core'; import {NavigationStart, Router} from '@angular/router'; -import {ReplaySubject} from 'rxjs'; +import {Observable, ReplaySubject, tap} from 'rxjs'; import {filter} from 'rxjs/operators'; -import {Action, ActionFactoryService, ActionItem} from '../_services/action-factory.service'; +import {ActionFactoryService} from '../_services/action-factory.service'; +import {ActionService} from '../_services/action.service'; +import {toSignal} from "@angular/core/rxjs-interop"; +import {ActionItem, ActionShouldRenderFunc} from "../_models/actionables/action-item"; +import {Action} from "../_models/actionables/action"; +import {ActionResult} from "../_models/actionables/action-result"; +import {LibraryType} from "../_models/library/library"; +import {Volume} from "../_models/volume"; +import {Chapter} from "../_models/chapter"; +import {Series} from "../_models/series"; +import {PageBookmark} from "../_models/readers/page-bookmark"; +import {UserCollection} from "../_models/collection-tag"; +import {ReadingList} from "../_models/reading-list"; +import {Annotation} from "../book-reader/_models/annotations/annotation"; +import {SideNavStream} from "../_models/sidenav/sidenav-stream"; -type DataSource = 'volume' | 'chapter' | 'special' | 'series' | 'bookmark' | 'sideNavStream' | 'collection' | 'readingList' | 'annotations'; +export type BulkSelectionEntityDataSource = 'volume' | 'chapter' | 'special' | 'series' | 'bookmark' | 'bookmarkData' | 'sideNavStream' | 'collection' | 'readingList' | 'annotations'; + +/** a closure over a signal/array, called at trigger time **/ +export type BulkDataGetter = () => T[]; +/** provides seriesId/libraryId/libraryType for volume/chapter ops **/ +export type BulkContextGetter = () => { seriesId: number; libraryId: number; libraryType?: LibraryType; }; +export interface BulkResolvedEntities { + volumes: Volume[]; + chapters: Chapter[]; // includes specials +} +/** series-detail's custom resolver for mixed volume/chapter/special selections **/ +export type BulkEntityResolver = () => BulkResolvedEntities; + +export type BulkCallback = ((result: ActionResult) => void); /** * Responsible for handling selections on cards. Can handle multiple card sources next to each other in different loops. @@ -17,23 +44,32 @@ type DataSource = 'volume' | 'chapter' | 'special' | 'series' | 'bookmark' | 'si }) export class BulkSelectionService { private actionFactory = inject(ActionFactoryService); + private actionService = inject(ActionService); + + private dataGetters = new Map>(); + private contextGetter: BulkContextGetter | null = null; + private entityResolver: BulkEntityResolver | null = null; + private postActionCallback: BulkCallback | null = null; + private registeredShouldRender: ActionShouldRenderFunc | null = null; private debug: boolean = false; private prevIndex: number = 0; - private prevDataSource!: DataSource; + private prevDataSource!: BulkSelectionEntityDataSource; private selectedCards: { [key: string]: {[key: number]: boolean} } = {}; private dataSourceMax: { [key: string]: number} = {}; public isShiftDown: boolean = false; private actionsSource = new ReplaySubject[]>(1); public actions$ = this.actionsSource.asObservable(); + public actionsSignal = toSignal(this.actionsSource); private selectionsSource = new ReplaySubject(1); /** * Number of active selections */ - public selections$ = this.selectionsSource.asObservable(); + public readonly selections$ = this.selectionsSource.asObservable(); + public readonly selectionSignal = toSignal(this.selections$); constructor() { const router = inject(Router); @@ -44,10 +80,11 @@ export class BulkSelectionService { this.deselectAll(); this.dataSourceMax = {}; this.prevIndex = 0; + this.clearRegistrations(); }); } - handleCardSelection(dataSource: DataSource, index: number, maxIndex: number, wasSelected: boolean) { + handleCardSelection(dataSource: BulkSelectionEntityDataSource, index: number, maxIndex: number, wasSelected: boolean) { if (this.isShiftDown) { if (dataSource === this.prevDataSource) { @@ -76,17 +113,17 @@ export class BulkSelectionService { this.prevDataSource = dataSource; this.debugLog("Setting max for " + dataSource + " to " + maxIndex); this.dataSourceMax[dataSource] = maxIndex; - this.actionsSource.next(this.getActions(() => {})); + this.actionsSource.next(this.getActions()); } - isCardSelected(dataSource: DataSource, index: number) { + isCardSelected(dataSource: BulkSelectionEntityDataSource, index: number) { if (this.selectedCards.hasOwnProperty(dataSource) && this.selectedCards[dataSource].hasOwnProperty(index)) { return this.selectedCards[dataSource][index]; } return false; } - selectCards(dataSource: DataSource, from: number, to: number, value: boolean) { + selectCards(dataSource: BulkSelectionEntityDataSource, from: number, to: number, value: boolean) { if (!this.selectedCards.hasOwnProperty(dataSource)) { this.selectedCards[dataSource] = {}; } @@ -130,7 +167,7 @@ export class BulkSelectionService { return sum; } - getSelectedCardsForSource(dataSource: DataSource) { + getSelectedCardsForSource(dataSource: BulkSelectionEntityDataSource) { if (!this.selectedCards.hasOwnProperty(dataSource)) return []; const ret = []; @@ -144,39 +181,157 @@ export class BulkSelectionService { } /** - * Returns the appropriate set of supported actions for the given mix of cards - * @param callback + * Returns the appropriate set of supported actions for the given mix of cards, pre-wired with callback2. */ - getActions(callback: (action: ActionItem, data: any) => void) { + getActions(): ActionItem[] { const allowedActions = [Action.AddToReadingList, Action.MarkAsRead, Action.MarkAsUnread, Action.AddToCollection, Action.Delete, Action.AddToWantToReadList, Action.RemoveFromWantToReadList, Action.SetReadingProfile]; + const shouldRender = this.registeredShouldRender ?? this.actionFactory.dummyShouldRender; - if (Object.keys(this.selectedCards).filter(item => item === 'series').length > 0) { - return this.applyFilterToList(this.actionFactory.getSeriesActions(callback), allowedActions); + if (this.hasDataSource('series')) { + const actions = this.applyFilterToList(this.actionFactory.getSeriesActions(shouldRender), allowedActions); + return this.wireBulkCallback(actions, (action) => { + const series = this.resolveEntities('series'); + return this.actionService.handleBulkSeriesAction(action, series); + }); } - if (Object.keys(this.selectedCards).filter(item => item === 'bookmark').length > 0) { - return this.applyFilterToList(this.actionFactory.getBookmarkActions(callback), [Action.DownloadBookmark, Action.Delete]); + if (this.hasDataSource('bookmark')) { + const actions = this.applyFilterToList(this.actionFactory.getBookmarkActions(() => ({seriesId: 0, libraryId: 0, seriesName: ''})), [Action.Download, Action.Delete]); + return this.wireBulkCallback(actions, (action) => { + const selectedSeries = this.resolveEntities('bookmark'); + const seriesIds = selectedSeries.map((s: any) => s.id); + const allBookmarks: PageBookmark[] = this.dataGetters.get('bookmarkData' as any)?.() ?? []; + const relevantBookmarks = allBookmarks.filter(b => seriesIds.includes(b.seriesId)); + return this.actionService.handleBulkBookmarkAction(action, relevantBookmarks, seriesIds); + }); } - if (Object.keys(this.selectedCards).filter(item => item === 'sideNavStream').length > 0) { - return this.applyFilterToList(this.actionFactory.getSideNavStreamActions(callback), [Action.MarkAsInvisible, Action.MarkAsVisible]); + if (this.hasDataSource('sideNavStream')) { + const actions = this.applyFilterToList(this.actionFactory.getSideNavStreamActions(shouldRender), [Action.MarkAsInvisible, Action.MarkAsVisible]); + return this.wireBulkCallback(actions, (action) => { + const streams = this.resolveEntities('sideNavStream'); + return this.actionService.handleBulkSideNavStreamAction(action, streams); + }); } - if (Object.keys(this.selectedCards).filter(item => item === 'collection').length > 0) { - return this.applyFilterToList(this.actionFactory.getCollectionTagActions(callback), [Action.Promote, Action.UnPromote, Action.Delete]); + if (this.hasDataSource('collection')) { + const actions = this.applyFilterToList(this.actionFactory.getCollectionTagActions(shouldRender), [Action.Promote, Action.UnPromote, Action.Delete]); + return this.wireBulkCallback(actions, (action) => { + const collections = this.resolveEntities('collection'); + return this.actionService.handleBulkCollectionAction(action, collections); + }); } - if (Object.keys(this.selectedCards).filter(item => item === 'readingList').length > 0) { - return this.applyFilterToList(this.actionFactory.getReadingListActions(callback), [Action.Promote, Action.UnPromote, Action.Delete]); + if (this.hasDataSource('readingList')) { + const actions = this.applyFilterToList(this.actionFactory.getReadingListActions(shouldRender), [Action.Promote, Action.UnPromote, Action.Delete]); + return this.wireBulkCallback(actions, (action) => { + const readingLists = this.resolveEntities('readingList'); + return this.actionService.handleBulkReadingListAction(action, readingLists); + }); } - if (Object.keys(this.selectedCards).filter(item => item === 'annotations').length > 0) { - return this.actionFactory.getAnnotationActions(callback); + if (this.hasDataSource('annotations')) { + const actions = this.actionFactory.getAnnotationActions(shouldRender); + return this.wireBulkCallback(actions, (action) => { + const annotations = this.resolveEntities('annotations'); + return this.actionService.handleBulkAnnotationAction(action, annotations); + }); } - // Chapter/Volume - return this.applyFilterToList(this.actionFactory.getVolumeActions(callback), [...allowedActions, Action.SendTo]); + // Volume/Chapter/Special (series-detail or volume-detail) + { + if (this.contextGetter == null) { + throw new Error("ContextGetter must be set for volume/chapter/special"); + } + const ctx = this.contextGetter(); + const actions = this.applyFilterToList(this.actionFactory.getVolumeActions(ctx.seriesId, ctx.libraryId, ctx.libraryType!, shouldRender), [...allowedActions, Action.SendTo]); + return this.wireBulkCallback(actions, (action) => { + let volumes: Volume[]; + let chapters: Chapter[]; + + if (this.entityResolver) { + const resolved = this.entityResolver(); + volumes = resolved.volumes; + chapters = resolved.chapters; + } else { + volumes = this.resolveEntities('volume'); + chapters = this.resolveEntities('chapter'); + } + + return this.actionService.handleBulkVolumeChapterAction(action, volumes, chapters, ctx.seriesId); + }); + } + } + + registerDataSource(key: BulkSelectionEntityDataSource, getter: BulkDataGetter) { + this.dataGetters.set(key, getter); + } + + registerContext(getter: BulkContextGetter) { + this.contextGetter = getter; + } + + registerResolver(resolver: BulkEntityResolver) { + this.entityResolver = resolver; + } + + registerPostAction(callback: BulkCallback) { + this.postActionCallback = callback; + } + + registerShouldRender(func: ActionShouldRenderFunc) { + this.registeredShouldRender = func; + } + + /** + * Resolves the selected entities for a given data source by intersecting registered getter data with selected card indices. + */ + resolveEntities(dataSource: BulkSelectionEntityDataSource): T[] { + const getter = this.dataGetters.get(dataSource); + if (!getter) return []; + const allItems: T[] = getter(); + const selectedIndices = this.getSelectedCardsForSource(dataSource); + return allItems.filter((_, i) => selectedIndices.includes(i + '')); + } + + private hasDataSource(key: BulkSelectionEntityDataSource): boolean { + return Object.keys(this.selectedCards).includes(key); + } + + /** + * Wires callback on each action (and children recursively) so that triggering + * the action resolves entities at trigger time, calls the bulk handler, then + * auto-deselects and fires the post-action callback. + */ + private wireBulkCallback( + actions: ActionItem[], + handler: (action: ActionItem) => Observable> + ): ActionItem[] { + const wire = (action: ActionItem) => { + action.callback = (act: ActionItem, _entity: any) => { + return handler(act).pipe( + tap((act) => { + this.deselectAll(); + this.postActionCallback?.(act); + }) + ); + }; + if (action.children?.length) { + action.children = action.children.map(c => ({...c})); + action.children.forEach(c => wire(c)); + } + }; + actions.forEach(a => wire(a)); + return actions; + } + + private clearRegistrations() { + this.dataGetters.clear(); + this.contextGetter = null; + this.entityResolver = null; + this.postActionCallback = null; + this.registeredShouldRender = null; } private debugLog(message: string, extraData?: any) { 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 f1bc332f8..3e24ab6f1 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,21 +1,19 @@ - + @if (header().length > 0) {

        - @if (actions().length > 0) { - -   - - } - + + + + {{header()}}  - @if (pagination) { + @if (effectivePagination(); as p) { {{pagination.totalItems}} + [attr.aria-label]="t('total-items', {count: p.totalItems})">{{p.totalItems}} } @@ -24,31 +22,31 @@

        } - @if (filterSettings) { - + @if (filterSettings(); as fs) { + - + } - + -
        +
        - @if (items.length === 0 && !isLoading) { -

        + @if (items().length === 0 && !isLoading()) { +

        } - +
        - @for (item of scroll.viewPortItems; track trackByIdentity(i, item); let i = $index) { + @for (item of scroll.viewPortItems; track trackItem(i, item); let i = $index) {
        - +
        }
        @@ -56,29 +54,29 @@
        - @if (jumpBarKeysToRender.length >= 4 && items.length > 0 && scroll.viewPortInfo.maxScrollPosition > 0) { + @if (jumpBarKeysToRender().length >= 4 && items().length > 0 && scroll.viewPortInfo.maxScrollPosition > 0) { }
        - +
        - @for (item of scroll.viewPortItems; track trackByIdentity(i, item); let i = $index) { + @for (item of scroll.viewPortItems; track trackItem(i, item); let i = $index) {
        - +
        }
        - @if (items.length === 0 && !isLoading) { -
        + @if (items().length === 0 && !isLoading()) { +

        - @if (noDataTemplate) { - + @if (noDataTemplate()) { + } @else { {{t('no-data')}} } @@ -90,7 +88,7 @@

        - @for(jumpKey of jumpBarKeysToRender; track jumpKey.key; let i = $index) { + @for(jumpKey of jumpBarKeysToRender(); track jumpKey.key; let i = $index) { -
        -
        + } @else if (mode() === 'url') { +
        +
        + + +
        - } - - + +
        + } + + - - - -
        - @if (showReset) { +
        + @if (showReset()) {
        + [class.selected]="!showApplyButton() && selectedIndex() === -1"> - @if (showApplyButton) { + @if (showApplyButton()) {
        }
        } - @for (url of imageUrls; track url; let idx = $index) { + @for (url of imageUrls(); track url; let idx = $index) {
        + [class.selected]="!showApplyButton() && selectedIndex() === idx"> - @if (showApplyButton) { + @if (showApplyButton()) {
        - }
        } - -
        -
        - - diff --git a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss index 3dad5235c..c4e1b4dfc 100644 --- a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss +++ b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss @@ -1,5 +1,5 @@ -$image-height: 232.91px; -$image-width: 160px; +$image-height: 14.5569rem; +$image-width: 10rem; .card-img-top { width: $image-width; @@ -9,14 +9,14 @@ $image-width: 160px; .selected { - outline: 5px solid var(--primary-color); + outline: 0.3125rem solid var(--primary-color); outline-width: medium; - outline-offset: -1px; + outline-offset: -0.0625rem; } .chooser { display: grid; - grid-template-columns: repeat(auto-fill, 160px); + grid-template-columns: repeat(auto-fill, 10rem); grid-gap: 0.5rem; justify-content: space-around; } @@ -24,9 +24,9 @@ $image-width: 160px; ngx-file-drop ::ng-deep > div { // styling for the outer drop box width: 100%; - border: 2px solid var(--primary-color); - border-radius: 5px; - height: 100px; + border: 0.125rem solid var(--primary-color); + border-radius: 0.3125rem; + height: 6.25rem; margin: auto; > div { diff --git a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts index 7926f99a6..d635f9983 100644 --- a/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts +++ b/UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts @@ -1,14 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - EventEmitter, - inject, - Input, - OnInit, - Output -} from '@angular/core'; -import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; +import {ChangeDetectionStrategy, Component, inject, input, model, output, signal} from '@angular/core'; import {FileSystemFileEntry, NgxFileDropEntry, NgxFileDropModule} from 'ngx-file-drop'; import {fromEvent} from 'rxjs'; import {takeWhile} from 'rxjs/operators'; @@ -16,188 +6,143 @@ import {ToastrService} from 'ngx-toastr'; import {ImageService} from 'src/app/_services/image.service'; import {KEY_CODES} from 'src/app/shared/_services/utility.service'; import {UploadService} from 'src/app/_services/upload.service'; -import {DOCUMENT, NgClass} from '@angular/common'; +import {DOCUMENT} from '@angular/common'; import {ImageComponent} from "../../shared/image/image.component"; import {translate, TranslocoModule} from "@jsverse/transloco"; import {ColorscapeService} from "../../_services/colorscape.service"; @Component({ - selector: 'app-cover-image-chooser', - imports: [ - ReactiveFormsModule, - NgxFileDropModule, - ImageComponent, - TranslocoModule, - NgClass - ], - templateUrl: './cover-image-chooser.component.html', - styleUrls: ['./cover-image-chooser.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-cover-image-chooser', + imports: [ + NgxFileDropModule, + ImageComponent, + TranslocoModule + ], + templateUrl: './cover-image-chooser.component.html', + styleUrls: ['./cover-image-chooser.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) -export class CoverImageChooserComponent implements OnInit { +export class CoverImageChooserComponent { - private readonly cdRef = inject(ChangeDetectorRef); public readonly imageService = inject(ImageService); - public readonly fb = inject(FormBuilder); - public readonly toastr = inject(ToastrService); - public readonly uploadService = inject(UploadService); - private readonly colorscapeService = inject(ColorscapeService) - private readonly document = inject(DOCUMENT) + private readonly toastr = inject(ToastrService); + private readonly uploadService = inject(UploadService); + private readonly colorscapeService = inject(ColorscapeService); + private readonly document = inject(DOCUMENT); /** * If buttons show under images to allow immediate selection of cover images. */ - @Input() showApplyButton: boolean = false; - /** - * When a cover image is selected, this will be called with a base url representation of the file. - */ - @Output() applyCover: EventEmitter = new EventEmitter(); - /** - * When a cover image is reset, this will be called. - */ - @Output() resetCover: EventEmitter = new EventEmitter(); - - @Input() imageUrls: Array = []; - @Output() imageUrlsChange: EventEmitter> = new EventEmitter>(); - + showApplyButton = input(false); + imageUrls = model([]); /** * Should the control give the ability to select an image that emits the reset status for cover image */ - @Input() showReset: boolean = false; - @Output() resetClicked: EventEmitter = new EventEmitter(); + showReset = input(false); + /** + * When a cover image is selected, this will be called with a base url representation of the file. + */ + applyCover = output(); + /** + * When a cover image is reset, this will be called. + */ + resetCover = output(); + resetClicked = output(); /** * Emits the selected index. Used usually to check if something other than the default image was selected. */ - @Output() imageSelected: EventEmitter = new EventEmitter(); + imageSelected = output(); /** * Emits a base64 encoded image */ - @Output() selectedBase64Url: EventEmitter = new EventEmitter(); + selectedBase64Url = output(); - - - selectedIndex: number = 0; + selectedIndex = signal(0); /** * Only applies for showApplyButton. Used to track which image is applied. */ - appliedIndex: number = 0; - form!: FormGroup; - files: NgxFileDropEntry[] = []; + appliedIndex = signal(0); + coverImageUrl = signal(''); acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif'].join(','); - mode: 'file' | 'url' | 'all' = 'all'; + mode = signal<'file' | 'url' | 'all'>('all'); - ngOnInit(): void { - this.form = this.fb.group({ - coverImageUrl: new FormControl('', []) - }); - - this.cdRef.markForCheck(); - } - - selectImage(index: number, callback?: Function) { - if (this.selectedIndex === index) { return; } + selectImage(index: number, callback?: (index: number) => void) { + if (this.selectedIndex() === index) { return; } // If we load custom images of series/chapters/covers, then those urls are not properly encoded, so on select we have to clean them up - if (!this.imageUrls[index].startsWith('data:image/')) { - const imgUrl = this.imageUrls[index]; + if (!this.imageUrls()[index].startsWith('data:image/')) { + const imgUrl = this.imageUrls()[index]; const img = new Image(); img.crossOrigin = 'Anonymous'; img.src = imgUrl; - img.onload = (e) => { + img.onload = () => { this.handleUrlImageAdd(img, index); - this.selectedBase64Url.emit(this.imageUrls[this.selectedIndex]); + this.selectedBase64Url.emit(this.imageUrls()[this.selectedIndex()]); if (callback) callback(index); }; - img.onerror = (e) => { + img.onerror = () => { this.toastr.error(translate('errors.rejected-cover-upload')); - this.form.get('coverImageUrl')?.setValue(''); - this.cdRef.markForCheck(); + this.coverImageUrl.set(''); }; - this.form.get('coverImageUrl')?.setValue(''); - this.cdRef.markForCheck(); + this.coverImageUrl.set(''); return; } - this.selectedIndex = index; - this.cdRef.markForCheck(); - this.imageSelected.emit(this.selectedIndex); - this.selectedBase64Url.emit(this.imageUrls[this.selectedIndex]); + this.selectedIndex.set(index); + this.imageSelected.emit(this.selectedIndex()); + this.selectedBase64Url.emit(this.imageUrls()[this.selectedIndex()]); } applyImage(index: number) { - if (!this.showApplyButton) return; + if (!this.showApplyButton()) return; this.selectImage(index, () => { - this.applyCover.emit(this.imageUrls[index]); - this.appliedIndex = index; - this.cdRef.markForCheck(); + this.applyCover.emit(this.imageUrls()[index]); + this.appliedIndex.set(index); }); } resetImage() { - if (this.showApplyButton) { - this.resetCover.emit(); + if (this.showApplyButton()) { + this.resetCover.emit(undefined); } } loadImage(url?: string) { - url = url || this.form.get('coverImageUrl')?.value.trim(); + url = url || this.coverImageUrl().trim(); if (!url || url === '') return; this.uploadService.uploadByUrl(url).subscribe(filename => { const img = new Image(); img.crossOrigin = 'Anonymous'; img.src = this.imageService.getCoverUploadImage(filename); - img.onload = (e) => this.handleUrlImageAdd(img); - img.onerror = (e) => { + img.onload = () => this.handleUrlImageAdd(img); + img.onerror = () => { this.toastr.error(translate('errors.rejected-cover-upload')); - this.form.get('coverImageUrl')?.setValue(''); - this.cdRef.markForCheck(); + this.coverImageUrl.set(''); }; - this.form.get('coverImageUrl')?.setValue(''); - this.cdRef.markForCheck(); + this.coverImageUrl.set(''); }); } - loadImageFromUrl(url?: string) { - url = url || this.form.get('coverImageUrl')?.value.trim(); - if (!url || url === '') return; - - this.uploadService.uploadByUrl(url).subscribe(filename => { - const img = new Image(); - img.crossOrigin = 'Anonymous'; - img.src = this.imageService.getCoverUploadImage(filename); - img.onload = (e) => this.handleUrlImageAdd(img); - img.onerror = (e) => { - this.toastr.error(translate('errors.rejected-cover-upload')); - this.form.get('coverImageUrl')?.setValue(''); - this.cdRef.markForCheck(); - }; - this.form.get('coverImageUrl')?.setValue(''); - this.cdRef.markForCheck(); - }); - } - - - changeMode(mode: 'url') { - this.mode = mode; + this.mode.set(mode); this.setupEnterHandler(); - this.cdRef.markForCheck(); setTimeout(() => (this.document.querySelector('#load-image') as HTMLInputElement)?.focus(), 10); } - public dropped(files: NgxFileDropEntry[]) { - this.files = files; - for (const droppedFile of files) { + setMode(mode: 'file' | 'url' | 'all') { + this.mode.set(mode); + } - // Is it a file? + public dropped(files: NgxFileDropEntry[]) { + for (const droppedFile of files) { if (droppedFile.fileEntry.isFile) { const fileEntry = droppedFile.fileEntry as FileSystemFileEntry; fileEntry.file((file: File) => { - const reader = new FileReader(); + const reader = new FileReader(); reader.onload = (e) => this.handleFileImageAdd(e); reader.readAsDataURL(file); }); @@ -208,38 +153,31 @@ export class CoverImageChooserComponent implements OnInit { handleFileImageAdd(e: any) { if (e.target == null) return; - this.imageUrls.push(e.target.result); // This is base64 already - this.imageUrlsChange.emit(this.imageUrls); - this.selectedIndex = this.imageUrls.length - 1; - this.imageSelected.emit(this.selectedIndex); // Auto select newly uploaded image + this.imageUrls.update(urls => [...urls, e.target.result]); + this.selectedIndex.set(this.imageUrls().length - 1); + this.imageSelected.emit(this.selectedIndex()); this.selectedBase64Url.emit(e.target.result); setTimeout(() => { - // Add 1 since we are adding a new image - (this.document.querySelector('div.clickable[aria-label="Image ' + (this.selectedIndex + 1) + '"]') as HTMLElement).focus(); - }) - this.cdRef.markForCheck(); + (this.document.querySelector('div.clickable[aria-label="Image ' + (this.selectedIndex() + 1) + '"]') as HTMLElement).focus(); + }); } handleUrlImageAdd(img: HTMLImageElement, index: number = -1) { const url = this.colorscapeService.getBase64Image(img); if (index >= 0) { - this.imageUrls[index] = url; + this.imageUrls.update(urls => urls.map((u, i) => i === index ? url : u)); } else { - this.imageUrls.push(url); + this.imageUrls.update(urls => [...urls, url]); } - this.imageUrlsChange.emit(this.imageUrls); - this.cdRef.markForCheck(); - setTimeout(() => { - // Auto select newly uploaded image and tell parent of new base64 url - this.selectImage(index >= 0 ? index : this.imageUrls.length - 1); + this.selectImage(index >= 0 ? index : this.imageUrls().length - 1); }); } reset() { - this.resetClicked.emit(); - this.selectedIndex = -1; + this.resetClicked.emit(undefined); + this.selectedIndex.set(-1); } setupEnterHandler() { @@ -247,7 +185,7 @@ export class CoverImageChooserComponent implements OnInit { const elem = document.querySelector('input[id="load-image"]'); if (elem == null) return; fromEvent(elem, 'keydown') - .pipe(takeWhile(() => this.mode === 'url')).subscribe((event) => { + .pipe(takeWhile(() => this.mode() === 'url')).subscribe((event) => { const evt = event; switch(evt.key) { case KEY_CODES.ENTER: @@ -257,7 +195,7 @@ export class CoverImageChooserComponent implements OnInit { } case KEY_CODES.ESC_KEY: - this.mode = 'all'; + this.mode.set('all'); event.stopPropagation(); break; default: @@ -266,7 +204,4 @@ export class CoverImageChooserComponent implements OnInit { }); }); } - - protected fileOver(event: any){} - protected fileLeave(event: any){} } diff --git a/UI/Web/src/app/cards/download-indicator/download-indicator.component.html b/UI/Web/src/app/cards/download-indicator/download-indicator.component.html index be99431cc..2b0944ae7 100644 --- a/UI/Web/src/app/cards/download-indicator/download-indicator.component.html +++ b/UI/Web/src/app/cards/download-indicator/download-indicator.component.html @@ -1,5 +1,5 @@ - @if (download$ | async; as download) { + @if (download$() | async; as download) {
    -
    +
    • - @if (nextExpectedChapter) { + @if (nextExpectedChapterValue) { @switch (tabId) { @case (TabID.Volumes) { - @if (nextExpectedChapter.volumeNumber !== SpecialVolumeNumber && nextExpectedChapter.chapterNumber === LooseLeafOrSpecialNumber) { - + @if (nextExpectedChapterValue.volumeNumber !== SpecialVolumeNumber && nextExpectedChapterValue.chapterNumber === LooseLeafOrSpecialNumber) { + } } @case (TabID.Chapters) { - + } @case (TabID.Storyline) { - + } } } @@ -396,28 +399,18 @@ } - + - + - + diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss index 8812bf732..6378da0bc 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss @@ -2,26 +2,26 @@ .to-read-counter { position: absolute; - top: 15px; - left: 20px; + top: 0.9375rem; + left: 1.25rem; } .card-container { display: grid; - grid-template-columns: repeat(auto-fill, 160px); + grid-template-columns: repeat(auto-fill, 10rem); grid-gap: 0.5rem; justify-content: space-around; - padding-bottom: 20px; + padding-bottom: 1.25rem; } ::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen { border-width: 1px; border-style: solid; - border-radius: 5px; + border-radius: 0.3125rem; border-color: var(--primary-color); - padding: 5px; + padding: 0.3125rem; vertical-align: middle; - width: 25px; + width: 1.5625rem; &:hover { background-color: var(--primary-color-dark-shade); diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts index ad0d10a6e..07d7bfb70 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts @@ -1,6 +1,6 @@ import {DOCUMENT, Location, NgClass, NgStyle, NgTemplateOutlet} from '@angular/common'; import { - AfterContentChecked, + AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -8,19 +8,19 @@ import { DestroyRef, ElementRef, inject, + input, + numberAttribute, OnInit, signal, - ViewChild + viewChild } from '@angular/core'; import {ReactiveFormsModule} from '@angular/forms'; -import {Title} from '@angular/platform-browser'; import {ActivatedRoute, Router, RouterLink} from '@angular/router'; import { NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle, - NgbModal, NgbNav, NgbNavChangeEvent, NgbNavContent, @@ -30,17 +30,13 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import {ToastrService} from 'ngx-toastr'; -import {catchError, debounceTime, forkJoin, Observable, of, ReplaySubject, tap} from 'rxjs'; +import {catchError, debounceTime, Observable, of, ReplaySubject, tap} from 'rxjs'; import {map} from 'rxjs/operators'; import {BulkSelectionService} from 'src/app/cards/bulk-selection.service'; -import { - EditSeriesModalCloseResult, - EditSeriesModalComponent -} from 'src/app/cards/_modals/edit-series-modal/edit-series-modal.component'; +import {EditSeriesModalComponent} from 'src/app/cards/_modals/edit-series-modal/edit-series-modal.component'; import {DownloadEvent, DownloadService} from 'src/app/shared/_services/download.service'; import {UtilityService} from 'src/app/shared/_services/utility.service'; import {Chapter, LooseLeafOrDefaultNumber, SpecialVolumeNumber} from 'src/app/_models/chapter'; -import {Device} from 'src/app/_models/device/device'; import {ScanSeriesEvent} from 'src/app/_models/events/scan-series-event'; import {SeriesRemovedEvent} from 'src/app/_models/events/series-removed-event'; import {LibraryType} from 'src/app/_models/library/library'; @@ -51,10 +47,9 @@ import {RelationKind} from 'src/app/_models/series-detail/relation-kind'; import {SeriesMetadata} from 'src/app/_models/metadata/series-metadata'; import {Volume} from 'src/app/_models/volume'; import {AccountService} from 'src/app/_services/account.service'; -import {Action, ActionFactoryService, ActionItem} from 'src/app/_services/action-factory.service'; +import {ActionFactoryService} from 'src/app/_services/action-factory.service'; import {ActionService} from 'src/app/_services/action.service'; import {ImageService} from 'src/app/_services/image.service'; -import {LibraryService} from 'src/app/_services/library.service'; import {EVENTS, MessageHubService} from 'src/app/_services/message-hub.service'; import {NavService} from 'src/app/_services/nav.service'; import {ReaderService} from 'src/app/_services/reader.service'; @@ -76,13 +71,7 @@ import {MetadataService} from "../../../_services/metadata.service"; import {Rating} from "../../../_models/rating"; import {ThemeService} from "../../../_services/theme.service"; import {DetailsTabComponent} from "../../../_single-module/details-tab/details-tab.component"; -import { - EditChapterModalCloseResult, - EditChapterModalComponent -} from "../../../_single-module/edit-chapter-modal/edit-chapter-modal.component"; import {ChapterRemovedEvent} from "../../../_models/events/chapter-removed-event"; -import {ChapterCardComponent} from "../../../cards/chapter-card/chapter-card.component"; -import {VolumeCardComponent} from "../../../cards/volume-card/volume-card.component"; import {SettingsTabId} from "../../../sidenav/preference-nav/preference-nav.component"; import {FilterField} from "../../../_models/metadata/v2/filter-field"; import {AgeRating} from "../../../_models/metadata/age-rating"; @@ -98,18 +87,19 @@ import {PublicationStatusPipe} from "../../../_pipes/publication-status.pipe"; import {MetadataDetailRowComponent} from "../metadata-detail-row/metadata-detail-row.component"; import {DownloadButtonComponent} from "../download-button/download-button.component"; import {hasAnyCast} from "../../../_models/common/i-has-cast"; -import {EditVolumeModalComponent} from "../../../_single-module/edit-volume-modal/edit-volume-modal.component"; import {CoverUpdateEvent} from "../../../_models/events/cover-update-event"; -import {RelatedSeriesPair, RelatedTabComponent} from "../../../_single-module/related-tab/related-tab.component"; +import { + RelatedSeriesPair, + RelatedTabChangeEvent, + RelatedTabComponent +} from "../../../_single-module/related-tab/related-tab.component"; import {CollectionTagService} from "../../../_services/collection-tag.service"; import {UserCollection} from "../../../_models/collection-tag"; import {CoverImageComponent} from "../../../_single-module/cover-image/cover-image.component"; -import {DefaultModalOptions} from "../../../_models/default-modal-options"; import {LicenseService} from "../../../_services/license.service"; import {PageBookmark} from "../../../_models/readers/page-bookmark"; import {VolumeRemovedEvent} from "../../../_models/events/volume-removed-event"; import {ReviewsComponent} from "../../../_single-module/reviews/reviews.component"; -import {ReadingProfileService} from "../../../_services/reading-profile.service"; import {AnnotationsTabComponent} from "../../../_single-module/annotations-tab/annotations-tab.component"; import {Annotation} from "../../../book-reader/_models/annotations/annotation"; import {AnnotationService} from "../../../_services/annotation.service"; @@ -117,6 +107,16 @@ import {ReadingProgressStatus} from "../../../_models/series-detail/reading-prog import {ReadingProgressStatusPipePipe} from "../../../_pipes/reading-progress-status-pipe.pipe"; import {ReadingProgressIconPipePipe} from "../../../_pipes/reading-progress-icon-pipe.pipe"; import {Breakpoint, BreakpointService} from "../../../_services/breakpoint.service"; +import {Action} from "../../../_models/actionables/action"; +import {ActionResult} from "../../../_models/actionables/action-result"; +import {CardEntityFactory, ChapterCardEntity, VolumeCardEntity} from "../../../_models/card/card-entity"; +import {CardConfigFactory} from "../../../_services/card-config-factory.service"; +import {EntityCardComponent} from "../../../cards/entity-card/entity-card.component"; +import {ModalResult} from "../../../_models/modal/modal-result"; +import {patchEntitySignal, patchSignalArray} from "../../../../libs/patch"; +import {ModalService} from "../../../_services/modal.service"; +import {getResolvedData} from "../../../../libs/route-util"; +import {ExternalSeries} from "../../../_models/series-detail/external-series"; enum TabID { @@ -132,8 +132,8 @@ enum TabID { } interface StoryLineItem { - chapter?: Chapter; - volume?: Volume; + chapter?: ChapterCardEntity; + volume?: VolumeCardEntity; isChapter: boolean; } @@ -147,24 +147,22 @@ interface StoryLineItem { NgbDropdownItem, BulkOperationsComponent, NgbNav, NgbNavItem, NgbNavLink, NgbNavContent, VirtualScrollerModule, SeriesCardComponent, ExternalSeriesCardComponent, NgbNavOutlet, TranslocoDirective, NgTemplateOutlet, NextExpectedCardComponent, - NgClass, DetailsTabComponent, ChapterCardComponent, - VolumeCardComponent, DefaultValuePipe, ExternalRatingComponent, ReadMoreComponent, RouterLink, BadgeExpanderComponent, - PublicationStatusPipe, MetadataDetailRowComponent, DownloadButtonComponent, RelatedTabComponent, CoverImageComponent, ReviewsComponent, AnnotationsTabComponent, ReadingProgressStatusPipePipe, ReadingProgressIconPipePipe] + NgClass, DetailsTabComponent, DefaultValuePipe, ExternalRatingComponent, ReadMoreComponent, RouterLink, BadgeExpanderComponent, + PublicationStatusPipe, MetadataDetailRowComponent, DownloadButtonComponent, RelatedTabComponent, CoverImageComponent, ReviewsComponent, + AnnotationsTabComponent, ReadingProgressStatusPipePipe, ReadingProgressIconPipePipe, EntityCardComponent] }) -export class SeriesDetailComponent implements OnInit, AfterContentChecked { +class SeriesDetailComponent implements OnInit, AfterViewInit { private readonly destroyRef = inject(DestroyRef); private readonly route = inject(ActivatedRoute); private readonly seriesService = inject(SeriesService); private readonly metadataService = inject(MetadataService); private readonly router = inject(Router); - private readonly modalService = inject(NgbModal); + private readonly modalService = inject(ModalService); private readonly toastr = inject(ToastrService); protected readonly accountService = inject(AccountService); protected readonly licenseService = inject(LicenseService); private readonly actionFactoryService = inject(ActionFactoryService); - private readonly libraryService = inject(LibraryService); - private readonly titleService = inject(Title); private readonly downloadService = inject(DownloadService); private readonly actionService = inject(ActionService); private readonly messageHub = inject(MessageHubService); @@ -172,7 +170,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { private readonly collectionTagService = inject(CollectionTagService); private readonly cdRef = inject(ChangeDetectorRef); private readonly scrollService = inject(ScrollService); - private readonly readingProfileService = inject(ReadingProfileService); + private readonly cardConfigFactory = inject(CardConfigFactory); protected readonly bulkSelectionService = inject(BulkSelectionService); protected readonly utilityService = inject(UtilityService); protected readonly imageService = inject(ImageService); @@ -186,37 +184,123 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { private readonly document = inject(DOCUMENT); protected readonly breakpointService = inject(BreakpointService); - @ViewChild('scrollingBlock') scrollingBlock: ElementRef | undefined; - @ViewChild('companionBar') companionBar: ElementRef | undefined; + readonly scrollingBlock = viewChild>('scrollingBlock'); - /** - * Series Id. Set at load before UI renders - */ - seriesId!: number; - series = signal(null); - volumes: Volume[] = []; + seriesId = input(0, {transform: numberAttribute }); + libraryId = input(0, {transform: numberAttribute }); + /** This will be {id,type,name} only for non-admin users */ + library = getResolvedData(this.route, 'library'); + series = getResolvedData(this.route, 'series'); + + volumes = signal([]); + volumeEntities = computed(() => this.volumes().map(v => CardEntityFactory.volume(v, this.seriesId(), this.libraryId()))); + volumeConfig = computed(() => { + const seriesId = this.seriesId(); + const libraryId = this.libraryId(); + const libraryType = this.libraryType(); + return this.cardConfigFactory.forVolume({seriesId, libraryId, libraryType}) + }); chapters = signal([]); - storyChapters: Chapter[] = []; - storylineItems: StoryLineItem[] = []; - libraryId = 0; + chapterEntities = computed(() => this.chapters().map(v => CardEntityFactory.chapter(v, this.seriesId(), this.libraryId()))); + chapterConfig = computed(() => { + const seriesId = this.seriesId(); + const libraryId = this.libraryId(); + const libraryType = this.libraryType(); + return this.cardConfigFactory.forChapter({seriesId, libraryId, libraryType}) + }); + specials = signal([]); + specialEntities = computed(() => this.specials().map(v => CardEntityFactory.chapter(v, this.seriesId(), this.libraryId()))); + specialConfig = computed(() => { + const seriesId = this.seriesId(); + const libraryId = this.libraryId(); + const libraryType = this.libraryType(); + return this.cardConfigFactory.forChapter({seriesId, libraryId, libraryType, overrides: {selectionType: 'special'}}) + }); + storylineChapters = signal([]); + private storylineChapterEntities = computed(() => this.storylineChapters().map(v => CardEntityFactory.chapter(v, this.seriesId(), this.libraryId()))); + storylineItems = computed(() => { + const items: StoryLineItem[] = []; + const volumes = this.volumeEntities(); + const storylineChapterEntities = this.storylineChapterEntities(); - isAdmin = computed(() => { - return this.accountService.isAdmin(); + const v = volumes.map(v => { + return {volume: v, chapter: undefined, isChapter: false} as StoryLineItem; + }); + items.push(...v); + const c = storylineChapterEntities.map(c => { + return {volume: undefined, chapter: c, isChapter: true} as StoryLineItem; + }); + items.push(...c); + + return items; }); - isLoading = true; - isLoadingExtra = false; - libraryAllowsScrobbling = false; - isScrobbling: boolean = true; - mobileSeriesImgBackground = getComputedStyle(this.document.documentElement) - .getPropertyValue('--mobile-series-img-background').trim(); - currentlyReadingChapter: Chapter | undefined = undefined; + isAdmin = computed(() => { + return this.accountService.hasAdminRole(); + }); + + activeTabId = TabID.Storyline; + downloadInProgress: boolean = false; + mobileSeriesImgBackground = this.themeService.getCssVariable('--mobile-series-img-background'); + + isLoading = signal(true); + isLoadingExtra = signal(false); + showLoader = computed(() => this.isLoading() || this.isLoadingExtra()); + + libraryAllowsScrobbling = signal(false); + isScrobbling = signal(true); + showScrobbleControls = computed(() => this.licenseService.hasValidLicenseSignal() && this.libraryAllowsScrobbling()); + + currentlyReadingChapter = signal(null); + continueReadingTitle = computed(() => { + const currentlyReadingChp = this.currentlyReadingChapter(); + if (currentlyReadingChp === null || !this.hasReadingProgress()) return ''; + + if (!currentlyReadingChp.isSpecial) { + const vol = this.volumes().filter(v => v.id === currentlyReadingChp.volumeId); + + let chapterLocaleKey = 'common.chapter-num-shorthand'; + let volumeLocaleKey = 'common.volume-num-shorthand'; + switch (this.libraryType()) { + case LibraryType.ComicVine: + case LibraryType.Comic: + chapterLocaleKey = 'common.issue-num-shorthand'; + break; + case LibraryType.Book: + case LibraryType.LightNovel: + chapterLocaleKey = 'common.book-num-shorthand'; + break; + case LibraryType.Manga: + case LibraryType.Images: + chapterLocaleKey = 'common.chapter-num-shorthand'; + break; + } + + // This is a lone chapter + if (vol.length === 0) { + if (currentlyReadingChp.minNumber === LooseLeafOrDefaultNumber) { + return currentlyReadingChp.titleName; + } + return translate(chapterLocaleKey, {num: currentlyReadingChp.minNumber}); + } + + if (currentlyReadingChp.minNumber === LooseLeafOrDefaultNumber) { + return translate(volumeLocaleKey, {num: vol[0].minNumber}); + } + + return translate(volumeLocaleKey, {num: vol[0].minNumber}) + + ' ' + translate(chapterLocaleKey, {num: currentlyReadingChp.minNumber}); + } + + return currentlyReadingChp.title; + }); hasReadingProgress = signal(false); readingProgressStatus = computed(() => { const hasProgress = this.hasReadingProgress(); const series = this.series(); + if (!series || !hasProgress) return ReadingProgressStatus.NoProgress; if (series.pagesRead >= series.pages) { @@ -225,37 +309,59 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { return ReadingProgressStatus.Progress; }); + hasSpecials = computed(() => this.specials().length > 0); - seriesActions: ActionItem[] = []; - volumeActions: ActionItem[] = []; - chapterActions: ActionItem[] = []; - hasSpecials = false; - specials: Array = []; - activeTabId = TabID.Storyline; - - reviews: Array = []; - plusReviews: Array = []; - bookmarks: Array = []; - ratings: Array = []; - libraryType = signal(LibraryType.Manga); + reviews = signal([]); + plusReviews = signal([]); + reviewCount = computed(() => this.reviews().length + this.plusReviews().length); + bookmarks = signal([]); + ratings = signal([]); + libraryType = computed(() => this.library().type); seriesMetadata = signal(null); - readingLists: Array = []; - collections: Array = []; - isWantToRead: boolean = false; - unreadCount: number = 0; - totalCount: number = 0; - totalSize = signal(undefined); - readingTimeLeft: HourEstimateRange | null = null; - /** - * Poster image for the Series - */ - seriesImage: string = ''; - downloadInProgress: boolean = false; + readingLists = signal([]); + collections = signal([]); + isWantToRead = signal(false); + unreadCount = signal(0); + totalCount = signal(0); + seriesActions = computed(() => { + const hasLicense = this.licenseService.hasValidLicenseSignal(); + let actions = this.actionFactoryService.getSeriesActions() + .filter(action => action.action !== Action.Edit); + if (!hasLicense) { + actions = actions.filter(action => action.action !== Action.Match); + } + return actions; + }); + totalSize = computed(() => { + const seen = new Set(); + let total = 0; - nextExpectedChapter: NextExpectedChapter | undefined; + const addChapter = (c: Chapter) => { + if (seen.has(c.id)) return; + seen.add(c.id); + for (const f of c.files) { + total += f.bytes; + } + }; + + for (const c of this.chapters()) addChapter(c); + for (const v of this.volumes()) { + for (const c of v.chapters) addChapter(c); + } + for (const c of this.specials()) addChapter(c); + + return total; + }); + + readingTimeLeft = signal(null); + + + seriesCoverImage = computed(() => this.imageService.getSeriesCoverImage(this.seriesId())); + chapterTabName = computed(() => this.utilityService.formatChapterName(this.libraryType())); + nextExpectedChapter = signal(null); loadPageSource = new ReplaySubject(1); loadPage$ = this.loadPageSource.asObservable(); @@ -271,10 +377,10 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { if (libType === LibraryType.ComicVine) return false; // Edge case for bad pdf parse - if ((libType === LibraryType.Book || libType === LibraryType.LightNovel) && (this.volumes.length === 0 && chapters.length === 0 && this.storyChapters.length > 0)) return true; + if ((libType === LibraryType.Book || libType === LibraryType.LightNovel) && (this.volumes().length === 0 && chapters.length === 0 && this.storylineChapters().length > 0)) return true; return (libType !== LibraryType.Book && libType !== LibraryType.LightNovel && libType !== LibraryType.Comic) - && (this.volumes.length > 0 || chapters.length > 0); + && (this.volumes().length > 0 || chapters.length > 0); }); readonly shouldShowVolumeTab = computed(() => { @@ -282,13 +388,13 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { const chapters = this.chapters(); if (libType === LibraryType.ComicVine) { - if (this.volumes.length > 1) return true; + if (this.volumes().length > 1) return true; - return this.specials.length === 0 && chapters.length === 0; + return this.specials().length === 0 && chapters.length === 0; } - return this.volumes.length > 0; + return this.volumes().length > 0; }); showDetailsTab = computed(() => { @@ -314,24 +420,16 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { */ trackByChapterIdentity = (index: number, item: Chapter) => `${item.title}_${item.minNumber}_${item.maxNumber}_${item.volumeId}_${item.pagesRead}`; - /** - * Are there any related series - */ - hasRelations: boolean = false; - /** - * Are there recommendations - */ - hasRecommendations: boolean = false; /** * Related Series. Sorted by backend */ - relations: Array = []; - relationships: RelatedSeries | null = null; + relations = signal([]); /** * Recommended Series */ - combinedRecs: Array = []; + combinedRecs = signal>([]); + hasRecommendations = computed(() => this.combinedRecs().length > 0); showChapterTab = computed(() => this.chapters().length > 0); annotations = signal([]); @@ -341,205 +439,111 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { */ download$: Observable | null = null; - bulkActionCallback = async (action: ActionItem, data: any) => { - if (this.series() === undefined) { - return; - } - const seriesId = this.seriesId; - // we need to figure out what is actually selected now - const selectedVolumeIndexes = this.bulkSelectionService.getSelectedCardsForSource('volume'); - const selectedChapterIndexes = this.bulkSelectionService.getSelectedCardsForSource('chapter'); - const selectedSpecialIndexes = this.bulkSelectionService.getSelectedCardsForSource('special'); - - // NOTE: This needs to check current tab as chapter array will be different - let chapterArray = this.storyChapters; - if (this.activeTabId === TabID.Chapters) chapterArray = this.chapters(); - - // We must augment chapter indices as Bulk Selection assumes all on one page, but Storyline has mixed - const chapterIndexModifier = this.activeTabId === TabID.Storyline ? this.volumes.length : 0; - const selectedChapterIds = chapterArray.filter((_chapter, index: number) => { - const mappedIndex = index + chapterIndexModifier; - return selectedChapterIndexes.includes(mappedIndex + ''); - }); - const selectedVolumeIds = this.volumes.filter((_volume, index: number) => selectedVolumeIndexes.includes(index + '')); - const selectedSpecials = this.specials.filter((_chapter, index: number) => selectedSpecialIndexes.includes(index + '')); - const chapters = [...selectedChapterIds, ...selectedSpecials]; - - switch (action.action) { - case Action.AddToReadingList: - this.actionService.addMultipleToReadingList(seriesId, selectedVolumeIds, chapters, (success) => { - if (success) this.bulkSelectionService.deselectAll(); - this.cdRef.markForCheck(); - }); - break; - case Action.MarkAsRead: - this.actionService.markMultipleAsRead(seriesId, selectedVolumeIds, chapters, () => { - this.setContinuePoint(); - // TODO: BUG: This doesn't update series pagesRead - this.bulkSelectionService.deselectAll(); - this.cdRef.markForCheck(); - }); - - break; - case Action.MarkAsUnread: - this.actionService.markMultipleAsUnread(seriesId, selectedVolumeIds, chapters, () => { - this.setContinuePoint(); - // TODO: BUG: This doesn't update series pagesRead - this.bulkSelectionService.deselectAll(); - this.cdRef.markForCheck(); - }); - break; - case Action.SendTo: - const device = (action._extra!.data as Device); - this.actionService.sendToDevice(chapters.map(c => c.id), device); - this.bulkSelectionService.deselectAll(); - this.cdRef.markForCheck(); - break; - case Action.Delete: - if (chapters.length > 0) { - await this.actionService.deleteMultipleChapters(seriesId, chapters, () => { - // No need to update the page as the backend will spam volume/chapter deletions - this.bulkSelectionService.deselectAll(); - this.cdRef.markForCheck(); - }); - - // It's not possible to select both chapters and volumes - break; - } - - if (selectedVolumeIds.length > 0) { - await this.actionService.deleteMultipleVolumes(selectedVolumeIds, () => { - // No need to update the page as the backend will spam volume deletions - this.bulkSelectionService.deselectAll(); - this.cdRef.markForCheck(); - }); - } - - break; - } - } - - + totalRelatedCount = computed(() => this.relations().length + this.readingLists().length + this.collections().length + (this.bookmarks().length > 0 ? 1 : 0)); + /** Are there any related series */ + hasRelations = computed(() => this.relations().length > 0); get ScrollingBlockHeight() { - if (this.scrollingBlock === undefined) return 'calc(var(--vh)*100)'; + if (this.scrollingBlock() === undefined) return 'calc(var(--vh)*100)'; const navbar = this.document.querySelector('.navbar') as HTMLElement; if (navbar === null) return 'calc(var(--vh)*100)'; - const companionHeight = this.companionBar?.nativeElement.offsetHeight || 0; const navbarHeight = navbar.offsetHeight; - const totalHeight = companionHeight + navbarHeight + 21; //21px to account for padding + const totalHeight = navbarHeight + 21; //21px to account for padding return 'calc(var(--vh)*100 - ' + totalHeight + 'px)'; } - get ContinuePointTitle() { - if (this.currentlyReadingChapter === undefined || !this.hasReadingProgress()) return ''; - - if (!this.currentlyReadingChapter.isSpecial) { - const vol = this.volumes.filter(v => v.id === this.currentlyReadingChapter?.volumeId); - - let chapterLocaleKey = 'common.chapter-num-shorthand'; - let volumeLocaleKey = 'common.volume-num-shorthand'; - switch (this.libraryType()) { - case LibraryType.ComicVine: - case LibraryType.Comic: - chapterLocaleKey = 'common.issue-num-shorthand'; - break; - case LibraryType.Book: - case LibraryType.LightNovel: - chapterLocaleKey = 'common.book-num-shorthand'; - break; - case LibraryType.Manga: - case LibraryType.Images: - chapterLocaleKey = 'common.chapter-num-shorthand'; - break; - } - - // This is a lone chapter - if (vol.length === 0) { - if (this.currentlyReadingChapter.minNumber === LooseLeafOrDefaultNumber) { - return this.currentlyReadingChapter.titleName; - } - return translate(chapterLocaleKey, {num: this.currentlyReadingChapter.minNumber}); - } - - if (this.currentlyReadingChapter.minNumber === LooseLeafOrDefaultNumber) { - return translate(volumeLocaleKey, {num: vol[0].minNumber}); - } - - return translate(volumeLocaleKey, {num: vol[0].minNumber}) - + ' ' + translate(chapterLocaleKey, {num: this.currentlyReadingChapter.minNumber}); - } - - return this.currentlyReadingChapter.title; - } constructor() { this.router.routeReuseStrategy.shouldReuseRoute = () => false; + + + this.bulkSelectionService.registerResolver(() => { + // Tab-dependent chapter array + let chapterArray = this.activeTabId === TabID.Chapters ? this.chapters() : this.storylineChapters(); + const offset = this.activeTabId === TabID.Storyline ? this.volumes().length : 0; + + const volIndices = this.bulkSelectionService.getSelectedCardsForSource('volume'); + const chIndices = this.bulkSelectionService.getSelectedCardsForSource('chapter'); + const spIndices = this.bulkSelectionService.getSelectedCardsForSource('special'); + + return { + volumes: this.volumes().filter((_, i) => volIndices.includes(i + '')), + chapters: [ + ...chapterArray.filter((_, i) => chIndices.includes((i + offset) + '')), + ...this.specials().filter((_, i) => spIndices.includes(i + '')), + ], + }; + }); + this.bulkSelectionService.registerContext(() => ({ seriesId: this.seriesId(), libraryId: this.libraryId(), libraryType: this.libraryType() })); + this.bulkSelectionService.registerPostAction((res: ActionResult) => { + if (res.effect === 'none') return; + if (res.effect === 'reload') { + this.loadPageSource.next(false); + return; + } + + if (res.effect === 'update') { + const entityMap = new Map(res.entity.map(e => [e.id, e])); + + patchSignalArray(this.volumes, entityMap); + patchSignalArray(this.chapters, entityMap); + patchSignalArray(this.specials, entityMap); + patchSignalArray(this.storylineChapters, entityMap); + } + this.setContinuePoint(); + }); } - ngAfterContentChecked(): void { - this.scrollService.setScrollContainer(this.scrollingBlock); + ngAfterViewInit(): void { + this.scrollService.setScrollContainer(this.scrollingBlock()); } ngOnInit(): void { - const routeId = this.route.snapshot.paramMap.get('seriesId'); - const libraryId = this.route.snapshot.paramMap.get('libraryId'); - if (routeId === null || libraryId == null) { - this.router.navigateByUrl('/home'); - return; - } - // Set up the download in progress this.download$ = this.downloadService.activeDownloads$.pipe(takeUntilDestroyed(this.destroyRef), map((events) => { return this.downloadService.mapToEntityType(events, this.series()!); })); - this.loadPage$.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(300), tap(val => this.loadSeries(this.seriesId, val))).subscribe(); + this.loadPage$.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(300), tap(val => this.loadSeries(this.seriesId(), val))).subscribe(); this.messageHub.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => { if (event.event === EVENTS.SeriesRemoved) { const seriesRemovedEvent = event.payload as SeriesRemovedEvent; - if (seriesRemovedEvent.seriesId === this.seriesId) { + if (seriesRemovedEvent.seriesId === this.seriesId()) { this.toastr.info(translate('errors.series-doesnt-exist')); this.router.navigateByUrl('/home'); } } else if (event.event === EVENTS.ScanSeries) { const seriesScanEvent = event.payload as ScanSeriesEvent; - if (seriesScanEvent.seriesId === this.seriesId) { + if (seriesScanEvent.seriesId === this.seriesId()) { this.loadPageSource.next(false); } } else if (event.event === EVENTS.CoverUpdate) { const coverUpdateEvent = event.payload as CoverUpdateEvent; - if (coverUpdateEvent.id === this.seriesId) { - this.themeService.refreshColorScape('series', this.seriesId).subscribe(); + if (coverUpdateEvent.id === this.seriesId()) { + this.themeService.refreshColorScape('series', this.seriesId()).subscribe(); } } else if (event.event === EVENTS.ChapterRemoved) { const removedEvent = event.payload as ChapterRemovedEvent; - if (removedEvent.seriesId !== this.seriesId) return; + if (removedEvent.seriesId !== this.seriesId()) return; this.loadPageSource.next(false); } else if (event.event === EVENTS.VolumeRemoved) { const volumeRemoveEvent = event.payload as VolumeRemovedEvent; - if (volumeRemoveEvent.seriesId === this.seriesId) { + if (volumeRemoveEvent.seriesId === this.seriesId()) { this.loadPageSource.next(false); } } }); - this.seriesId = parseInt(routeId, 10); - this.libraryId = parseInt(libraryId, 10); - this.seriesImage = this.imageService.getSeriesCoverImage(this.seriesId); - this.cdRef.markForCheck(); - this.scrobbleService.hasHold(this.seriesId).subscribe(res => { - this.isScrobbling = !res; - this.cdRef.markForCheck(); + this.scrobbleService.hasHold(this.seriesId()).subscribe(res => { + this.isScrobbling.set(!res); }); - this.scrobbleService.libraryAllowsScrobbling(this.seriesId).subscribe(res => { - this.libraryAllowsScrobbling = res; - this.cdRef.markForCheck(); + this.scrobbleService.libraryAllowsScrobbling(this.seriesId()).subscribe(res => { + this.libraryAllowsScrobbling.set(res); }); @@ -567,161 +571,29 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { this.location.replaceState(newUrl) } - async handleSeriesActionCallback(action: ActionItem, series: Series) { - const seriesValue = this.series(); - switch(action.action) { - case(Action.MarkAsRead): - this.actionService.markSeriesAsRead(series, (series: Series) => { - this.loadPageSource.next(false); - }); + onSeriesActionResult(event: any) { + if (!('effect' in event)) return; // Ignore legacy ActionItem events + const result = event as ActionResult; + switch (result.effect) { + case 'update': + this.loadPageSource.next(false); break; - case(Action.MarkAsUnread): - this.actionService.markSeriesAsUnread(series, (series: Series) => { - this.loadPageSource.next(false); - }); + case 'remove': + this.router.navigate(['library', this.libraryId()]); break; - case(Action.Scan): - await this.actionService.scanSeries(series); + case 'reload': + this.loadSeries(this.seriesId(), true); break; - case(Action.RefreshMetadata): - await this.actionService.refreshSeriesMetadata(series, undefined, true, false); - break; - case(Action.GenerateColorScape): - await this.actionService.refreshSeriesMetadata(series, undefined, false, true); - break; - case(Action.Delete): - await this.deleteSeries(series); - break; - case(Action.AddToReadingList): - this.actionService.addSeriesToReadingList(series); - break; - case(Action.AddToCollection): - this.actionService.addMultipleSeriesToCollectionTag([series]); - break; - case (Action.AnalyzeFiles): - this.actionService.analyzeFilesForSeries(series); - break; - case Action.AddToWantToReadList: - this.actionService.addMultipleSeriesToWantToReadList([series.id]); - break; - case Action.RemoveFromWantToReadList: - this.actionService.removeMultipleSeriesFromWantToReadList([series.id]); - break; - case Action.Download: - if (this.downloadInProgress) return; - this.downloadSeries(); - break; - case Action.Match: - this.actionService.matchSeries(seriesValue!, (refreshNeeded) => { - if (refreshNeeded) { - this.loadSeries(seriesValue!.id, refreshNeeded); - } - }); - break; - case Action.SendTo: - { - const chapterIds = [...this.volumes.map(v => v.chapters.map(c => c.id)).flat(), ...this.specials.map(c => c.id)] - const device = (action._extra!.data as Device); - this.actionService.sendToDevice(chapterIds, device); - break; + case 'none': + if (result.action === Action.Download) { + if (this.downloadInProgress) return; + this.downloadInProgress = true; + this.cdRef.markForCheck(); } - case Action.SetReadingProfile: - this.actionService.setReadingProfileForMultiple([seriesValue!]); - break; - case Action.ClearReadingProfile: - this.readingProfileService.clearSeriesProfiles(this.seriesId).subscribe(() => { - this.toastr.success(translate('actionable.cleared-profile')); - }); - break; - default: break; } } - async handleVolumeActionCallback(action: ActionItem, volume: Volume) { - switch(action.action) { - case(Action.MarkAsRead): - this.markVolumeAsRead(volume); - break; - case(Action.MarkAsUnread): - this.markVolumeAsUnread(volume); - break; - case(Action.Edit): - this.openEditVolume(volume); - break; - case(Action.Delete): - await this.actionService.deleteVolume(volume.id, (b) => { - if (!b) return; - this.loadPageSource.next(false); - }); - break; - case(Action.AddToReadingList): - this.actionService.addVolumeToReadingList(volume, this.seriesId, () => {/* No Operation */ }); - break; - case(Action.IncognitoRead): - if (volume.chapters != undefined && volume.chapters?.length >= 1) { - this.openChapter(volume.chapters.sort(this.utilityService.sortChapters)[0], true); - } - break; - case (Action.SendTo): - { - const device = (action._extra!.data as Device); - this.actionService.sendToDevice(volume.chapters.map(c => c.id), device); - break; - } - case (Action.Download): - this.downloadService.download('volume', volume); - break; - default: - break; - } - } - - async handleChapterActionCallback(action: ActionItem, chapter: Chapter) { - switch (action.action) { - case(Action.MarkAsRead): - this.markChapterAsRead(chapter); - break; - case(Action.MarkAsUnread): - this.markChapterAsUnread(chapter); - break; - case(Action.Edit): - this.openEditChapter(chapter); - break; - case(Action.AddToReadingList): - this.actionService.addChapterToReadingList(chapter, this.seriesId, () => {/* No Operation */ }); - break; - case(Action.IncognitoRead): - this.openChapter(chapter, true); - break; - case (Action.SendTo): - const device = (action._extra!.data as Device); - this.actionService.sendToDevice([chapter.id], device); - break; - case (Action.Delete): - await this.actionService.deleteChapter(chapter.id, (success) => { - if (!success) return; - const chps = this.chapters(); - this.chapters.set(chps.filter(c => c.id != chapter.id)); - }); - break; - case (Action.Download): - this.downloadService.download('chapter', chapter); - break; - default: - break; - } - } - - - async deleteSeries(series: Series) { - await this.actionService.deleteSeries(series, (result: boolean) => { - this.cdRef.markForCheck(); - if (result) { - this.router.navigate(['library', this.libraryId]); - } - }); - } loadSeries(seriesId: number, loadExternal: boolean = false) { this.seriesService.getMetadata(seriesId).subscribe(metadata => { @@ -731,198 +603,144 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { this.seriesService.getNextExpectedChapterDate(seriesId).subscribe(date => { if (date == null || date.expectedDate === null) { - if (this.nextExpectedChapter !== undefined) { + if (this.nextExpectedChapter !== null) { // Clear out the data so the card removes - this.nextExpectedChapter = undefined; - this.cdRef.markForCheck(); + this.nextExpectedChapter.set(null); } return; } - this.nextExpectedChapter = date; - this.cdRef.markForCheck(); + this.nextExpectedChapter.set(date); }); }); this.seriesService.isWantToRead(seriesId).subscribe(isWantToRead => { - this.isWantToRead = isWantToRead; - this.cdRef.markForCheck(); + this.isWantToRead.set(isWantToRead); }); - this.readingListService.getReadingListsForSeries(seriesId).subscribe(lists => { - this.readingLists = lists; - this.cdRef.markForCheck(); - }); - - this.collectionTagService.allCollectionsForSeries(seriesId, false).subscribe(tags => { - this.collections = tags; - this.cdRef.markForCheck(); - }); - - - this.readerService.getBookmarksForSeries(seriesId).subscribe(bookmarks => { - if (bookmarks.length > 0) { - this.bookmarks = Object.values( - bookmarks.reduce((acc, bookmark) => { - if (!acc[bookmark.seriesId]) { - acc[bookmark.seriesId] = bookmark; // Select the first one per seriesId - } - return acc; - }, {} as Record) - ); - } else { - this.bookmarks = []; - } - this.cdRef.markForCheck(); - }); + this.loadReadingLists(seriesId); + this.loadCollections(seriesId); + this.loadBookmarks(seriesId); + this.loadRelatedSeries(seriesId); this.annotationService.getAnnotationsForSeries(seriesId).subscribe(annotationsForSeries => { this.annotations.set(annotationsForSeries); }); this.readerService.getTimeLeft(seriesId).subscribe((timeLeft) => { - this.readingTimeLeft = timeLeft; - this.cdRef.markForCheck(); + this.readingTimeLeft.set(timeLeft); }); this.setContinuePoint(); + this.themeService.setColorScape(this.series().primaryColor, this.series().secondaryColor); - forkJoin({ - libType: this.libraryService.getLibraryType(this.libraryId), - series: this.seriesService.getSeries(seriesId) - }).subscribe(results => { - this.libraryType.set(results.libType); - this.series.set(results.series); + if (loadExternal) { + this.loadPlusMetadata(this.seriesId(), this.library().type); + } - this.themeService.setColorScape(results.series.primaryColor, results.series.secondaryColor); - if (loadExternal) { - this.loadPlusMetadata(this.seriesId, results.libType); + + + + + this.seriesService.getSeriesDetail(this.seriesId()).pipe(catchError(err => { + this.router.navigateByUrl('/home'); + return of(null); + })).subscribe(detail => { + if (detail == null) { + this.router.navigateByUrl('/home'); + return; } - // if (results.libType === LibraryType.LightNovel) { - // this.renderMode = PageLayoutMode.List; - // this.pageExtrasGroup.get('renderMode')?.setValue(this.renderMode); - // this.cdRef.markForCheck(); - // } + this.unreadCount.set(detail.unreadCount); + this.totalCount.set(detail.totalCount); + this.specials.set(detail.specials); + this.chapters.set(detail.chapters); + this.volumes.set(detail.volumes); + this.storylineChapters.set(detail.storylineChapters); - this.titleService.setTitle('Kavita - ' + results.series.name + ' Details'); - - this.volumeActions = this.actionFactoryService.getVolumeActions(this.handleVolumeActionCallback.bind(this)); - this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this)); - this.seriesActions = this.actionFactoryService.getSeriesActions(this.handleSeriesActionCallback.bind(this)) - .filter(action => action.action !== Action.Edit); - - this.licenseService.hasValidLicense$.subscribe(hasLic => { - if (!hasLic) { - this.seriesActions = this.seriesActions.filter(action => action.action !== Action.Match); - this.cdRef.markForCheck(); + if (!this.router.url.includes('#')) { + this.updateSelectedTab(); + } else if (this.activeTabId != TabID.Storyline) { + // Validate that the tab we are selected is still there (in case this comes from a messageHub) + switch (this.activeTabId) { + case TabID.Related: + if (!this.hasRelations()) this.updateSelectedTab(); + break; + case TabID.Specials: + if (!this.hasSpecials()) this.updateSelectedTab(); + break; + case TabID.Volumes: + if (this.volumes().length === 0) this.updateSelectedTab(); + break; + case TabID.Chapters: + if (this.chapters().length === 0) this.updateSelectedTab(); + break; + case TabID.Recommendations: + if (!this.hasRecommendations()) this.updateSelectedTab(); + break; + case TabID.Reviews: + if (this.reviews().length === 0) this.updateSelectedTab(); + break; + case TabID.Details: + break; } - }); + } + this.isLoading.set(false); + }); - this.seriesService.getRelatedForSeries(this.seriesId).subscribe((relations: RelatedSeries) => { - this.relationships = relations; - this.relations = [ - ...relations.prequels.map(item => this.createRelatedSeries(item, RelationKind.Prequel)), - ...relations.sequels.map(item => this.createRelatedSeries(item, RelationKind.Sequel)), - ...relations.sideStories.map(item => this.createRelatedSeries(item, RelationKind.SideStory)), - ...relations.spinOffs.map(item => this.createRelatedSeries(item, RelationKind.SpinOff)), - ...relations.adaptations.map(item => this.createRelatedSeries(item, RelationKind.Adaptation)), - ...relations.contains.map(item => this.createRelatedSeries(item, RelationKind.Contains)), - ...relations.characters.map(item => this.createRelatedSeries(item, RelationKind.Character)), - ...relations.others.map(item => this.createRelatedSeries(item, RelationKind.Other)), - ...relations.alternativeSettings.map(item => this.createRelatedSeries(item, RelationKind.AlternativeSetting)), - ...relations.alternativeVersions.map(item => this.createRelatedSeries(item, RelationKind.AlternativeVersion)), - ...relations.doujinshis.map(item => this.createRelatedSeries(item, RelationKind.Doujinshi)), - ...relations.parent.map(item => this.createRelatedSeries(item, RelationKind.Parent)), - ...relations.editions.map(item => this.createRelatedSeries(item, RelationKind.Edition)), - ...relations.annuals.map(item => this.createRelatedSeries(item, RelationKind.Annual)), - ]; + } + private loadRelatedSeries(seriesId: number) { + this.seriesService.getRelatedForSeries(seriesId).subscribe((relations: RelatedSeries) => { + this.relations.set([ + ...relations.prequels.map(item => this.createRelatedSeries(item, RelationKind.Prequel)), + ...relations.sequels.map(item => this.createRelatedSeries(item, RelationKind.Sequel)), + ...relations.sideStories.map(item => this.createRelatedSeries(item, RelationKind.SideStory)), + ...relations.spinOffs.map(item => this.createRelatedSeries(item, RelationKind.SpinOff)), + ...relations.adaptations.map(item => this.createRelatedSeries(item, RelationKind.Adaptation)), + ...relations.contains.map(item => this.createRelatedSeries(item, RelationKind.Contains)), + ...relations.characters.map(item => this.createRelatedSeries(item, RelationKind.Character)), + ...relations.others.map(item => this.createRelatedSeries(item, RelationKind.Other)), + ...relations.alternativeSettings.map(item => this.createRelatedSeries(item, RelationKind.AlternativeSetting)), + ...relations.alternativeVersions.map(item => this.createRelatedSeries(item, RelationKind.AlternativeVersion)), + ...relations.doujinshis.map(item => this.createRelatedSeries(item, RelationKind.Doujinshi)), + ...relations.parent.map(item => this.createRelatedSeries(item, RelationKind.Parent)), + ...relations.editions.map(item => this.createRelatedSeries(item, RelationKind.Edition)), + ...relations.annuals.map(item => this.createRelatedSeries(item, RelationKind.Annual)), + ]); + }); + } - if (this.relations.length > 0) { - this.hasRelations = true; - this.cdRef.markForCheck(); - } else { - this.hasRelations = false; - this.cdRef.markForCheck(); + private loadReadingLists(seriesId: number) { + this.readingListService.getReadingListsForSeries(seriesId).subscribe(lists => { + this.readingLists.set(lists); + }); + } + + private loadCollections(seriesId: number) { + this.collectionTagService.allCollectionsForSeries(seriesId, false).subscribe(tags => { + this.collections.set(tags); + }); + } + + private loadBookmarks(seriesId: number) { + this.readerService.getBookmarksForSeries(seriesId).subscribe(bookmarks => { + if (bookmarks.length === 0) { + this.bookmarks.set([]); + return; + } + + const seen = new Map(); + for (const bookmark of bookmarks) { + if (!seen.has(bookmark.chapterId)) { + seen.set(bookmark.chapterId, bookmark); } - }); + } - this.seriesService.getSeriesDetail(this.seriesId).pipe(catchError(err => { - this.router.navigateByUrl('/home'); - return of(null); - })).subscribe(detail => { - if (detail == null) { - this.router.navigateByUrl('/home'); - return; - } - - this.unreadCount = detail.unreadCount; - this.totalCount = detail.totalCount; - - this.hasSpecials = detail.specials.length > 0; - this.specials = detail.specials; - - this.chapters.set(detail.chapters); - this.volumes = detail.volumes; - this.storyChapters = detail.storylineChapters; - - const uniqueChapters = Array.from( - new Map([...detail.chapters, ...detail.volumes.flatMap(v => v.chapters)] - .map(c => [c.id, c])).values() - ); - - this.totalSize.set(uniqueChapters - .flatMap(c => c.files) - .reduce((sum, f) => sum + f.bytes, 0)); - - this.storylineItems = []; - const v = this.volumes.map(v => { - return {volume: v, chapter: undefined, isChapter: false} as StoryLineItem; - }); - this.storylineItems.push(...v); - const c = this.storyChapters.map(c => { - return {volume: undefined, chapter: c, isChapter: true} as StoryLineItem; - }); - this.storylineItems.push(...c); - - if (!this.router.url.includes('#')) { - this.updateSelectedTab(); - } else if (this.activeTabId != TabID.Storyline) { - // Validate that the tab we are selected is still there (in case this comes from a messageHub) - switch (this.activeTabId) { - case TabID.Related: - if (!this.hasRelations) this.updateSelectedTab(); - break; - case TabID.Specials: - if (!this.hasSpecials) this.updateSelectedTab(); - break; - case TabID.Volumes: - if (this.volumes.length === 0) this.updateSelectedTab(); - break; - case TabID.Chapters: - if (this.chapters().length === 0) this.updateSelectedTab(); - break; - case TabID.Recommendations: - if (!this.hasRecommendations) this.updateSelectedTab(); - break; - case TabID.Reviews: - if (this.reviews.length === 0) this.updateSelectedTab(); - break; - case TabID.Details: - break; - } - this.cdRef.markForCheck(); - } - - this.isLoading = false; - this.cdRef.markForCheck(); - }); - }, err => { - this.router.navigateByUrl('/home'); + this.bookmarks.set(Array.from(seen.values())); }); } @@ -941,8 +759,8 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { const libType = this.libraryType(); // Book libraries only have Volumes or Specials enabled if (libType === LibraryType.Book || libType === LibraryType.LightNovel) { - if (this.volumes.length === 0) { - if (this.specials.length === 0 && this.storyChapters.length > 0) { + if (this.volumes().length === 0) { + if (this.specials().length === 0 && this.storylineChapters().length > 0) { // NOTE: This is an edge case caused by bad parsing of pdf files. Once the new pdf parser is in place, this should be removed this.activeTabId = TabID.Storyline; } else { @@ -956,12 +774,12 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { return; } - if (this.volumes.length === 0 && this.chapters().length === 0 && this.specials.length > 0) { + if (this.volumes().length === 0 && this.chapters().length === 0 && this.specials().length > 0) { this.activeTabId = TabID.Specials; } else { if (libType == LibraryType.Comic || libType == LibraryType.ComicVine) { if (this.chapters().length === 0) { - if (this.specials.length > 0) { + if (this.specials().length > 0) { this.activeTabId = TabID.Specials; } else { this.activeTabId = TabID.Volumes; @@ -982,84 +800,40 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { loadPlusMetadata(seriesId: number, libraryType: LibraryType) { - this.isLoadingExtra = true; - this.cdRef.markForCheck(); + this.isLoadingExtra.set(true); this.metadataService.getSeriesMetadataFromPlus(seriesId, libraryType).subscribe(data => { if (data === null) { - this.isLoadingExtra = false; - this.cdRef.markForCheck(); + this.isLoadingExtra.set(false); return; } // Reviews - this.reviews = data.reviews.filter(r => !r.isExternal); - this.plusReviews = data.reviews.filter(r => r.isExternal); + this.reviews.set(data.reviews.filter(r => !r.isExternal)); + this.plusReviews.set(data.reviews.filter(r => r.isExternal)); if (data.ratings) { - this.ratings = [...data.ratings]; + this.ratings.set([...data.ratings]); } // Recommendations if (data.recommendations) { - this.combinedRecs = [...data.recommendations.ownedSeries, ...data.recommendations.externalSeries]; + this.combinedRecs.set([...data.recommendations.ownedSeries, ...data.recommendations.externalSeries]); } - this.hasRecommendations = this.combinedRecs.length > 0; - this.isLoadingExtra = false; - this.cdRef.markForCheck(); + this.isLoadingExtra.set(false); }); } setContinuePoint() { - this.readerService.hasSeriesProgress(this.seriesId).subscribe(hasProgress => { + this.readerService.hasSeriesProgress(this.seriesId()).subscribe(hasProgress => { this.hasReadingProgress.set(hasProgress); }); - this.readerService.getCurrentChapter(this.seriesId).subscribe(chapter => { - this.currentlyReadingChapter = chapter; - this.cdRef.markForCheck(); - }); - } - markVolumeAsRead(vol: Volume) { - if (this.series() === undefined) { - return; - } - - this.actionService.markVolumeAsRead(this.seriesId, vol, () => { - this.setContinuePoint(); - }); - } - - markVolumeAsUnread(vol: Volume) { - if (this.series() === undefined) { - return; - } - - this.actionService.markVolumeAsUnread(this.seriesId, vol, () => { - this.setContinuePoint(); - }); - } - - markChapterAsRead(chapter: Chapter) { - if (this.series() === undefined) { - return; - } - - this.actionService.markChapterAsRead(this.libraryId, this.seriesId, chapter, () => { - this.setContinuePoint(); - }); - } - - markChapterAsUnread(chapter: Chapter) { - if (this.series() === undefined) { - return; - } - - this.actionService.markChapterAsUnread(this.libraryId, this.seriesId, chapter, () => { - this.setContinuePoint(); + this.readerService.getCurrentChapter(this.seriesId()).subscribe(chapter => { + this.currentlyReadingChapter.set(chapter); }); } @@ -1069,74 +843,46 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { this.readerService.readSeries(this.series()!, incognitoMode); } - openChapter(chapter: Chapter, incognitoMode = false, promptForReread: boolean = true) { - if (this.bulkSelectionService.hasSelections()) return; - this.router.navigate(['library', this.libraryId, 'series', this.seriesId, 'chapter', chapter.id]); - - this.readerService.readChapter(this.libraryId, this.seriesId, chapter, incognitoMode); - } - - - openEditChapter(chapter: Chapter) { - const seriesValue = this.series(); - const ref = this.modalService.open(EditChapterModalComponent, DefaultModalOptions); - ref.componentInstance.chapter = chapter; - ref.componentInstance.libraryType = this.libraryType(); - ref.componentInstance.seriesId = seriesValue?.id; - ref.componentInstance.libraryId = seriesValue?.libraryId; - - ref.closed.subscribe((res: EditChapterModalCloseResult) => { - if (res.success && res.isDeleted) { - this.loadPageSource.next(false); - } - }); - } - - openEditVolume(volume: Volume) { - const seriesValue = this.series(); - const ref = this.modalService.open(EditVolumeModalComponent, DefaultModalOptions); - ref.componentInstance.volume = volume; - ref.componentInstance.libraryType = this.libraryType(); - ref.componentInstance.seriesId = seriesValue?.id; - ref.componentInstance.libraryId = seriesValue?.libraryId; - - ref.closed.subscribe((res: EditChapterModalCloseResult) => { - if (res.success && res.isDeleted) { - this.loadPageSource.next(false); - } - }); + handleRelatedReload(event: RelatedTabChangeEvent) { + switch (event.entity) { + case 'bookmark': + this.loadBookmarks(this.seriesId()); + this.updateSelectedTab(); + break; + case 'collection': + this.loadCollections(this.seriesId()); + this.updateSelectedTab(); + break; + case 'readingList': + this.loadReadingLists(this.seriesId()); + this.updateSelectedTab(); + break; + case 'relation': + this.loadRelatedSeries(this.seriesId()); + this.updateSelectedTab(); + break; + } } openEditSeriesModal() { - const modalRef = this.modalService.open(EditSeriesModalComponent, DefaultModalOptions); + const modalRef = this.modalService.open(EditSeriesModalComponent); modalRef.componentInstance.series = this.series(); - modalRef.closed.subscribe((closeResult: EditSeriesModalCloseResult) => { + modalRef.closed.subscribe((closeResult: ModalResult) => { if (closeResult.success) { window.scrollTo(0, 0); - this.loadPageSource.next(closeResult.updateExternal); - } else if (closeResult.updateExternal) { - this.loadPageSource.next(closeResult.updateExternal); } - }); - } - - downloadSeries() { - this.downloadService.download('series', this.series()!, (d) => { - this.downloadInProgress = !!d; - this.cdRef.markForCheck(); + this.loadPageSource.next(false); }); } toggleWantToRead() { - - if (this.isWantToRead) { - this.actionService.removeMultipleSeriesFromWantToReadList([this.seriesId]); + if (this.isWantToRead()) { + this.actionService.removeMultipleSeriesFromWantToReadList([this.seriesId()]); } else { - this.actionService.addMultipleSeriesToWantToReadList([this.seriesId]); + this.actionService.addMultipleSeriesToWantToReadList([this.seriesId()]); } - this.isWantToRead = !this.isWantToRead; - this.cdRef.markForCheck(); + this.isWantToRead.update(x => !x); } openFilter(field: FilterField, value: string | number) { @@ -1146,22 +892,19 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { toggleScrobbling(evt: any) { evt.stopPropagation(); - if (this.isScrobbling) { - this.scrobbleService.addHold(this.seriesId).subscribe(() => { - this.isScrobbling = !this.isScrobbling; - this.cdRef.markForCheck(); - }); + + if (this.isScrobbling()) { + this.scrobbleService.addHold(this.seriesId()).subscribe(); } else { - this.scrobbleService.removeHold(this.seriesId).subscribe(() => { - this.isScrobbling = !this.isScrobbling; - this.cdRef.markForCheck(); - }); + this.scrobbleService.removeHold(this.seriesId()).subscribe(); } + this.isScrobbling.update(x => !x); } switchTabsToDetail() { this.activeTabId = TabID.Details; this.cdRef.markForCheck(); + setTimeout(() => { const tabElem = this.document.querySelector('#details-tab'); if (tabElem) { @@ -1170,6 +913,16 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { }, 10); } + updateChapter(c: Chapter) { + patchEntitySignal(this.chapters, c); + patchEntitySignal(this.specials, c); + patchEntitySignal(this.storylineChapters, c); + } + + updateVolume(c: Volume) { + patchEntitySignal(this.volumes, c); + } + protected readonly LibraryType = LibraryType; protected readonly TabID = TabID; protected readonly LooseLeafOrSpecialNumber = LooseLeafOrDefaultNumber; @@ -1180,3 +933,5 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { protected readonly encodeURIComponent = encodeURIComponent; protected readonly Breakpoint = Breakpoint; } + +export default SeriesDetailComponent diff --git a/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html b/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html index e5b63bf7a..2baa0a15a 100644 --- a/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html +++ b/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html @@ -2,8 +2,8 @@
    - @if (subtitle) { -
    + @if (subtitle()) { +
    }
    diff --git a/UI/Web/src/app/settings/_components/setting-button/setting-button.component.ts b/UI/Web/src/app/settings/_components/setting-button/setting-button.component.ts index c4859370e..08cd83658 100644 --- a/UI/Web/src/app/settings/_components/setting-button/setting-button.component.ts +++ b/UI/Web/src/app/settings/_components/setting-button/setting-button.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input} from '@angular/core'; import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe"; import {TranslocoDirective} from "@jsverse/transloco"; @@ -6,17 +6,17 @@ import {TranslocoDirective} from "@jsverse/transloco"; * Use with btn-sm */ @Component({ - selector: 'app-setting-button', - imports: [ - SafeHtmlPipe, - TranslocoDirective - ], - templateUrl: './setting-button.component.html', - styleUrl: './setting-button.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-setting-button', + imports: [ + SafeHtmlPipe, + TranslocoDirective + ], + templateUrl: './setting-button.component.html', + styleUrl: './setting-button.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class SettingButtonComponent { - @Input({required:true}) subtitle: string = ''; + subtitle = input.required(); } diff --git a/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.scss b/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.scss index 45955179b..4e291ad7d 100644 --- a/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.scss +++ b/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.scss @@ -1,4 +1,4 @@ -$dotSize: 30px; +$dotSize: 1.875rem; .color-picker-container { position: relative; @@ -11,16 +11,16 @@ $dotSize: 30px; left: 50%; transform: translateX(-50%); z-index: 1000; - margin-bottom: 4px; - padding: 1px; + margin-bottom: 0.25rem; + padding: 0.0625rem; background: var(--drawer-bg-color); - border: 2px solid var(--primary-color); + border: 0.125rem solid var(--primary-color); border-radius: var(--card-border-radius); box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.4), - 0 4px 16px rgba(0, 0, 0, 0.3), - 0 0 0 1px rgba(255, 255, 255, 0.1); + 0 0.5rem 2rem rgba(0, 0, 0, 0.4), + 0 0.25rem 1rem rgba(0, 0, 0, 0.3), + 0 0 0 0.0625rem rgba(255, 255, 255, 0.1); } // This doesn't seem to work @@ -48,7 +48,7 @@ $dotSize: 30px; input { background: var(--drawer-bg-color); color: var(--drawer-text-color); - border-radius: 4px; + border-radius: 0.25rem; border: 1px solid var(--input-border-color); } @@ -70,13 +70,13 @@ $dotSize: 30px; display: inline-block; position: relative; - top: -10px; + top: -0.625rem; } .gradient-color, hue-component, indicator-component { - padding: 1px; + padding: 0.0625rem; border: 1px solid var(--input-border-color); } @@ -104,7 +104,7 @@ $dotSize: 30px; i { color: var(--primary-color); } - border: 2px solid var(--primary-color); + border: 0.125rem solid var(--primary-color); &:hover { background-color: var(--primary-color); @@ -117,6 +117,6 @@ $dotSize: 30px; } .active { - border: 2px solid var(--primary-color); + border: 0.125rem solid var(--primary-color); } diff --git a/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.ts b/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.ts index 7c00f7a28..5c4f71347 100644 --- a/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.ts +++ b/UI/Web/src/app/settings/_components/setting-colour-picker/setting-color-picker.component.ts @@ -2,15 +2,14 @@ import { Component, DestroyRef, ElementRef, - EventEmitter, HostListener, inject, input, model, OnInit, - Output, + output, signal, - ViewChild + viewChild } from '@angular/core'; import {NgClass, NgStyle} from '@angular/common'; import {SlotColorPipe} from "../../../_pipes/slot-color.pipe"; @@ -36,7 +35,7 @@ export class SettingColorPickerComponent implements OnInit { private readonly destroyRef = inject(DestroyRef); protected readonly breakpointService = inject(BreakpointService); - @ViewChild('colorPopup') colorPopup?: ElementRef; + readonly colorPopup = viewChild('colorPopup'); id = input.required(); label = input.required(); @@ -59,11 +58,11 @@ export class SettingColorPickerComponent implements OnInit { showPicker = signal(false); - @Output() selectPicker = new EventEmitter(); + selectPicker = output(); /** * Emits the raw color from the color picker rather than our RgbaColor */ - @Output() rawColorChange = new EventEmitter(); + rawColorChange = output(); chromeControl!: ColorPickerControl; @@ -71,17 +70,18 @@ export class SettingColorPickerComponent implements OnInit { onDocumentClick(event: Event) { if (!this.showPicker()) return; - if (!this.colorPopup) return; + const colorPopup = this.colorPopup(); + if (!colorPopup) return; const clickedElement = event.target as Node; - if (!this.elementRef.nativeElement.contains(clickedElement) && !this.colorPopup.nativeElement.contains(clickedElement)) { + if (!this.elementRef.nativeElement.contains(clickedElement) && !colorPopup.nativeElement.contains(clickedElement)) { this.showPicker.set(false); } } onSelect() { - this.selectPicker.emit(); + this.selectPicker.emit(undefined); } longClick() { diff --git a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html index b1048b974..873854d67 100644 --- a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html +++ b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html @@ -1,40 +1,40 @@
    -
    +
    - @if (labelId) { - + @if (labelId()) { + } @else { - {{title}} + {{title()}} } - @if (titleExtraRef) { - + @if (titleExtraRef()) { + }
    - @if (showEdit) { - } - @if (titleActionsRef) { - + @if (titleActionsRef()) { + }
    - @if (isEditMode) { - + @if (isEditMode()) { + } @else { - - + + } - @if (subtitle) { -
    + @if (subtitle()) { +
    }
    diff --git a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss index 26dc4391d..7b2544dbf 100644 --- a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss +++ b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.scss @@ -7,7 +7,7 @@ } .view-value { - font-size: 18px; + font-size: 1.125rem; color: var(--primary-color); cursor: pointer; } diff --git a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.ts b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.ts index e56dc5cac..389b5a9a6 100644 --- a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.ts +++ b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.ts @@ -1,58 +1,52 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, - ContentChild, + contentChild, + DestroyRef, + effect, ElementRef, - EventEmitter, HostListener, inject, input, - Input, - OnChanges, - OnInit, - Output, - SimpleChange, - SimpleChanges, + model, TemplateRef } from '@angular/core'; +import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {TranslocoDirective} from "@jsverse/transloco"; -import {NgClass, NgTemplateOutlet} from "@angular/common"; +import {NgTemplateOutlet} from "@angular/common"; import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe"; import {filter, fromEvent, tap} from "rxjs"; import {AbstractControl} from "@angular/forms"; @Component({ - selector: 'app-setting-item', - imports: [ - TranslocoDirective, - NgTemplateOutlet, - SafeHtmlPipe, - NgClass - ], - templateUrl: './setting-item.component.html', - styleUrl: './setting-item.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-setting-item', + imports: [ + TranslocoDirective, + NgTemplateOutlet, + SafeHtmlPipe + ], + templateUrl: './setting-item.component.html', + styleUrl: './setting-item.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) -export class SettingItemComponent implements OnInit, OnChanges { +export class SettingItemComponent { - private readonly cdRef = inject(ChangeDetectorRef); private readonly elementRef = inject(ElementRef); + private readonly destroyRef = inject(DestroyRef); - @Input({required:true}) title: string = ''; - @Input() editLabel: string | undefined = undefined; - @Input() canEdit: boolean = true; - @Input() showEdit: boolean = true; - @Input() isEditMode: boolean = false; - @Input() subtitle: string | undefined = undefined; - @Input() labelId: string | undefined = undefined; - @Input() toggleOnViewClick: boolean = true; + title = input.required(); + editLabel = input(); + canEdit = input(true); + showEdit = input(true); + isEditMode = model(false); + subtitle = input(); + labelId = input(); + toggleOnViewClick = input(true); /** * When true, the hover animation will not be present and the titleExtras will be always visible */ - @Input() fixedExtras: boolean = false; - @Input() control: AbstractControl | null = null; - @Output() editMode = new EventEmitter(); + fixedExtras = input(false); + control = input | null>(null); /** * When true, allows click events to bubble up to components within @@ -62,19 +56,19 @@ export class SettingItemComponent implements OnInit, OnChanges { /** * Extra information to show next to the title */ - @ContentChild('titleExtra') titleExtraRef!: TemplateRef; + titleExtraRef = contentChild>('titleExtra'); /** * View in View mode */ - @ContentChild('view') valueViewRef!: TemplateRef; + valueViewRef = contentChild>('view'); /** * View in Edit mode */ - @ContentChild('edit') valueEditRef!: TemplateRef; + valueEditRef = contentChild>('edit'); /** * Extra button controls to show instead of Edit */ - @ContentChild('titleActions') titleActionsRef!: TemplateRef; + titleActionsRef = contentChild>('titleActions'); @HostListener('click', ['$event']) onClickInside(event: MouseEvent) { @@ -83,63 +77,49 @@ export class SettingItemComponent implements OnInit, OnChanges { event.stopPropagation(); // Prevent the click from bubbling up } - ngOnInit() { + constructor() { + if (this.toggleOnViewClick()) { + fromEvent(window, 'click') + .pipe( + takeUntilDestroyed(this.destroyRef), + filter((event: Event) => { + if (!this.toggleOnViewClick()) return false; + if (this.control() != null && this.control()!.invalid) return false; - - if (!this.toggleOnViewClick) return; - - fromEvent(window, 'click') - .pipe( - filter((event: Event) => { - if (!this.toggleOnViewClick) return false; - if (this.control != null && this.control.invalid) return false; - - const mouseEvent = event as MouseEvent; - const selection = window.getSelection(); - const hasSelection = selection !== null && selection.toString().trim() === ''; - return !this.elementRef.nativeElement.contains(mouseEvent.target) && hasSelection; - }), - tap(() => { - this.isEditMode = false; - this.editMode.emit(this.isEditMode); - this.cdRef.markForCheck(); - }) - ) - .subscribe(); - } - - ngOnChanges(changes: SimpleChanges) { - if (changes.hasOwnProperty('isEditMode')) { - const change = changes.isEditMode as SimpleChange; - if (change.isFirstChange()) return; - - if (!this.toggleOnViewClick) return; - if (!this.canEdit) return; - if (this.control != null && this.control.invalid) return; - - this.isEditMode = change.currentValue; - this.cdRef.markForCheck(); - - this.focusInput(); + const mouseEvent = event as MouseEvent; + const selection = window.getSelection(); + const hasSelection = selection !== null && selection.toString().trim() === ''; + return !this.elementRef.nativeElement.contains(mouseEvent.target) && hasSelection; + }), + tap(() => { + this.isEditMode.set(false); + }) + ) + .subscribe(); } + + let initialized = false; + effect(() => { + const editMode = this.isEditMode(); + if (!initialized) { initialized = true; return; } + if (!this.toggleOnViewClick()) return; + if (!this.canEdit()) return; + if (this.control() != null && this.control()!.invalid) return; + if (editMode) this.focusInput(); + }); } toggleEditMode() { + if (!this.toggleOnViewClick()) return; + if (!this.canEdit()) return; + if (this.control() != null && this.control()!.invalid) return; - if (!this.toggleOnViewClick) return; - if (!this.canEdit) return; - if (this.control != null && this.control.invalid) return; - - this.isEditMode = !this.isEditMode; - this.editMode.emit(this.isEditMode); + this.isEditMode.set(!this.isEditMode()); this.focusInput(); - this.cdRef.markForCheck(); } focusInput() { - if (this.isEditMode) { - - + if (this.isEditMode()) { setTimeout(() => { const inputElem = this.findFirstInput(); if (inputElem) { diff --git a/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.html b/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.html index 066a7f2df..6f33f2ab5 100644 --- a/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.html +++ b/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.html @@ -1,6 +1,6 @@ - +
    @let keybind = selectedKeyBind() | keyBind; diff --git a/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.scss b/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.scss index cc826bc9c..3f86cd3fc 100644 --- a/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.scss +++ b/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.scss @@ -1,9 +1,9 @@ .typing-cursor { display: inline-block; - width: 1px; + width: 0.0625rem; height: 1em; background-color: currentColor; - margin-left: 2px; + margin-left: 0.125rem; vertical-align: text-bottom; animation: blink 1s step-end infinite; } diff --git a/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.ts b/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.ts index 56f2f179e..75c8ca5ec 100644 --- a/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.ts +++ b/UI/Web/src/app/settings/_components/setting-key-bind-picker/setting-key-bind-picker.component.ts @@ -59,6 +59,7 @@ export class SettingKeyBindPickerComponent implements ControlValueAccessor, OnDe target = input.required(); index = input.required(); duplicated = input.required(); + tooltipPlacement = input('auto'); selectedKeyBind = signal({key: KeyCode.Empty}); disabled = signal(false); @@ -68,7 +69,7 @@ export class SettingKeyBindPickerComponent implements ControlValueAccessor, OnDe protected readonly subscriptions = signal([]); protected readonly isListening = computed(() => this.subscriptions().length > 0); protected readonly tagBadgeCursor = computed(() => - this.accountService.isReadOnly() ? TagBadgeCursor.NotAllowed : TagBadgeCursor.Clickable); + this.accountService.hasReadOnlyRole() ? TagBadgeCursor.NotAllowed : TagBadgeCursor.Clickable); constructor() { effect(() => { @@ -111,7 +112,7 @@ export class SettingKeyBindPickerComponent implements ControlValueAccessor, OnDe } startListening() { - if (this.isListening() || this.accountService.isReadOnly()) return; + if (this.isListening() || this.accountService.hasReadOnlyRole()) return; this.keyBindService.disabled.set(true); diff --git a/UI/Web/src/app/settings/_components/setting-multi-check-box/setting-multi-check-box.component.scss b/UI/Web/src/app/settings/_components/setting-multi-check-box/setting-multi-check-box.component.scss index 5bc630155..58948ae2d 100644 --- a/UI/Web/src/app/settings/_components/setting-multi-check-box/setting-multi-check-box.component.scss +++ b/UI/Web/src/app/settings/_components/setting-multi-check-box/setting-multi-check-box.component.scss @@ -3,6 +3,6 @@ } .text-muted { - font-size: 14px; + font-size: 0.875rem; } diff --git a/UI/Web/src/app/settings/_components/setting-multi-text-field/setting-multi-text-field.component.ts b/UI/Web/src/app/settings/_components/setting-multi-text-field/setting-multi-text-field.component.ts index efb93f1a8..987746d1a 100644 --- a/UI/Web/src/app/settings/_components/setting-multi-text-field/setting-multi-text-field.component.ts +++ b/UI/Web/src/app/settings/_components/setting-multi-text-field/setting-multi-text-field.component.ts @@ -75,8 +75,6 @@ export class SettingMultiTextFieldComponent implements ControlValueAccessor { selectedValues = signal([]); disabled = signal(false); - textFieldValueTracker = ''; - private _onChange: (value: T[]) => void = () => {}; private _onTouched: () => void = () => {}; @@ -91,7 +89,6 @@ export class SettingMultiTextFieldComponent implements ControlValueAccessor { writeValue(obj: T[]): void { this.selectedValues.set(obj || []); - this.textFieldValueTracker = obj.map(this.stringConvertor()).join(','); } registerOnChange(fn: (_: T[]) => void): void { diff --git a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.html b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.html index 19345649e..cbff74319 100644 --- a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.html +++ b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.html @@ -2,25 +2,24 @@
    - @if (switchRef) { - + @if (switchRef()) { + }
    -
    - @if (labelId) { - +
    + @if (labelId()) { + } @else { - {{title}} + {{title()}} }
    -
    - @if (subtitle) { -
    + @if (subtitle()) { +
    }
    diff --git a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss index 06ba1fc2c..2f0669984 100644 --- a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss +++ b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.scss @@ -1,5 +1,5 @@ .text-muted { - font-size: 14px; + font-size: 0.875rem; } diff --git a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.ts b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.ts index e39b6beee..e3db82a29 100644 --- a/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.ts +++ b/UI/Web/src/app/settings/_components/setting-switch/setting-switch.component.ts @@ -1,12 +1,12 @@ import { AfterContentInit, ChangeDetectionStrategy, - ChangeDetectorRef, Component, - ContentChild, + contentChild, ElementRef, inject, - Input, + input, + signal, TemplateRef } from '@angular/core'; import {NgTemplateOutlet} from "@angular/common"; @@ -26,24 +26,19 @@ import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe"; }) export class SettingSwitchComponent implements AfterContentInit { - private readonly cdRef = inject(ChangeDetectorRef); private readonly elementRef = inject(ElementRef); - @Input({required:true}) title: string = ''; - @Input() subtitle: string | undefined = undefined; - @Input() id: string | undefined = undefined; - @ContentChild('switch') switchRef!: TemplateRef; - - /** - * For wiring up with a real label - */ - labelId: string = ''; + title = input.required(); + subtitle = input(); + id = input(); + /** For wiring up with a real label */ + labelId = signal(''); + switchRef = contentChild>('switch'); ngAfterContentInit(): void { setTimeout(() => { - if (this.id) { - this.labelId = this.id; - this.cdRef.markForCheck(); + if (this.id()) { + this.labelId.set(this.id()!); return; } @@ -54,8 +49,7 @@ export class SettingSwitchComponent implements AfterContentInit { inputElement.id = this.generateId(); if (inputElement && inputElement.id) { - this.labelId = inputElement.id; - this.cdRef.markForCheck(); + this.labelId.set(inputElement.id); } else { console.warn('No input with ID found in app-setting-switch. For accessibility, please ensure the input has an ID.'); } diff --git a/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html b/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html index 764093f4b..8853594e7 100644 --- a/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html +++ b/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html @@ -2,20 +2,20 @@
    -
    - @if (labelId) { - +
    + @if (labelId()) { + } @else { - {{title}} + {{title()}} } - @if (titleExtraRef) { - + @if (titleExtraRef()) { + }
    - +
    diff --git a/UI/Web/src/app/settings/_components/setting-title/setting-title.component.ts b/UI/Web/src/app/settings/_components/setting-title/setting-title.component.ts index bc25d8ffb..7603bf777 100644 --- a/UI/Web/src/app/settings/_components/setting-title/setting-title.component.ts +++ b/UI/Web/src/app/settings/_components/setting-title/setting-title.component.ts @@ -1,11 +1,10 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, - Component, ContentChild, - EventEmitter, - inject, - Input, - Output, TemplateRef + Component, + contentChild, + input, + model, + TemplateRef } from '@angular/core'; import {NgTemplateOutlet} from "@angular/common"; import {TranslocoDirective} from "@jsverse/transloco"; @@ -22,23 +21,18 @@ import {TranslocoDirective} from "@jsverse/transloco"; }) export class SettingTitleComponent { - private readonly cdRef = inject(ChangeDetectorRef); - - @Input({required:true}) title: string = ''; + title = input.required(); /** * If passed, will generate a proper label element. Requires `id` to be passed as well */ - @Input() labelId: string | undefined = undefined; - @Input() id: string | undefined = undefined; - @Input() canEdit: boolean = true; - @Input() isEditMode: boolean = false; - @Output() editMode = new EventEmitter(); - @ContentChild('extra') titleExtraRef!: TemplateRef; + labelId = input(); + id = input(); + canEdit = input(true); + isEditMode = model(false); + titleExtraRef = contentChild>('extra'); toggleViewMode() { - this.isEditMode = !this.isEditMode; - this.editMode.emit(this.isEditMode); - this.cdRef.markForCheck(); + this.isEditMode.set(!this.isEditMode()); } } diff --git a/UI/Web/src/app/settings/_components/settings/settings.component.html b/UI/Web/src/app/settings/_components/settings/settings.component.html index 84fad27b1..2e2546e2d 100644 --- a/UI/Web/src/app/settings/_components/settings/settings.component.html +++ b/UI/Web/src/app/settings/_components/settings/settings.component.html @@ -7,278 +7,321 @@
    - @let user = accountService.currentUserSignal(); + @let user = accountService.currentUser(); @if (user) { - @if (accountService.hasAdminRole(user)) { + @switch (fragment) { - @defer (when fragment === SettingsTabId.Activity; prefetch on idle) { - @if (fragment === SettingsTabId.Activity) { + + @case (SettingsTabId.Activity) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.AdminDevices) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.General) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.OpenIDConnect) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.Email) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.Media) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.Users) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.Libraries) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.ManageMetadata) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.MediaIssues) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.EmailHistory) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.System) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.Statistics) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.Tasks) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.KavitaPlusLicense) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.MatchedMetadata) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.ManageUserTokens) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.MappingsImport) { + @if (accountService.hasAdminRole()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + + @case (SettingsTabId.Scrobbling) { + @if (hasActiveLicense()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.Metadata) { + @if (hasActiveLicense()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.ScrobblingHolds) { + @if (hasActiveLicense()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + @case (SettingsTabId.MALStackImport) { + @if (hasActiveLicense()) { + @defer (prefetch on idle) { +
    + +
    + } + } + } + + + @case (SettingsTabId.Account) { + @defer (prefetch on idle) {
    - + +
    + +
    + +
    +
    } } - @defer (when fragment === SettingsTabId.AdminDevices; prefetch on idle) { - @if (fragment === SettingsTabId.AdminDevices) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.General; prefetch on idle) { - @if (fragment === SettingsTabId.General) { + @case (SettingsTabId.Preferences) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.OpenIDConnect; prefetch on idle) { - @if (fragment === SettingsTabId.OpenIDConnect) { + @case (SettingsTabId.CustomKeyBinds) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.Email; prefetch on idle) { - @if (fragment === SettingsTabId.Email) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Media; prefetch on idle) { - @if (fragment === SettingsTabId.Media) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Users; prefetch on idle) { - @if (fragment === SettingsTabId.Users) { + @case (SettingsTabId.Customize) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.Libraries; prefetch on idle) { - @if (fragment === SettingsTabId.Libraries) { + @case (SettingsTabId.Clients) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.ManageMetadata; prefetch on idle) { - @if (fragment === SettingsTabId.ManageMetadata) { + @case (SettingsTabId.Theme) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.MediaIssues; prefetch on idle) { - @if (fragment === SettingsTabId.MediaIssues) { + @case (SettingsTabId.Font) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.EmailHistory; prefetch on idle) { - @if (fragment === SettingsTabId.EmailHistory) { + @case (SettingsTabId.Devices) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.System; prefetch on idle) { - @if (fragment === SettingsTabId.System) { + @case (SettingsTabId.CBLImport) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.Statistics; prefetch on idle) { - @if (fragment === SettingsTabId.Statistics) { + @case (SettingsTabId.ReadingProfiles) { + @defer (prefetch on idle) {
    - +
    } } - @defer (when fragment === SettingsTabId.Tasks; prefetch on idle) { - @if (fragment === SettingsTabId.Tasks) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.KavitaPlusLicense; prefetch on idle) { - @if (fragment === SettingsTabId.KavitaPlusLicense) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.MatchedMetadata; prefetch on idle) { - @if (fragment === SettingsTabId.MatchedMetadata) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.ManageUserTokens; prefetch on idle) { - @if (fragment === SettingsTabId.ManageUserTokens) { -
    - -
    - } - } } - - @defer (when fragment === SettingsTabId.Scrobbling; prefetch on idle) { - @if(hasActiveLicense() && fragment === SettingsTabId.Scrobbling) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Metadata; prefetch on idle) { - @if(hasActiveLicense() && fragment === SettingsTabId.Metadata) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.ScrobblingHolds; prefetch on idle) { - @if(hasActiveLicense() && fragment === SettingsTabId.ScrobblingHolds) { -
    - -
    - } - } - - - @defer (when fragment === SettingsTabId.Account; prefetch on idle) { - @if (fragment === SettingsTabId.Account) { -
    - -
    - -
    - -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Preferences; prefetch on idle) { - @if (fragment === SettingsTabId.Preferences) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.CustomKeyBinds; prefetch on idle) { - @if (fragment === SettingsTabId.CustomKeyBinds) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Customize; prefetch on idle) { - @if (fragment === SettingsTabId.Customize) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Clients; prefetch on idle) { - @if (fragment === SettingsTabId.Clients) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Theme; prefetch on idle) { - @if (fragment === SettingsTabId.Theme) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Font; prefetch on idle) { - @if (fragment === SettingsTabId.Font) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.Devices; prefetch on idle) { - @if (fragment === SettingsTabId.Devices) { -
    - -
    - } - } - - - @defer (when fragment === SettingsTabId.CBLImport; prefetch on idle) { - @if (fragment === SettingsTabId.CBLImport) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.MappingsImport; prefetch on idle) { - @if (fragment === SettingsTabId.MappingsImport) { -
    - -
    - } - } - - - @defer (when fragment === SettingsTabId.MALStackImport; prefetch on idle) { - @if(hasActiveLicense() && fragment === SettingsTabId.MALStackImport) { -
    - -
    - } - } - - @defer (when fragment === SettingsTabId.ReadingProfiles; prefetch on idle) { - @if (fragment === SettingsTabId.ReadingProfiles) { -
    - -
    - } - } - }
    - diff --git a/UI/Web/src/app/settings/_components/settings/settings.component.scss b/UI/Web/src/app/settings/_components/settings/settings.component.scss index 270197872..b54299c37 100644 --- a/UI/Web/src/app/settings/_components/settings/settings.component.scss +++ b/UI/Web/src/app/settings/_components/settings/settings.component.scss @@ -6,14 +6,14 @@ h2 { } .main-container { - margin-top: 10px; - max-width: 1920px; - padding: 0 20px; + margin-top: 0.625rem; + max-width: 120rem; + padding: 0 1.25rem; } ::ng-deep .content-wrapper:not(.closed) { .scale { - width: calc(100dvw - 200px) !important; + width: calc(100dvw - 12.5rem) !important; } diff --git a/UI/Web/src/app/shared/_charts/bar-chart/bar-chart.component.ts b/UI/Web/src/app/shared/_charts/bar-chart/bar-chart.component.ts index 92dbd41bc..0ee325265 100644 --- a/UI/Web/src/app/shared/_charts/bar-chart/bar-chart.component.ts +++ b/UI/Web/src/app/shared/_charts/bar-chart/bar-chart.component.ts @@ -1,6 +1,6 @@ import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core'; -import {EChartsDirective, ECOption} from "../../../_directives/echarts.directive"; -import {LabelFormatterCallback, TopLevelFormatterParams, TooltipOption} from "echarts/types/dist/shared"; +import {EChartsDirective} from "../../../_directives/echarts.directive"; +import {LabelFormatterCallback, TooltipOption, TopLevelFormatterParams} from "echarts/types/dist/shared"; import {BarSeriesOption} from "echarts/charts"; import {ThemeService} from "../../../_services/theme.service"; @@ -26,7 +26,7 @@ type ArrayAble = T | T[]; }) export class BarChartComponent { - private themeService = inject(ThemeService); + private readonly themeService = inject(ThemeService); /** * Data used for the series diff --git a/UI/Web/src/app/shared/_charts/line-chart/line-chart.component.ts b/UI/Web/src/app/shared/_charts/line-chart/line-chart.component.ts index 484b6135b..9d8c1aea7 100644 --- a/UI/Web/src/app/shared/_charts/line-chart/line-chart.component.ts +++ b/UI/Web/src/app/shared/_charts/line-chart/line-chart.component.ts @@ -16,7 +16,7 @@ type ArrayAble = T | T[]; }) export class LineChartComponent { - private themeService = inject(ThemeService); + private readonly themeService = inject(ThemeService); /** * Data used for the series diff --git a/UI/Web/src/app/shared/_charts/pie-chart/pie-chart.component.html b/UI/Web/src/app/shared/_charts/pie-chart/pie-chart.component.html index 3db1ffcc3..08242f08a 100644 --- a/UI/Web/src/app/shared/_charts/pie-chart/pie-chart.component.html +++ b/UI/Web/src/app/shared/_charts/pie-chart/pie-chart.component.html @@ -1,5 +1,5 @@ -
    diff --git a/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.html b/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.html index 96e5172dc..ee27b4af0 100644 --- a/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.html +++ b/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.html @@ -1,16 +1,17 @@
    - - + +
    - - + @let imageUrl = image()! | safeUrl; + +
    - +
    diff --git a/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.ts b/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.ts index fa013e67c..8f2b3bc61 100644 --- a/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.ts +++ b/UI/Web/src/app/shared/_components/carousel-modal/preview-image-modal.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, input} from '@angular/core'; import {TranslocoDirective} from "@jsverse/transloco"; import {ImageComponent} from "../../image/image.component"; import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; @@ -16,11 +16,9 @@ import {SafeUrlPipe} from "../../../_pipes/safe-url.pipe"; changeDetection: ChangeDetectionStrategy.OnPush }) export class PreviewImageModalComponent { - protected readonly modalService = inject(NgbActiveModal); - - @Input({required:true}) title: string = ''; - @Input({required: true}) image: string = ''; - + protected readonly modal = inject(NgbActiveModal); + title = input.required(); + image = input.required(); } diff --git a/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.html b/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.html index 36e4bb322..12ae66258 100644 --- a/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.html +++ b/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.html @@ -40,7 +40,7 @@ } -
      +
        @if (!loading()) { @if (itemsBeforeVirtualValue && itemsValue.length > itemsBeforeVirtualValue) { @@ -86,12 +86,22 @@ @if (showFooter()) {
        - + @if (showCreate()) { +
        + + + +
        + } @else { + - @if (showConfirm()) { - + @if (showConfirm()) { + + } } -
        } @@ -100,7 +110,7 @@
        {{item.label | sentenceCase}}
        - @if (selectedItems && selectedItems.includes(item)) { + @if (!showCreate() && selectedItems && selectedItems.includes(item)) { {{ selectedText() }} }         diff --git a/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.scss b/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.scss index fed940289..2c5bcb07e 100644 --- a/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.scss +++ b/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.scss @@ -19,5 +19,5 @@ .virtual-scroller, virtual-scroller { width: 100%; - height: 400px; + height: 25rem; } diff --git a/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.ts b/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.ts index fcef6d771..3ab5b5cb4 100644 --- a/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.ts +++ b/UI/Web/src/app/shared/_components/list-select-modal/list-select-modal.component.ts @@ -4,7 +4,6 @@ import { computed, effect, inject, - input, model, signal, TemplateRef, @@ -13,13 +12,19 @@ import { } from '@angular/core'; import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; import {translate, TranslocoDirective} from "@jsverse/transloco"; -import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; +import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; import {toSignal} from "@angular/core/rxjs-interop"; import {SentenceCasePipe} from "../../../_pipes/sentence-case.pipe"; import {NgTemplateOutlet} from "@angular/common"; import {LoadingComponent} from "../../loading/loading.component"; import {VirtualScrollerModule} from "@iharbeck/ngx-virtual-scroller"; +import {Observable} from "rxjs"; +import {modalSaved} from "../../../_models/modal/modal-result"; +/** + * A single selectable item in the list. + * `label` is displayed in the UI; `value` is what the modal emits on confirm. + */ export type ListSelectionItem = { label: string, value: T, @@ -46,30 +51,91 @@ export class ListSelectModalComponent { defaultTemplate = viewChild.required>('defaultTemplate'); + /** The modal title shown in the header. */ title = model.required(); + /** Optional subtitle displayed below the header in muted text. */ description = model(null); selectedText = model(translate('common.selected')); invalidSelectionWarning = model(null); hiddenTranslationKey = model('list-select-modal.hidden') + /** + * The full item dataset. The modal derives `filteredItems` from this automatically. + * Update this signal at any time (e.g. after async loading) to refresh the list. + */ inputItems = model.required[]>(); + /** + * Items pre-marked as selected when the modal first opens. + * Ignored once the user has made any selection. + */ preSelectedItems = model([]); + /** + * Per-item validity check. Receives the candidate item value and the current selection. + * Returning false disables the row (grayed out; not clickable). + */ isValidItemFunc = model<(item: T, selection: T[]) => boolean>(() => true); + /** + * Whole-selection validity check called before `confirm()`. + * Returning false disables the Confirm button. + */ isSelectionValidFunc = model<(selection:T[]) => boolean>(() => true); + /** + * If provided, called instead of `modal.close()` when the user confirms. + * Receives a single value in single-select mode or an array in multi-select mode. + */ interceptConfirm = model<((selection: T|T[]) => void) | null>(null); + /** Minimum list length before the filter input is shown. Default: 8. */ itemsBeforeFilter = model(8); + /** + * Threshold above which the list switches to virtual scrolling. + * Null (default) disables virtual scrolling. + */ itemsBeforeVirtual = model(null); + /** Require an explicit Confirm button click instead of closing on item select. */ requireConfirmation = model(false); + /** Show the modal footer row. Set false to suppress Close/Confirm entirely. */ showFooter = model(true); + /** Show the Confirm button inside the footer. */ showConfirm = model(true); + /** Allow selecting multiple items; `confirm()` emits T[] instead of T. */ multiSelect = model(false); + /** + * When true, items that fail `isValidItemFunc` are hidden rather than disabled. + * Use `invalidSelectionWarning` and `hiddenTranslationKey` to inform the user. + */ hideItemsWhenInvalid = model(false); + /** Custom ng-template for rendering each list row. Receives `$implicit: ListSelectionItem`. */ itemTemplate = model | null>(null); + /** Externally controlled loading state; shows a spinner overlay on the list. */ loading = model(false); + /** Show a "create new" text-input row in the footer. */ + showCreate = model(false); + /** Placeholder / label text for the create input. */ + createLabel = model(null); + /** Initial value pre-filled in the create input. */ + createInitialValue = model(''); + /** + * Override the Create button label. Falls back to t('common.create') when null, + * allowing callers to pass 'Save' or any translated string without component changes. + */ + createButtonLabel = model(null); + /** + * Callback fired when the user clicks Create, receiving the typed name. + * Must return an Observable. The component subscribes and: + * - sets isCreating = true before calling + * - resets isCreating = false on complete OR error + * - calls modal.close() on complete (keeping modal open on error for retry) + * If null, the modal closes immediately with modalSaved(name). + */ + interceptCreate = model<((name: string) => Observable) | null>(null); + + protected readonly isCreating = signal(false); + protected readonly createControl = new FormControl('', { nonNullable: true, validators: Validators.required }); + protected validSelection = computed(() => { const fn = this.isSelectionValidFunc(); const selection = this.selectedItems().map(item => item.value); @@ -131,6 +197,10 @@ export class ListSelectModalComponent { this.selectedItems.set(items.filter(item => preSelectedItems.includes(item.value))); }); + + effect(() => { + this.createControl.setValue(this.createInitialValue()); + }); } isItemValid(item: ListSelectionItem) { @@ -141,6 +211,7 @@ export class ListSelectModalComponent { return this.isValidItemFunc()(item.value, this.selectedItems().map(item => item.value)); } + /** Toggles or sets the selected item, then auto-confirms in single-select non-confirmation mode. */ select(item: ListSelectionItem) { if (!this.isItemValid(item)) return; @@ -163,14 +234,17 @@ export class ListSelectModalComponent { } } + /** Resets the filter input. */ clear() { this.filterForm.get('query')?.setValue(''); } + /** Dismisses the modal without a result. */ close() { this.modal.dismiss(); } + /** Confirms the current selection, delegating to interceptConfirm if set. */ confirm() { const intercept = this.interceptConfirm(); const fn = intercept == null ? this.modal.close : intercept; @@ -183,4 +257,23 @@ export class ListSelectModalComponent { } } + /** + * Handles the Create button click. + * If interceptCreate is set, subscribes to the returned Observable and closes on complete. + * Otherwise closes immediately with modalSaved(name) so the caller can handle the API call. + */ + create() { + const name = this.createControl.value; + const intercept = this.interceptCreate(); + if (!intercept) { + this.modal.close(modalSaved(name)); + return; + } + this.isCreating.set(true); + intercept(name).subscribe({ + complete: () => { this.isCreating.set(false); this.modal.close(modalSaved(name)); }, + error: () => { this.isCreating.set(false); } + }); + } + } diff --git a/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.scss b/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.scss index 76cc06a48..00dcfe78a 100644 --- a/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.scss +++ b/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.scss @@ -2,7 +2,7 @@ .drag-handle-top { position: sticky; width: 100%; - height: 12px; + height: 0.75rem; cursor: row-resize; display: flex; justify-content: center; @@ -14,20 +14,20 @@ .drag-handle-bottom { top: 0; - margin-top: 2px; + margin-top: 0.125rem; } .drag-handle-top { bottom: 0; - margin-bottom: 2px; + margin-bottom: 0.125rem; } .drag-handle-start, .drag-handle-end { top: 50%; transform: translateY(-50%); - width: 12px; - height: 60px; + width: 0.75rem; + height: 3.75rem; cursor: col-resize; display: flex; justify-content: center; @@ -48,18 +48,18 @@ } .drag-indicator-horizontal { - width: 60px; - height: 8px; + width: 3.75rem; + height: 0.5rem; background: var(--accent-bg-color); - border-radius: 4px; + border-radius: 0.25rem; transition: background-color 0.2s; } .drag-indicator-vertical { - width: 8px; - height: 40px; + width: 0.5rem; + height: 2.5rem; background: var(--accent-bg-color); - border-radius: 4px; + border-radius: 0.25rem; transition: background-color 0.2s; } diff --git a/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.ts b/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.ts index 10d60574c..0ea4273fc 100644 --- a/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.ts +++ b/UI/Web/src/app/shared/_components/off-canvas-resize/off-canvas-resize.component.ts @@ -5,8 +5,8 @@ import { DestroyRef, ElementRef, inject, - input, OnInit, - Renderer2 + input, + OnInit } from '@angular/core'; import {DOCUMENT} from "@angular/common"; import {filter, fromEvent, merge, tap} from "rxjs"; @@ -18,8 +18,8 @@ interface Dimensions { } export enum ResizeMode { - Width = "width", - Height = "height", + Width = 'width', + Height = 'height', } @Component({ @@ -34,7 +34,6 @@ export class OffCanvasResizeComponent implements OnInit { private readonly document = inject(DOCUMENT); private readonly destroyRef = inject(DestroyRef); private readonly el = inject(ElementRef); - private readonly renderer = inject(Renderer2); /** * Minimum height of the canvas element in viewport diff --git a/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.html b/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.html index a0998b083..df54a824b 100644 --- a/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.html +++ b/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.html @@ -1,7 +1,7 @@ - @if(promoted) { + @if(promoted()) { - + } diff --git a/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.ts b/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.ts index 81867fc09..9c9f45e64 100644 --- a/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.ts +++ b/UI/Web/src/app/shared/_components/promoted-icon/promoted-icon.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; +import {ChangeDetectionStrategy, Component, input} from '@angular/core'; import {TranslocoDirective} from "@jsverse/transloco"; @Component({ @@ -11,5 +11,5 @@ import {TranslocoDirective} from "@jsverse/transloco"; changeDetection: ChangeDetectionStrategy.OnPush }) export class PromotedIconComponent { - @Input({required: true}) promoted: boolean = false; + promoted = input.required(); } diff --git a/UI/Web/src/app/shared/_services/download.service.ts b/UI/Web/src/app/shared/_services/download.service.ts index 647130f1d..25dcf4410 100644 --- a/UI/Web/src/app/shared/_services/download.service.ts +++ b/UI/Web/src/app/shared/_services/download.service.ts @@ -8,7 +8,7 @@ import {Volume} from 'src/app/_models/volume'; import {asyncScheduler, BehaviorSubject, filter, finalize, Observable, of, tap,} from 'rxjs'; import {download, Download} from '../_models/download'; import {PageBookmark} from 'src/app/_models/readers/page-bookmark'; -import {switchMap, take, takeWhile, throttleTime} from 'rxjs/operators'; +import {switchMap, takeWhile, throttleTime} from 'rxjs/operators'; import {AccountService} from 'src/app/_services/account.service'; import {BytesPipe} from 'src/app/_pipes/bytes.pipe'; import {translate} from "@jsverse/transloco"; @@ -161,33 +161,28 @@ export class DownloadService { return; } + const user = this.accountService.currentUser(); + const sizeCheck$ = (user && user.preferences.promptForDownloadSize) + ? sizeCheckCall + : of(0); - this.accountService.currentUser$.pipe(take(1), switchMap(user => { - if (user && user.preferences.promptForDownloadSize) { - return sizeCheckCall; - } - return of(0); - }), switchMap(async (size) => { - return await this.confirmSize(size, entityType); - }) - ).pipe(filter(wantsToDownload => { - return wantsToDownload; - }), + sizeCheck$.pipe( + switchMap(async (size) => await this.confirmSize(size, entityType)), + filter(wantsToDownload => wantsToDownload), filter(_ => downloadCall !== undefined), switchMap(() => { - return (downloadCall || of(undefined)).pipe( - tap((d) => { - this.readerService.enableWakeLock(); - if (callback) callback(d); - }), - takeWhile((val: Download) => { - return val.state != 'DONE'; - }), - finalize(() => { - this.readerService.disableWakeLock(); - if (callback) callback(undefined); - })) - }), takeUntilDestroyed(this.destroyRef) + return (downloadCall || of(undefined)).pipe( + tap((d) => { + this.readerService.enableWakeLock(); + if (callback) callback(d); + }), + takeWhile((val: Download) => val.state != 'DONE'), + finalize(() => { + this.readerService.disableWakeLock(); + if (callback) callback(undefined); + })) + }), + takeUntilDestroyed(this.destroyRef) ).subscribe(() => {}); } diff --git a/UI/Web/src/app/shared/_services/utility.service.ts b/UI/Web/src/app/shared/_services/utility.service.ts index 1a11c1101..aba01f786 100644 --- a/UI/Web/src/app/shared/_services/utility.service.ts +++ b/UI/Web/src/app/shared/_services/utility.service.ts @@ -8,7 +8,7 @@ import {Series} from 'src/app/_models/series'; import {Volume} from 'src/app/_models/volume'; import {translate} from "@jsverse/transloco"; import {DOCUMENT} from "@angular/common"; -import {ActionItem} from "../../_services/action-factory.service"; +import {ActionItem} from "../../_models/actionables/action-item"; export enum KEY_CODES { RIGHT_ARROW = 'ArrowRight', diff --git a/UI/Web/src/app/shared/badge-expander/badge-expander.component.html b/UI/Web/src/app/shared/badge-expander/badge-expander.component.html index dc3a7456a..37696b7f0 100644 --- a/UI/Web/src/app/shared/badge-expander/badge-expander.component.html +++ b/UI/Web/src/app/shared/badge-expander/badge-expander.component.html @@ -2,7 +2,7 @@
        @for(item of visibleItems(); track item; let i = $index; let last = $last) { - + @if (!last && includeComma()) { , } diff --git a/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss b/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss index 342ab4431..3ab9f26f6 100644 --- a/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss +++ b/UI/Web/src/app/shared/badge-expander/badge-expander.component.scss @@ -3,7 +3,7 @@ } .collapsed { - height: 35px; + height: 2.1875rem; overflow: hidden; } diff --git a/UI/Web/src/app/shared/badge-expander/badge-expander.component.ts b/UI/Web/src/app/shared/badge-expander/badge-expander.component.ts index d014262d4..6c40c0008 100644 --- a/UI/Web/src/app/shared/badge-expander/badge-expander.component.ts +++ b/UI/Web/src/app/shared/badge-expander/badge-expander.component.ts @@ -1,9 +1,12 @@ import { ChangeDetectionStrategy, - Component, computed, - ContentChild, EventEmitter, + Component, + computed, + contentChild, input, - OnInit, Output, signal, + OnInit, + output, + signal, TemplateRef } from '@angular/core'; import {NgTemplateOutlet} from "@angular/common"; @@ -11,11 +14,11 @@ import {TranslocoDirective} from "@jsverse/transloco"; import {DefaultValuePipe} from "../../_pipes/default-value.pipe"; @Component({ - selector: 'app-badge-expander', - imports: [TranslocoDirective, NgTemplateOutlet, DefaultValuePipe], - templateUrl: './badge-expander.component.html', - styleUrls: ['./badge-expander.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-badge-expander', + imports: [TranslocoDirective, NgTemplateOutlet, DefaultValuePipe], + templateUrl: './badge-expander.component.html', + styleUrls: ['./badge-expander.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class BadgeExpanderComponent implements OnInit { @@ -31,8 +34,8 @@ export class BadgeExpanderComponent implements OnInit { /** * Invoked when the "and more" is clicked */ - @Output() toggle = new EventEmitter(); - @ContentChild('badgeExpanderItem') itemTemplate!: TemplateRef; + toggled = output(); + itemTemplate = contentChild>('badgeExpanderItem'); isCollapsed = signal(undefined); visibleItems = computed(() => { @@ -56,7 +59,7 @@ export class BadgeExpanderComponent implements OnInit { } toggleVisible() { - this.toggle.emit(); + this.toggled.emit(undefined); if (!this.allowToggle()) return; this.isCollapsed.update(x => !x); diff --git a/UI/Web/src/app/shared/circular-loader/circular-loader.component.html b/UI/Web/src/app/shared/circular-loader/circular-loader.component.html index 8a96c09e2..c44a3f6d7 100644 --- a/UI/Web/src/app/shared/circular-loader/circular-loader.component.html +++ b/UI/Web/src/app/shared/circular-loader/circular-loader.component.html @@ -1,29 +1,29 @@ -@if (currentValue > 0) { -
        - @if (showIcon) { -
        - +@if (currentValue() > 0) { +
        + @if (showIcon()) { +
        +
        } -
        } diff --git a/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss b/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss index fd1e70de2..c66dd8202 100644 --- a/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss +++ b/UI/Web/src/app/shared/circular-loader/circular-loader.component.scss @@ -1,7 +1,7 @@ .number { position: absolute; top: 75%; - font-size: 18px; + font-size: 1.125rem; width: 100%; text-align: center; } diff --git a/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts b/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts index 55a610673..1e5fd2006 100644 --- a/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts +++ b/UI/Web/src/app/shared/circular-loader/circular-loader.component.ts @@ -1,45 +1,45 @@ -import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; -import {NgClass, NgStyle} from "@angular/common"; -import {NgCircleProgressModule } from "ng-circle-progress"; +import {ChangeDetectionStrategy, Component, input} from '@angular/core'; +import {NgStyle} from "@angular/common"; +import {NgCircleProgressModule} from "ng-circle-progress"; @Component({ - selector: 'app-circular-loader', - imports: [NgCircleProgressModule, NgStyle, NgClass], - templateUrl: './circular-loader.component.html', - styleUrls: ['./circular-loader.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-circular-loader', + imports: [NgCircleProgressModule, NgStyle], + templateUrl: './circular-loader.component.html', + styleUrls: ['./circular-loader.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class CircularLoaderComponent { - @Input() currentValue: number = 0; + currentValue = input(0); /** * If an animation should be used */ - @Input() animation: boolean = true; + animation = input(true); /** * Color of an inner bar */ - @Input() innerStrokeColor: string = 'transparent'; + innerStrokeColor = input('transparent'); /** * Color of the Downloader bar */ - @Input() outerStrokeColor: string = '#4ac694'; - @Input() backgroundColor: string = '#000'; - @Input() fontSize: string = '36px'; + outerStrokeColor = input('#4ac694'); + backgroundColor= input('#000'); + fontSize = input(36); /** * Show the icon inside the downloader */ - @Input() showIcon: boolean = true; + showIcon = input(true); /** * The width in pixels of the loader */ - @Input() width: string = '100px'; + width = input(100); /** * The height in pixels of the loader */ - @Input() height: string = '100px'; + height = input(100); /** * Centers the icon in the middle of the loader. Best for card use. */ - @Input() center: boolean = true; + center = input(true); } diff --git a/UI/Web/src/app/shared/confirm-dialog/confirm-dialog.component.html b/UI/Web/src/app/shared/confirm-dialog/confirm-dialog.component.html index 887b23f1c..059058f9e 100644 --- a/UI/Web/src/app/shared/confirm-dialog/confirm-dialog.component.html +++ b/UI/Web/src/app/shared/confirm-dialog/confirm-dialog.component.html @@ -2,7 +2,7 @@
        @if (!config.disableEscape) { - } diff --git a/UI/Web/src/app/shared/confirm.service.ts b/UI/Web/src/app/shared/confirm.service.ts index b3beec670..69aad735d 100644 --- a/UI/Web/src/app/shared/confirm.service.ts +++ b/UI/Web/src/app/shared/confirm.service.ts @@ -1,15 +1,16 @@ -import { Injectable, inject } from '@angular/core'; -import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; +import {inject, Injectable} from '@angular/core'; import {take} from 'rxjs/operators'; import {ConfirmDialogComponent} from './confirm-dialog/confirm-dialog.component'; import {ConfirmConfig} from './confirm-dialog/_models/confirm-config'; +import {confirmModal} from "../_models/modal/modal-options"; +import {ModalService} from "../_services/modal.service"; @Injectable({ providedIn: 'root' }) export class ConfirmService { - private modalService = inject(NgbModal); + private modalService = inject(ModalService); defaultConfirm = new ConfirmConfig(); @@ -88,7 +89,7 @@ export class ConfirmService { } } - const modalRef = this.modalService.open(ConfirmDialogComponent, {size: "lg", fullscreen: "md"}); + const modalRef = this.modalService.open(ConfirmDialogComponent, confirmModal()); modalRef.componentInstance.config = config; modalRef.closed.pipe(take(1)).subscribe(result => { return resolve(result); @@ -112,7 +113,7 @@ export class ConfirmService { config.content = content; } - const modalRef = this.modalService.open(ConfirmDialogComponent, {size: "lg", fullscreen: "md"}); + const modalRef = this.modalService.open(ConfirmDialogComponent, confirmModal()); modalRef.componentInstance.config = config; modalRef.closed.pipe(take(1)).subscribe(result => { return resolve(result); diff --git a/UI/Web/src/app/shared/drawer/drawer.component.html b/UI/Web/src/app/shared/drawer/drawer.component.html index b1ca4f2fd..48531eb98 100644 --- a/UI/Web/src/app/shared/drawer/drawer.component.html +++ b/UI/Web/src/app/shared/drawer/drawer.component.html @@ -1,6 +1,6 @@ -