Work

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

@@ -53,7 +53,7 @@
       </div>
       <div class="param-editor">
         <button class="button-icon" type="button" (click)="addToDatabase()">
-          ADD BDD
+          {{ 'Editor.Add' | translate }}
         </button>
       </div>
       <div class="param-editor">
@@ -62,10 +62,11 @@
           type="button"
           (click)="shareButtonClicked()"
           [disabled]="isLoaded">
-          {{ 'Work.Share' | translate }}
+          {{ 'Editor.Share' | translate }}
         </button>
       </div>
 
+      <!-- TODO mettre le bouton save dans la page work-->
       <!--TODO if userID de la session =! userID du work then btn-save.style(display : none) else btn-save.style(display : block)-->
       <div class="param-editor">
         <button
@@ -73,7 +74,7 @@
           type="button"
           (click)="saveButtonClicked()"
           [disabled]="isLoaded">
-          {{ 'Work.Save' | translate }}
+          {{ 'Editor.Save' | translate }}
         </button>
       </div>
     </div>
@@ -92,11 +93,11 @@
 
       <div class="param-editor">
         <button
-          class="button-icon button-run"
+          class="button-icon btn-run"
           type="button"
           (click)="onRunButtonClicked()"
           [disabled]="isLoaded">
-          <div>RUN</div>
+          <div style="margin-right: 10px">{{ 'Editor.Run' | translate }}</div>
           <svg
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"

src/app/components/editor/editor.component.scss

