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

@@ -1,60 +1,59 @@
-import {Component, OnInit} from '@angular/core';
-import {RouterLink, ActivatedRoute} from '@angular/router';
-import {ThemeService} from '../../services/theme.service';
-import {NgClass, NgIf} from '@angular/common';
-import {TranslateModule} from '@ngx-translate/core';
-import {Work} from '../../models/work.model';
-import {WorkService} from '../../services/work.service';
-import {NgForOf} from '@angular/common';
-import {FormsModule, NgForm} from '@angular/forms';
-import {EditorComponent} from '../editor/editor.component';
-import {WorkListDetailComponent} from '../work-list-detail/work-list-detail.component';
+import { Component, OnInit } from '@angular/core';
+import { RouterLink, ActivatedRoute } from '@angular/router';
+import { ThemeService } from '../../services/theme.service';
+import { NgClass, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { Work } from '../../models/work.model';
+import { WorkService } from '../../services/work.service';
+import { NgForOf } from '@angular/common';
+import { FormsModule, NgForm } from '@angular/forms';
+import { EditorComponent } from '../editor/editor.component';
+import { WorkListDetailComponent } from '../work-list-detail/work-list-detail.component';
 
 @Component({
-    selector: 'app-work',
-    templateUrl: './work.component.html',
-    styleUrl: './work.component.scss',
-    standalone: true,
-    imports: [
-        NgClass,
-        TranslateModule,
-        RouterLink,
-        NgForOf,
-        FormsModule,
-        EditorComponent,
-        WorkListDetailComponent,
-        NgIf,
-    ],
+  selector: 'app-work',
+  templateUrl: './work.component.html',
+  styleUrl: './work.component.scss',
+  standalone: true,
+  imports: [
+    NgClass,
+    TranslateModule,
+    RouterLink,
+    NgForOf,
+    FormsModule,
+    EditorComponent,
+    WorkListDetailComponent,
+    NgIf,
+  ],
 })
 export class WorkComponent implements OnInit {
-    // à retirer quand les boutons seront dans editor.component
-    isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
+  // à retirer quand les boutons seront dans editor.component
+  isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
 
-    themeClass!: string;
-    work!: Work;
+  themeClass!: string;
+  work!: Work;
 
-    constructor(
-        private route: ActivatedRoute,
-        private themeService: ThemeService,
-        protected workService: WorkService
-    ) {
-    }
+  constructor(
+    private route: ActivatedRoute,
+    private themeService: ThemeService,
+    protected workService: WorkService
+  ) {}
 
-    ngOnInit() {
-        this.themeService.isDarkTheme.subscribe((value) => {
-            value
-                ? (this.themeClass = 'dark-theme')
-                : (this.themeClass = 'light-theme');
-        });
+  ngOnInit() {
+    this.themeService.isDarkTheme.subscribe((value) => {
+      value
+        ? (this.themeClass = 'dark-theme')
+        : (this.themeClass = 'light-theme');
+    });
 
-        const work_id = String(this.route.snapshot.paramMap.get('id'));
+    const work_id = String(this.route.snapshot.paramMap.get('id'));
 
-        this.workService.getWorkById(work_id).subscribe((response: Work) => {
-            this.work = response as Work;
-        });
-    }
+    this.workService.getWorkById(work_id).subscribe((response: Work) => {
+      this.work = response as Work;
+    });
+  }
 
-    onSubmit(form: NgForm) {
-        this.workService.postWork(form);
-    }
+  onSubmit(form: NgForm) {
+    this.workService.postWork(form);
+  }
 }

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();
+  }
 }