Add the work management

src/app/app-routing.module.ts

@@ -1,26 +1,29 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { EditorComponent } from './components/editor/editor.component';
-import { LandingPageComponent } from './components/landing-page/landing-page.component';
-import { DocumentationComponent } from './components/documentation/documentation.component';
-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 {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {EditorComponent} from './components/editor/editor.component';
+import {LandingPageComponent} from './components/landing-page/landing-page.component';
+import {DocumentationComponent} from './components/documentation/documentation.component';
+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 = [
-  { path: '', component: LandingPageComponent },
-  { path: 'editor', component: EditorComponent },
-  { path: 'documentation', component: DocumentationComponent },
-  { path: 'contact', component: FormComponent },
-  { path: 'our-story', component: OurStoryComponent },
-  { path: 'terms-of-service', component: TermsOfServiceComponent },
-  { path: 'privacy-policy', component: PrivacyPolicyComponent },
+    {path: '', component: LandingPageComponent},
+    {path: 'editor', component: EditorComponent},
+    {path: 'documentation', component: DocumentationComponent},
+    {path: 'contact', component: FormComponent},
+    {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

@@ -25,7 +25,7 @@
 						style="display: none"
 						type="file"
 						id="fileInput"
-          (change)="loadFromFile($event)" />
+						(change)="loadFromFile($event)"/>
 			</div>
 
 			<div class="param-editor">
@@ -41,16 +41,21 @@
 								stroke="#1C274C"
 								stroke-width="1.5"
 								stroke-linecap="round"
-              stroke-linejoin="round" />
+								stroke-linejoin="round"/>
 						<path
 								d="M12 3V16M12 16L16 11.625M12 16L8 11.625"
 								stroke="#1C274C"
 								stroke-width="1.5"
 								stroke-linecap="round"
-              stroke-linejoin="round" />
+								stroke-linejoin="round"/>
 					</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

@@ -1,11 +1,11 @@
-import { Component, ViewChild } from '@angular/core';
-import { CodeExecutionService } from 'src/app/services/codeExecution.service';
-import { Compartment } from '@codemirror/state';
-import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
-import { LanguageDescription } from '@codemirror/language';
-import { CODE_DEFAULTS, LANGUAGES } from '../languages';
-import { SafeHTMLPipe } from '../../safe-html.pipe';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {Component, ViewChild} from '@angular/core';
+import {CodeExecutionService} from 'src/app/services/codeExecution.service';
+import {Compartment} from '@codemirror/state';
+import {CodeMirrorComponent} from '@sandkasten/codemirror6-editor';
+import {LanguageDescription} from '@codemirror/language';
+import {CODE_DEFAULTS, LANGUAGES} from '../languages';
+import {SafeHTMLPipe} from '../../safe-html.pipe';
+import {ReactiveFormsModule, FormsModule} from '@angular/forms';
 import {
     keymap,
     highlightSpecialChars,
@@ -18,7 +18,7 @@ import {
     highlightActiveLineGutter,
     gutter,
 } from '@codemirror/view';
-import { Extension, EditorState } from '@codemirror/state';
+import {Extension, EditorState} from '@codemirror/state';
 import {
     defaultHighlightStyle,
     syntaxHighlighting,
@@ -27,15 +27,16 @@ import {
     foldGutter,
     foldKeymap,
 } from '@codemirror/language';
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import {defaultKeymap, history, historyKeymap} from '@codemirror/commands';
+import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {
     autocompletion,
     completionKeymap,
     closeBrackets,
     closeBracketsKeymap,
 } from '@codemirror/autocomplete';
-import { lintKeymap } from '@codemirror/lint';
+import {lintKeymap} from '@codemirror/lint';
+import {WorksService} from "../../services/works.service";
 
 const basicSetup: Extension = (() => [
     highlightActiveLineGutter(),
@@ -46,7 +47,7 @@ const basicSetup: Extension = (() => [
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
     indentOnInput(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
     bracketMatching(),
     closeBrackets(),
     autocompletion(),
@@ -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 {
@@ -170,10 +175,16 @@ export class EditorComponent {
     }
 
     saveToFile() {
-    const blob = new Blob([this.editorContent], { type: 'text/plain' });
+        const blob = new Blob([this.editorContent], {type: 'text/plain'});
         const a = document.createElement('a');
         a.download = `code.${this.selectedLanguage.extensions![0]}`;
         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();
+    }
+}