create cases project tabs using services

web/src/app/components/projects/project-diagram/project-diagram.component.html

@@ -11,7 +11,7 @@
     </li>
     <!-- Plus sign triggers modal -->
     <li class="nav-item">
-      <a class="nav-link" (click)="openModal()" style="cursor: pointer;">+</a>
+      <a class="nav-link" (click)="openNewTabModal()" style="cursor: pointer;">+</a>
     </li>
 </ul>
 
@@ -29,7 +29,7 @@
     <div class="modal-content">
     <div class="modal-header">
         <h5 class="modal-title">Add a New Case</h5>
-        <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
+        <button type="button" class="btn-close" (click)="closeNewTabModal()" aria-label="Close"></button>
     </div>
     <div class="modal-body">
         <label for="tabSelector" class="form-label">Select Hazard:</label>
@@ -42,7 +42,7 @@ <h5 class="modal-title">Add a New Case</h5>
         </div>
     </div>
     <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" (click)="closeModal()">Cancel</button>
+        <button type="button" class="btn btn-secondary" (click)="closeNewTabModal()">Cancel</button>
         <button type="button" class="btn btn-primary" (click)="addTabFromModal()">Add Hazard Case</button>
     </div>
     </div>

web/src/app/components/projects/project-diagram/project-diagram.component.ts

@@ -1,7 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DiagramComponent } from '../diagram/diagram.component';
+import { ProjectService } from '../../../services/project.service';
+import { Case } from '../../../models/case.model';
+import { ActivatedRoute } from '@angular/router';
 
 interface Tab {
   title: string;
@@ -13,7 +16,7 @@ interface Tab {
   templateUrl: './project-diagram.component.html',
   styleUrls: ['./project-diagram.component.css']
 })
-export class ProjectDiagramComponent {
+export class ProjectDiagramComponent implements OnInit {
   // Default tab list.
   tabs: Tab[] = [
     { title: 'Base Case' }
@@ -34,15 +37,41 @@ export class ProjectDiagramComponent {
   // Holds the custom tab name if the "Custom" option is selected.
   customTabName: string = '';
 
-  // Open the modal.
-  openModal(): void {
+  projectId: string = '';
+
+  cases: Case[] = [];
+
+  constructor(private _projectService: ProjectService, private _route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.projectId = this._route.snapshot.paramMap.get('id') || ''
+    this.loadCases()
+  }
+
+  private loadCases(): void {
+    this._projectService.getCases(this.projectId).subscribe({
+      next: (cases) => {
+        this.cases = cases;
+
+        if (this.cases.length > 0) {
+          this.tabs = this.cases.map(c => ({ title: c.name }));
+        }
+      },
+      error: () => {
+        console.log('Failed to load cases');
+      }
+    });
+  }
+
+  // New tab modal.
+  openNewTabModal(): void {
     this.showModal = true;
     this.customTabName = '';
     this.selectedTabName = this.availableTabs[0];
   }
 
-  // Close the modal.
-  closeModal(): void {
+  // Close new tab modal.
+  closeNewTabModal(): void {
     this.showModal = false;
   }
 
@@ -57,8 +86,20 @@ export class ProjectDiagramComponent {
     });
     // Activate new tab.
     this.activeTabIndex = this.tabs.length - 1;
+
+    // Create new Case:
+    // TODO: Implement diagram data.
+    this._projectService.createCase(this.projectId, { name: tabTitle, diagram_data: "{'test': 'test'}" }).subscribe({
+      next: (newCase) => {
+        console.log('Case created:', newCase);
+      },
+      error: () => {
+        console.log('Failed to load cases');
+      }
+    });
+
     // Close the modal.
-    this.closeModal();
+    this.closeNewTabModal();
   }
 
   // Activate a tab.

web/src/app/models/case.model.ts

@@ -0,0 +1,8 @@
+export interface Case {
+    _id?: string;
+    name: string;
+    project_id?: string;
+    diagram_data?: string;
+    created_at?: string;
+    updated_at?: string;
+}

web/src/app/services/project.service.ts

@@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Project } from '../models/project.model';
 import { environment } from '../../environments/environment';
+import { Case } from '../models/case.model';
 
 
 @Injectable({
@@ -53,4 +54,16 @@ export class ProjectService {
       headers: this.getAuthHeaders()
     });
   }
+
+  // Fetch a list of cases for a specific project
+  getCases(projectId: string): Observable<Case[]> {
+    return this.http.get<Case[]>(`${this.apiUrl}/project/${projectId}/cases/`, { headers: this.getAuthHeaders() });
+  }
+
+  // Create a new case for a specific project
+  createCase(projectId: string, caseData: Case): Observable<Case> {
+    return this.http.post<Case>(`${this.apiUrl}/project/${projectId}/case/create/`, caseData, {
+      headers: this.getAuthHeaders()
+    });
+  }
 }