Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 67x 67x 14x 67x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 2x 2x 2x 2x | import {
Component,
forwardRef,
Input,
OnChanges,
OnDestroy,
OnInit,
QueryList,
SimpleChanges,
ViewChildren
} from '@angular/core';
import { autorun, IReactionDisposer } from 'mobx';
import { MobxAngularModule } from 'mobx-angular';
import { Observable, Subject, takeUntil } from 'rxjs';
import { HasChanges } from '../../../guard/pending-changes.guard';
import { Ref } from '../../../model/ref';
import { Store } from '../../../store/store';
import { ThreadStore } from '../../../store/thread';
import { CommentComponent } from '../comment.component';
@Component({
selector: 'app-comment-thread',
templateUrl: './comment-thread.component.html',
styleUrls: ['./comment-thread.component.scss'],
host: { 'class': 'comment-thread' },
imports: [
forwardRef(() => CommentComponent),
MobxAngularModule,
],
})
export class CommentThreadComponent implements OnInit, OnChanges, OnDestroy, HasChanges {
private destroy$ = new Subject<void>();
private disposers: IReactionDisposer[] = [];
@Input()
source = '';
@Input()
scrollToLatest = false;
@Input()
depth = 7;
@Input()
pageSize?: number;
@Input()
context = 0;
@Input()
newComments$!: Observable<Ref | undefined>;
@ViewChildren('comment')
list?: QueryList<CommentComponent>;
comments?: Ref[] = [];
newComments: Ref[] = [];
constructor(
public store: Store,
public thread: ThreadStore,
) {
this.disposers.push(autorun(() => {
Iif (thread.latest.length) {
this.comments = thread.cache.get(this.source);
if (this.comments && this.newComments.length) {
const newUrls = new Set(this.newComments.map(c => c.url));
this.comments = this.comments.filter(c => !newUrls.has(c.url));
}
if (this.comments && this.pageSize) {
this.comments = [...this.comments!];
this.comments.length = this.pageSize;
}
}
}));
}
saveChanges(): boolean {
return !!this.list?.filter(t => t.saveChanges()).length;
}
ngOnInit(): void {
this.newComments$.pipe(
takeUntil(this.destroy$),
).subscribe(comment => comment && this.newComments.unshift(comment));
}
ngOnChanges(changes: SimpleChanges) {
Eif (changes.source || changes.pageSize) {
this.newComments = [];
this.comments = this.thread.cache.get(this.source);
Iif (this.comments && this.pageSize) {
this.comments = [...this.comments!];
this.comments.length = this.pageSize;
}
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
for (const dispose of this.disposers) dispose();
this.disposers.length = 0;
}
}
|