Add the work management

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { FormComponent } from './components/form/form.component';
 import {TermsOfServiceComponent} from './components/terms-of-service/terms-of-service.component';
 import {OurStoryComponent} from './components/our-story/our-story.component';
 import {PrivacyPolicyComponent} from './components/privacy-policy/privacy-policy.component';
+import {WorksListComponent} from "./components/works-list/works-list.component";
 
 // Toutes les routes de l'application sont définies ici
 const routes: Routes = [
@@ -17,10 +18,12 @@ const routes: Routes = [
     {path: 'our-story', component: OurStoryComponent},
     {path: 'terms-of-service', component: TermsOfServiceComponent},
     {path: 'privacy-policy', component: PrivacyPolicyComponent},
+    {path: 'works', component: WorksListComponent},
 ];
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}

src/app/components/editor/editor.component.html

@@ -51,6 +51,11 @@
 					</svg>
 				</button>
 			</div>
+			<div class="param-editor">
+				<button class="button-icon" type="button" (click)="addToDatabase()">
+					ADD BDD
+				</button>
+			</div>
 		</div>
 		<div class="editor-section-bar-header">
 			@if (errorMessage) {

src/app/components/editor/editor.component.ts

@@ -36,6 +36,7 @@ import {
     closeBracketsKeymap,
 } from '@codemirror/autocomplete';
 import {lintKeymap} from '@codemirror/lint';
+import {WorksService} from "../../services/works.service";
 
 const basicSetup: Extension = (() => [
     highlightActiveLineGutter(),
@@ -88,6 +89,7 @@ export class EditorComponent {
     get selectedLanguage(): LanguageDescription {
         return this._selectedLanguage;
     }
+
     set selectedLanguage(value: LanguageDescription) {
         this._selectedLanguage = value;
         if (value.name in CODE_DEFAULTS) {
@@ -100,10 +102,12 @@ export class EditorComponent {
             });
         });
     }
+
     private _linesNumbers: boolean = true;
     get linesNumbers() {
         return this._linesNumbers;
     }
+
     set linesNumbers(lines: boolean) {
         this._linesNumbers = lines;
         this.codemirror.editor?.dispatch({
@@ -131,7 +135,8 @@ export class EditorComponent {
         this.languageCompartment.of(this.selectedLanguage.support!),
     ];
 
-  constructor(private codeExecutionService: CodeExecutionService) {}
+    constructor(private codeExecutionService: CodeExecutionService, protected workService: WorksService) {
+    }
 
     // Efface le contenu de l'éditeur
     clear(): void {
@@ -176,4 +181,10 @@ export class EditorComponent {
         a.href = URL.createObjectURL(blob);
         a.click();
     }
+
+    addToDatabase() {
+        this.workService.postWorkCode(this.editorContent);
+    }
+
+    protected readonly console = console;
 }

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 {WorksService} from "../../services/works.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: WorksService) {
+    }
+
+    ngOnInit() {
+        this.workService.getWorks().subscribe((response: Work[]) => this.works = response)
+    }
+
+    onSubmit(form: NgForm) {
+        this.workService.postWork(form);
+    }
+}

src/app/models/work.model.ts

@@ -0,0 +1,7 @@
+export interface Work {
+    id_work: number,
+    link: string,
+    user_id: number,
+    language_id: number,
+    content: string
+}

src/app/services/works.service.ts

@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {Work} from "../models/work.model";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {NgForm} from "@angular/forms";
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class WorksService {
+    API_URL = 'http://127.0.0.1:3000'
+
+    private works: Work[] = [];
+
+    constructor(private http: HttpClient) {
+    }
+
+    getWorks(): Observable<any> {
+        return this.http.get(`${this.API_URL}/works`);
+    }
+
+    postWork(form: NgForm): void {
+        let body = {link: form.value.link, id_user: 1, id_language: 1, code: form.value.content}
+        this.http.post<any>(`${this.API_URL}/works`, body).subscribe();
+    }
+
+    postWorkCode(code: string): void {
+        let body = {link: 'TODO', id_user: 1, id_language: 1, code: code}
+        this.http.post<any>(`${this.API_URL}/works`, body).subscribe();
+    }
+}