Add the save button on works

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { CodeExecutionService } from 'src/app/services/codeExecution.service';
 import { Compartment } from '@codemirror/state';
 import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
@@ -38,6 +38,7 @@ import {
 } from '@codemirror/autocomplete';
 import { lintKeymap } from '@codemirror/lint';
 import { WorkService } from '../../services/work.service';
+import { Work } from '../../models/work.model';
 
 const basicSetup: Extension = (() => [
   highlightActiveLineGutter(),
@@ -81,6 +82,7 @@ const basicSetup: Extension = (() => [
   ],
 })
 export class EditorComponent {
+  @Input() currentWork!: Work;
   isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
 
   readonly languages: LanguageDescription[] = LANGUAGES;
@@ -142,6 +144,12 @@ export class EditorComponent {
     protected workService: WorkService
   ) {}
 
+  ngOnInit() {
+    if (this.currentWork) {
+      this.editorContent = this.currentWork.content;
+    }
+  }
+
   // Efface le contenu de l'éditeur
   clear(): void {
     this.editorContent = '';
@@ -191,7 +199,13 @@ export class EditorComponent {
   }
 
   shareButtonClicked() {}
-  saveButtonClicked() {}
+
+  saveButtonClicked() {
+    this.workService.updateWork(
+      String(this.currentWork.id_work),
+      this.editorContent
+    );
+  }
 
   protected readonly console = console;
 }

src/app/components/work-list-detail/work-list-detail.component.html

@@ -1,5 +1,9 @@
-<div>
-  <h4>{{ work.id_work }} - {{ work.title }}</h4>
-  <span> WORK CONTENT : {{ work.content }}</span>
-  <a [routerLink]="['/work/', work.id_work]">Edit Code</a>
+<div class="work-list-detail">
+  <h4 class="work-list-detail--title">{{ work.title }}</h4>
+  <span class="work-list-detail--content">{{
+    work.content | slice: 0 : 50
+  }}</span>
+  <button class="work-list-detail--btn" [routerLink]="['/work/', work.id_work]">
+    Edit Code
+  </button>
 </div>

src/app/components/work-list-detail/work-list-detail.component.scss

@@ -0,0 +1,26 @@
+.work-list-detail {
+  background: lightgray;
+  width: fit-content;
+  padding: 2rem;
+  border-radius: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &--title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  &--content {
+  }
+
+  &--btn {
+    width: fit-content;
+    padding: 0.5rem 1rem;
+    border: 1px solid black;
+    border-radius: 0.5rem;
+  }
+}

src/app/components/work-list-detail/work-list-detail.component.ts

@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { Work } from '../../models/work.model';
 import { RouterLink } from '@angular/router';
+import { SlicePipe } from '@angular/common';
 
 @Component({
   selector: 'app-work-list-detail',
   standalone: true,
-  imports: [RouterLink],
+  imports: [RouterLink, SlicePipe],
   templateUrl: './work-list-detail.component.html',
-  styleUrl: './work-list-detail.component.css',
+  styleUrl: './work-list-detail.component.scss',
 })
 export class WorkListDetailComponent {
   @Input() work!: Work;

src/app/components/work/work.component.html

@@ -1,6 +1,5 @@
 <div *ngIf="work">
   <h2>Works</h2>
   <h3>CURRENT WORK ID - {{ work.id_work }}</h3>
-
-  <!--	<app-editor></app-editor>-->
+  <app-editor [currentWork]="work"></app-editor>
 </div>

src/app/components/work/work.component.ts

@@ -37,8 +37,7 @@ export class WorkComponent implements OnInit {
     private route: ActivatedRoute,
     private themeService: ThemeService,
     protected workService: WorkService
-    ) {
-    }
+  ) {}
 
   ngOnInit() {
     this.themeService.isDarkTheme.subscribe((value) => {

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

@@ -6,8 +6,8 @@
 </div>
 
 <h3>All Works</h3>
-<ul>
-  <li *ngFor="let work of works">
+<div class="all-works">
+  <div *ngFor="let work of works">
     <app-work-list-detail [work]="work"></app-work-list-detail>
-  </li>
-</ul>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+.all-works {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+}

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

@@ -10,7 +10,7 @@ import { WorkListDetailComponent } from '../work-list-detail/work-list-detail.co
   standalone: true,
   imports: [NgForOf, FormsModule, SlicePipe, WorkListDetailComponent],
   templateUrl: './works-list.component.html',
-  styleUrl: './works-list.component.css',
+  styleUrl: './works-list.component.scss',
 })
 export class WorksListComponent {
   works: Work[] = [];

src/app/services/work.service.ts

@@ -55,4 +55,11 @@ export class WorkService {
 
     this.http.post<any>(`${this.API_URL}/works`, body).subscribe();
   }
+
+  updateWork(id: string, code: string): void {
+    let body = {
+      newContent: code,
+    };
+    this.http.put<any>(`${this.API_URL}/works/${id}/content`, body).subscribe();
+  }
 }