@@ -1,3 +1,14 @@
+@mixin btn-styles($bg-color, $font-color) {
+  background-color: $bg-color;
+  color: $font-color;
+  border: none;
+  color: white;
+  padding: 12px 16px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
 #editor-bar-header {
   display: flex;
   align-items: center;
@@ -26,20 +37,6 @@ svg {
   cursor: pointer;
 }
 
-.button-run {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #04aa6d;
-  border: none;
-  color: white;
-  padding: 12px 16px;
-  font-size: 16px;
-  width: 100px;
-  cursor: pointer;
-  border-radius: 10px;
-}
-
 select {
   background-color: #0000f0;
   border: none;
@@ -73,24 +70,18 @@ select {
   height: 100%;
 }
 
-// @mixin btn-styles($bg-color, $font-color) {
-
-//   background-color: $bg-color;
-//   color: $font-color;
-//   border: none;
-//   color: white;
-//   padding: 12px 16px;
-//   font-size: 16px;
-//   width: 100px;
-//   cursor: pointer;
-//   border-radius: 10px;
-// }
+.btn-run {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  @include btn-styles(#04aa6d, white);
+}
 
-// .btn-save {
-//   @include btn-styles(green, white);
+.btn-share {
+  @include btn-styles(rgb(41, 120, 184), white);
 
-// }
+}
 
-// .btn-save {
-//   @include btn-styles(red, white);
-// }
+.btn-save {
+  @include btn-styles(rgb(49, 159, 49), white);
+}

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

@@ -82,6 +82,8 @@ const basicSetup: Extension = (() => [
   ],
 })
 export class EditorComponent {
+  APP_URL = 'http://localhost:4200/'; // à retirer 
+
   @Input() currentWork!: Work;
   isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
 
@@ -194,11 +196,28 @@ export class EditorComponent {
     a.click();
   }
 
-  addToDatabase() {
-    this.workService.postWorkCode(this.editorContent);
+  addToDatabase() :string {
+    return this.workService.postWork(this.editorContent, this.selectedLanguage.name, 1); // replace 1 by current_user's id  
   }
 
-  shareButtonClicked() {}
+  shareButtonClicked() {
+    const link = this.addToDatabase();
+    const url = `${this.APP_URL}/work/${link}`;
+    const ok = TranslateModule;
+    // Vérifiez si l'API clipboard est disponible
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(url).then(() => {
+        // Optionnel : Afficher un message à l'utilisateur
+        alert('URL copied to clipboard!');
+      }).catch(() => {
+        // Optionnel : Afficher un message d'erreur à l'utilisateur
+        alert('Failed to copy URL to clipboard.');
+      });
+    } else {
+      // Optionnel : Si l'API clipboard n'est pas disponible, afficher un message à l'utilisateur
+      alert('Clipboard API not available');
+    }
+  }
 
   saveButtonClicked() {
     this.workService.updateWork(

src/app/components/header/header.component.ts

@@ -25,7 +25,7 @@ export class HeaderComponent {
   version: string = '1.0';
   isMenuOpen: boolean = false;
   isCheck: boolean = false;
-  linkLastWork: string = '';
+  linkLastWork = ""; //peut-être à cast en string
 
   @ViewChild('menuRef') menuRef!: ElementRef;
   @Input() themeClass!: string;
@@ -34,7 +34,8 @@ export class HeaderComponent {
   // Instanciation du service pour les actions de traduction
   constructor(
     private router: Router,
-    private translationService: TranslationService
+    private translationService: TranslationService,
+
   ) {}
 
   // Méthode pour changer la langue

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

@@ -54,6 +54,6 @@ export class WorkComponent implements OnInit {
   }
 
   onSubmit(form: NgForm) {
-    this.workService.postWork(form);
+    this.workService.saveWork(form);
   }
 }

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

@@ -31,6 +31,6 @@ export class WorksListComponent {
   }
 
   onSubmit(form: NgForm) {
-    this.workService.postWork(form);
+    this.workService.saveWork(form);
   }
 }

src/app/services/work.service.ts

@@ -29,31 +29,26 @@ export class WorkService {
 
   //je veux return le link du dernier work d'un user (en l'occurence celui connecté)
   getLastWorkByUserId(user_id: string): Observable<any> {
-    return this.http.get(`${this.API_URL}/works/user/${user_id}`);
+    return this.http.get(`${this.API_URL}/works/last-work/${user_id}`);
   }
 
-  postWork(form: NgForm): void {
-    let body = {
-      link: crypto.randomUUID(),
-      user_id: 1,
-      id_language: 1,
-      code: form.value.content,
-      saveDate: new Date(),
-    };
-    this.http.post<any>(`${this.API_URL}/works`, body).subscribe();
+  saveWork(form: NgForm): void {
+    const code = form.value.content;
+  
+    this.http.post<any>(`${this.API_URL}/works/save`, code).subscribe();
   }
 
-  postWorkCode(code: string): void {
+  postWork(code: string, language: string, id_user: number): string {
     let body = {
+      id_user: id_user, // tant que ça pas résolu -> je peux pas faire le share
       link: crypto.randomUUID(),
-      id_user: 1,
-      id_language: 1,
-      code: code,
+      language: language,
       title: 'Basic JS',
-      date: '2024-06-14T13:35:24.756Z',
+      code: code
     };
 
     this.http.post<any>(`${this.API_URL}/works`, body).subscribe();
+    return body.link;
   }
 
   updateWork(id: string, code: string): void {

src/assets/i18n/en.json

@@ -148,8 +148,10 @@
     },
     "Date": "This document was last updated on January 10, 2024"
   },
-  "Work": {
+  "Editor": {
     "Share": "Share",
-    "Save": "Save"
+    "Save": "Save",
+    "Run": "RUN",
+    "Add": "ADD BDD"
   }
 }

src/assets/i18n/fr.json

@@ -148,8 +148,10 @@
     },
     "Date": "Ce document a été mis à jour pour la dernière fois le 10 janvier 2024."
   },
-  "Work": {
+  "Editor": {
     "Share": "Partager",
-    "Save": "Sauvergarder"
+    "Save": "Sauvergarder",
+    "Run": "EXECUTER",
+    "Add": "AJOUTER A LA BDD"
   }
 }