import { ColorSliderModule } from 'ngx-color/slider'
import { ColorComponent } from './components/common/input/color/color.component'
import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DocumentCommentComponent } from './components/document-comment/document-comment.component';
+import { DocumentCommentsComponent } from './components/document-comments/document-comments.component'
import { DirtyDocGuard } from './guards/dirty-doc.guard'
import localeBe from '@angular/common/locales/be'
DateComponent,
ColorComponent,
DocumentAsnComponent,
- DocumentCommentComponent,
+ DocumentCommentsComponent,
TasksComponent,
],
imports: [
+++ /dev/null
-import { Component, OnInit } from '@angular/core';
-import { DocumentDetailComponent } from 'src/app/components/document-detail/document-detail.component';
-import { DocumentCommentService } from 'src/app/services/rest/document-comment.service';
-import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment';
-
-import { take } from 'rxjs/operators';
-import { FormControl, FormGroup } from '@angular/forms';
-
-@Component({
- selector: 'app-document-comment',
- templateUrl: './document-comment.component.html',
- styleUrls: ['./document-comment.component.scss']
-})
-export class DocumentCommentComponent implements OnInit {
-
- comments:PaperlessDocumentComment[];
- networkActive = false;
- documentId: number;
- commentForm: FormGroup = new FormGroup({
- newcomment: new FormControl('')
- })
-
- constructor(
- private documentDetailComponent: DocumentDetailComponent,
- private documentCommentService: DocumentCommentService,
- ) { }
-
- byId(index, item: PaperlessDocumentComment) {
- return item.id;
- }
-
- async ngOnInit(): Promise<any> {
- try {
- this.documentId = this.documentDetailComponent.documentId;
- this.comments= await this.documentCommentService.getComments(this.documentId).pipe(take(1)).toPromise();
- } catch(err){
- this.comments = [];
- }
- }
-
- addComment(){
- this.networkActive = true
- this.documentCommentService.addComment(this.documentId, this.commentForm.get("newcomment").value).subscribe(result => {
- this.comments = result;
- this.commentForm.get("newcomment").reset();
- this.networkActive = false;
- }, error => {
- this.networkActive = false;
- });
- }
-
- deleteComment(event){
- let parent = event.target.parentElement.closest('div[comment-id]');
- if(parent){
- this.documentCommentService.deleteComment(this.documentId, parseInt(parent.getAttribute("comment-id"))).subscribe(result => {
- this.comments = result;
- this.networkActive = false;
- }, error => {
- this.networkActive = false;
- });
- }
- }
-}
\ No newline at end of file
<div *ngIf="comments">
<form [formGroup]='commentForm'>
<div class="form-group">
- <textarea class="form-control" id="newcomment" rows="5" formControlName='newcomment'></textarea>
+ <textarea class="form-control" rows="5" formControlName='newcomment'></textarea>
</div>
- <button type="button" class="btn btn-primary" i18n [disabled]="networkActive" (click)="addComment()">add comment</button>
+ <button type="button" class="btn btn-primary" [disabled]="networkActive" (click)="addComment()" i18n>Add comment</button>
</form>
<hr>
- <div *ngFor="let comment of comments; trackBy: byId" [disableRipple]="true" class="card border-bg-primary bg-primary mb-3 comment-card" [attr.comment-id]="comment.id">
+ <div *ngFor="let comment of comments; trackBy: commentId" class="card border-bg-primary bg-primary mb-3 comment-card" [attr.comment-id]="comment.id">
<div class="d-flex card-header comment-card-header text-white justify-content-between">
<span>{{comment?.user?.firstname}} {{comment?.user?.lastname}} ({{comment?.user?.username}}) - {{ comment?.created | customDate}}</span>
<span>
- <a class="text-white" (click)="deleteComment($event)">
+ <a class="text-white" (click)="deleteComment(comment.id)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
{{comment.comment}}
</div>
</div>
-</div>
\ No newline at end of file
+</div>
.comment-card-header a:hover svg {
fill: var(--primary);
-}
\ No newline at end of file
+}
--- /dev/null
+import { Component, Input, OnInit } from '@angular/core'
+import { DocumentCommentsService } from 'src/app/services/rest/document-comments.service'
+import { PaperlessDocumentComment } from 'src/app/data/paperless-document-comment'
+import { FormControl, FormGroup } from '@angular/forms'
+import { first } from 'rxjs/operators'
+import { ToastService } from 'src/app/services/toast.service'
+
+@Component({
+ selector: 'app-document-comments',
+ templateUrl: './document-comments.component.html',
+ styleUrls: ['./document-comments.component.scss'],
+})
+export class DocumentCommentsComponent implements OnInit {
+ commentForm: FormGroup = new FormGroup({
+ newcomment: new FormControl(''),
+ })
+
+ networkActive = false
+ comments: PaperlessDocumentComment[] = []
+
+ @Input()
+ documentId: number
+
+ constructor(
+ private commentsService: DocumentCommentsService,
+ private toastService: ToastService
+ ) {}
+
+ ngOnInit(): void {
+ this.commentsService
+ .getComments(this.documentId)
+ .pipe(first())
+ .subscribe((comments) => (this.comments = comments))
+ }
+
+ commentId(index, comment: PaperlessDocumentComment) {
+ return comment.id
+ }
+
+ addComment() {
+ this.networkActive = true
+ this.commentsService
+ .addComment(this.documentId, this.commentForm.get('newcomment').value)
+ .subscribe({
+ next: (result) => {
+ this.comments = result
+ this.commentForm.get('newcomment').reset()
+ this.networkActive = false
+ },
+ error: (e) => {
+ this.networkActive = false
+ this.toastService.showError(
+ $localize`Error saving comment: ${e.toString()}`
+ )
+ },
+ })
+ }
+
+ deleteComment(commentId: number) {
+ this.commentsService.deleteComment(this.documentId, commentId).subscribe({
+ next: (result) => {
+ this.comments = result
+ this.networkActive = false
+ },
+ error: (e) => {
+ this.networkActive = false
+ this.toastService.showError(
+ $localize`Error deleting comment: ${e.toString()}`
+ )
+ },
+ })
+ }
+}
<li [ngbNavItem]="5" *ngIf="commentsEnabled">
<a ngbNavLink i18n>Comments</a>
<ng-template ngbNavContent>
- <app-document-comment #commentComponent></app-document-comment>
+ <app-document-comments [documentId]="documentId"></app-document-comments>
</ng-template>
</li>
@Injectable({
providedIn: 'root',
})
-export class DocumentCommentService extends AbstractPaperlessService<PaperlessDocumentComment> {
+export class DocumentCommentsService extends AbstractPaperlessService<PaperlessDocumentComment> {
constructor(http: HttpClient) {
super(http, 'documents')
}
- getComments(id: number): Observable<PaperlessDocumentComment[]> {
+ getComments(documentId: number): Observable<PaperlessDocumentComment[]> {
return this.http.get<PaperlessDocumentComment[]>(
- this.getResourceUrl(id, 'comments')
+ this.getResourceUrl(documentId, 'comments')
)
}