From 2f9a8e182e966afc72d6df2b15bf21abd8924cc1 Mon Sep 17 00:00:00 2001
From: "matis.mazingue" <matis.mazingue@etu.uca.fr>
Date: Mon, 17 Jun 2024 10:35:58 +0200
Subject: [PATCH] Work

---
 .../components/editor/editor.component.html   | 11 ++--
 .../components/editor/editor.component.scss   | 55 ++++++++-----------
 src/app/components/editor/editor.component.ts | 25 ++++++++-
 src/app/components/header/header.component.ts |  5 +-
 src/app/components/work/work.component.ts     |  2 +-
 .../works-list/works-list.component.ts        |  2 +-
 src/app/services/work.service.ts              | 25 ++++-----
 src/assets/i18n/en.json                       |  6 +-
 src/assets/i18n/fr.json                       |  6 +-
 9 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html
index f7a6898..4574fc2 100644
--- a/src/app/components/editor/editor.component.html
+++ b/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"
diff --git a/src/app/components/editor/editor.component.scss b/src/app/components/editor/editor.component.scss
index af49434..d706b0e 100644
--- a/src/app/components/editor/editor.component.scss
+++ b/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);
+}
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index 35f3011..72fee0c 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/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(
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 9ccb736..554cfe4 100644
--- a/src/app/components/header/header.component.ts
+++ b/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
diff --git a/src/app/components/work/work.component.ts b/src/app/components/work/work.component.ts
index 52672b7..5a1f594 100644
--- a/src/app/components/work/work.component.ts
+++ b/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);
   }
 }
diff --git a/src/app/components/works-list/works-list.component.ts b/src/app/components/works-list/works-list.component.ts
index 36ae8b3..8a2af82 100644
--- a/src/app/components/works-list/works-list.component.ts
+++ b/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);
   }
 }
diff --git a/src/app/services/work.service.ts b/src/app/services/work.service.ts
index 7cf1d00..8d41c59 100644
--- a/src/app/services/work.service.ts
+++ b/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 {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 6c38dc5..443c8d5 100644
--- a/src/assets/i18n/en.json
+++ b/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"
   }
 }
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 6766510..d7d920d 100644
--- a/src/assets/i18n/fr.json
+++ b/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"
   }
 }