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

Angular 14 (#1420)

Browse source 
* Updated to Angular 14

* Fixed all new tslint issues

* Fixed a routing bug for Angular 14

* Updated ngBootstrap and bootstrap. Fixed side nav item not highlighting on route change

* Refactored how default dark styles are done

* Migrated everything to a typed form

* Bump versions by dotnet-bump-version.

* Fixed a regression where click areas need an explicit z-index

* Cleanup some css

* Bumped docnet back to the alpha which has our downstream fixes

* Updated dependencies to later versions. Mainly just NetVips with some archive fixes.

* Fixed broken unit tests (due to some fixes in SharpCompress that changed byte arrays, but not visible quality)
This commit is contained in:
Joseph Milazzo 2022-08-09 08:02:41 -05:00 • committed by GitHub
parent 01e874150e
commit b38a26f92b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
71 changed files with 4638 additions and 835 deletions
Download patch file Download diff file Expand all files Collapse all files

8
UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts
View file

@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { ReadingList } from 'src/app/_models/reading-list';
@ -56,7 +56,7 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
*/
lists: Array<any> = [];
loading: boolean = false;
listForm: FormGroup = new FormGroup({});
listForm: UntypedFormGroup = new UntypedFormGroup({});
@ViewChild('title') inputElem!: ElementRef<HTMLInputElement>;
@ -65,8 +65,8 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
this.listForm.addControl('title', new FormControl(this.title, []));
this.listForm.addControl('filterQuery', new FormControl('', []));
this.listForm.addControl('title', new UntypedFormControl(this.title, []));
this.listForm.addControl('filterQuery', new UntypedFormControl('', []));
this.loading = true;
this.readingListService.getReadingLists(false).subscribe(lists => {

2
UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html
View file

@ -9,7 +9,7 @@
<a ngbNavLink>{{tabs[0].title}}</a>
<ng-template ngbNavContent>
<p>
This list is currently {{readingList?.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>).
This list is currently {{readingList.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>).
Promotion means that the list can be seen server-wide, not just for admin users. All series that are within this list will still have user-access restrictions placed on them.
</p>
<form [formGroup]="reviewGroup">

10
UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.ts
View file

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { forkJoin } from 'rxjs';
@ -18,7 +18,7 @@ import { UploadService } from 'src/app/_services/upload.service';
export class EditReadingListModalComponent implements OnInit {
@Input() readingList!: ReadingList;
reviewGroup!: FormGroup;
reviewGroup!: UntypedFormGroup;
coverImageIndex: number = 0;
/**
@ -41,9 +41,9 @@ export class EditReadingListModalComponent implements OnInit {
private imageService: ImageService) { }
ngOnInit(): void {
this.reviewGroup = new FormGroup({
title: new FormControl(this.readingList.title, [Validators.required]),
summary: new FormControl(this.readingList.summary, [])
this.reviewGroup = new UntypedFormGroup({
title: new UntypedFormControl(this.readingList.title, [Validators.required]),
summary: new UntypedFormControl(this.readingList.summary, [])
});
this.imageUrls.push(this.imageService.randomize(this.imageService.getReadingListCoverImage(this.readingList.id)));

4
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html
View file

@ -1,7 +1,7 @@
<app-side-nav-companion-bar>
<h2 title>
<span *ngIf="actions.length > 0">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="readingList.title"></app-card-actionables>
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [attr.labelBy]="readingList?.title"></app-card-actionables>
</span>
{{readingList?.title}}
<span *ngIf="readingList?.promoted" class="ms-1">(<i class="fa fa-angle-double-up" aria-hidden="true"></i>)</span>
@ -26,7 +26,7 @@
</button>
</div>
<div class="col-auto">
<button class="btn btn-secondary" (click)="removeRead()" [disabled]="readingList?.promoted && !this.isAdmin">
<button class="btn btn-secondary" (click)="removeRead()" [disabled]="readingList.promoted && !this.isAdmin">
<span>
<i class="fa fa-check"></i>
</span>

7
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts
View file

@ -26,7 +26,7 @@ import { ReaderService } from 'src/app/_services/reader.service';
export class ReadingListDetailComponent implements OnInit {
items: Array<ReadingListItem> = [];
listId!: number;
readingList!: ReadingList;
readingList: ReadingList | undefined;
actions: Array<ActionItem<any>> = [];
isAdmin: boolean = false;
isLoading: boolean = false;
@ -115,6 +115,7 @@ export class ReadingListDetailComponent implements OnInit {
readChapter(item: ReadingListItem) {
let reader = 'manga';
if (!this.readingList) return;
if (item.seriesFormat === MangaFormat.EPUB) {
reader = 'book;'
}
@ -148,10 +149,12 @@ export class ReadingListDetailComponent implements OnInit {
}
orderUpdated(event: IndexUpdateEvent) {
if (!this.readingList) return;
this.readingListService.updatePosition(this.readingList.id, event.item.id, event.fromPosition, event.toPosition).subscribe(() => { /* No Operation */ });
}
itemRemoved(event: ItemRemoveEvent) {
if (!this.readingList) return;
this.readingListService.deleteItem(this.readingList.id, event.item.id).subscribe(() => {
this.items.splice(event.position, 1);
this.cdRef.markForCheck();
@ -160,6 +163,7 @@ export class ReadingListDetailComponent implements OnInit {
}
removeRead() {
if (!this.readingList) return;
this.isLoading = true;
this.cdRef.markForCheck();
this.readingListService.removeRead(this.readingList.id).subscribe((resp) => {
@ -173,6 +177,7 @@ export class ReadingListDetailComponent implements OnInit {
read() {
// TODO: Can I do this in the backend?
if (!this.readingList) return;
let currentlyReadingChapter = this.items[0];
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].pagesRead >= this.items[i].pagesTotal) {

2
UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html
View file

@ -2,7 +2,7 @@
<h2 title>
Reading Lists
</h2>
<h6 subtitle>{{pagination?.totalItems}} Items</h6>
<h6 subtitle *ngIf="pagination">{{pagination.totalItems}} Items</h6>
</app-side-nav-companion-bar>
<app-card-detail-layout