03112d3f8f
* Implemented a basic version of enhanced search where we can return multiple types of entities in one go. Current unoptimized version is twice as expensive as normal search, but under NFR. Currently 200ms max. * Worked in some basic code for grouped typeahead search component. Keyboard navigation is working. * Most of the code is in place for the typeahead. Needs css work and some accessibility work. * Hooked up filtering into all-series. Added debouncing on search, clear input field now works. Some optimizations related to memory cleanup * Added ability to define a custom placeholder * Hooked in noResults template and logic * Fixed a duplicate issue in Collection tag searching and commented out old code. OPDS still needs some updates. * Don't trigger inputChanged when reopening/clicking on input. * Added Reading list to OPDS search * Added a new image component so all the images can be lazyloaded without logic duplication * Added a maxWidth/Height on the image component * Search css update * cursor fixes * card changes - fixing border radius on cards - adding bottom card color * Expose intenral state of if the search component has focus * Adjusted the accessibility to not use complex keys and just use tab instead since this is a search, not a typeahead * Cleaned up dead code, removed angular-ng-complete library as it's no longer used. * Fixes for mobile search * Merged code * Fixed a bad merge and some nav bar styling * Cleaned up the focus code for nav bar * Removed focusIndex and just use hover state. Fixed clicking on items * fixing overlay overlap issue Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
164 lines
9.4 KiB
HTML
164 lines
9.4 KiB
HTML
<div *ngIf="series !== undefined">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
{{this.series.name}} Details</h4>
|
|
<button type="button" class="close" aria-label="Close" (click)="close()">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
|
|
|
|
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
|
|
<li [ngbNavItem]="tabs[0]">
|
|
<a ngbNavLink>{{tabs[0]}}</a>
|
|
<ng-template ngbNavContent>
|
|
<form [formGroup]="editSeriesForm">
|
|
<div class="row no-gutters">
|
|
<div class="form-group" style="width: 100%">
|
|
<label for="name">Name</label>
|
|
<input id="name" class="form-control" formControlName="name" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row no-gutters">
|
|
<div class="form-group" style="width: 100%">
|
|
<label for="sort-name">Sort Name</label>
|
|
<input id="sort-name" class="form-control" formControlName="sortName" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row no-gutters">
|
|
<div class="form-group" style="width: 100%">
|
|
<label for="localized-name">Localized Name</label>
|
|
<input id="localized-name" class="form-control" formControlName="localizedName" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row no-gutters" *ngIf="metadata">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="author">Author</label>
|
|
<input id="author" class="form-control" placeholder="Not Implemented" readonly="true" formControlName="author" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="artist">Artist</label>
|
|
<input id="artist" class="form-control" placeholder="Not Implemented" readonly="true" formControlName="artist" type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row no-gutters" *ngIf="metadata">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="genres">Genres</label>
|
|
<input id="genres" class="form-control" placeholder="Not Implemented" readonly="true" formControlName="genres" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="collections">Collections</label>
|
|
<app-typeahead (selectedData)="updateCollections($event)" [settings]="settings">
|
|
<ng-template #badgeItem let-item let-position="idx">
|
|
{{item.title}}
|
|
</ng-template>
|
|
<ng-template #optionItem let-item let-position="idx">
|
|
{{item.title}}
|
|
</ng-template>
|
|
</app-typeahead>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row no-gutters">
|
|
<div class="form-group" style="width: 100%">
|
|
<label for="summary">Summary</label>
|
|
<textarea id="summary" class="form-control" formControlName="summary" rows="4"></textarea>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</ng-template>
|
|
</li>
|
|
<li [ngbNavItem]="tabs[1]">
|
|
<a ngbNavLink>{{tabs[1]}}</a>
|
|
<ng-template ngbNavContent>
|
|
<p class="alert alert-primary" role="alert">
|
|
Upload and choose a new cover image. Press Save to upload and override the cover.
|
|
</p>
|
|
<app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateSelectedIndex($event)" (selectedBase64Url)="updateSelectedImage($event)" [showReset]="series.coverImageLocked" (resetClicked)="handleReset()"></app-cover-image-chooser>
|
|
</ng-template>
|
|
</li>
|
|
<li [ngbNavItem]="tabs[2]">
|
|
<a ngbNavLink>{{tabs[2]}}</a>
|
|
<ng-template ngbNavContent>
|
|
<h4>Information</h4>
|
|
<div class="row no-gutters mb-2">
|
|
<div class="col-md-6" *ngIf="libraryName">Library: {{libraryName | sentenceCase}}</div>
|
|
<div class="col-md-6">Format: <app-tag-badge>{{utilityService.mangaFormat(series.format)}}</app-tag-badge></div>
|
|
</div>
|
|
<h4>Volumes</h4>
|
|
<div class="spinner-border text-secondary" role="status" *ngIf="isLoadingVolumes">
|
|
<span class="invisible">Loading...</span>
|
|
</div>
|
|
<ul class="list-unstyled" *ngIf="!isLoadingVolumes">
|
|
<li class="media my-4" *ngFor="let volume of seriesVolumes">
|
|
<app-image class="mr-3" style="width: 74px;" width="74px" [imageUrl]="imageService.getVolumeCoverImage(volume.id)"></app-image>
|
|
<div class="media-body">
|
|
<h5 class="mt-0 mb-1">Volume {{volume.name}}</h5>
|
|
<div>
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
Added: {{volume.created | date: 'short'}}
|
|
</div>
|
|
<div class="col">
|
|
Last Modified: {{volume.lastModified | date: 'short'}}
|
|
</div>
|
|
</div>
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
<button type="button" class="btn btn-outline-primary" (click)="collapse.toggle()" [attr.aria-expanded]="!volumeCollapsed[volume.name]">
|
|
View Files
|
|
</button>
|
|
</div>
|
|
<div class="col">
|
|
Pages: {{volume.pages}}
|
|
</div>
|
|
</div>
|
|
|
|
<div #collapse="ngbCollapse" [(ngbCollapse)]="volumeCollapsed[volume.name]">
|
|
<ul class="list-group mt-2">
|
|
<li *ngFor="let file of volume.volumeFiles.sort()" class="list-group-item">
|
|
<span>{{file.filePath}}</span>
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
Chapter: {{file.chapter}}
|
|
</div>
|
|
<div class="col">
|
|
Pages: {{file.pages}}
|
|
</div>
|
|
<div class="col">
|
|
Format: <span class="badge badge-secondary">{{utilityService.mangaFormatToText(file.format)}}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</ng-template>
|
|
</li>
|
|
</ul>
|
|
|
|
<div [ngbNavOutlet]="nav" class="tab-content {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'mt-3' : 'ml-4 flex-fill'}}"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" (click)="close()">Close</button>
|
|
<button type="submit" class="btn btn-primary" (click)="save()">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
|