mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-04-23 10:55:07 +00:00
65 lines
2.9 KiB
HTML
65 lines
2.9 KiB
HTML
<div class="collapse navbar grid bg-base-100 overflow-visible rounded-none border-t-base-200 border-t">
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
class="input input-bordered pr-14 ng-pristine ng-valid ng-touched"
|
|
[(ngModel)]="searchTerm"
|
|
(keyup)="filterSongs()" />
|
|
</div>
|
|
<div
|
|
*ngIf="songs.length > 0"
|
|
(scroll)="onScroll($event)"
|
|
class="basis-2/3 flex-1 overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full h-[calc(100vh-164px)]">
|
|
<table id="resultTable" class="table table-zebra table-pin-rows" [class.table-xs]="settingsService.isCompactTable">
|
|
<thead>
|
|
<tr>
|
|
<th class="collapsing" id="checkboxColumn">
|
|
<button type="button" class="btn btn-sm min-w-[108px] hover:btn-primary" (click)="toggleSelectAll()">
|
|
{{ allRowsSelected ? 'Deselect All' : 'Select All' }}
|
|
</button>
|
|
</th>
|
|
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('name')">
|
|
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
|
|
</th>
|
|
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('artist')">
|
|
Artist
|
|
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
|
|
</th>
|
|
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('album')">
|
|
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
|
|
</th>
|
|
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('genre')">
|
|
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
|
|
</th>
|
|
<th [ngClass]="sortDirection" class="cursor-pointer" (click)="onColClicked('year')">
|
|
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'asc' ? 'down' : 'up' }}-fill"></i>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let song of songs; trackBy: trackByFn">
|
|
<td>
|
|
<input type="checkbox" class="checkbox" #inputBox (change)="onCheckboxChange(song, $event.target!)" [checked]="rowIsSelected(song)" />
|
|
</td>
|
|
<td>{{ song.name }}</td>
|
|
<td>{{ song.artist }}</td>
|
|
<td>{{ song.album || 'Various' }}</td>
|
|
<td>{{ song.genre || 'Various' }}</td>
|
|
<td>{{ song.year || 'Various' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div *ngIf="isLoading" class="text-center py-4">Loading...</div>
|
|
</div>
|
|
|
|
<div class="flex align-center justify-center items-center h-[calc(100vh-169.5px)]" *ngIf="songs.length < 1 && !hasSearched">
|
|
<p class="text-center" style="font-size: 1.5rem">No songs added!</p>
|
|
</div>
|
|
|
|
<div
|
|
class="align-center h-[calc(100vh-169.5px)]"
|
|
*ngIf="songs.length < 1 && hasSearched"
|
|
style="display: flex; justify-content: center; align-items: center">
|
|
<p class="text-center" style="font-size: 1.5rem">No songs found!</p>
|
|
</div>
|