mirror of
https://codeberg.org/beerbrawl/beerbrawl.git
synced 2024-09-23 05:40:51 +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) {
|
@for (match of sortedQualificationMatches; track match.id) {
|
||||||
<app-qualification-match-line
|
<app-qualification-match-line
|
||||||
|
#matchLineElement
|
||||||
[match]="match"
|
[match]="match"
|
||||||
(onMatchUpdate)="onMatchUpdate.emit($event)"
|
(onMatchUpdate)="onMatchUpdate.emit($event)"
|
||||||
(markTeamDrinksPickedUp)="triggerMarkTeamDrinksPickedUp(match, $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 {
|
import {
|
||||||
TeamDto,
|
TeamDto,
|
||||||
TournamentQualificationMatchDto,
|
TournamentQualificationMatchDto,
|
||||||
|
@ -20,10 +29,29 @@ export class QualificationMatchesComponent {
|
||||||
tournamentId = input.required<number>();
|
tournamentId = input.required<number>();
|
||||||
viewOnly = input<boolean>(false);
|
viewOnly = input<boolean>(false);
|
||||||
teamDtos = input<Map<number, TeamDto>>(new Map());
|
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();
|
generateQualificationMatches = output();
|
||||||
onMatchUpdate = output<TournamentQualificationMatchDto>();
|
onMatchUpdate = output<TournamentQualificationMatchDto>();
|
||||||
markTeamDrinksPickedUp = output<MarkTeamDrinksPickedUpDto>();
|
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(
|
triggerMarkTeamDrinksPickedUp(
|
||||||
match: TournamentQualificationMatchDto,
|
match: TournamentQualificationMatchDto,
|
||||||
participantDto: TournamentQualificationMatchParticipantDto,
|
participantDto: TournamentQualificationMatchParticipantDto,
|
||||||
|
|
|
@ -27,5 +27,5 @@
|
||||||
margin-left: var(--spacing2);
|
margin-left: var(--spacing2);
|
||||||
margin-bottom: var(--spacing2);
|
margin-bottom: var(--spacing2);
|
||||||
margin-top: var(--spacing2);
|
margin-top: var(--spacing2);
|
||||||
overflow-y: auto;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue