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,51 @@
+<!-- suppress HtmlUnknownAttribute -->
+<div class="card shadow-sm mb-3">
+  <div class="card-header section-header">Commentaires</div>
+  <div class="card-body d-flex flex-column gap-3">
+
+    @for (comment of comments(); track comment.id) {
+      <div class="comment-item">
+        <div class="comment-meta">
+          <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
+          @if (comment.updatedAt) {
+            <span class="comment-edited">(modifié le {{ formatDate(comment.updatedAt) }})</span>
+          }
+          <div class="comment-actions">
+            <button type="button" class="comment-action-btn" (click)="startEditComment(comment)">Modifier</button>
+            <button type="button" class="comment-action-btn comment-action-delete" (click)="deleteComment(comment.id)">Supprimer</button>
+          </div>
+        </div>
+
+        @if (editingCommentId === comment.id) {
+          <textarea
+            aria-label="Modifier le commentaire"
+            class="form-control form-control-sm mt-2"
+            rows="3"
+            [(ngModel)]="editingCommentText"
+            (keydown.escape)="cancelEditComment()"
+          ></textarea>
+          <div class="d-flex gap-2 mt-2">
+            <button type="button" class="btn btn-sm btn-primary" (click)="saveEditComment()" [disabled]="!editingCommentText.trim()">Enregistrer</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary" (click)="cancelEditComment()">Annuler</button>
+          </div>
+        } @else {
+          <div class="comment-text markdown-body mt-1" [innerHTML]="parseMarkdown(comment.text)"></div>
+        }
+      </div>
+    }
+
+    <div class="comment-new">
+      <textarea
+        aria-label="Nouveau commentaire"
+        class="form-control form-control-sm"
+        rows="3"
+        placeholder="Ajouter un commentaire... (Markdown supporté)"
+        [(ngModel)]="newCommentText"
+      ></textarea>
+      <div class="d-flex justify-content-end mt-2">
+        <button type="button" class="btn btn-sm btn-primary" (click)="addComment()" [disabled]="!newCommentText.trim()">Ajouter</button>
+      </div>
+    </div>
+
+  </div>
+</div>