From d71c510bb6754f22c2748ff58692a9b1d387bc36 Mon Sep 17 00:00:00 2001 From: cofrizot Date: Sun, 16 Jun 2024 15:26:05 +0200 Subject: [PATCH] Add the save button on works --- src/app/components/editor/editor.component.ts | 18 +++- .../work-list-detail.component.css | 0 .../work-list-detail.component.html | 12 ++- .../work-list-detail.component.scss | 26 +++++ .../work-list-detail.component.ts | 5 +- src/app/components/work/work.component.html | 3 +- src/app/components/work/work.component.ts | 97 +++++++++---------- .../works-list/works-list.component.css | 0 .../works-list/works-list.component.html | 8 +- .../works-list/works-list.component.scss | 5 + .../works-list/works-list.component.ts | 2 +- src/app/services/work.service.ts | 7 ++ 12 files changed, 119 insertions(+), 64 deletions(-) delete mode 100644 src/app/components/work-list-detail/work-list-detail.component.css create mode 100644 src/app/components/work-list-detail/work-list-detail.component.scss delete mode 100644 src/app/components/works-list/works-list.component.css create mode 100644 src/app/components/works-list/works-list.component.scss diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts index d7caa0f..35f3011 100644 --- a/src/app/components/editor/editor.component.ts +++ b/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; } diff --git a/src/app/components/work-list-detail/work-list-detail.component.css b/src/app/components/work-list-detail/work-list-detail.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/work-list-detail/work-list-detail.component.html b/src/app/components/work-list-detail/work-list-detail.component.html index 7a2075d..212a364 100644 --- a/src/app/components/work-list-detail/work-list-detail.component.html +++ b/src/app/components/work-list-detail/work-list-detail.component.html @@ -1,5 +1,9 @@ -
-

{{ work.id_work }} - {{ work.title }}

- WORK CONTENT : {{ work.content }} - Edit Code +
+

{{ work.title }}

+ {{ + work.content | slice: 0 : 50 + }} +
diff --git a/src/app/components/work-list-detail/work-list-detail.component.scss b/src/app/components/work-list-detail/work-list-detail.component.scss new file mode 100644 index 0000000..4b23efb --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/work-list-detail/work-list-detail.component.ts b/src/app/components/work-list-detail/work-list-detail.component.ts index 9562033..77cd65c 100644 --- a/src/app/components/work-list-detail/work-list-detail.component.ts +++ b/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; diff --git a/src/app/components/work/work.component.html b/src/app/components/work/work.component.html index 67e2d1e..b39e125 100644 --- a/src/app/components/work/work.component.html +++ b/src/app/components/work/work.component.html @@ -1,6 +1,5 @@

Works

CURRENT WORK ID - {{ work.id_work }}

- - +
diff --git a/src/app/components/work/work.component.ts b/src/app/components/work/work.component.ts index 20f1b03..52672b7 100644 --- a/src/app/components/work/work.component.ts +++ b/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); + } } diff --git a/src/app/components/works-list/works-list.component.css b/src/app/components/works-list/works-list.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/works-list/works-list.component.html b/src/app/components/works-list/works-list.component.html index ee5b562..abb0eed 100644 --- a/src/app/components/works-list/works-list.component.html +++ b/src/app/components/works-list/works-list.component.html @@ -6,8 +6,8 @@

All Works

- + + diff --git a/src/app/components/works-list/works-list.component.scss b/src/app/components/works-list/works-list.component.scss new file mode 100644 index 0000000..fd8289c --- /dev/null +++ b/src/app/components/works-list/works-list.component.scss @@ -0,0 +1,5 @@ +.all-works { + display: flex; + flex-wrap: wrap; + gap: 2rem; +} diff --git a/src/app/components/works-list/works-list.component.ts b/src/app/components/works-list/works-list.component.ts index 47f4693..36ae8b3 100644 --- a/src/app/components/works-list/works-list.component.ts +++ b/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[] = []; diff --git a/src/app/services/work.service.ts b/src/app/services/work.service.ts index 2c6aa39..7cf1d00 100644 --- a/src/app/services/work.service.ts +++ b/src/app/services/work.service.ts @@ -55,4 +55,11 @@ export class WorkService { this.http.post(`${this.API_URL}/works`, body).subscribe(); } + + updateWork(id: string, code: string): void { + let body = { + newContent: code, + }; + this.http.put(`${this.API_URL}/works/${id}/content`, body).subscribe(); + } }