Add a Works page

src/app/app-routing.module.ts

@@ -7,11 +7,13 @@ import { DocumentationComponent } from './components/documentation/documentation
 import { FormComponent } from './components/form/form.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.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: 'work/:id', component: WorkComponent },
+  { path: 'works', component: WorksListComponent },
   { path: 'editor', component: EditorComponent },
   { path: 'documentation', component: DocumentationComponent },
   { path: 'contact', component: FormComponent },

src/app/components/header/header.component.html

@@ -28,7 +28,7 @@
 
     <nav class="right_part--menu">
       <a
-        [routerLink]="linkLastWork"
+        routerLink="/works"
         routerLinkActive="active"
         [routerLinkActiveOptions]="{ exact: true }"
         >{{ 'HeaderPage.Work' | translate }}</a

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

@@ -1,19 +1,10 @@
-import {
-  Component,
-  ElementRef,
-  HostListener,
-  Input,
-  ViewChild,
-} from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { TranslationService } from '../../services/translation.service';
 import { ThemeService } from '../../services/theme.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { NgClass, NgOptimizedImage } from '@angular/common';
-import { WorkService } from '../../services/work.service';
-import { Observable } from 'rxjs';
-import { Work } from '../../models/work.model';
 
 @Component({
   selector: 'app-header',
@@ -43,13 +34,8 @@ export class HeaderComponent {
   // Instanciation du service pour les actions de traduction
   constructor(
     private router: Router,
-    private translationService: TranslationService,
-    private workService: WorkService
-  ) {
-    this.workService.getLastWorkByUserId('5').subscribe((response: Work) => {
-      this.linkLastWork = 'work/' + response.link;
-    });
-  }
+    private translationService: TranslationService
+  ) {}
 
   // Méthode pour changer la langue
   onLanguageChange(event: Event) {

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

@@ -0,0 +1,5 @@
+<div>
+  <h4>{{ work.id_work }} - {{ work.title }}</h4>
+  <span> WORK CONTENT : {{ work.content }}</span>
+  <a [routerLink]="['/work/', work.id_work]">Edit Code</a>
+</div>

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkListDetailComponent } from './work-list-detail.component';
+
+describe('WorkListDetailComponent', () => {
+  let component: WorkListDetailComponent;
+  let fixture: ComponentFixture<WorkListDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WorkListDetailComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WorkListDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -1,37 +1,6 @@
-<div>
+<div *ngIf="work">
   <h2>Works</h2>
+  <h3>CURRENT WORK ID - {{ work.id_work }}</h3>
 
-  <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>
-
-  <!--<app-editor></app-editor>-->
+  <!--	<app-editor></app-editor>-->
 </div>

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

@@ -1,51 +1,60 @@
-import { Component, OnInit } from '@angular/core';
-import { RouterLink, ActivatedRoute } from '@angular/router';
-import { ThemeService } from '../../services/theme.service';
-import { NgClass } 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 { Observable } from 'rxjs';
+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],
+    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;
-  works: Work[] = [];
-  workEnCours: Observable<Work> = new Observable();
+    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');
-    });
-    this.workService
-      .getWorks()
-      .subscribe((response: Work[]) => (this.works = response));
-    const link = String(this.route.snapshot.paramMap.get('link'));
-    if (link) {
-      // this.workEnCours = this.workService.getWorkByLink(link);
+        const work_id = String(this.route.snapshot.paramMap.get('id'));
+
+        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

@@ -1,33 +1,13 @@
 <h2>Works</h2>
 
+<h3>Last Work</h3>
+<div *ngFor="let work of works | slice: -1">
+  <app-work-list-detail [work]="work"></app-work-list-detail>
+</div>
+
+<h3>All Works</h3>
 <ul>
   <li *ngFor="let work of works">
-    {{ work.id_work }} - {{ work.link }} - {{ work.content }}
+    <app-work-list-detail [work]="work"></app-work-list-detail>
   </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.ts

@@ -1,25 +1,33 @@
 import { Component } from '@angular/core';
 import { Work } from '../../models/work.model';
 import { WorkService } from '../../services/work.service';
-import { NgForOf } from '@angular/common';
+import { NgForOf, SlicePipe } from '@angular/common';
 import { FormsModule, NgForm } from '@angular/forms';
+import { WorkListDetailComponent } from '../work-list-detail/work-list-detail.component';
 
 @Component({
   selector: 'app-works-list',
   standalone: true,
-  imports: [NgForOf, FormsModule],
+  imports: [NgForOf, FormsModule, SlicePipe, WorkListDetailComponent],
   templateUrl: './works-list.component.html',
   styleUrl: './works-list.component.css',
 })
 export class WorksListComponent {
   works: Work[] = [];
 
+  // TODO - REMOVE WHEN USER MANAGEMENT DONE
+  FAKE_USER_ID = 1;
+
   constructor(protected workService: WorkService) {}
 
   ngOnInit() {
-    this.workService
-      .getWorks()
-      .subscribe((response: Work[]) => (this.works = response));
+    this.workService.getWorks().subscribe((works: Work[]) => {
+      works.map((work: Work) => {
+        if (work.user_id === this.FAKE_USER_ID) {
+          this.works.push(work);
+        }
+      });
+    });
   }
 
   onSubmit(form: NgForm) {

src/app/models/work.model.ts

@@ -3,5 +3,6 @@ export interface Work {
   link: string;
   user_id: number;
   language_id: number;
+  title: string;
   content: string;
 }

src/app/services/work.service.ts

@@ -18,6 +18,10 @@ export class WorkService {
     return this.http.get(`${this.API_URL}/works`);
   }
 
+  getWorkById(id: string): Observable<any> {
+    return this.http.get(`${this.API_URL}/works/${id}`);
+  }
+
   //je veux return les works d'un user id
   getWorksByUserId(user_id: string): Observable<any> {
     return this.http.get(`${this.API_URL}/works/${user_id}`);
@@ -42,10 +46,13 @@ export class WorkService {
   postWorkCode(code: string): void {
     let body = {
       link: crypto.randomUUID(),
-      user_id: 1,
+      id_user: 1,
       id_language: 1,
       code: code,
+      title: 'Basic JS',
+      date: '2024-06-14T13:35:24.756Z',
     };
+
     this.http.post<any>(`${this.API_URL}/works`, body).subscribe();
   }
 }