Bugfix/UI fixes (#1645)

* Moved role selector to OnPush and made it so we disable all other roles when admin is selected.

* When there are no collections, don't point the user to the wiki unless they are an admin

* Fixed a bad piece of code for getPage in reader
This commit is contained in:
Joe Milazzo 2022-11-08 16:44:30 -05:00 committed by GitHub
parent 04b92b591c
commit c211f2d115
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 44 additions and 12 deletions

View File

@ -3,7 +3,7 @@
<li class="list-group-item" *ngFor="let role of selectedRoles; let i = index"> <li class="list-group-item" *ngFor="let role of selectedRoles; let i = index">
<div class="form-check"> <div class="form-check">
<input id="role-{{i}}" type="checkbox" attr.aria-label="Role {{role.data}}" class="form-check-input" <input id="role-{{i}}" type="checkbox" attr.aria-label="Role {{role.data}}" class="form-check-input"
[(ngModel)]="role.selected" name="role" (ngModelChange)="handleModelUpdate()"> [(ngModel)]="role.selected" [disabled]="role.disabled" name="role" (ngModelChange)="handleModelUpdate()">
<label attr.for="role-{{i}}" class="form-check-label">{{role.data}}</label> <label attr.for="role-{{i}}" class="form-check-label">{{role.data}}</label>
</div> </div>
</li> </li>

View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Member } from 'src/app/_models/member'; import { Member } from 'src/app/_models/member';
import { User } from 'src/app/_models/user'; import { User } from 'src/app/_models/user';
@ -8,7 +8,8 @@ import { MemberService } from 'src/app/_services/member.service';
@Component({ @Component({
selector: 'app-role-selector', selector: 'app-role-selector',
templateUrl: './role-selector.component.html', templateUrl: './role-selector.component.html',
styleUrls: ['./role-selector.component.scss'] styleUrls: ['./role-selector.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class RoleSelectorComponent implements OnInit { export class RoleSelectorComponent implements OnInit {
@ -23,9 +24,9 @@ export class RoleSelectorComponent implements OnInit {
@Output() selected: EventEmitter<string[]> = new EventEmitter<string[]>(); @Output() selected: EventEmitter<string[]> = new EventEmitter<string[]>();
allRoles: string[] = []; allRoles: string[] = [];
selectedRoles: Array<{selected: boolean, data: string}> = []; selectedRoles: Array<{selected: boolean, disabled: boolean, data: string}> = [];
constructor(public modal: NgbActiveModal, private accountService: AccountService, private memberService: MemberService) { } constructor(public modal: NgbActiveModal, private accountService: AccountService, private readonly cdRef: ChangeDetectorRef) { }
ngOnInit(): void { ngOnInit(): void {
this.accountService.getRoles().subscribe(roles => { this.accountService.getRoles().subscribe(roles => {
@ -36,8 +37,9 @@ export class RoleSelectorComponent implements OnInit {
roles = roles.filter(item => !bannedRoles.includes(item)); roles = roles.filter(item => !bannedRoles.includes(item));
this.allRoles = roles; this.allRoles = roles;
this.selectedRoles = roles.map(item => { this.selectedRoles = roles.map(item => {
return {selected: false, data: item}; return {selected: false, disabled: false, data: item};
}); });
this.cdRef.markForCheck();
this.preselect(); this.preselect();
this.selected.emit(this.selectedRoles.filter(item => item.selected).map(item => item.data)); this.selected.emit(this.selectedRoles.filter(item => item.selected).map(item => item.data));
}); });
@ -51,11 +53,25 @@ export class RoleSelectorComponent implements OnInit {
foundRole[0].selected = true; foundRole[0].selected = true;
} }
}); });
this.cdRef.markForCheck();
} }
} }
handleModelUpdate() { handleModelUpdate() {
this.selected.emit(this.selectedRoles.filter(item => item.selected).map(item => item.data)); const roles = this.selectedRoles.filter(item => item.selected).map(item => item.data);
if (roles.filter(r => r === 'Admin').length > 0) {
// Disable all other items as Admin is selected
this.selectedRoles.filter(item => item.data !== 'Admin').forEach(e => {
e.disabled = true;
});
} else {
// Re-enable everything
this.selectedRoles.forEach(e => {
e.disabled = false;
});
}
this.cdRef.markForCheck();
this.selected.emit(roles);
} }
} }

View File

