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

More Polish (#2320)

Browse source 
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
Joe Milazzo 2023-10-17 11:05:14 -05:00 • committed by GitHub
parent cd3a15fa3b
commit 5f11973696
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 337 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

8
UI/Web/src/app/sidenav/_components/customize-dashboard-modal/customize-dashboard-modal.component.ts
View file

@ -5,17 +5,11 @@ import {TranslocoDirective} from "@ngneat/transloco";
import {NgbActiveModal, NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet} from "@ng-bootstrap/ng-bootstrap";
import {
DraggableOrderedListComponent,
IndexUpdateEvent
} from "../../../reading-list/_components/draggable-ordered-list/draggable-ordered-list.component";
import {
ReadingListItemComponent
} from "../../../reading-list/_components/reading-list-item/reading-list-item.component";
import {forkJoin} from "rxjs";
import {FilterService} from "../../../_services/filter.service";
import {DashboardStreamListItemComponent} from "../dashboard-stream-list-item/dashboard-stream-list-item.component";
import {SmartFilter} from "../../../_models/metadata/v2/smart-filter";
import {DashboardService} from "../../../_services/dashboard.service";
import {DashboardStream} from "../../../_models/dashboard/dashboard-stream";
import {Breakpoint, UtilityService} from "../../../shared/_services/utility.service";
import {CustomizeDashboardStreamsComponent} from "../customize-dashboard-streams/customize-dashboard-streams.component";
import {CustomizeSidenavStreamsComponent} from "../customize-sidenav-streams/customize-sidenav-streams.component";
@ -40,7 +34,7 @@ enum TabID {
})
export class CustomizeDashboardModalComponent {
activeTab = TabID.Dashboard;
activeTab = TabID.SideNav;
private readonly cdRef = inject(ChangeDetectorRef);
public readonly utilityService = inject(UtilityService);

2
UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.html
View file

@ -1,6 +1,6 @@
<ng-container *transloco="let t; read: 'customize-dashboard-streams'">
<app-draggable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" [accessibilityMode]="accessibilityMode"
[showRemoveButton]="false">
[showRemoveButton]="false" [itemHeight]="60">
<ng-template #draggableItem let-position="idx" let-item>
<app-dashboard-stream-list-item [item]="item" [position]="position" (hide)="updateVisibility($event, position)"></app-dashboard-stream-list-item>
</ng-template>

7
UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.scss
View file

@ -22,3 +22,10 @@ app-dashboard-stream-list-item {
background-color: var(--list-group-hover-bg-color);
}
}
.virtual-scroller, virtual-scroller {
width: 100%;
height: calc(100vh - 85px);
max-height: calc(var(--vh)*100 - 170px);
}

3
UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.ts
View file

@ -11,7 +11,6 @@ import {FilterService} from "../../../_services/filter.service";
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
import {forkJoin} from "rxjs";
import {TranslocoDirective} from "@ngneat/transloco";
import {CommonStream} from "../../../_models/common-stream";
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
import {FilterPipe} from "../../../pipe/filter.pipe";
@ -76,8 +75,8 @@ export class CustomizeDashboardStreamsComponent {
updateVisibility(item: DashboardStream, position: number) {
this.items[position].visible = !this.items[position].visible;
this.dashboardService.updateDashboardStream(this.items[position]).subscribe();
this.cdRef.markForCheck();
this.dashboardService.updateDashboardStream(this.items[position]).subscribe();
}
}

25
UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.html
View file

@ -23,18 +23,21 @@
</div>
</div>
<app-bulk-operations [modalMode]="true" [topOffset]="0" [actionCallback]="bulkActionCallback"></app-bulk-operations>
<app-draggable-ordered-list [items]="items | filter: filterSideNavStreams" (orderUpdated)="orderUpdated($event)"
[accessibilityMode]="pageOperationsForm.get('accessibilityMode')!.value"
[showRemoveButton]="false" [disabled]="listForm.get('filterSideNavStream')?.value"
[bulkMode]="pageOperationsForm.get('bulkMode')!.value"
[virtualizeAfter]="100"
>
<ng-template #draggableItem let-position="idx" let-item>
<app-sidenav-stream-list-item [item]="item" [position]="position" (hide)="updateVisibility($event, position)"></app-sidenav-stream-list-item>
</ng-template>
</app-draggable-ordered-list>
<div style="max-height: 500px; overflow-y: auto">
<app-draggable-ordered-list [items]="items | filter: filterSideNavStreams" (orderUpdated)="orderUpdated($event)"
[accessibilityMode]="pageOperationsForm.get('accessibilityMode')!.value"
[showRemoveButton]="false" [disabled]="listForm.get('filterSideNavStream')!.value"
[bulkMode]="pageOperationsForm.get('bulkMode')!.value"
[virtualizeAfter]="virtualizeAfter"
[itemHeight]="60"
>
<ng-template #draggableItem let-position="idx" let-item>
<app-sidenav-stream-list-item [item]="item" [position]="position" (hide)="updateVisibility($event, position)"></app-sidenav-stream-list-item>
</ng-template>
</app-draggable-ordered-list>
</div>
<h5>{{t('smart-filters-title')}}</h5>
<h5 class="mt-3">{{t('smart-filters-title')}}</h5>
<div class="mb-3" *ngIf="smartFilters.length >= 6">
<label for="smart-filter-filter" class="form-label">{{t('filter')}}</label>
<div class="input-group">

