myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-04-23 10:55:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Library] Add Infinite Scrolling

Browse Source 
Add infinite scrolling and fix selecting rows
This commit is contained in:
SocksOnHead
2025-05-04 16:45:21 +02:00
parent 35fd50c728
commit f0453a3daf
9 changed files with 127 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src-angular/app/components/library/library-table/library-table.component.html
View File

@@ -8,6 +8,7 @@
</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>
@@ -38,12 +39,7 @@
<tbody>
<tr *ngFor="let song of songs; trackBy: trackByFn">
<td>
<input
type="checkbox"
class="checkbox"
#inputBox
(change)="onCheckboxChange(song, $event.target!)"
[checked]="selectedSongs.includes(song)" />
<input type="checkbox" class="checkbox" #inputBox (change)="onCheckboxChange(song, $event.target!)" [checked]="rowIsSelected(song)" />
</td>
<td>{{ song.name }}</td>
<td>{{ song.artist }}</td>
@@ -53,8 +49,16 @@
</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">
<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>