Ajout commentaire + icone menu

2026-05-23 10:23:46 +02:00
parent 5410ad779e
commit 1b165aaae8
6 changed files with 246 additions and 1 deletions
@@ -0,0 +1,81 @@
+import { Component, computed, inject, input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { marked } from 'marked';
+import { IssueComment, IssuesStore } from '../issues.store';
+
+@Component({
+  selector: 'app-issue-comments',
+  imports: [FormsModule],
+  templateUrl: './issue-comments.html',
+  styleUrl: './issue-comments.css',
+})
+export class IssueComments {
+  private readonly issuesStore = inject(IssuesStore);
+  private readonly sanitizer = inject(DomSanitizer);
+
+  readonly issueId = input.required<number>();
+
+  protected readonly comments = computed(
+    () => this.issuesStore.issues().find((i) => i.id === this.issueId())?.comments ?? [],
+  );
+
+  protected newCommentText = '';
+  protected editingCommentId: number | null = null;
+  protected editingCommentText = '';
+
+  protected parseMarkdown(text: string): SafeHtml {
+    const html = marked.parse(text) as string;
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
+  protected formatDate(iso: string): string {
+    return new Date(iso).toLocaleString('fr-FR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+
+  protected addComment(): void {
+    const text = this.newCommentText.trim();
+    if (!text) return;
+    const issue = this.issuesStore.getById(this.issueId());
+    if (!issue) return;
+    const nextId = Math.max(0, ...issue.comments.map((c) => c.id)) + 1;
+    const comment: IssueComment = { id: nextId, text, createdAt: new Date().toISOString(), updatedAt: null };
+    this.issuesStore.upsert({ ...issue, comments: [...issue.comments, comment] });
+    this.newCommentText = '';
+  }
+
+  protected startEditComment(comment: IssueComment): void {
+    this.editingCommentId = comment.id;
+    this.editingCommentText = comment.text;
+  }
+
+  protected saveEditComment(): void {
+    const text = this.editingCommentText.trim();
+    if (!text || this.editingCommentId === null) return;
+    const issue = this.issuesStore.getById(this.issueId());
+    if (!issue) return;
+    const updatedComments = issue.comments.map((c) =>
+      c.id === this.editingCommentId ? { ...c, text, updatedAt: new Date().toISOString() } : c,
+    );
+    this.issuesStore.upsert({ ...issue, comments: updatedComments });
+    this.editingCommentId = null;
+    this.editingCommentText = '';
+  }
+
+  protected cancelEditComment(): void {
+    this.editingCommentId = null;
+    this.editingCommentText = '';
+  }
+
+  protected deleteComment(id: number): void {
+    const issue = this.issuesStore.getById(this.issueId());
+    if (!issue) return;
+    this.issuesStore.upsert({ ...issue, comments: issue.comments.filter((c) => c.id !== id) });
+  }
+}