src/Client/src/app/pages/resumes/resumes.component.html

@@ -1,6 +1,11 @@
+<div class="top-bar">
+    @for(resume of myResumes; track myResumes.length){
+        <button (click)="changeSelectedResume(5)">{{ resume.title }}</button>
+    }
+    <button routerLink="/resumes/editor" >NEW RESUME</button>
+</div>
+
 <!-- My Resumes -->
- @if (auth.isLoggedIn){
-    <div class="jobs-frame">
-    
-    </div>
- }
+<div class="jobs-frame">
+
+</div>

src/Client/src/app/pages/resumes/resumes.component.ts

@@ -15,7 +15,8 @@ import { Authentication } from 'app/services/Authentication';
 })
 export class ResumesComponent {
 
-  public ResumePage: Resume[] = [];
+  public myResumes: Resume[] = [];
+  public currentResume: Resume | null = null;
 
   constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication   ) {
     this.title.setTitle("Resumes | BoredCareers");
@@ -26,7 +27,7 @@ export class ResumesComponent {
 
     this.http.get<Resume[]>("api/resume").subscribe({
       next: data => {
-        this.ResumePage = data;
+        this.myResumes = data;
       },
       error: err => {
         console.log("Error fetching resumes: " + err.error);
@@ -34,4 +35,15 @@ export class ResumesComponent {
     });
   };
 
+  changeSelectedResume(ResumeID: number){
+    this.http.get<Resume>("api/resume?ResumeID=" + ResumeID).subscribe({
+      next: data => {
+        this.currentResume = data;
+      },
+      error: err => {
+        console.log("Error fetching resume ID: " + err.error);
+      }
+    });
+  }
+
 }