From 064954188220a7703f94d86c339971bdc0bf11df Mon Sep 17 00:00:00 2001
From: romeonicholas <nicholas.romeo@code.berlin>
Date: Thu, 30 Nov 2023 16:17:52 +0100
Subject: [PATCH] feat: Add list of project models with dummy commit

---
 .../project-commits.component.html            | 17 ++++++++++++++--
 .../project-commits.component.ts              | 20 +++++++++++++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/projects/project-detail/project-commits/project-commits.component.html b/frontend/src/app/projects/project-detail/project-commits/project-commits.component.html
index 232a0aedd..68fdeff4f 100644
--- a/frontend/src/app/projects/project-detail/project-commits/project-commits.component.html
+++ b/frontend/src/app/projects/project-detail/project-commits/project-commits.component.html
@@ -5,9 +5,22 @@
 
 <div class="flex h-full flex-col">
   <h2>Commits</h2>
-  <mat-card>
+  <mat-card class="max-w-[400px]">
     <mat-card-content>
-      <p>Look at this progress!</p>
+      <mat-list>
+        @for (model of modelService.models$ | async; track model.name) {
+          <h3 matSubheader>{{ model.name }}</h3>
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <h4 matLine class="overflow-hidden text-ellipsis">COMMIT TITLE</h4>
+            <p matLine class="overflow-hidden text-ellipsis">
+              <a class="text-blue-600" href="/user?userId=1">AUTHOR</a>
+              on DATE
+            </p>
+          </mat-list-item>
+        }
+      </mat-list>
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/frontend/src/app/projects/project-detail/project-commits/project-commits.component.ts b/frontend/src/app/projects/project-detail/project-commits/project-commits.component.ts
index f3bf69b66..f350f2dac 100644
--- a/frontend/src/app/projects/project-detail/project-commits/project-commits.component.ts
+++ b/frontend/src/app/projects/project-detail/project-commits/project-commits.component.ts
@@ -3,10 +3,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { untilDestroyed } from '@ngneat/until-destroy';
+import { filter } from 'rxjs';
+import {
+  Model,
+  ModelService,
+} from 'src/app/projects/models/service/model.service';
 
 @Component({
   selector: 'app-project-commits',
   templateUrl: './project-commits.component.html',
 })
-export class ProjectCommitsComponent {}
+export class ProjectCommitsComponent implements OnInit {
+  models?: Model[];
+
+  constructor(public modelService: ModelService) {}
+
+  ngOnInit(): void {
+    this.modelService.models$
+      .pipe(untilDestroyed(this), filter(Boolean))
+      .subscribe((models) => (this.models = models));
+  }
+}