mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
* feat(ui): create gf-tags-selector component * feat(ui): implement gf-tags-selector in activity dialog * feat(ui): implement gf-tags-selector in holding detail dialog * Update changelogpull/4272/head^2
Ken Tandrian
2 months ago
committed by
GitHub
GitHub
10 changed files with 191 additions and 171 deletions
@ -0,0 +1 @@ |
|||||
|
export * from './tags-selector.component'; |
||||
@ -0,0 +1,32 @@ |
|||||
|
<mat-form-field appearance="outline" class="w-100 without-hint"> |
||||
|
<mat-label i18n>Tags</mat-label> |
||||
|
<mat-chip-grid #tagsChipList> |
||||
|
@for (tag of tagsSelected(); track tag.id) { |
||||
|
<mat-chip-row |
||||
|
matChipRemove |
||||
|
[removable]="true" |
||||
|
(removed)="onRemoveTag(tag)" |
||||
|
> |
||||
|
{{ tag.name }} |
||||
|
<ion-icon matChipTrailingIcon name="close-outline" /> |
||||
|
</mat-chip-row> |
||||
|
} |
||||
|
<input |
||||
|
#tagInput |
||||
|
[formControl]="tagInputControl" |
||||
|
[matAutocomplete]="autocompleteTags" |
||||
|
[matChipInputFor]="tagsChipList" |
||||
|
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" |
||||
|
/> |
||||
|
</mat-chip-grid> |
||||
|
<mat-autocomplete |
||||
|
#autocompleteTags="matAutocomplete" |
||||
|
(optionSelected)="onAddTag($event)" |
||||
|
> |
||||
|
@for (tag of filteredOptions | async; track tag.id) { |
||||
|
<mat-option [value]="tag.id"> |
||||
|
{{ tag.name }} |
||||
|
</mat-option> |
||||
|
} |
||||
|
</mat-autocomplete> |
||||
|
</mat-form-field> |
||||
@ -0,0 +1,3 @@ |
|||||
|
:host { |
||||
|
display: block; |
||||
|
} |
||||
@ -0,0 +1,123 @@ |
|||||
|
import { COMMA, ENTER } from '@angular/cdk/keycodes'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { |
||||
|
ChangeDetectionStrategy, |
||||
|
Component, |
||||
|
CUSTOM_ELEMENTS_SCHEMA, |
||||
|
ElementRef, |
||||
|
EventEmitter, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
Output, |
||||
|
signal, |
||||
|
ViewChild |
||||
|
} from '@angular/core'; |
||||
|
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; |
||||
|
import { |
||||
|
MatAutocompleteModule, |
||||
|
MatAutocompleteSelectedEvent |
||||
|
} from '@angular/material/autocomplete'; |
||||
|
import { MatChipsModule } from '@angular/material/chips'; |
||||
|
import { MatFormFieldModule } from '@angular/material/form-field'; |
||||
|
import { MatInputModule } from '@angular/material/input'; |
||||
|
import { Tag } from '@prisma/client'; |
||||
|
import { BehaviorSubject, Subject, takeUntil } from 'rxjs'; |
||||
|
|
||||
|
@Component({ |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
FormsModule, |
||||
|
MatAutocompleteModule, |
||||
|
MatChipsModule, |
||||
|
MatFormFieldModule, |
||||
|
MatInputModule, |
||||
|
ReactiveFormsModule |
||||
|
], |
||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA], |
||||
|
selector: 'gf-tags-selector', |
||||
|
styleUrls: ['./tags-selector.component.scss'], |
||||
|
templateUrl: 'tags-selector.component.html' |
||||
|
}) |
||||
|
export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy { |
||||
|
@Input() tags: Tag[]; |
||||
|
@Input() tagsAvailable: Tag[]; |
||||
|
|
||||
|
@Output() tagsChanged = new EventEmitter<Tag[]>(); |
||||
|
|
||||
|
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>; |
||||
|
|
||||
|
public filteredOptions: Subject<Tag[]> = new BehaviorSubject([]); |
||||
|
public readonly separatorKeysCodes: number[] = [COMMA, ENTER]; |
||||
|
public readonly tagInputControl = new FormControl(''); |
||||
|
public readonly tagsSelected = signal<Tag[]>([]); |
||||
|
|
||||
|
private unsubscribeSubject = new Subject<void>(); |
||||
|
|
||||
|
public constructor() { |
||||
|
this.tagInputControl.valueChanges |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe((value) => { |
||||
|
this.filteredOptions.next(this.filterTags(value)); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.tagsSelected.set(this.tags); |
||||
|
this.updateFilters(); |
||||
|
} |
||||
|
|
||||
|
public ngOnChanges() { |
||||
|
this.tagsSelected.set(this.tags); |
||||
|
this.updateFilters(); |
||||
|
} |
||||
|
|
||||
|
public onAddTag(event: MatAutocompleteSelectedEvent) { |
||||
|
const tag = this.tagsAvailable.find(({ id }) => { |
||||
|
return id === event.option.value; |
||||
|
}); |
||||
|
|
||||
|
this.tagsSelected.update((tags) => { |
||||
|
return [...(tags ?? []), tag]; |
||||
|
}); |
||||
|
|
||||
|
this.tagsChanged.emit(this.tagsSelected()); |
||||
|
this.tagInput.nativeElement.value = ''; |
||||
|
this.tagInputControl.setValue(undefined); |
||||
|
} |
||||
|
|
||||
|
public onRemoveTag(tag: Tag) { |
||||
|
this.tagsSelected.update((tags) => { |
||||
|
return tags.filter(({ id }) => { |
||||
|
return id !== tag.id; |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
this.tagsChanged.emit(this.tagsSelected()); |
||||
|
this.updateFilters(); |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.unsubscribeSubject.next(); |
||||
|
this.unsubscribeSubject.complete(); |
||||
|
} |
||||
|
|
||||
|
private filterTags(query: string = ''): Tag[] { |
||||
|
const tags = this.tagsSelected() ?? []; |
||||
|
const tagIds = tags.map(({ id }) => { |
||||
|
return id; |
||||
|
}); |
||||
|
|
||||
|
return this.tagsAvailable.filter(({ id, name }) => { |
||||
|
return ( |
||||
|
!tagIds.includes(id) && name.toLowerCase().includes(query.toLowerCase()) |
||||
|
); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private updateFilters() { |
||||
|
this.filteredOptions.next(this.filterTags()); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue