d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { ThySelectionListChange, ThySelectionListComponent } from 'ngx-tethys/list';
import { ThyPopoverRef } from 'ngx-tethys/popover';
import { Observable, of, Subject } from 'rxjs';
import { catchError, debounceTime, switchMap, take } from 'rxjs/operators';

import { Component, ElementRef, HostBinding, NgZone, OnDestroy, OnInit } from '@angular/core';

import { SeekQueryResult } from '../adapter/adapter';
import { Mention, MentionDefaultDataItem, MentionSuggestionSelectEvent } from '../interfaces';
import { ThyListOptionComponent } from 'ngx-tethys/shared';
import { ThyLoadingComponent } from 'ngx-tethys/loading';
import { NgIf, NgTemplateOutlet, NgFor, SlicePipe } from '@angular/common';

/**
 * @private
 */
@Component({
    selector: 'thy-mention-suggestions',
    templateUrl: './suggestions.component.html',
    standalone: true,
    imports: [NgIf, NgTemplateOutlet, ThyLoadingComponent, ThySelectionListComponent, NgFor, ThyListOptionComponent, SlicePipe]
})
export class ThyMentionSuggestionsComponent<TItem = MentionDefaultDataItem> implements OnInit, OnDestroy {
    data: TItem[];

    mention: Mention<TItem>;

    suggestionSelect$ = new Subject<MentionSuggestionSelectEvent>();

    debounce = 150;

    loadingDone = true;

    private search$ = new Subject<SeekQueryResult>();

    @HostBinding('class.thy-mention-suggestions') suggestionsClass = true;

    constructor(public elementRef: ElementRef<HTMLElement>, private ngZone: NgZone, private popoverRef: ThyPopoverRef<any>) {
        this.search$
            .pipe(
                switchMap(query => {
                    const data = this.mention.search(query.term, this.mention.data);
                    if (data instanceof Observable) {
                        this.loadingDone = false;
                        return (data as Observable<TItem[]>).pipe(debounceTime(this.debounce));
                    } else {
                        return of(data as TItem[]);
                    }
                }),
                catchError(() => {
                    this.loadingDone = false;
                    return [];
                })
            )
            .subscribe(data => {
                this.loadingDone = true;
                this.data = data || [];

                if (this.popoverRef) {
                    if (this.mention.autoClose && this.data.length === 0) {
                        this.popoverRef.close();
                    }
                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                        this.popoverRef.updatePosition();
                    });
                }
            });
    }

    ngOnInit(): void {
        if (this.mention.popoverClass) {
            this.elementRef.nativeElement.classList.add(this.mention.popoverClass);
        }
    }

    search(query: SeekQueryResult) {
        this.search$.next(query);
    }

    select(item: TItem, event: Event) {
        this.suggestionSelect$.next({
            event,
            item
        });
    }

    selectionChange(event: ThySelectionListChange<TItem>) {
        this.select(event.value, event.event);
    }

    ngOnDestroy() {
        this.search$.complete();
    }
}

1	import { ThySelectionListChange, ThySelectionListComponent } from 'ngx-tethys/list';
2	import { ThyPopoverRef } from 'ngx-tethys/popover';
3	import { Observable, of, Subject } from 'rxjs';
4	import { catchError, debounceTime, switchMap, take } from 'rxjs/operators';
5
6	import { Component, ElementRef, HostBinding, NgZone, OnDestroy, OnInit } from '@angular/core';
7
8	import { SeekQueryResult } from '../adapter/adapter';
9	import { Mention, MentionDefaultDataItem, MentionSuggestionSelectEvent } from '../interfaces';
10	import { ThyListOptionComponent } from 'ngx-tethys/shared';
11	import { ThyLoadingComponent } from 'ngx-tethys/loading';
12	import { NgIf, NgTemplateOutlet, NgFor, SlicePipe } from '@angular/common';
13
14	/**	1✔
15	* @private
16	*/	×
17	@Component({	×
18	selector: 'thy-mention-suggestions',	×
19	templateUrl: './suggestions.component.html',	×
20	standalone: true,	×
21	imports: [NgIf, NgTemplateOutlet, ThyLoadingComponent, ThySelectionListComponent, NgFor, ThyListOptionComponent, SlicePipe]	×
22	})	×
23	export class ThyMentionSuggestionsComponent<TItem = MentionDefaultDataItem> implements OnInit, OnDestroy {	×
24	data: TItem[];	×
25
26	mention: Mention<TItem>;	×
27		×
28	suggestionSelect$ = new Subject<MentionSuggestionSelectEvent>();	×
29		×
30	debounce = 150;
31
32	loadingDone = true;	×
33
34	private search$ = new Subject<SeekQueryResult>();
35		×
36	@HostBinding('class.thy-mention-suggestions') suggestionsClass = true;	×
37
38	constructor(public elementRef: ElementRef<HTMLElement>, private ngZone: NgZone, private popoverRef: ThyPopoverRef<any>) {
39	this.search$	×
40	.pipe(	×
41	switchMap(query => {	×
42	const data = this.mention.search(query.term, this.mention.data);	×
43	if (data instanceof Observable) {	×
44	this.loadingDone = false;
45	return (data as Observable<TItem[]>).pipe(debounceTime(this.debounce));	×
46	} else {	×
47	return of(data as TItem[]);
48	}
49	}),
50	catchError(() => {
51	this.loadingDone = false;
52	return [];	×
53	})	×
54	)
55	.subscribe(data => {
56	this.loadingDone = true;
57	this.data = data \|\| [];	×
58
59	if (this.popoverRef) {
60	if (this.mention.autoClose && this.data.length === 0) {	×
61	this.popoverRef.close();
62	}
63	this.ngZone.onStable.pipe(take(1)).subscribe(() => {
64	this.popoverRef.updatePosition();
65	});
66	}	×
67	});
68	}
69		×
70	ngOnInit(): void {
71	if (this.mention.popoverClass) {	1✔
72	this.elementRef.nativeElement.classList.add(this.mention.popoverClass);
73	}
74	}
75
76	search(query: SeekQueryResult) {	1✔
77	this.search$.next(query);
78	}
79
80	select(item: TItem, event: Event) {	1✔
81	this.suggestionSelect$.next({
82	event,
83	item
84	});
85	}
86
87	selectionChange(event: ThySelectionListChange<TItem>) {
88	this.select(event.value, event.event);
89	}
90
91	ngOnDestroy() {
92	this.search$.complete();
93	}
94	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous