Replace signal propagation

server/application-server/src/main/resources/application-prod.yml

@@ -14,7 +14,7 @@ spring:
       password: ${SECURITY_USER_PASSWORD}
 
 monitoring:
-  repositories: ls1intum/Artemis
+  repositories: ls1intum/Artemis, ls1intum/Athena, ls1intum/Hephaestus, ls1intum/Pyris, ls1intum/Ares2, ls1intum/Aeolus, ls1intum/hades, ls1intum/Apollon, ls1intum/Apollon_standalone
 
 github:
   authToken: ${GITHUB_AUTH_TOKEN}

webapp/src/app/home/home.component.html

@@ -2,7 +2,7 @@
   <h1 class="text-3xl font-bold mb-4">Artemis Leaderboard</h1>
   <div class="grid grid-cols-1 xl:grid-cols-4 gap-4 place-content-center">
     <div class="w-full flex flex-col items-center">
-      <app-leaderboard-filter [after]="after()" [before]="before()" />
+      <app-leaderboard-filter />
     </div>
     <div class="xl:col-span-2 flex flex-col items-center gap-4">
       @if (query.error()) {

webapp/src/app/home/home.component.ts

@@ -24,12 +24,6 @@ export class HomeComponent {
   protected before = computed(() => this.queryParams().get('before') ?? dayjs().format('YYYY-MM-DD'));
   protected repository = computed(() => this.queryParams().get('repository') ?? 'all');
 
-  constructor() {
-    effect(() => {
-      console.log('HomeComponent: effect: ', this.repository());
-    });
-  }
-
   query = injectQuery(() => ({
     queryKey: ['leaderboard', { after: this.after(), before: this.before(), repository: this.repository() }],
     queryFn: async () =>

webapp/src/app/home/leaderboard/filter/filter.component.html

@@ -4,7 +4,7 @@
     <h3 class="text-base font-semibold tracking-wide">Filter</h3>
   </span>
   <form ngForm class="flex xl:flex-col gap-4">
-    <app-leaderboard-filter-timeframe [after]="after()" [before]="before()" />
+    <app-leaderboard-filter-timeframe />
     <app-leaderboard-filter-repository />
   </form>
 </div>

webapp/src/app/home/leaderboard/filter/filter.component.ts

@@ -12,6 +12,4 @@ import { LeaderboardFilterRepositoryComponent } from './repository/repository.co
 })
 export class LeaderboardFilterComponent {
   protected ListFilter = ListFilter;
-  after = input<string>('');
-  before = input<string>('');
 }

webapp/src/app/home/leaderboard/filter/repository/repository.component.ts

@@ -1,11 +1,10 @@
-import { Component, computed, effect, input, signal } from '@angular/core';
+import { Component, computed, effect, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { BrnSelectModule } from '@spartan-ng/ui-select-brain';
 import { HlmSelectModule } from '@spartan-ng/ui-select-helm';
 import { HlmLabelModule } from '@spartan-ng/ui-label-helm';
 
-// ls1intum/Artemis, ls1intum/Pyris, ls1intum/Athena, ls1intum/Athena-CoFee, ls1intum/artemis-ansible-collection, ls1intum/Ares, ls1intum/Ares2, ls1intum/Aeolus, ls1intum/hades, ls1intum/Apollon, ls1intum/Hephaestus, ls1intum/Apollon_standalone
 export const repositoryNames = [
   'ls1intum/Artemis',
   'ls1intum/Athena',
@@ -55,8 +54,8 @@ export class LeaderboardFilterRepositoryComponent {
 
   constructor(private router: Router) {
     this.value.set(this.router.parseUrl(this.router.url).queryParams['repository'] ?? 'all');
+
     effect(() => {
-      console.log('LeaderboardFilterRepositoryComponent: effect: ', this.value());
       if (!this.value() || this.value() === '') return;
       const queryParams = this.router.parseUrl(this.router.url).queryParams;
       if (this.value() === 'all') {

webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, input, signal } from '@angular/core';
+import { Component, computed, effect, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import dayjs from 'dayjs';
@@ -17,7 +17,7 @@ dayjs.extend(weekOfYear);
 
 function formatLabel(startDate: dayjs.Dayjs, endDate: dayjs.Dayjs | undefined) {
   const calendarWeek = startDate.week();
-  if (!endDate) {
+  if (!endDate || endDate.isSame(dayjs(), 'day')) {
     return `CW\xa0${calendarWeek}:\xa0${startDate.format('MMM D')}\xa0-\xa0Today`;
   }
 
@@ -36,9 +36,8 @@ function formatLabel(startDate: dayjs.Dayjs, endDate: dayjs.Dayjs | undefined) {
   templateUrl: './timeframe.component.html'
 })
 export class LeaderboardFilterTimeframeComponent {
-  after = input<string>('');
-  before = input<string>('');
-
+  after = signal<string>('');
+  before = signal<string>('');
   value = signal<string>(`${this.after()}.${this.before()}`);
 
   placeholder = computed(() => {
@@ -71,6 +70,12 @@ export class LeaderboardFilterTimeframeComponent {
   });
 
   constructor(private router: Router) {
+    // init params
+    const queryParams = this.router.parseUrl(this.router.url).queryParams;
+    this.after.set(queryParams['after'] ?? dayjs().day(1).format('YYYY-MM-DD'));
+    this.before.set(queryParams['before'] ?? dayjs().format('YYYY-MM-DD'));
+
+    // persist changes in url
     effect(() => {
       if (this.value().length === 1) return;
 

webapp/src/app/home/leaderboard/leaderboard.component.html

@@ -28,6 +28,15 @@
           </td>
         </tr>
       }
+    } @else if (!leaderboard() || leaderboard()?.length === 0) {
+      <tr appTableRow>
+        <td appTableCell colspan="4">
+          <div class="flex flex-col items-center justify-center gap-2 mt-1">
+            <ng-icon [svg]="octNoEntry" size="32" class="text-github-danger-foreground" />
+            <span class="font-semibold text-muted-foreground">No entries found</span>
+          </div>
+        </td>
+      </tr>
     } @else {
       @for (entry of leaderboard(); track entry.githubName) {
         <tr appTableRow>

webapp/src/app/home/leaderboard/leaderboard.component.ts

@@ -1,6 +1,6 @@
 import { Component, input } from '@angular/core';
 import { NgIconComponent } from '@ng-icons/core';
-import { octFileDiff, octCheck, octComment, octGitPullRequest, octChevronLeft } from '@ng-icons/octicons';
+import { octFileDiff, octCheck, octComment, octGitPullRequest, octChevronLeft, octNoEntry } from '@ng-icons/octicons';
 import { LeaderboardEntry } from 'app/core/modules/openapi';
 import { TableBodyDirective } from 'app/ui/table/table-body.directive';
 import { TableCaptionDirective } from 'app/ui/table/table-caption.directive';
@@ -37,6 +37,7 @@ export class LeaderboardComponent {
   protected octComment = octComment;
   protected octGitPullRequest = octGitPullRequest;
   protected octChevronLeft = octChevronLeft;
+  protected octNoEntry = octNoEntry;
 
   protected Math = Math;
   protected Array = Array;