@ -16,6 +16,7 @@
</ng-template> </ng-template>
<ng-template #noData> <ng-template #noData>
There are no collections. Try creating <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library/collections" rel="noopener noreferrer" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a>. There are no collections.
<ng-container *ngIf="isAdmin$ | async"> Try creating <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library/collections" rel="noopener noreferrer" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a></ng-container>
</ng-template> </ng-template>
</app-card-detail-layout> </app-card-detail-layout>

View File

@ -1,11 +1,14 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { map, of, Subject, takeUntil } from 'rxjs';
import { Observable } from 'rxjs/internal/Observable';
import { EditCollectionTagsComponent } from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component'; import { EditCollectionTagsComponent } from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component';
import { CollectionTag } from 'src/app/_models/collection-tag'; import { CollectionTag } from 'src/app/_models/collection-tag';
import { JumpKey } from 'src/app/_models/jumpbar/jump-key'; import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
import { Tag } from 'src/app/_models/tag'; import { Tag } from 'src/app/_models/tag';
import { AccountService } from 'src/app/_services/account.service';
import { ActionItem, ActionFactoryService, Action } from 'src/app/_services/action-factory.service'; import { ActionItem, ActionFactoryService, Action } from 'src/app/_services/action-factory.service';
import { CollectionTagService } from 'src/app/_services/collection-tag.service'; import { CollectionTagService } from 'src/app/_services/collection-tag.service';
import { ImageService } from 'src/app/_services/image.service'; import { ImageService } from 'src/app/_services/image.service';
@ -18,20 +21,23 @@ import { JumpbarService } from 'src/app/_services/jumpbar.service';
styleUrls: ['./all-collections.component.scss'], styleUrls: ['./all-collections.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class AllCollectionsComponent implements OnInit { export class AllCollectionsComponent implements OnInit, OnDestroy {
isLoading: boolean = true; isLoading: boolean = true;
collections: CollectionTag[] = []; collections: CollectionTag[] = [];
collectionTagActions: ActionItem<CollectionTag>[] = []; collectionTagActions: ActionItem<CollectionTag>[] = [];
jumpbarKeys: Array<JumpKey> = []; jumpbarKeys: Array<JumpKey> = [];
trackByIdentity = (index: number, item: CollectionTag) => `${item.id}_${item.title}`; trackByIdentity = (index: number, item: CollectionTag) => `${item.id}_${item.title}`;
isAdmin$: Observable<boolean> = of(false);
private readonly onDestroy = new Subject<void>();
filterOpen: EventEmitter<boolean> = new EventEmitter(); filterOpen: EventEmitter<boolean> = new EventEmitter();
constructor(private collectionService: CollectionTagService, private router: Router, constructor(private collectionService: CollectionTagService, private router: Router,
private actionFactoryService: ActionFactoryService, private modalService: NgbModal, private actionFactoryService: ActionFactoryService, private modalService: NgbModal,
private titleService: Title, private jumpbarService: JumpbarService, private titleService: Title, private jumpbarService: JumpbarService,
private readonly cdRef: ChangeDetectorRef, public imageSerivce: ImageService) { private readonly cdRef: ChangeDetectorRef, public imageSerivce: ImageService,
public accountService: AccountService) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false; this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.titleService.setTitle('Kavita - Collections'); this.titleService.setTitle('Kavita - Collections');
} }
@ -40,6 +46,15 @@ export class AllCollectionsComponent implements OnInit {
this.loadPage(); this.loadPage();
this.collectionTagActions = this.actionFactoryService.getCollectionTagActions(this.handleCollectionActionCallback.bind(this)); this.collectionTagActions = this.actionFactoryService.getCollectionTagActions(this.handleCollectionActionCallback.bind(this));
this.cdRef.markForCheck(); this.cdRef.markForCheck();
this.isAdmin$ = this.accountService.currentUser$.pipe(takeUntil(this.onDestroy), map(user => {
if (!user) return false;
return this.accountService.hasAdminRole(user);
}));
}
ngOnDestroy(): void {
this.onDestroy.next();
this.onDestroy.complete();
} }

View File

@ -614,7 +614,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
let img = this.cachedImages.find(img => this.readerService.imageUrlToPageNum(img.src) === pageNum); let img = this.cachedImages.find(img => this.readerService.imageUrlToPageNum(img.src) === pageNum);
if (!img || forceNew) { if (!img || forceNew) {
img = new Image(); img = new Image();
img.src = this.getPageUrl(this.pageNum, chapterId); img.src = this.getPageUrl(pageNum, chapterId);
} }
return img; return img;