paperless-ngx/src-ui/src/app/components/document-comments/document-comments.component.html

<div *ngIf="comments">
    <form [formGroup]="commentForm" class="needs-validation mt-3" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Comment }" novalidate>
        <div class="form-group">
            <textarea class="form-control form-control-sm" [class.is-invalid]="newCommentError" rows="3" formControlName="newComment" placeholder="Enter comment" i18n-placeholder required></textarea>
            <div class="invalid-feedback" i18n>
                Please enter a comment.
            </div>
        </div>
        <div class="form-group mt-2 d-flex justify-content-end align-items-center">
            <div *ngIf="networkActive" class="spinner-border spinner-border-sm fw-normal me-auto" role="status"></div>
            <button type="button" class="btn btn-primary btn-sm" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
        </div>
    </form>
    <hr>
    <div *ngFor="let comment of comments" class="card border mb-3">
        <div class="card-body text-dark">
            <p class="card-text">{{comment.comment}}</p>
        </div>
        <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
            <span>{{displayName(comment)}} - {{ comment.created | customDate}}</span>
            <button type="button" class="btn btn-link btn-sm p-0 fade" title="Delete comment" i18n-title (click)="deleteComment(comment.id)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Comment }">
                <svg width="13" height="13" fill="currentColor">
                    <use xlink:href="assets/bootstrap-icons.svg#trash" />
                </svg>
                <span class="visually-hidden" i18n>Delete comment</span>
            </button>
        </div>
    </div>
</div>