From c4b9271243dd7fb2aa987c63fe6d3857f44e7174 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Fri, 4 Oct 2024 00:25:01 +0200
Subject: [PATCH] fix filter

---
 .../leaderboard/filter/filter.component.html  | 24 +++++----
 .../leaderboard/filter/filter.component.ts    | 54 ++++++++++---------
 .../leaderboard/leaderboard.component.html    |  8 +--
 3 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/webapp/src/app/home/leaderboard/filter/filter.component.html b/webapp/src/app/home/leaderboard/filter/filter.component.html
index c449c817..e0acb284 100644
--- a/webapp/src/app/home/leaderboard/filter/filter.component.html
+++ b/webapp/src/app/home/leaderboard/filter/filter.component.html
@@ -3,15 +3,17 @@
     <lucide-angular [img]="ListFilter" class="size-4" />
     <h3 class="text-base font-semibold tracking-wide">Filter</h3>
   </span>
-  <hlm-select [placeholder]="placeholder()">
-    <label hlmLabel>Select week</label>
-    <hlm-select-trigger class="w-56">
-      <hlm-select-value />
-    </hlm-select-trigger>
-    <hlm-select-content class="w-56">
-      @for (option of options(); track option.id) {
-        <hlm-option [value]="option.value" (selectChange)="onSelectChange($event)">{{ option.label }}</hlm-option>
-      }
-    </hlm-select-content>
-  </hlm-select>
+  <form ngForm>
+    <hlm-select [placeholder]="placeholder()" [(ngModel)]="value" name="value">
+      <label hlmLabel>Select week</label>
+      <hlm-select-trigger class="w-56">
+        <hlm-select-value />
+      </hlm-select-trigger>
+      <hlm-select-content class="w-56">
+        @for (option of options(); track option.id) {
+          <hlm-option [value]="option.value">{{ option.label }}</hlm-option>
+        }
+      </hlm-select-content>
+    </hlm-select>
+  </form>
 </div>
diff --git a/webapp/src/app/home/leaderboard/filter/filter.component.ts b/webapp/src/app/home/leaderboard/filter/filter.component.ts
index 6c8b5d48..255205eb 100644
--- a/webapp/src/app/home/leaderboard/filter/filter.component.ts
+++ b/webapp/src/app/home/leaderboard/filter/filter.component.ts
@@ -1,4 +1,5 @@
-import { Component, input, signal } from '@angular/core';
+import { Component, computed, effect, input, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
@@ -32,7 +33,7 @@ function formatLabel(startDate: dayjs.Dayjs, endDate: dayjs.Dayjs | undefined) {
 @Component({
   selector: 'app-leaderboard-filter',
   standalone: true,
-  imports: [RouterLink, LucideAngularModule, BrnSelectModule, HlmSelectModule, HlmLabelModule],
+  imports: [RouterLink, LucideAngularModule, BrnSelectModule, HlmSelectModule, HlmLabelModule, FormsModule],
   templateUrl: './filter.component.html'
 })
 export class LeaderboardFilterComponent {
@@ -40,21 +41,22 @@ export class LeaderboardFilterComponent {
   after = input<string>();
   before = input<string>();
 
-  options = signal<SelectOption[]>([]);
-  placeholder = signal<string>('Select a timeframe');
+  value = signal<string>(`${this.after() ?? dayjs().day(1).format('YYYY-MM-DD')}.${this.before() ?? dayjs().format('YYYY-MM-DD')}`);
 
-  constructor(private router: Router) {
-    // get monday - sunday of last 4 weeks
-    const options = new Array<SelectOption>();
+  placeholder = computed(() => {
+    return formatLabel(dayjs(this.after()) ?? dayjs().day(1), this.before() === undefined ? undefined : dayjs(this.before()));
+  });
+
+  options = computed(() => {
     const now = dayjs();
     let currentDate = dayjs().day(1);
-    options.push({
-      id: now.unix(),
-      value: `${currentDate.format('YYYY-MM-DD')}.${now.format('YYYY-MM-DD')}`,
-      label: formatLabel(currentDate, undefined)
-    });
-
-    this.placeholder.set(formatLabel(currentDate, undefined));
+    const options: SelectOption[] = [
+      {
+        id: now.unix(),
+        value: `${currentDate.format('YYYY-MM-DD')}.${now.format('YYYY-MM-DD')}`,
+        label: formatLabel(currentDate, undefined)
+      }
+    ];
 
     for (let i = 0; i < 4; i++) {
       const startDate = currentDate.subtract(7, 'day');
@@ -66,18 +68,20 @@ export class LeaderboardFilterComponent {
       });
       currentDate = startDate;
     }
-    this.options.set(options);
-  }
 
-  onSelectChange(event: Event) {
-    const value = (event.target as HTMLSelectElement).value;
-    const dates = value.split('.');
-    // change query params
-    this.router.navigate([], {
-      queryParams: {
-        after: dates[0],
-        before: dates[1]
-      }
+    return options;
+  });
+
+  constructor(private router: Router) {
+    effect(() => {
+      const dates = this.value().split('.');
+      // change query params
+      this.router.navigate([], {
+        queryParams: {
+          after: dates[0],
+          before: dates[1]
+        }
+      });
     });
   }
 }
diff --git a/webapp/src/app/home/leaderboard/leaderboard.component.html b/webapp/src/app/home/leaderboard/leaderboard.component.html
index 98e8b9de..3318e303 100644
--- a/webapp/src/app/home/leaderboard/leaderboard.component.html
+++ b/webapp/src/app/home/leaderboard/leaderboard.component.html
@@ -9,7 +9,7 @@
   </thead>
   <tbody appTableBody>
     @if (isLoading()) {
-      @for (entry of Array(10); track entry; let idx = $index) {
+      @for (entry of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track entry; let idx = $index) {
         <tr appTableRow id="skeleton">
           <td appTableCell class="flex justify-center">
             <hlm-skeleton class="h-5 w-7" [style.width.px]="20 + 1 * idx" />
@@ -17,14 +17,14 @@
           <td appTableCell class="py-2">
             <span class="flex items-center gap-2">
               <hlm-skeleton class="w-10 h-10 rounded-full" />
-              <hlm-skeleton class="h-5" [style.width.px]="100 + Math.random() * 200" />
+              <hlm-skeleton class="h-5" [style.width.px]="100 + (idx % 3) * 75" />
             </span>
           </td>
           <td appTableCell class="flex justify-center">
-            <hlm-skeleton class="h-5" [style.width.px]="20 + (10 - idx) + Math.random() * 10" />
+            <hlm-skeleton class="h-5" [style.width.px]="20 + (10 - idx) + (idx % 3) * 4" />
           </td>
           <td appTableCell class="py-2">
-            <hlm-skeleton class="h-5" [style.width.px]="30 + (Math.random() * 70) / idx" />
+            <hlm-skeleton class="h-5" [style.width.px]="30 + ((idx % 4) * 20) / idx" />
           </td>
         </tr>
       }