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

Angular 16 (#2007)

Browse source 
* Removed adv, which isn't needed.

* Updated zone

* Updated to angular 16

* Updated to angular 16 (partially)

* Updated to angular 16

* Package update for Angular 16 (and other dependencies) is complete.

* Replaced all takeUntil(this.onDestroy) with new takeUntilDestroyed()

* Updated all inputs that have ! to be required and deleted all unit tests.

* Corrected how takeUntilDestroyed() is supposed to be implemented.
This commit is contained in:
Joe Milazzo 2023-05-21 12:30:32 -05:00 • committed by GitHub
parent 9bc8361381
commit 9c06cccd35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
87 changed files with 3964 additions and 20426 deletions
Download patch file Download diff file Expand all files Collapse all files

8
UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts
View file

@ -15,7 +15,7 @@ import { CollectionTagService } from 'src/app/_services/collection-tag.service';
})
export class BulkAddToCollectionComponent implements OnInit, AfterViewInit {
@Input() title!: string;
@Input({required: true}) title!: string;
/**
* Series Ids to add to Collection Tag
*/
@ -33,14 +33,14 @@ export class BulkAddToCollectionComponent implements OnInit, AfterViewInit {
@ViewChild('title') inputElem!: ElementRef<HTMLInputElement>;
constructor(private modal: NgbActiveModal, private collectionService: CollectionTagService,
constructor(private modal: NgbActiveModal, private collectionService: CollectionTagService,
private toastr: ToastrService, private readonly cdRef: ChangeDetectorRef) { }
ngOnInit(): void {
this.listForm.addControl('title', new FormControl(this.title, []));
this.listForm.addControl('filterQuery', new FormControl('', []));
this.loading = true;
this.cdRef.markForCheck();
this.collectionService.allTags().subscribe(tags => {
@ -77,7 +77,7 @@ export class BulkAddToCollectionComponent implements OnInit, AfterViewInit {
this.toastr.success('Series added to ' + tag.title + ' collection');
this.modal.close();
});
}
filterList = (listItem: ReadingList) => {

38
UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.ts
View file

@ -1,4 +1,13 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DestroyRef,
inject,
Input,
OnDestroy,
OnInit
} from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
@ -14,6 +23,7 @@ import { ImageService } from 'src/app/_services/image.service';
import { LibraryService } from 'src/app/_services/library.service';
import { SeriesService } from 'src/app/_services/series.service';
import { UploadService } from 'src/app/_services/upload.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
enum TabID {
@ -28,9 +38,9 @@ enum TabID {
styleUrls: ['./edit-collection-tags.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditCollectionTagsComponent implements OnInit, OnDestroy {
export class EditCollectionTagsComponent implements OnInit {
@Input() tag!: CollectionTag;
@Input({required: true}) tag!: CollectionTag;
series: Array<Series> = [];
selections!: SelectionModel<Series>;
isLoading: boolean = true;
@ -42,8 +52,7 @@ export class EditCollectionTagsComponent implements OnInit, OnDestroy {
active = TabID.General;
imageUrls: Array<string> = [];
selectedCover: string = '';
private readonly onDestroy = new Subject<void>();
private readonly destroyRef = inject(DestroyRef);
get hasSomeSelected() {
return this.selections != null && this.selections.hasSomeSelected();
@ -57,7 +66,7 @@ export class EditCollectionTagsComponent implements OnInit, OnDestroy {
return TabID;
}
constructor(public modal: NgbActiveModal, private seriesService: SeriesService,
constructor(public modal: NgbActiveModal, private seriesService: SeriesService,
private collectionService: CollectionTagService, private toastr: ToastrService,
private confirmSerivce: ConfirmService, private libraryService: LibraryService,
private imageService: ImageService, private uploadService: UploadService,
@ -76,7 +85,7 @@ export class EditCollectionTagsComponent implements OnInit, OnDestroy {
});
this.collectionTagForm.get('title')?.valueChanges.pipe(
debounceTime(100),
debounceTime(100),
distinctUntilChanged(),
switchMap(name => this.collectionService.tagNameExists(name)),
tap(exists => {
@ -84,22 +93,17 @@ export class EditCollectionTagsComponent implements OnInit, OnDestroy {
if (!exists || isExistingName) {
this.collectionTagForm.get('title')?.setErrors(null);
} else {
this.collectionTagForm.get('title')?.setErrors({duplicateName: true})
this.collectionTagForm.get('title')?.setErrors({duplicateName: true})
}
this.cdRef.markForCheck();
}),
takeUntil(this.onDestroy)
takeUntilDestroyed(this.destroyRef)
).subscribe();
this.imageUrls.push(this.imageService.randomize(this.imageService.getCollectionCoverImage(this.tag.id)));
this.loadSeries();
}
ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}
onPageChange(pageNum: number) {
this.pagination.currentPage = pageNum;
this.loadSeries();
@ -153,7 +157,7 @@ export class EditCollectionTagsComponent implements OnInit, OnDestroy {
const unselectedIds = this.selections.unselected().map(s => s.id);
const tag = this.collectionTagForm.value;
tag.id = this.tag.id;
if (unselectedIds.length == this.series.length && !await this.confirmSerivce.confirm('Warning! No series are selected, saving will delete the tag. Are you sure you want to continue?')) {
return;
}
@ -162,11 +166,11 @@ export class EditCollectionTagsComponent implements OnInit, OnDestroy {
this.collectionService.updateTag(tag),
this.collectionService.updateSeriesForTag(tag, this.selections.unselected().map(s => s.id))
];
if (selectedIndex > 0) {
apis.push(this.uploadService.updateCollectionCoverImage(this.tag.id, this.selectedCover));
}
forkJoin(apis).subscribe(() => {
this.modal.close({success: true, coverImageUpdated: selectedIndex > 0});
this.toastr.success('Tag updated');

46
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts
View file

@ -1,4 +1,13 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, DestroyRef,
EventEmitter,
inject,
Input,
OnDestroy,
OnInit
} from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { forkJoin, Observable, of, Subject } from 'rxjs';
@ -21,6 +30,7 @@ import { LibraryService } from 'src/app/_services/library.service';
import { MetadataService } from 'src/app/_services/metadata.service';
import { SeriesService } from 'src/app/_services/series.service';
import { UploadService } from 'src/app/_services/upload.service';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
enum TabID {
General = 0,
@ -38,9 +48,9 @@ enum TabID {
styleUrls: ['./edit-series-modal.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditSeriesModalComponent implements OnInit, OnDestroy {
export class EditSeriesModalComponent implements OnInit {
@Input() series!: Series;
@Input({required: true}) series!: Series;
seriesVolumes: any[] = [];
isLoadingVolumes = false;
/**
@ -56,9 +66,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
editSeriesForm!: FormGroup;
libraryName: string | undefined = undefined;
size: number = 0;
private readonly onDestroy = new Subject<void>();
private readonly destroyRef = inject(DestroyRef);
// Typeaheads
ageRatingSettings: TypeaheadSettings<AgeRatingDto> = new TypeaheadSettings();
@ -117,16 +125,16 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
private libraryService: LibraryService,
private collectionService: CollectionTagService,
private uploadService: UploadService,
private metadataService: MetadataService,
private metadataService: MetadataService,
private readonly cdRef: ChangeDetectorRef) { }
ngOnInit(): void {
this.imageUrls.push(this.imageService.getSeriesCoverImage(this.series.id));
this.libraryService.getLibraryNames().pipe(takeUntil(this.onDestroy)).subscribe(names => {
this.libraryService.getLibraryNames().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(names => {
this.libraryName = names[this.series.libraryId];
});
this.initSeries = Object.assign({}, this.series);
this.editSeriesForm = this.fb.group({
@ -180,41 +188,41 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.cdRef.markForCheck();
this.editSeriesForm.get('name')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(val => {
this.editSeriesForm.get('name')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.series.nameLocked = true;
this.cdRef.markForCheck();
});
this.editSeriesForm.get('sortName')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(val => {
this.editSeriesForm.get('sortName')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.series.sortNameLocked = true;
this.cdRef.markForCheck();
});
this.editSeriesForm.get('localizedName')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(val => {
this.editSeriesForm.get('localizedName')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.series.localizedNameLocked = true;
this.cdRef.markForCheck();
});
this.editSeriesForm.get('summary')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(val => {
this.editSeriesForm.get('summary')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.metadata.summaryLocked = true;
this.metadata.summary = val;
this.cdRef.markForCheck();
});
this.editSeriesForm.get('ageRating')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(val => {
this.editSeriesForm.get('ageRating')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.metadata.ageRating = parseInt(val + '', 10);
this.metadata.ageRatingLocked = true;
this.cdRef.markForCheck();
});
this.editSeriesForm.get('publicationStatus')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(val => {
this.editSeriesForm.get('publicationStatus')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.metadata.publicationStatus = parseInt(val + '', 10);
this.metadata.publicationStatusLocked = true;
this.cdRef.markForCheck();
});
this.editSeriesForm.get('releaseYear')?.valueChanges.pipe(takeUntil(this.onDestroy)).subscribe(val => {
this.editSeriesForm.get('releaseYear')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(val => {
this.metadata.releaseYear = parseInt(val + '', 10);
this.metadata.releaseYearLocked = true;
this.cdRef.markForCheck();
@ -257,10 +265,6 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
});
}
ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}
setupTypeaheads() {
forkJoin([
@ -490,7 +494,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
.filter(v => v !== null && v !== '')
.join(',');
const apis = [
this.seriesService.updateMetadata(this.metadata, this.collectionTags)