f64f232e51
* Updated ngx-virtual-scroller * Removed the karma test config as it's breaking migration * Reverted to pre angular 15 * Upgraded packages and reverted target to ES6 for older devices * It's broken. Need to also find the safari version for old Ipads * Fixes some code in default pipe and many updates to packages. Removed support for old iOS versions as it restricted Kavita from using newer features. Build still broken. * More progress in getting build working on Angular 15. Removed polyfills.ts for new angular config * Remove all.css for icons and use scss instead * Removed stuff that isn't needed * Migrated extended linting to eslint, ran on project and updated issues. Removed a duplicate component that did nothing. Fixed a few places where lifecycle hooks werent being called as interface wasn't implemented. * App builds correctly. Source maps are still needed. * Fixed source maps and removed more testing stuff. I will re-add later in another release when I figure out how to properly tackle dependencies on backend. * Reverted back to old source map definition
166 lines
11 KiB
HTML
166 lines
11 KiB
HTML
<div class="modal-header">
|
|
<h4 class="modal-title" id="modal-basic-title">
|
|
<ng-container *ngIf="!isAddLibrary; else addLibraryTitle">
|
|
Edit {{library.name | sentenceCase}}
|
|
</ng-container>
|
|
<ng-template #addLibraryTitle>
|
|
Add Library
|
|
</ng-template>
|
|
</h4>
|
|
<button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
|
|
</div>
|
|
<form [formGroup]="libraryForm">
|
|
<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]="TabID.General">
|
|
<a ngbNavLink>{{TabID.General}}</a>
|
|
<ng-template ngbNavContent>
|
|
<div class="mb-3">
|
|
<label for="library-name" class="form-label">Name</label>
|
|
<input id="library-name" class="form-control" formControlName="name" type="text" [class.is-invalid]="libraryForm.get('name')?.invalid && libraryForm.get('name')?.touched">
|
|
<div id="inviteForm-validations" class="invalid-feedback" *ngIf="libraryForm.dirty || libraryForm.touched">
|
|
<div *ngIf="libraryForm.get('name')?.errors?.required">
|
|
This field is required
|
|
</div>
|
|
<div *ngIf="libraryForm.get('name')?.errors?.duplicateName">
|
|
Library name must be unique
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="library-type" class="form-label">Type</label> <i class="fa fa-info-circle" placement="right" [ngbTooltip]="typeTooltip" role="button" tabindex="0"></i>
|
|
<ng-template #typeTooltip>Library type determines how filenames are parsed and if the UI shows Chapters (Manga) vs Issues (Comics). Book work the same way as Manga but have different naming in the UI.</ng-template>
|
|
<span class="visually-hidden" id="library-type-help">Library type determines how filenames are parsed and if the UI shows Chapters (Manga) vs Issues (Comics). Book work the same way as Manga but have different naming in the UI.</span>
|
|
<select class="form-select" id="library-type" formControlName="type" aria-describedby="library-type-help">
|
|
<option [value]="i" *ngFor="let opt of libraryTypes; let i = index">{{opt}}</option>
|
|
</select>
|
|
</div>
|
|
<div *ngIf="!isAddLibrary">
|
|
Last Scanned:
|
|
<span *ngIf="library.lastScanned === '0001-01-01T00:00:00'; else activeDate">Never</span>
|
|
<ng-template #activeDate>
|
|
{{library.lastScanned | date: 'short'}}
|
|
</ng-template>
|
|
</div>
|
|
</ng-template>
|
|
</li>
|
|
|
|
|
|
<li [ngbNavItem]="TabID.Folder" [disabled]="isAddLibrary && setupStep < 1">
|
|
<a ngbNavLink>{{TabID.Folder}}</a>
|
|
<ng-template ngbNavContent>
|
|
<p>Add folders to your library</p>
|
|
<ul class="list-group" style="width: 100%">
|
|
<li class="list-group-item" *ngFor="let folder of selectedFolders; let i = index">
|
|
{{folder}}
|
|
<button class="btn float-end btn-sm" (click)="removeFolder(folder)"><i class="fa fa-times-circle" aria-hidden="true"></i></button>
|
|
</li>
|
|
</ul>
|
|
<div class="row mt-2">
|
|
<button class="btn btn-secondary float-end btn-sm" (click)="openDirectoryPicker()">
|
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
|
Browse for Media Folders
|
|
</button>
|
|
</div>
|
|
<div class="row mt-2">
|
|
<p>Help us out by following <a href="https://wiki.kavitareader.com/en/guides/managing-your-files" rel="noopener noreferrer" target="_blank" referrerpolicy="no-refer">our guide</a> to naming and organizing your media.</p>
|
|
</div>
|
|
<div class="row mt-2">
|
|
<p>Kavita has <a href="https://wiki.kavitareader.com/en/guides/managing-your-files/scanner#introduction" rel="noopener noreferrer" target="_blank" referrerpolicy="no-refer">folder requirements</a>. Check this link to ensure you are following, else files my not show up in scan.</p>
|
|
</div>
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="TabID.Cover" [disabled]="isAddLibrary && setupStep < 2">
|
|
<a ngbNavLink>{{TabID.Cover}}</a>
|
|
<ng-template ngbNavContent>
|
|
<p *ngIf="isAddLibrary" class="alert alert-secondary" role="alert">Custom library image icons are optional</p>
|
|
<p>Library image should not be large. Aim for a small file, 32x32 pixels in size. Kavita does not perform validation on size.</p>
|
|
<app-cover-image-chooser [(imageUrls)]="imageUrls"
|
|
[showReset]="false"
|
|
[showApplyButton]="true"
|
|
(applyCover)="applyCoverImage($event)"
|
|
(resetCover)="resetCoverImage()"
|
|
>
|
|
</app-cover-image-chooser>
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="TabID.Advanced" [disabled]="isAddLibrary && setupStep < 3">
|
|
<a ngbNavLink>{{TabID.Advanced}}</a>
|
|
<ng-template ngbNavContent>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="lib-folder-watching" role="switch" formControlName="folderWatching" class="form-check-input" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="lib-folder-watching">Folder Watching</label>
|
|
</div>
|
|
</div>
|
|
<p class="accent">
|
|
Override Server folder watching for this library. If off, folder watching won't run on the folders this library contains. If libraries share folders, then folders may still be ran against.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="include-dashboard" role="switch" formControlName="includeInDashboard" class="form-check-input" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="include-dashboard">Include in Dashboard</label>
|
|
</div>
|
|
</div>
|
|
<p class="accent">
|
|
Should series from the library be included on the Dashboard. This affects all streams, like On Deck, Recently Updated, Recently Added, or any custom additions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="include-recommended" role="switch" formControlName="includeInRecommended" class="form-check-input" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="include-recommended">Include in Recommended</label>
|
|
</div>
|
|
</div>
|
|
<p class="accent">
|
|
Should series from the library be included on the Recommended page.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-2">
|
|
<div class="mb-3 mt-1">
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" id="include-search" role="switch" formControlName="includeInSearch" class="form-check-input" aria-labelledby="auto-close-label">
|
|
<label class="form-check-label" for="include-search">Include in Search</label>
|
|
</div>
|
|
</div>
|
|
<p class="accent">
|
|
Should series and any derived information (genres, people, files) from the library be included in search results.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</li>
|
|
</ul>
|
|
|
|
<div [ngbNavOutlet]="nav" class="tab-content {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'mt-3' : 'ms-4 flex-fill'}}"></div>
|
|
</div>
|
|
</form>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light" (click)="forceScan()" position="above" ngbTooltip="This will force a scan on the library, treating like a fresh scan">Force Scan</button>
|
|
<button type="button" class="btn btn-light" (click)="reset()">Reset</button>
|
|
<button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
|
|
|
|
<ng-container *ngIf="isAddLibrary && setupStep !== 3; else editLibraryButton">
|
|
<button type="button" class="btn btn-primary" (click)="nextStep()" [disabled]="isNextDisabled() || libraryForm.invalid">Next</button>
|
|
</ng-container>
|
|
<ng-template #editLibraryButton>
|
|
<button type="button" class="btn btn-primary" [disabled]="isDisabled()" (click)="save()">Save</button>
|
|
</ng-template>
|
|
</div>
|