mirror of
https://codeberg.org/beerbrawl/beerbrawl.git
synced 2024-09-23 01:30:52 +02:00
feat(#115): auto scroll to current matches
This commit is contained in:
parent
9b34494be0
commit
645940c389
|
@ -1,5 +1,6 @@
|
|||
@for (match of sortedQualificationMatches; track match.id) {
|
||||
<app-qualification-match-line
|
||||
#matchLineElement
|
||||
[match]="match"
|
||||
(onMatchUpdate)="onMatchUpdate.emit($event)"
|
||||
(markTeamDrinksPickedUp)="triggerMarkTeamDrinksPickedUp(match, $event)"
|
||||
|
|
|
@ -1,4 +1,13 @@
|
|||
import { Component, input, output } from '@angular/core';
|
||||
import {
|
||||
Component,
|
||||
computed,
|
||||
effect,
|
||||
ElementRef,
|
||||
input,
|
||||
output,
|
||||
QueryList,
|
||||
viewChildren,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
TeamDto,
|
||||
TournamentQualificationMatchDto,
|
||||
|
@ -20,10 +29,29 @@ export class QualificationMatchesComponent {
|
|||
tournamentId = input.required<number>();
|
||||
viewOnly = input<boolean>(false);
|
||||
teamDtos = input<Map<number, TeamDto>>(new Map());
|
||||
renderedRows = viewChildren<QueryList<ElementRef<HTMLTableRowElement>>>(
|
||||
'matchLineElement',
|
||||
// @ts-ignore - this is a bug in the typescript definitions
|
||||
{ read: ElementRef },
|
||||
);
|
||||
generateQualificationMatches = output();
|
||||
onMatchUpdate = output<TournamentQualificationMatchDto>();
|
||||
markTeamDrinksPickedUp = output<MarkTeamDrinksPickedUpDto>();
|
||||
|
||||
indexOfFirstPlayingMatch = computed(() => {
|
||||
return this.sortedQualificationMatches.findIndex(m => m.startTime && !m.endTime);
|
||||
});
|
||||
|
||||
scrollToRow = effect(() => {
|
||||
if (this.viewOnly() && this.renderedRows()?.length) {
|
||||
const index = Math.max(this.indexOfFirstPlayingMatch() - 4, 0);
|
||||
const row = (this.renderedRows() as ElementRef[])[index].nativeElement;
|
||||
if (row) {
|
||||
row.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
triggerMarkTeamDrinksPickedUp(
|
||||
match: TournamentQualificationMatchDto,
|
||||
participantDto: TournamentQualificationMatchParticipantDto,
|
||||
|
|
|
@ -27,5 +27,5 @@
|
|||
margin-left: var(--spacing2);
|
||||
margin-bottom: var(--spacing2);
|
||||
margin-top: var(--spacing2);
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue