Kavita/UI/Web/src/app/admin/library-selector/library-selector.component.html
Robbie Davis ff79710ac6
UX Overhaul Part 1 (#3047)
Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
2024-08-09 10:55:31 -07:00

42 lines
1.4 KiB
HTML

<ng-container *transloco="let t; read: 'library-selector'">
<div class="d-flex justify-content-between">
<div class="col-auto">
<h4>{{t('title')}}</h4>
</div>
<div class="col-auto">
@if(!isLoading && allLibraries.length > 0) {
<span class="form-check float-end">
<input id="select-all" type="checkbox" class="form-check-input"
[ngModel]="selectAll" (change)="toggleAll()" [indeterminate]="hasSomeSelected">
<label for="select-all" class="form-check-label">{{selectAll ? t('deselect-all') : t('select-all')}}</label>
</span>
}
</div>
</div>
@if (isLoading) {
<app-loading [loading]="isLoading"></app-loading>
} @else {
<div class="list-group">
<ul class="ps-0">
@for (library of allLibraries; track library.name; let i = $index) {
<li class="list-group-item">
<div class="form-check">
<input id="library-{{i}}" type="checkbox" class="form-check-input"
[ngModel]="selections.isSelected(library)" (change)="handleSelection(library)">
<label for="library-{{i}}" class="form-check-label">{{library.name}}</label>
</div>
</li>
} @empty {
<li class="list-group-item">
{{t('no-data')}}
</li>
}
</ul>
</div>
}
</ng-container>