55
UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.ts
View file

@ -1,4 +1,12 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnDestroy} from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DestroyRef, EventEmitter,
HostListener,
inject,
OnDestroy
} from '@angular/core';
import {CommonModule} from '@angular/common';
import {SmartFilter} from "../../../_models/metadata/v2/smart-filter";
import {FilterService} from "../../../_services/filter.service";
@ -23,6 +31,7 @@ import {Action, ActionItem} from "../../../_services/action-factory.service";
import {BulkSelectionService} from "../../../cards/bulk-selection.service";
import {filter, tap} from "rxjs/operators";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {KEY_CODES} from "../../../shared/_services/utility.service";
@Component({
selector: 'app-customize-sidenav-streams',
@ -38,6 +47,7 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
items: SideNavStream[] = [];
smartFilters: SmartFilter[] = [];
externalSources: ExternalSource[] = [];
virtualizeAfter = 100;
listForm: FormGroup = new FormGroup({
'filterSideNavStream': new FormControl('', []),
@ -65,7 +75,9 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
}
bulkActionCallback = (action: ActionItem<SideNavStream>, data: SideNavStream) => {
const streams = this.bulkSelectionService.getSelectedCardsForSource('sideNavStream').map(index => this.items[parseInt(index, 10)]);
const selectedItems = this.bulkSelectionService.getSelectedCardsForSource('sideNavStream');
const streams = selectedItems
.map(index => this.items[parseInt(index, 10)]);
let visibleState = false;
switch (action.action) {
case Action.MarkAsVisible:
@ -76,13 +88,17 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
break;
}
for(let index of this.bulkSelectionService.getSelectedCardsForSource('sideNavStream').map(s => parseInt(s, 10))) {
for(let index of selectedItems.map(s => parseInt(s, 10))) {
this.items[index].visible = visibleState;
this.items[index] = {...this.items[index]};
}
this.cdRef.markForCheck();
// Make bulk call
this.sideNavService.bulkToggleSideNavStreamVisibility(streams.map(s => s.id), visibleState).subscribe(() => this.bulkSelectionService.deselectAll());
this.sideNavService.bulkToggleSideNavStreamVisibility(streams.map(s => s.id), visibleState)
.subscribe(() => {
this.bulkSelectionService.deselectAll();
this.cdRef.markForCheck();
});
}
@ -91,7 +107,22 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
private readonly externalSourceService = inject(ExternalSourceService);
private readonly cdRef = inject(ChangeDetectorRef);
private readonly destroyRef = inject(DestroyRef);
private readonly bulkSelectionService = inject(BulkSelectionService);
public readonly bulkSelectionService = inject(BulkSelectionService);
@HostListener('document:keydown.shift', ['$event'])
handleKeypress(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = true;
}
}
@HostListener('document:keyup.shift', ['$event'])
handleKeyUp(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = false;
this.cdRef.markForCheck();
}
}
constructor(public modal: NgbActiveModal) {
@ -140,8 +171,8 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
]).subscribe(results => {
this.items = results[0];
// After 100 items, drag and drop is disabled to use virtualization
if (this.items.length > 100) {
// After X items, drag and drop is disabled to use virtualization
if (this.items.length > this.virtualizeAfter) {
this.pageOperationsForm.get('accessibilityMode')?.setValue(true);
}
@ -192,12 +223,10 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
orderUpdated(event: IndexUpdateEvent) {
this.sideNavService.updateSideNavStreamPosition(event.item.name, event.item.id, event.fromPosition, event.toPosition).subscribe(() => {
if (event.fromAccessibilityMode) {
this.sideNavService.getSideNavStreams(false).subscribe((data) => {
this.items = [...data];
this.cdRef.markForCheck();
})
}
this.sideNavService.getSideNavStreams(false).subscribe((data) => {
this.items = [...data];
this.cdRef.markForCheck();
});
});
}