54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
<!-- 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()"
|
|
(paste)="onPaste($event, 'edit')"
|
|
></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é, coller une image avec Ctrl+V)"
|
|
[(ngModel)]="newCommentText"
|
|
(paste)="onPaste($event, 'new')"
|
|
></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>
|