FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

AW-3836 fixed tags component
Some checks failed
FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
Mark van der Wal 2022-06-06 12:45:23 +02:00
parent 57e0a37c78
commit 0c4259d72e
2 changed files with 133 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
projects/common/src/fm/components/tag-input/tag-input.component.html
View File

@ -1,3 +1,11 @@
<div class="tags"> <div class="tags">
<span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/> <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i
</div> (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input
type="text" #tagInputElement
(blur)="handleBlur($event, false)"
(keyup)="handleKeyUp($event)"
[(ngModel)]="tag"
[ngbTypeahead]="findTag"
(selectItem)="handleSelect($event)"
placeholder="New tag"/>
</div>

226
projects/common/src/fm/components/tag-input/tag-input.component.ts
View File

@ -1,104 +1,122 @@
import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core'; import {Component, ElementRef, forwardRef, Input, ViewChild} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import { Observable,of } from 'rxjs'; import {Observable, of} from 'rxjs';
import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators' import {catchError, debounceTime, distinctUntilChanged, switchMap, tap} from 'rxjs/operators';
import { TypeaheadService } from '../../services/typeahead.service'; import {TypeaheadService} from '@farmmaps/common';
import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'fm-tag-input', @Component({
templateUrl: 'tag-input.component.html', selector: 'fm-tag-input',
styleUrls: ['tag-input.component.scss'], templateUrl: 'tag-input.component.html',
providers: [ styleUrls: ['tag-input.component.scss'],
{ providers: [
provide: NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => TagInputComponent), provide: NG_VALUE_ACCESSOR,
multi: true useExisting: forwardRef(() => TagInputComponent),
} multi: true
] }
}) ]
})
export class TagInputComponent implements ControlValueAccessor {
@Input() tags: string[] export class TagInputComponent implements ControlValueAccessor {
@ViewChild('taginput', { static: true }) tagInputElement: ElementRef; @Input() tags: string[] = [];
public tag: string; @ViewChild('tagInputElement', {static: true}) tagInputElement: ElementRef;
searching = false; @ViewChild(NgbTypeahead, {static: true}) typeahead: NgbTypeahead;
searchFailed = false;
public tag: string;
constructor(private typeaheadService: TypeaheadService) { searching = false;
} searchFailed = false;
tagExists(tag) { constructor(private typeaheadService: TypeaheadService) {
if (tag.length == 0) return true; }
for (let t of this.tags) {
if (t.toLowerCase() == tag.toLowerCase()) return true; tagExists(tag) {
} if (tag.length === 0) {
return false; return true;
} }
for (const t of this.tags) {
handleDeleteTag(tag) { if (t.toLowerCase() === tag.toLowerCase()) {
let tags = []; return true;
for (let t of this.tags) { }
if (t != tag) tags.push(t); }
} return false;
this.tags = tags; }
this.propagateChange(tags);
} addTag(tag, keepFocus = true) {
if (!this.tagExists(tag)) {
handleAddTag(event) { this.tags.push(tag);
if (!this.tagExists(this.tag)) { this.propagateChange(this.tags);
this.tags.push(this.tag); }
this.propagateChange(this.tags); this.tag = '';
}
this.tag = ""; if (keepFocus) {
this.tagInputElement.nativeElement.focus(); this.tagInputElement.nativeElement.focus();
} }
}
handleCheckAddTag(event: KeyboardEvent) {
if (event.keyCode == 188) { handleDeleteTag(tag) {
let tag = this.tag.substr(0, this.tag.length - 1); // strip , const tags = [];
if (!this.tagExists(tag)) { for (const t of this.tags) {
this.tags.push(tag); if (t !== tag) {
this.propagateChange(this.tags); tags.push(t);
} }
this.tag = ""; }
} this.tags = tags;
} this.propagateChange(tags);
}
handleSelect(event) {
if (!this.tagExists(event.item)) { handleBlur(event, keepFocus = true) {
this.tags.push(event.item); if (!this.typeahead.isPopupOpen()) {
this.propagateChange(this.tags); this.addTag(this.tag, keepFocus);
} } else {
event.preventDefault(); this.tag = '';
this.tag = ""; }
} }
propagateChange = (_: any) => { }; handleKeyUp(event: KeyboardEvent) {
if (event.keyCode === 188) {
registerOnChange(fn) { const tag = this.tag.substr(0, this.tag.length - 1); // strip ,
this.propagateChange = fn; this.addTag(tag);
} }
}
findTag = (text$: Observable<string>) =>
text$.pipe( handleSelect(event) {
debounceTime(200), if (!this.tagExists(event.item)) {
distinctUntilChanged(), this.tags.push(event.item);
tap(() => this.searching = true), this.propagateChange(this.tags);
switchMap(term => term.length < 1 ? of([]) : }
this.typeaheadService.getTagTypeaheadItems(term).pipe( event.preventDefault();
tap(() => this.searchFailed = false), this.tag = '';
catchError(() => { }
this.searchFailed = true;
return of([]); propagateChange = (_: any) => {
})) }
),
tap(() => this.searching = false) registerOnChange(fn) {
); this.propagateChange = fn;
}
writeValue(value: any) {
this.tags = value; findTag = (text$: Observable<string>) =>
this.tag = ""; text$.pipe(
} distinctUntilChanged(),
debounceTime(200),
registerOnTouched() { } tap(() => this.searching = true),
} switchMap(term => term.length < 1 ? of([]) :
this.typeaheadService.getTagTypeaheadItems(term).pipe(
tap(() => this.searchFailed = false),
catchError(() => {
this.searchFailed = true;
return of([]);
}))
),
tap(() => this.searching = false)
)
writeValue(value: any) {
this.tags = value;
this.tag = '';
}
registerOnTouched() {
}
}