paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-25 10:49:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor comment UI code

Browse Source 
And run prettier
This commit is contained in:
Michael Shamoon 2022-08-07 17:33:13 -07:00
parent 6d956ac13b
commit 5c1e09cc48
7 changed files with 85 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src-ui/src/app/app.module.ts
View File

@ -67,7 +67,7 @@ import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'
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'
@ -174,7 +174,7 @@ function initializeApp(settings: SettingsService) {
DateComponent,
ColorComponent,
DocumentAsnComponent,
DocumentCommentComponent,
DocumentCommentsComponent,
TasksComponent,
],
imports: [

63
src-ui/src/app/components/document-comment/document-comment.component.ts
View File

@ -1,63 +0,0 @@
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;
});
}
}
}

10
src-ui/src/app/components/document-comment/document-comment.component.html → src-ui/src/app/components/document-comments/document-comments.component.html
View File

@ -1,16 +1,16 @@
<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>&nbsp;
<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"/>
@ -22,4 +22,4 @@
{{comment.comment}}
</div>
</div>
</div>
</div>

2
src-ui/src/app/components/document-comment/document-comment.component.scss → src-ui/src/app/components/document-comments/document-comments.component.scss
View File

@ -19,4 +19,4 @@
.comment-card-header a:hover svg {
fill: var(--primary);
}
}

73
src-ui/src/app/components/document-comments/document-comments.component.ts Normal file
View File

@ -0,0 +1,73 @@
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()}`
)
},
})
}
}

2
src-ui/src/app/components/document-detail/document-detail.component.html
View File

@ -172,7 +172,7 @@
<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>

6
src-ui/src/app/services/rest/document-comment.service.ts → src-ui/src/app/services/rest/document-comments.service.ts
View File

@ -7,14 +7,14 @@ import { Observable } from 'rxjs'
@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')
)
}