fix minor issues

ls1intum · Oct 14, 2024 · efcd332 · efcd332
1 parent 8255cca
commit efcd332
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 23 deletions.
diff --git a/webapp/src/app/home/home.component.html b/webapp/src/app/home/home.component.html
@@ -8,7 +8,7 @@ <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>
             <h2 class="text-xl text-muted-foreground">Hi {{ userValue.name }} 👋</h2>
           }
         </div>
-        <app-leaderboard-filter [metaData]="metaQuery.data()" />
+        <app-leaderboard-filter [repositories]="metaQuery.data()?.repositoriesToMonitor" />
       </div>
       <div class="col-span-2">
         @if (query.error()) {

diff --git a/webapp/src/app/home/leaderboard/filter/filter.component.html b/webapp/src/app/home/leaderboard/filter/filter.component.html
@@ -5,6 +5,8 @@ <h3 class="text-base font-semibold tracking-wide">Filter</h3>
   </span>
   <form ngForm class="flex xl:flex-col gap-4">
     <app-leaderboard-filter-timeframe />
-    <app-leaderboard-filter-repository [repositories]="metaData()?.repositoriesToMonitor" />
+    @if (repositories() && repositories()!.length > 1) {
+      <app-leaderboard-filter-repository [repositories]="repositories()!" />
+    }
   </form>
 </div>
diff --git a/webapp/src/app/home/leaderboard/filter/filter.component.ts b/webapp/src/app/home/leaderboard/filter/filter.component.ts
@@ -3,7 +3,6 @@ import { FormsModule } from '@angular/forms';
 import { ListFilter, LucideAngularModule } from 'lucide-angular';
 import { LeaderboardFilterTimeframeComponent } from './timeframe/timeframe.component';
 import { LeaderboardFilterRepositoryComponent } from './repository/repository.component';
-import { MetaDataDTO } from '@app/core/modules/openapi';
 
 @Component({
   selector: 'app-leaderboard-filter',
@@ -14,5 +13,5 @@ import { MetaDataDTO } from '@app/core/modules/openapi';
 export class LeaderboardFilterComponent {
   protected ListFilter = ListFilter;
 
-  metaData = input<MetaDataDTO>();
+  repositories = input<string[]>();
 }
diff --git a/webapp/src/app/home/leaderboard/filter/filter.stories.ts b/webapp/src/app/home/leaderboard/filter/filter.stories.ts
@@ -1,16 +1,48 @@
-import { type Meta, type StoryObj } from '@storybook/angular';
+import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
 import { LeaderboardFilterComponent } from './filter.component';
 
 const meta: Meta<LeaderboardFilterComponent> = {
   component: LeaderboardFilterComponent,
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  args: {
+    repositories: [
+      'ls1intum/Artemis',
+      'ls1intum/Athena',
+      'ls1intum/Hephaestus',
+      'ls1intum/Pyris',
+      'ls1intum/Ares2',
+      'ls1intum/Aeolus',
+      'ls1intum/hades',
+      'ls1intum/Apollon',
+      'ls1intum/Apollon_standalone'
+    ]
+  },
+  argTypes: {
+    repositories: {
+      control: {
+        type: 'object'
+      },
+      description: 'List of repositories'
+    }
+  }
 };
 
 export default meta;
 type Story = StoryObj<LeaderboardFilterComponent>;
 
 export const Default: Story = {
-  render: () => ({
-    template: '<app-leaderboard-filter />'
+  render: (args) => ({
+    props: args,
+    template: `<app-leaderboard-filter ${argsToTemplate(args)} />`
+  })
+};
+
+export const SingleRepository: Story = {
+  args: {
+    repositories: ['ls1intum/Artemis']
+  },
+  render: (args) => ({
+    props: args,
+    template: `<app-leaderboard-filter ${argsToTemplate(args)} />`
   })
 };
diff --git a/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts b/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts
@@ -5,18 +5,6 @@ import { BrnSelectModule } from '@spartan-ng/ui-select-brain';
 import { HlmSelectModule } from '@spartan-ng/ui-select-helm';
 import { HlmLabelModule } from '@spartan-ng/ui-label-helm';
 
-export const repositoryNames = [
-  'ls1intum/Artemis',
-  'ls1intum/Athena',
-  'ls1intum/Hephaestus',
-  'ls1intum/Pyris',
-  'ls1intum/Ares2',
-  'ls1intum/Aeolus',
-  'ls1intum/hades',
-  'ls1intum/Apollon',
-  'ls1intum/Apollon_standalone'
-];
-
 interface SelectOption {
   id: number;
   value: string;
@@ -30,11 +18,11 @@ interface SelectOption {
   templateUrl: './repository.component.html'
 })
 export class LeaderboardFilterRepositoryComponent {
-  repositories = input<string[]>();
+  repositories = input.required<string[]>();
   value = signal<string>('');
 
   placeholder = computed(() => {
-    return repositoryNames.find((option) => option === this.value()) ?? 'All';
+    return this.repositories().find((option) => option === this.value()) ?? 'All';
   });
 
   options = computed(() => {

diff --git a/webapp/src/app/home/leaderboard/filter/repository/repository.stories.ts b/webapp/src/app/home/leaderboard/filter/repository/repository.stories.ts
@@ -19,7 +19,7 @@ type Story = StoryObj<LeaderboardFilterRepositoryComponent>;
 
 export const Default: Story = {
   args: {
-    repositories: ['ls1intum/Artemis']
+    repositories: ['ls1intum/Artemis', 'ls1intum/Athena', 'ls1intum/Hephaestus']
   },
   render: (args) => ({
     props: args,