mirror of
https://github.com/Kareadita/Kavita.git
synced 2025-06-11 01:24:14 -04:00
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:
parent
04b92b591c
commit
c211f2d115
@ -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>
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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 <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 <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>
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user