diff --git a/UI/Web/src/app/_services/action-factory.service.ts b/UI/Web/src/app/_services/action-factory.service.ts index 0fef35b0e..469b8c836 100644 --- a/UI/Web/src/app/_services/action-factory.service.ts +++ b/UI/Web/src/app/_services/action-factory.service.ts @@ -7,12 +7,13 @@ import {Library} from '../_models/library/library'; import {ReadingList} from '../_models/reading-list'; import {Series} from '../_models/series'; import {Volume} from '../_models/volume'; -import {AccountService} from './account.service'; +import {AccountService, Role} from './account.service'; import {DeviceService} from './device.service'; import {SideNavStream} from "../_models/sidenav/sidenav-stream"; import {SmartFilter} from "../_models/metadata/v2/smart-filter"; import {translate} from "@jsverse/transloco"; import {Person} from "../_models/metadata/person"; +import {User} from '../_models/user'; export enum Action { Submenu = -1, @@ -106,7 +107,7 @@ export enum Action { Promote = 24, UnPromote = 25, /** - * Invoke a refresh covers as false to generate colorscapes + * Invoke refresh covers as false to generate colorscapes */ GenerateColorScape = 26, /** @@ -126,14 +127,21 @@ export enum Action { /** * Callback for an action */ -export type ActionCallback = (action: ActionItem, data: T) => void; -export type ActionAllowedCallback = (action: ActionItem) => boolean; +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>; /** @@ -149,94 +157,97 @@ export interface ActionItem { * 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 | null; + @Injectable({ providedIn: 'root', }) export class ActionFactoryService { - libraryActions: Array> = []; - - seriesActions: Array> = []; - - volumeActions: Array> = []; - - chapterActions: Array> = []; - - collectionTagActions: Array> = []; - - readingListActions: Array> = []; - - bookmarkActions: Array> = []; - + private libraryActions: Array> = []; + private seriesActions: Array> = []; + private volumeActions: Array> = []; + private chapterActions: Array> = []; + private collectionTagActions: Array> = []; + private readingListActions: Array> = []; + private bookmarkActions: Array> = []; private personActions: Array> = []; - - sideNavStreamActions: Array> = []; - smartFilterActions: Array> = []; - - sideNavHomeActions: Array> = []; - - isAdmin = false; - + private sideNavStreamActions: Array> = []; + private smartFilterActions: Array> = []; + private sideNavHomeActions: Array> = []; constructor(private accountService: AccountService, private deviceService: DeviceService) { - this.accountService.currentUser$.subscribe((user) => { - if (user) { - this.isAdmin = this.accountService.hasAdminRole(user); - } else { - this._resetActions(); - return; // If user is logged out, we don't need to do anything - } - + this.accountService.currentUser$.subscribe((_) => { this._resetActions(); }); } - getLibraryActions(callback: ActionCallback) { - return this.applyCallbackToList(this.libraryActions, callback); + getLibraryActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.libraryActions, callback, shouldRenderFunc) as ActionItem[]; } - getSeriesActions(callback: ActionCallback) { - return this.applyCallbackToList(this.seriesActions, callback); + getSeriesActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList(this.seriesActions, callback, shouldRenderFunc); } - getSideNavStreamActions(callback: ActionCallback) { - return this.applyCallbackToList(this.sideNavStreamActions, callback); + getSideNavStreamActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.sideNavStreamActions, callback, shouldRenderFunc); } - getSmartFilterActions(callback: ActionCallback) { - return this.applyCallbackToList(this.smartFilterActions, callback); + getSmartFilterActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.smartFilterActions, callback, shouldRenderFunc); } - getVolumeActions(callback: ActionCallback) { - return this.applyCallbackToList(this.volumeActions, callback); + getVolumeActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList(this.volumeActions, callback, shouldRenderFunc); } - getChapterActions(callback: ActionCallback) { - return this.applyCallbackToList(this.chapterActions, callback); + getChapterActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.basicReadRender) { + return this.applyCallbackToList(this.chapterActions, callback, shouldRenderFunc); } - getCollectionTagActions(callback: ActionCallback) { - return this.applyCallbackToList(this.collectionTagActions, callback); + getCollectionTagActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.collectionTagActions, callback, shouldRenderFunc); } - getReadingListActions(callback: ActionCallback) { - return this.applyCallbackToList(this.readingListActions, callback); + getReadingListActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.readingListActions, callback, shouldRenderFunc); } - getBookmarkActions(callback: ActionCallback) { - return this.applyCallbackToList(this.bookmarkActions, callback); + getBookmarkActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.bookmarkActions, callback, shouldRenderFunc); } - getPersonActions(callback: ActionCallback) { - return this.applyCallbackToList(this.personActions, callback); + getPersonActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.personActions, callback, shouldRenderFunc); } - getSideNavHomeActions(callback: ActionCallback) { - return this.applyCallbackToList(this.sideNavHomeActions, callback); + getSideNavHomeActions(callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender) { + return this.applyCallbackToList(this.sideNavHomeActions, callback, shouldRenderFunc); } - dummyCallback(action: ActionItem, data: any) {} + dummyCallback(action: ActionItem, entity: any) {} + dummyShouldRender(action: ActionItem, entity: any, user: User) {return true;} + basicReadRender(action: ActionItem, entity: any, user: User) { + if (!entity.hasOwnProperty('pagesRead') && !entity.hasOwnProperty('pages')) return true; + + switch (action.action) { + case(Action.MarkAsRead): + return entity.pagesRead < entity.pages; + case(Action.MarkAsUnread): + return entity.pagesRead !== 0; + default: + return true; + } + } filterSendToAction(actions: Array>, chapter: Chapter) { // if (chapter.files.filter(f => f.format === MangaFormat.EPUB || f.format === MangaFormat.PDF).length !== chapter.files.length) { @@ -279,7 +290,7 @@ export class ActionFactoryService { return tasks.filter(t => !blacklist.includes(t.action)); } - getBulkLibraryActions(callback: ActionCallback) { + 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 => { @@ -293,11 +304,13 @@ export class ActionFactoryService { dynamicList: undefined, action: Action.CopySettings, callback: this.dummyCallback, + shouldRender: shouldRenderFunc, children: [], + requiredRoles: [Role.Admin], requiresAdmin: true, title: 'copy-settings' }) - return this.applyCallbackToList(actions, callback); + return this.applyCallbackToList(actions, callback, shouldRenderFunc) as ActionItem[]; } flattenActions(actions: Array>): Array> { @@ -323,7 +336,9 @@ export class ActionFactoryService { title: 'scan-library', description: 'scan-library-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -331,14 +346,18 @@ export class ActionFactoryService { 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: [], }, { @@ -346,7 +365,9 @@ export class ActionFactoryService { title: 'generate-colorscape', description: 'generate-colorscape-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -354,7 +375,9 @@ export class ActionFactoryService { title: 'analyze-files', description: 'analyze-files-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -362,7 +385,9 @@ export class ActionFactoryService { title: 'delete', description: 'delete-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, ], @@ -372,7 +397,9 @@ export class ActionFactoryService { title: 'settings', description: 'settings-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, ]; @@ -383,7 +410,9 @@ export class ActionFactoryService { title: 'edit', description: 'edit-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -391,7 +420,9 @@ export class ActionFactoryService { title: 'delete', description: 'delete-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], class: 'danger', children: [], }, @@ -400,7 +431,9 @@ export class ActionFactoryService { title: 'promote', description: 'promote-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -408,7 +441,9 @@ export class ActionFactoryService { title: 'unpromote', description: 'unpromote-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, ]; @@ -419,7 +454,9 @@ export class ActionFactoryService { title: 'mark-as-read', description: 'mark-as-read-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -427,7 +464,9 @@ export class ActionFactoryService { title: 'mark-as-unread', description: 'mark-as-unread-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -435,7 +474,9 @@ export class ActionFactoryService { title: 'scan-series', description: 'scan-series-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -443,14 +484,18 @@ export class ActionFactoryService { 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: [], }, { @@ -458,7 +503,9 @@ export class ActionFactoryService { title: 'remove-from-want-to-read', description: 'remove-to-want-to-read-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -466,7 +513,9 @@ export class ActionFactoryService { title: 'add-to-reading-list', description: 'add-to-reading-list-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -474,26 +523,11 @@ export class ActionFactoryService { title: 'add-to-collection', description: 'add-to-collection-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, - - // { - // action: Action.AddToScrobbleHold, - // title: 'add-to-scrobble-hold', - // description: 'add-to-scrobble-hold-tooltip', - // callback: this.dummyCallback, - // requiresAdmin: true, - // children: [], - // }, - // { - // action: Action.RemoveFromScrobbleHold, - // title: 'remove-from-scrobble-hold', - // description: 'remove-from-scrobble-hold-tooltip', - // callback: this.dummyCallback, - // requiresAdmin: true, - // children: [], - // }, ], }, { @@ -501,14 +535,18 @@ export class ActionFactoryService { 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}; }), shareReplay())), @@ -521,14 +559,18 @@ export class ActionFactoryService { 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: [], }, { @@ -536,7 +578,9 @@ export class ActionFactoryService { title: 'generate-colorscape', description: 'generate-colorscape-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -544,7 +588,9 @@ export class ActionFactoryService { title: 'analyze-files', description: 'analyze-files-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -552,7 +598,9 @@ export class ActionFactoryService { title: 'delete', description: 'delete-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], class: 'danger', children: [], }, @@ -563,7 +611,9 @@ export class ActionFactoryService { title: 'match', description: 'match-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -571,7 +621,9 @@ export class ActionFactoryService { title: 'download', description: 'download-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [Role.Download], children: [], }, { @@ -579,7 +631,9 @@ export class ActionFactoryService { title: 'edit', description: 'edit-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, ]; @@ -590,7 +644,9 @@ export class ActionFactoryService { title: 'read-incognito', description: 'read-incognito-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -598,7 +654,9 @@ export class ActionFactoryService { title: 'mark-as-read', description: 'mark-as-read-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -606,7 +664,9 @@ export class ActionFactoryService { title: 'mark-as-unread', description: 'mark-as-unread-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -614,14 +674,18 @@ export class ActionFactoryService { 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: [], } ] @@ -631,14 +695,18 @@ export class ActionFactoryService { 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}; }), shareReplay())), @@ -651,14 +719,18 @@ export class ActionFactoryService { 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: [], }, { @@ -666,7 +738,9 @@ export class ActionFactoryService { title: 'download', description: 'download-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, ] @@ -676,7 +750,9 @@ export class ActionFactoryService { title: 'details', description: 'edit-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, ]; @@ -687,7 +763,9 @@ export class ActionFactoryService { title: 'read-incognito', description: 'read-incognito-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -695,7 +773,9 @@ export class ActionFactoryService { title: 'mark-as-read', description: 'mark-as-read-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -703,7 +783,9 @@ export class ActionFactoryService { title: 'mark-as-unread', description: 'mark-as-unread-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -711,14 +793,18 @@ export class ActionFactoryService { 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: [], } ] @@ -728,14 +814,18 @@ export class ActionFactoryService { 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}; }), shareReplay())), @@ -749,14 +839,18 @@ export class ActionFactoryService { 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: [], }, { @@ -764,7 +858,9 @@ export class ActionFactoryService { title: 'download', description: 'download-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [Role.Download], children: [], }, ] @@ -774,7 +870,9 @@ export class ActionFactoryService { title: 'edit', description: 'edit-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, ]; @@ -785,7 +883,9 @@ export class ActionFactoryService { title: 'edit', description: 'edit-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -793,7 +893,9 @@ export class ActionFactoryService { title: 'delete', description: 'delete-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], class: 'danger', children: [], }, @@ -802,7 +904,9 @@ export class ActionFactoryService { title: 'promote', description: 'promote-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -810,7 +914,9 @@ export class ActionFactoryService { title: 'unpromote', description: 'unpromote-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, ]; @@ -821,7 +927,9 @@ export class ActionFactoryService { title: 'edit', description: 'edit-person-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], }, { @@ -829,7 +937,9 @@ export class ActionFactoryService { title: 'merge', description: 'merge-person-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: true, + requiredRoles: [Role.Admin], children: [], } ]; @@ -840,7 +950,9 @@ export class ActionFactoryService { title: 'view-series', description: 'view-series-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -848,7 +960,9 @@ export class ActionFactoryService { title: 'download', description: 'download-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -856,8 +970,10 @@ export class ActionFactoryService { title: 'clear', description: 'delete-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, class: 'danger', requiresAdmin: false, + requiredRoles: [], children: [], }, ]; @@ -868,7 +984,9 @@ export class ActionFactoryService { title: 'mark-visible', description: 'mark-visible-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -876,7 +994,9 @@ export class ActionFactoryService { title: 'mark-invisible', description: 'mark-invisible-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, ]; @@ -887,7 +1007,9 @@ export class ActionFactoryService { title: 'rename', description: 'rename-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, { @@ -895,7 +1017,9 @@ export class ActionFactoryService { title: 'delete', description: 'delete-tooltip', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], }, ]; @@ -906,7 +1030,9 @@ export class ActionFactoryService { title: 'reorder', description: '', callback: this.dummyCallback, + shouldRender: this.dummyShouldRender, requiresAdmin: false, + requiredRoles: [], children: [], } ] @@ -914,21 +1040,24 @@ export class ActionFactoryService { } - private applyCallback(action: ActionItem, callback: (action: ActionItem, data: any) => void) { + private applyCallback(action: ActionItem, callback: ActionCallback, shouldRenderFunc: ActionShouldRenderFunc) { action.callback = callback; + action.shouldRender = shouldRenderFunc; if (action.children === null || action.children?.length === 0) return; action.children?.forEach((childAction) => { - this.applyCallback(childAction, callback); + this.applyCallback(childAction, callback, shouldRenderFunc); }); } - public applyCallbackToList(list: Array>, callback: (action: ActionItem, data: any) => void): Array> { + public applyCallbackToList(list: Array>, + callback: ActionCallback, + shouldRenderFunc: ActionShouldRenderFunc = this.dummyShouldRender): Array> { const actions = list.map((a) => { return { ...a }; }); - actions.forEach((action) => this.applyCallback(action, callback)); + actions.forEach((action) => this.applyCallback(action, callback, shouldRenderFunc)); return actions; } 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 index 067dc5fb2..caf8bf683 100644 --- 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 @@ -1,7 +1,9 @@
-

{{t('title')}}

+

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

@@ -12,8 +14,6 @@ }
- - @for (action of currentItems; track action.title) { @if (willRenderAction(action)) { - } @else { -
- -
- + } @else { +
+ +
+ +
-
- - @for(action of list; track action.title) { - - @if (action.children === undefined || action?.children?.length === 0 || action.dynamicList !== undefined) { - @if (action.dynamicList !== undefined && (action.dynamicList | async | dynamicList); as dList) { - @for(dynamicItem of dList; track dynamicItem.title) { - - } - } @else if (willRenderAction(action)) { - - } - } @else { - @if (shouldRenderSubMenu(action, action.children?.[0].dynamicList | async)) { - -
- @if (willRenderAction(action)) { - + + @for(action of list; track action.title) { + + @if (action.children === undefined || action?.children?.length === 0 || action.dynamicList !== undefined) { + @if (action.dynamicList !== undefined && (action.dynamicList | async | dynamicList); as dList) { + @for(dynamicItem of dList; track dynamicItem.title) { + } -
- + } @else if (willRenderAction(action, this.currentUser!)) { + + } + } @else { + @if (shouldRenderSubMenu(action, action.children?.[0].dynamicList | async) && hasRenderableChildren(action, this.currentUser!)) { + +
+ + + @if (willRenderAction(action, this.currentUser!)) { + + } + +
+ +
-
+ } } } - } - + + } } - } - + diff --git a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss index 6f1d105e0..19a986986 100644 --- a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss +++ b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.scss @@ -2,6 +2,22 @@ content: none !important; } +.submenu-wrapper { + position: relative; + + &::after { + content: ''; + position: absolute; + top: 0; + right: -10px; + width: 10px; + height: 100%; + background: transparent; + cursor: pointer; + pointer-events: auto; + } +} + .submenu-toggle { display: block; width: 100%; @@ -30,9 +46,3 @@ .btn { padding: 5px; } - -// Robbie added this but it broke most of the uses -//.dropdown-toggle { -// padding-top: 0; -// padding-bottom: 0; -//} diff --git a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts index 64719a226..3e3522d5f 100644 --- a/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts +++ b/UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts @@ -1,31 +1,39 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, - Component, DestroyRef, + Component, + DestroyRef, EventEmitter, inject, Input, + OnChanges, + OnDestroy, OnInit, Output } from '@angular/core'; import {NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle, NgbModal} from '@ng-bootstrap/ng-bootstrap'; -import { AccountService } from 'src/app/_services/account.service'; -import { Action, ActionItem } from 'src/app/_services/action-factory.service'; +import {AccountService} from 'src/app/_services/account.service'; +import {ActionableEntity, ActionItem} from 'src/app/_services/action-factory.service'; import {AsyncPipe, NgTemplateOutlet} from "@angular/common"; import {TranslocoDirective} from "@jsverse/transloco"; import {DynamicListPipe} from "./_pipes/dynamic-list.pipe"; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {Breakpoint, UtilityService} from "../../shared/_services/utility.service"; import {ActionableModalComponent} from "../actionable-modal/actionable-modal.component"; +import {User} from "../../_models/user"; + @Component({ - selector: 'app-card-actionables', - imports: [NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, DynamicListPipe, TranslocoDirective, AsyncPipe, NgTemplateOutlet], - templateUrl: './card-actionables.component.html', - styleUrls: ['./card-actionables.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'app-card-actionables', + imports: [ + NgbDropdown, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem, + DynamicListPipe, TranslocoDirective, AsyncPipe, NgTemplateOutlet + ], + templateUrl: './card-actionables.component.html', + styleUrls: ['./card-actionables.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) -export class CardActionablesComponent implements OnInit { +export class CardActionablesComponent implements OnInit, OnChanges, OnDestroy { private readonly cdRef = inject(ChangeDetectorRef); private readonly accountService = inject(AccountService); @@ -37,58 +45,69 @@ export class CardActionablesComponent implements OnInit { @Input() iconClass = 'fa-ellipsis-v'; @Input() btnClass = ''; - @Input() actions: ActionItem[] = []; + @Input() inputActions: ActionItem[] = []; @Input() labelBy = 'card'; /** * Text to display as if actionable was a button */ @Input() label = ''; @Input() disabled: boolean = false; + + @Input() entity: ActionableEntity = null; + /** + * 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>(); - isAdmin: boolean = false; - canDownload: boolean = false; - canPromote: boolean = false; + actions: ActionItem[] = []; + currentUser: User | undefined = undefined; submenu: {[key: string]: NgbDropdown} = {}; + private closeTimeout: any = null; ngOnInit(): void { this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => { if (!user) return; - this.isAdmin = this.accountService.hasAdminRole(user); - this.canDownload = this.accountService.hasDownloadRole(user); - this.canPromote = this.accountService.hasPromoteRole(user); - - // We want to avoid an empty menu when user doesn't have access to anything - if (!this.isAdmin && this.actions.filter(a => !a.requiresAdmin).length === 0) { - this.actions = []; - } - + this.currentUser = user; + this.actions = this.inputActions.filter(a => this.willRenderAction(a, user!)); this.cdRef.markForCheck(); }); } + ngOnChanges() { + this.actions = this.inputActions.filter(a => this.willRenderAction(a, this.currentUser!)); + this.cdRef.markForCheck(); + } + + ngOnDestroy() { + this.cancelCloseSubmenus(); + } + preventEvent(event: any) { event.stopPropagation(); event.preventDefault(); } - performAction(event: any, action: ActionItem) { + performAction(event: any, action: ActionItem) { this.preventEvent(event); if (typeof action.callback === 'function') { - this.actionHandler.emit(action); + if (this.entity === null) { + this.actionHandler.emit(action); + } else { + action.callback(action, this.entity); + } } } - willRenderAction(action: ActionItem) { - return (action.requiresAdmin && this.isAdmin) - || (action.action === Action.Download && (this.canDownload || this.isAdmin)) - || (!action.requiresAdmin && action.action !== Action.Download) - || (action.action === Action.Promote && (this.canPromote || this.isAdmin)) - || (action.action === Action.UnPromote && (this.canPromote || this.isAdmin)) - ; + /** + * The user has required roles (or no roles defined) and action shouldRender returns true + * @param action + * @param user + */ + willRenderAction(action: ActionItem, user: User) { + return (!action.requiredRoles?.length || this.accountService.hasAnyRole(user, action.requiredRoles)) && action.shouldRender(action, this.entity, user); } shouldRenderSubMenu(action: ActionItem, dynamicList: null | Array) { @@ -109,13 +128,41 @@ export class CardActionablesComponent implements OnInit { } closeAllSubmenus() { - Object.keys(this.submenu).forEach(key => { - this.submenu[key].close(); + // Clear any existing timeout to avoid race conditions + if (this.closeTimeout) { + clearTimeout(this.closeTimeout); + } + + // Set a new timeout to close submenus after a short delay + this.closeTimeout = setTimeout(() => { + Object.keys(this.submenu).forEach(key => { + this.submenu[key].close(); delete this.submenu[key]; - }); + }); + }, 100); // Small delay to prevent premature closing (dropdown tunneling) } - performDynamicClick(event: any, action: ActionItem, dynamicItem: any) { + cancelCloseSubmenus() { + if (this.closeTimeout) { + clearTimeout(this.closeTimeout); + this.closeTimeout = null; + } + } + + 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); } @@ -124,6 +171,7 @@ export class CardActionablesComponent implements OnInit { 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); diff --git a/UI/Web/src/app/admin/manage-library/manage-library.component.html b/UI/Web/src/app/admin/manage-library/manage-library.component.html index 95069b6f4..10c535b01 100644 --- a/UI/Web/src/app/admin/manage-library/manage-library.component.html +++ b/UI/Web/src/app/admin/manage-library/manage-library.component.html @@ -1,7 +1,8 @@
- +
@@ -72,11 +73,22 @@ @if (useActionables$ | async) { - + } @else { - - - + + + + + } 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 307444086..fa8a79bb8 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 @@ -83,12 +83,12 @@ export class ManageLibraryComponent implements OnInit { lastSelectedIndex: number | null = null; @HostListener('document:keydown.shift', ['$event']) - handleKeypress(event: KeyboardEvent) { + handleKeypress(_: KeyboardEvent) { this.isShiftDown = true; } @HostListener('document:keyup.shift', ['$event']) - handleKeyUp(event: KeyboardEvent) { + handleKeyUp(_: KeyboardEvent) { this.isShiftDown = false; } @@ -106,7 +106,7 @@ export class ManageLibraryComponent implements OnInit { ngOnInit(): void { this.getLibraries(); - // when a progress event comes in, show it on the UI next to library + // when a progress event comes in, show it on the UI next to the library this.hubService.messages$.pipe(takeUntilDestroyed(this.destroyRef), filter(event => event.event === EVENTS.ScanSeries || event.event === EVENTS.NotificationProgress), distinctUntilChanged((prev: Message, curr: Message) => @@ -270,7 +270,8 @@ export class ManageLibraryComponent implements OnInit { } } - async handleBulkAction(action: ActionItem, library : Library | null) { + async handleBulkAction(action: ActionItem, _: Library) { + //Library is null for bulk actions this.bulkAction = action.action; this.cdRef.markForCheck(); @@ -284,7 +285,7 @@ export class ManageLibraryComponent implements OnInit { break; case (Action.CopySettings): - // Prompt the user for the library then wait for them to manually trigger applyBulkAction + // 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) => { @@ -298,7 +299,6 @@ export class ManageLibraryComponent implements OnInit { } } - async handleAction(action: ActionItem, library: Library) { switch (action.action) { case(Action.Scan): @@ -321,13 +321,6 @@ export class ManageLibraryComponent implements OnInit { } } - performAction(action: ActionItem, library: Library) { - if (typeof action.callback === 'function') { - action.callback(action, library); - } - } - - setupSelections() { this.selections = new SelectionModel(false, this.libraries); this.cdRef.markForCheck(); 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 e76d352d8..77b580d48 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 @@ -23,7 +23,7 @@ } - + 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 4a14e63f2..7d65f12d8 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 @@ -2,13 +2,14 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - DestroyRef, HostListener, + DestroyRef, + HostListener, inject, Input, OnInit } from '@angular/core'; -import { Action, ActionFactoryService, ActionItem } from 'src/app/_services/action-factory.service'; -import { BulkSelectionService } from '../bulk-selection.service'; +import {Action, ActionFactoryService, ActionItem} from 'src/app/_services/action-factory.service'; +import {BulkSelectionService} from '../bulk-selection.service'; import {takeUntilDestroyed} from "@angular/core/rxjs-interop"; import {AsyncPipe, DecimalPipe, NgStyle} from "@angular/common"; import {TranslocoModule} from "@jsverse/transloco"; @@ -17,18 +18,18 @@ import {CardActionablesComponent} from "../../_single-module/card-actionables/ca import {KEY_CODES} from "../../shared/_services/utility.service"; @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 + 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 { @@ -84,6 +85,8 @@ export class BulkOperationsComponent implements OnInit { this.actionCallback(action, null); } + + executeAction(action: Action) { const foundActions = this.actions.filter(act => act.action === action); if (foundActions.length > 0) { 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 6d2f0bc6a..1981efdab 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 @@ -7,7 +7,7 @@

@if (actions.length > 0) { -   +   } diff --git a/UI/Web/src/app/cards/card-item/card-item.component.html b/UI/Web/src/app/cards/card-item/card-item.component.html index b9b69accc..dc89c563c 100644 --- a/UI/Web/src/app/cards/card-item/card-item.component.html +++ b/UI/Web/src/app/cards/card-item/card-item.component.html @@ -94,7 +94,7 @@ @if (actions && actions.length > 0) { - + }

diff --git a/UI/Web/src/app/cards/chapter-card/chapter-card.component.html b/UI/Web/src/app/cards/chapter-card/chapter-card.component.html index 9c0009860..573fd79a2 100644 --- a/UI/Web/src/app/cards/chapter-card/chapter-card.component.html +++ b/UI/Web/src/app/cards/chapter-card/chapter-card.component.html @@ -89,7 +89,7 @@ @if (actions && actions.length > 0) { - + }
diff --git a/UI/Web/src/app/cards/person-card/person-card.component.html b/UI/Web/src/app/cards/person-card/person-card.component.html index 852e76224..dba899a4c 100644 --- a/UI/Web/src/app/cards/person-card/person-card.component.html +++ b/UI/Web/src/app/cards/person-card/person-card.component.html @@ -32,7 +32,7 @@ @if (actions && actions.length > 0) { - + }
diff --git a/UI/Web/src/app/cards/series-card/series-card.component.html b/UI/Web/src/app/cards/series-card/series-card.component.html index 4b3a61599..615881735 100644 --- a/UI/Web/src/app/cards/series-card/series-card.component.html +++ b/UI/Web/src/app/cards/series-card/series-card.component.html @@ -74,7 +74,7 @@ @if (actions && actions.length > 0) { - + }
diff --git a/UI/Web/src/app/cards/series-card/series-card.component.ts b/UI/Web/src/app/cards/series-card/series-card.component.ts index dd51bcae1..262396baa 100644 --- a/UI/Web/src/app/cards/series-card/series-card.component.ts +++ b/UI/Web/src/app/cards/series-card/series-card.component.ts @@ -22,7 +22,6 @@ import {ActionService} from 'src/app/_services/action.service'; import {EditSeriesModalComponent} from '../_modals/edit-series-modal/edit-series-modal.component'; import {RelationKind} from 'src/app/_models/series-detail/relation-kind'; import {DecimalPipe} from "@angular/common"; -import {CardItemComponent} from "../card-item/card-item.component"; import {RelationshipPipe} from "../../_pipes/relationship.pipe"; import {Device} from "../../_models/device/device"; import {translate, TranslocoDirective} from "@jsverse/transloco"; @@ -30,7 +29,6 @@ import {SeriesPreviewDrawerComponent} from "../../_single-module/series-preview- import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component"; import {DefaultValuePipe} from "../../_pipes/default-value.pipe"; import {DownloadIndicatorComponent} from "../download-indicator/download-indicator.component"; -import {EntityTitleComponent} from "../entity-title/entity-title.component"; import {FormsModule} from "@angular/forms"; import {ImageComponent} from "../../shared/image/image.component"; import {DownloadEvent, DownloadService} from "../../shared/_services/download.service"; @@ -212,6 +210,8 @@ export class SeriesCardComponent implements OnInit, OnChanges { callback: (action: ActionItem, series: Series) => this.handleSeriesActionCallback(action, series), class: 'danger', requiresAdmin: false, + requiredRoles: [], + shouldRender: (_, _2, _3) => true, children: [], }); this.actions[othersIndex] = othersAction; diff --git a/UI/Web/src/app/cards/volume-card/volume-card.component.html b/UI/Web/src/app/cards/volume-card/volume-card.component.html index 0a6e6d24e..a4b305d5e 100644 --- a/UI/Web/src/app/cards/volume-card/volume-card.component.html +++ b/UI/Web/src/app/cards/volume-card/volume-card.component.html @@ -81,7 +81,7 @@ @if (actions && actions.length > 0) { - + }
diff --git a/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html b/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html index 56a3488f3..8195544af 100644 --- a/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html +++ b/UI/Web/src/app/carousel/_components/carousel-reel/carousel-reel.component.html @@ -4,7 +4,7 @@
@if (actionables.length > 0) { - + }

@if (titleLink !== '') { diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html index 6e9c68eb7..831ee9451 100644 --- a/UI/Web/src/app/chapter-detail/chapter-detail.component.html +++ b/UI/Web/src/app/chapter-detail/chapter-detail.component.html @@ -74,7 +74,7 @@
- +
diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.ts b/UI/Web/src/app/chapter-detail/chapter-detail.component.ts index ad021de97..f740c7775 100644 --- a/UI/Web/src/app/chapter-detail/chapter-detail.component.ts +++ b/UI/Web/src/app/chapter-detail/chapter-detail.component.ts @@ -83,7 +83,7 @@ enum TabID { } @Component({ - selector: 'app-chapter-detail', + selector: 'app-chapter-detail', imports: [ AsyncPipe, CardActionablesComponent, @@ -116,9 +116,9 @@ enum TabID { ReviewsComponent, ExternalRatingComponent ], - templateUrl: './chapter-detail.component.html', - styleUrl: './chapter-detail.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush + templateUrl: './chapter-detail.component.html', + styleUrl: './chapter-detail.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush }) export class ChapterDetailComponent implements OnInit { diff --git a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html index 861f87115..fb9fef4f8 100644 --- a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html +++ b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html @@ -10,7 +10,7 @@ @if(collectionTag.promoted) { () } - +

}
{{t('item-count', {num: series.length})}}
diff --git a/UI/Web/src/app/library-detail/library-detail.component.html b/UI/Web/src/app/library-detail/library-detail.component.html index 32075a68c..df1e4f2da 100644 --- a/UI/Web/src/app/library-detail/library-detail.component.html +++ b/UI/Web/src/app/library-detail/library-detail.component.html @@ -3,7 +3,7 @@

{{libraryName}} - +

@if (active.fragment === '') {
{{t('common.series-count', {num: pagination.totalItems | number})}}
diff --git a/UI/Web/src/app/person-detail/person-detail.component.html b/UI/Web/src/app/person-detail/person-detail.component.html index 1b99611e1..7952b24a3 100644 --- a/UI/Web/src/app/person-detail/person-detail.component.html +++ b/UI/Web/src/app/person-detail/person-detail.component.html @@ -5,7 +5,7 @@

- + {{person.name}} @if (person.aniListId) { diff --git a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html index e03368df3..4f17fd7e8 100644 --- a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html +++ b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html @@ -87,7 +87,7 @@
- +
diff --git a/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.html b/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.html index 3d1192600..dd7dcab9a 100644 --- a/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.html +++ b/UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.html @@ -3,7 +3,7 @@

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

@if (pagination) {
{{t('item-count', {num: pagination.totalItems | number})}}
diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html index 1696aa5f0..9587eb026 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html @@ -96,7 +96,7 @@
- +
diff --git a/UI/Web/src/app/shared/_services/utility.service.ts b/UI/Web/src/app/shared/_services/utility.service.ts index 69967845a..afb63ab1d 100644 --- a/UI/Web/src/app/shared/_services/utility.service.ts +++ b/UI/Web/src/app/shared/_services/utility.service.ts @@ -42,6 +42,9 @@ export class UtilityService { public readonly activeBreakpointSource = new ReplaySubject(1); public readonly activeBreakpoint$ = this.activeBreakpointSource.asObservable().pipe(debounceTime(60), shareReplay({bufferSize: 1, refCount: true})); + // TODO: I need an isPhone/Tablet so that I can easily trigger different views + + mangaFormatKeys: string[] = []; diff --git a/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html b/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html index 3e178859c..5b68642d8 100644 --- a/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html +++ b/UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html @@ -8,8 +8,7 @@ - + @@ -44,7 +43,7 @@ [imageUrl]="getLibraryImage(navStream.library!)" [title]="navStream.library!.name" [comparisonMethod]="'startsWith'"> - diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.html b/UI/Web/src/app/volume-detail/volume-detail.component.html index 3e00f89aa..8ef4f814c 100644 --- a/UI/Web/src/app/volume-detail/volume-detail.component.html +++ b/UI/Web/src/app/volume-detail/volume-detail.component.html @@ -77,7 +77,7 @@
- +
diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.ts b/UI/Web/src/app/volume-detail/volume-detail.component.ts index 838925030..49c44e9d0 100644 --- a/UI/Web/src/app/volume-detail/volume-detail.component.ts +++ b/UI/Web/src/app/volume-detail/volume-detail.component.ts @@ -80,6 +80,7 @@ import {UserReview} from "../_single-module/review-card/user-review"; import {ReviewsComponent} from "../_single-module/reviews/reviews.component"; import {ExternalRatingComponent} from "../series-detail/_components/external-rating/external-rating.component"; import {ChapterService} from "../_services/chapter.service"; +import {User} from "../_models/user"; enum TabID { @@ -211,7 +212,7 @@ export class VolumeDetailComponent implements OnInit { mobileSeriesImgBackground: string | undefined; downloadInProgress: boolean = false; - volumeActions: Array> = this.actionFactoryService.getVolumeActions(this.handleVolumeAction.bind(this)); + volumeActions: Array> = this.actionFactoryService.getVolumeActions(this.handleVolumeAction.bind(this), this.shouldRenderVolumeAction.bind(this)); chapterActions: Array> = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this)); bulkActionCallback = async (action: ActionItem, _: any) => { @@ -610,6 +611,17 @@ export class VolumeDetailComponent implements OnInit { } } + shouldRenderVolumeAction(action: ActionItem, entity: Volume, user: User) { + switch (action.action) { + case(Action.MarkAsRead): + return entity.pagesRead < entity.pages; + case(Action.MarkAsUnread): + return entity.pagesRead !== 0; + default: + return true; + } + } + async handleVolumeAction(action: ActionItem) { switch (action.action) { case Action.Delete: