Pass real data from API to components

src/app/app-routing.module.ts

@@ -5,7 +5,7 @@ import {LoginComponent} from './components/login/login.component';
 
 const routes: Routes = [
   {path: "login", component: LoginComponent},
-  {path: "", component: SigningComponent}
+  {path: "signing-request/:id", component: SigningComponent}
 ];
 
 @NgModule({

src/app/components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component.html

@@ -1,4 +1,4 @@
 <li [ngClass]="getStatusClasses()" class="p-2 rounded mb-2 flex justify-between items-center">
-  <span>{{ document.icon }} {{ document.name }}</span>
+  <span>{{ document.name }}</span>
-  <span *ngIf="document.status === 'review'" class="font-bold">→</span>
+  <span *ngIf="!document.confirmed" class="font-bold">→</span>
 </li>

src/app/components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {NgClass, NgIf} from '@angular/common';
+import {GetSigningRequestResponseSigningRequestDocument} from '../../../../../gen';
 
 @Component({
   selector: 'app-signing-sidebar-item',
@@ -11,18 +12,9 @@ import {NgClass, NgIf} from '@angular/common';
   styleUrls: ['./signing-sidebar-item.component.css']
 })
 export class SigningSidebarItemComponent {
-  @Input() document!: { name: string; status: string; icon: string };
+  @Input() document!: GetSigningRequestResponseSigningRequestDocument;
 
   getStatusClasses() {
-    switch (this.document.status) {
+    return this.document.confirmed ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700';
-      case 'approved':
-        return 'bg-green-100 text-green-700';
-      case 'pending':
-        return 'bg-gray-200 text-gray-700';
-      case 'review':
-        return 'bg-red-600 text-white';
-      default:
-        return 'bg-gray-100 text-gray-700';
-    }
   }
 }

src/app/components/signing/signing-sidebar/signing-sidebar.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
 
 @Component({
   selector: 'app-signing-sidebar',
@@ -8,11 +9,5 @@ import { Component } from '@angular/core';
   styleUrl: './signing-sidebar.component.css'
 })
 export class SigningSidebarComponent {
-  documents = [
+  @Input() documents!: GetSigningRequestResponseSigningRequestDocument[];
-    { name: 'Form W-8BEN.pdf', status: 'approved', icon: '✅' },
-    { name: '1195 - Identity declaration.pdf', status: 'approved', icon: '✅' },
-    { name: 'CGA.pdf', status: 'pending', icon: '👁️' },
-    { name: 'Review document', status: 'review', icon: '⚠️' },
-    { name: 'Terms and conditions for US citizens.pdf', status: 'pending', icon: '📄' }
-  ];
 }

src/app/components/signing/signing.component.html

@@ -1,6 +1,6 @@
 <div class="flex h-screen bg-gray-100">
   <div class="w-1/4">
-    <app-signing-sidebar></app-signing-sidebar>
+    <app-signing-sidebar [documents]="documents"></app-signing-sidebar>
   </div>
 
   <div class="w-3/4 p-6">

src/app/components/signing/signing.component.ts

@@ -1,4 +1,10 @@
 import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {
+  GetSigningRequestResponse,
+  GetSigningRequestResponseSigningRequestDocument,
+  SigningRequestService
+} from '../../../gen';
 
 @Component({
   selector: 'app-hello',
@@ -7,10 +13,21 @@ import {Component, OnInit} from '@angular/core';
   styleUrl: './signing.component.css'
 })
 export class SigningComponent implements OnInit {
-  constructor() {
+  documents: GetSigningRequestResponseSigningRequestDocument[] = [];
+
+  constructor(private route: ActivatedRoute, private signingRequestService: SigningRequestService) {
   }
 
   ngOnInit(): void {
+    const id: string = this.route.snapshot.paramMap.get('id') || "";
 
+    this.signingRequestService.getSigningRequest(id).subscribe({
+      next: (response: GetSigningRequestResponse): void => {
+        this.documents = response.signingRequestDocuments || [];
+      },
+      error(err: Error): void {
+        console.log(err);
+      }
+    });
   }
 }