Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2026-05-28 02:22:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use signals in a failed hope to fix the issue

Browse Source
This commit is contained in:
Amelia
2026-01-15 11:08:12 +01:00
parent 83b5a985d5
commit f25ae6d5f6
2 changed files with 20 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.html
+5 -7
View File
@@ -4,14 +4,12 @@
<ng-template #tooltip>{{t('format-tooltip')}}</ng-template>
@let files = (files$ | async) || [];
@if (files.length > 0) {
<app-responsive-table [rows]="files" [trackByFn]="trackByExtension">
@if (files().length > 0) {
<app-responsive-table [rows]="files()" [trackByFn]="trackByExtension">
<ng-template #tableTemplate>
<ngx-datatable
class="bootstrap"
[rows]="files"
[rows]="files()"
[columnMode]="'force'"
rowHeight="auto"
[footerHeight]="50"
@@ -71,7 +69,7 @@
<ng-template ngx-datatable-footer-template>
<div class="d-flex align-items-center px-3 py-2">
<span>{{t('total-file-size-title')}}: {{((rawData$ | async)?.totalFileSize || 0) | bytes}}</span>
<span>{{t('total-file-size-title')}}: {{ totalSize() | bytes}}</span>
</div>
</ng-template>
</ngx-datatable>
@@ -114,7 +112,7 @@
<div cardFooter class="card mb-3">
<div class="card-body py-2">
<strong>{{t('total-file-size-title')}}:</strong> {{((rawData$ | async)?.totalFileSize || 0) | bytes}}
<strong>{{t('total-file-size-title')}}:</strong> {{ totalSize() | bytes}}
</div>
</div>
</app-responsive-table>
UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.ts
+15 -37
View File
@@ -3,14 +3,14 @@ import {
ChangeDetectorRef,
Component,
DestroyRef,
inject,
QueryList,
inject, OnInit,
QueryList, signal,
TemplateRef,
ViewChild,
ViewChildren
} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {BehaviorSubject, combineLatest, map, Observable, shareReplay} from 'rxjs';
import {BehaviorSubject, combineLatest, map, Observable, shareReplay, tap} from 'rxjs';
import {StatisticsService} from 'src/app/_services/statistics.service';
import {compare, SortableHeader, SortEvent} from 'src/app/_single-module/table/_directives/sortable-header.directive';
import {FileExtension, FileExtensionBreakdown} from '../../_models/file-breakdown';
@@ -19,7 +19,7 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {AsyncPipe} from '@angular/common';
import {TranslocoDirective, TranslocoService} from "@jsverse/transloco";
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
import {NgxDatatableModule} from "@siemens/ngx-datatable";
import {NgxDatatableModule, SortDirection} from "@siemens/ngx-datatable";
import {MangaFormatPipe} from "../../../_pipes/manga-format.pipe";
import {BytesPipe} from "../../../_pipes/bytes.pipe";
import {CompactNumberPipe} from "../../../_pipes/compact-number.pipe";
@@ -31,22 +31,14 @@ import {StatsNoDataComponent} from "../../../common/stats-no-data/stats-no-data.
templateUrl: './file-breakdown-stats.component.html',
styleUrls: ['./file-breakdown-stats.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgbTooltip, ReactiveFormsModule, AsyncPipe, TranslocoDirective, NgxDatatableModule, MangaFormatPipe, BytesPipe, CompactNumberPipe, ResponsiveTableComponent, StatsNoDataComponent]
imports: [NgbTooltip, ReactiveFormsModule, TranslocoDirective, NgxDatatableModule, MangaFormatPipe, BytesPipe, CompactNumberPipe, ResponsiveTableComponent, StatsNoDataComponent]
})
export class FileBreakdownStatsComponent {
export class FileBreakdownStatsComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly cdRef = inject(ChangeDetectorRef);
@ViewChildren(SortableHeader<PieDataItem>) headers!: QueryList<SortableHeader<PieDataItem>>;
@ViewChild('modalTable') modalTable!: TemplateRef<any>;
rawData$!: Observable<FileExtensionBreakdown>;
files$!: Observable<Array<FileExtension>>;
vizData2$!: Observable<Array<PieDataItem>>;
currentSort = new BehaviorSubject<SortEvent<FileExtension>>({column: 'extension', direction: 'asc'});
currentSort$: Observable<SortEvent<FileExtension>> = this.currentSort.asObservable();
files = signal<FileExtension[]>([]);
totalSize = signal<number>(0);
view: [number, number] = [700, 400];
@@ -57,27 +49,13 @@ export class FileBreakdownStatsComponent {
trackByExtension = (_: number, item: FileExtension) => item.extension + '_' + item.totalFiles;
constructor() {
this.rawData$ = this.statService.getFileBreakdown().pipe(takeUntilDestroyed(this.destroyRef), shareReplay());
this.files$ = combineLatest([this.currentSort$, this.rawData$]).pipe(
map(([sortConfig, data]) => {
return {sortConfig, fileBreakdown: data.fileBreakdown};
}),
map(({ sortConfig, fileBreakdown }) => {
return (sortConfig.column) ? fileBreakdown.sort((a: FileExtension, b: FileExtension) => {
if (sortConfig.column === '') return 0;
const res = compare(a[sortConfig.column], b[sortConfig.column]);
return sortConfig.direction === 'asc' ? res : -res;
}) : fileBreakdown;
}),
takeUntilDestroyed(this.destroyRef)
);
this.vizData2$ = this.files$.pipe(takeUntilDestroyed(this.destroyRef), map(data => data.map(d => {
return {name: d.extension || this.translocoService.translate('file-breakdown-stats.not-classified'), value: d.totalFiles, extra: d.totalSize};
})));
ngOnInit() {
this.statService.getFileBreakdown().pipe(
tap(res => {
this.files.set(res.fileBreakdown);
this.totalSize.set(res.totalFileSize);
})
).subscribe();
}