AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX Overhaul Part 1 (#3047)

Browse source 
Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
This commit is contained in:
Robbie Davis 2024-08-09 13:55:31 -04:00 • committed by GitHub
parent 5934d516f3
commit ff79710ac6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
324 changed files with 11589 additions and 4598 deletions
Download patch file Download diff file Expand all files Collapse all files

50
UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.ts
View file

@ -7,9 +7,8 @@ import {
OnInit
} from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import {NgbModal, NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
import {NgbTooltip} from '@ng-bootstrap/ng-bootstrap';
import {distinctUntilChanged, filter, map, take, tap} from 'rxjs/operators';
import { ImportCblModalComponent } from 'src/app/reading-list/_modals/import-cbl-modal/import-cbl-modal.component';
import { ImageService } from 'src/app/_services/image.service';
import { EVENTS, MessageHubService } from 'src/app/_services/message-hub.service';
import { Breakpoint, UtilityService } from '../../../shared/_services/utility.service';
@ -20,25 +19,21 @@ import { ActionService } from '../../../_services/action.service';
import { NavService } from '../../../_services/nav.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {BehaviorSubject, merge, Observable, of, ReplaySubject, startWith, switchMap} from "rxjs";
import {CommonModule} from "@angular/common";
import {AsyncPipe, NgClass} from "@angular/common";
import {SideNavItemComponent} from "../side-nav-item/side-nav-item.component";
import {FilterPipe} from "../../../_pipes/filter.pipe";
import {FormsModule} from "@angular/forms";
import {TranslocoDirective} from "@ngneat/transloco";
import {CardActionablesComponent} from "../../../_single-module/card-actionables/card-actionables.component";
import {SentenceCasePipe} from "../../../_pipes/sentence-case.pipe";
import {CustomizeDashboardModalComponent} from "../customize-dashboard-modal/customize-dashboard-modal.component";
import {SideNavStream} from "../../../_models/sidenav/sidenav-stream";
import {SideNavStreamType} from "../../../_models/sidenav/sidenav-stream-type.enum";
import {
ImportMalCollectionModalComponent
} from "../../../collections/_components/import-mal-collection-modal/import-mal-collection-modal.component";
import {WikiLink} from "../../../_models/wiki";
@Component({
selector: 'app-side-nav',
standalone: true,
imports: [CommonModule, SideNavItemComponent, CardActionablesComponent, FilterPipe, FormsModule, TranslocoDirective, SentenceCasePipe, NgbTooltip],
imports: [SideNavItemComponent, CardActionablesComponent, FilterPipe, FormsModule, TranslocoDirective, SentenceCasePipe, NgbTooltip, NgClass, AsyncPipe],
templateUrl: './side-nav.component.html',
styleUrls: ['./side-nav.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@ -52,20 +47,15 @@ export class SideNavComponent implements OnInit {
private readonly actionService = inject(ActionService);
public readonly navService = inject(NavService);
private readonly cdRef = inject(ChangeDetectorRef);
private readonly ngbModal = inject(NgbModal);
private readonly imageService = inject(ImageService);
public readonly accountService = inject(AccountService);
private readonly destroyRef = inject(DestroyRef);
private readonly actionFactoryService = inject(ActionFactoryService);
protected readonly WikiLink = WikiLink;
protected readonly ItemLimit = 10;
cachedData: SideNavStream[] | null = null;
actions: ActionItem<Library>[] = this.actionFactoryService.getLibraryActions(this.handleAction.bind(this));
readingListActions = [];
homeActions = [
{action: Action.Edit, title: 'customize', children: [], requiresAdmin: false, callback: this.openCustomize.bind(this)},
{action: Action.Import, title: 'import-cbl', children: [], requiresAdmin: true, callback: this.importCbl.bind(this)},
];
filterQuery: string = '';
filterLibrary = (stream: SideNavStream) => {
@ -106,7 +96,7 @@ export class SideNavComponent implements OnInit {
)
: this.loadDataOnInit$.pipe(
tap(d => this.totalSize = d.length),
map(d => d.slice(0, 10))
map(d => d.slice(0, this.ItemLimit))
)
),
takeUntilDestroyed(this.destroyRef),
@ -117,7 +107,7 @@ export class SideNavComponent implements OnInit {
}),
switchMap(() => {
if (this.showAll) return this.loadDataOnInit$;
else return this.loadDataOnInit$.pipe(map(d => d.slice(0, 10)))
else return this.loadDataOnInit$.pipe(map(d => d.slice(0, this.ItemLimit)))
}), // Reload data when events occur
takeUntilDestroyed(this.destroyRef),
)
@ -143,15 +133,6 @@ export class SideNavComponent implements OnInit {
this.navService.toggleSideNav();
this.cdRef.markForCheck();
});
this.accountService.hasValidLicense$.subscribe(res =>{
if (!res) return;
if (this.homeActions.filter(f => f.title === 'import-mal-stack').length === 0) {
this.homeActions.push({action: Action.Import, title: 'import-mal-stack', children: [], requiresAdmin: true, callback: this.importMalCollection.bind(this)});
this.cdRef.markForCheck();
}
})
}
ngOnInit(): void {
@ -169,6 +150,9 @@ export class SideNavComponent implements OnInit {
case(Action.RefreshMetadata):
await this.actionService.refreshMetadata(library);
break;
case(Action.GenerateColorScape):
await this.actionService.refreshMetadata(library, undefined, false);
break;
case (Action.AnalyzeFiles):
await this.actionService.analyzeFiles(library);
break;
@ -183,22 +167,6 @@ export class SideNavComponent implements OnInit {
}
}
handleHomeActions(action: ActionItem<void>) {
action.callback(action, undefined);
}
openCustomize() {
this.ngbModal.open(CustomizeDashboardModalComponent, {size: 'xl', fullscreen: 'md'});
}
importCbl() {
this.ngbModal.open(ImportCblModalComponent, {size: 'xl', fullscreen: 'md'});
}
importMalCollection() {
this.ngbModal.open(ImportMalCollectionModalComponent, {size: 'xl', fullscreen: 'md'});
}
performAction(action: ActionItem<Library>, library: Library) {
if (typeof action.callback === 'function') {
action.callback(action, library);