work list

src/app/app-routing.module.ts

@@ -11,7 +11,7 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli
 // Toutes les routes de l'application sont définies ici
 const routes: Routes = [
   { path: '', component: LandingPageComponent },
-  { path: 'work', component: WorkComponent },
+  { path: 'work/:id', component: WorkComponent },
   { path: 'editor', component: EditorComponent },
   { path: 'documentation', component: DocumentationComponent },
   { path: 'contact', component: FormComponent },

src/app/components/works-list/works-list.component.html

@@ -0,0 +1,21 @@
+<h2>Works</h2>
+
+<ul>
+	<li *ngFor="let work of works">
+		{{ work.id_work }} - {{ work.link }} - {{ work.content }}
+	</li>
+</ul>
+
+<form #addBookForm="ngForm" (ngSubmit)="onSubmit(addBookForm)">
+	<div class="form-group">
+		<label for="link">Link</label>
+		<input type="text" class="form-control" id="link" name="link" ngModel required>
+	</div>
+
+	<div class="form-group">
+		<label for="content">Content</label>
+		<input type="text" class="form-control" id="content" name="content" ngModel required>
+	</div>
+
+	<button type="submit" class="btn btn-primary">Submit</button>
+</form>

src/app/components/works-list/works-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorksListComponent } from './works-list.component';
+
+describe('WorksListComponent', () => {
+  let component: WorksListComponent;
+  let fixture: ComponentFixture<WorksListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WorksListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(WorksListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/works-list/works-list.component.ts

@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {Work} from "../../models/work.model";
+import {WorkService} from "../../services/work.service";
+import {NgForOf} from "@angular/common";
+import {FormsModule, NgForm} from "@angular/forms";
+
+@Component({
+    selector: 'app-works-list',
+    standalone: true,
+    imports: [
+        NgForOf,
+        FormsModule
+    ],
+    templateUrl: './works-list.component.html',
+    styleUrl: './works-list.component.css'
+})
+export class WorksListComponent {
+    works: Work[] = [];
+
+    constructor(protected workService: WorkService) {
+    }
+
+    ngOnInit() {
+        this.workService.getWorks().subscribe((response: Work[]) => this.works = response)
+    }
+
+    onSubmit(form: NgForm) {
+        this.workService.postWork(form);
+    }
+}

src/app/services/work.service.ts

@@ -20,7 +20,7 @@ export class WorkService {
         return this.http.get(`${this.API_URL}/works`);
     }
 
-    //je veux return un work en fonction d'un link passé en param
+    //je veux return un work en fonction d'un link passé en param getWorksByUser
     getWorkByLink(link: string): Observable<any> {
         return this.http.get(`${this.API_URL}/work/${link}`); 
     }
@@ -30,6 +30,7 @@ export class WorkService {
         return this.http.get(`${this.API_URL}/work/${id_user}`); 
     }
 
+
     postWork(form: NgForm): void {
         let body = {link: crypto.randomUUID(), id_user: 1, id_language: 1, code: form.value.content, saveDate: new Date()}
         this.http.post<any>(`${this.API_URL}/works`, body).subscribe();