sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/migrate tag selector to form group in assistant (#2926)

Browse Source 
* Introduce filter form group

* Update changelog
This commit is contained in:
Thomas Kaul 2024-01-27 08:45:55 +01:00 committed by GitHub
parent 9fdbd22cb5
commit 2c068c412d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 78 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- Migrated the tag selector to a form group in the assistant (experimental)
- Formatted the name in the _EOD Historical Data_ service
- Improved the language localization for German (`de`)

42
libs/ui/src/lib/assistant/assistant.component.ts
View File

@ -15,7 +15,7 @@ import {
ViewChild,
ViewChildren
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { FormBuilder, FormControl } from '@angular/forms';
import { MatMenuTrigger } from '@angular/material/menu';
import { AdminService } from '@ghostfolio/client/services/admin.service';
import { DataService } from '@ghostfolio/client/services/data.service';
@ -110,6 +110,9 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
{ label: $localize`5Y`, value: '5y' },
{ label: $localize`Max`, value: 'max' }
];
public filterForm = this.formBuilder.group({
tag: new FormControl<string>(undefined)
});
public isLoading = false;
public isOpen = false;
public placeholder = $localize`Find holding...`;
@ -119,7 +122,6 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
holdings: []
};
public tags: Tag[] = [];
public tagsFormControl = new FormControl<string>(undefined);
private keyManager: FocusKeyManager<AssistantListItemComponent>;
private unsubscribeSubject = new Subject<void>();
@ -127,7 +129,8 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
public constructor(
private adminService: AdminService,
private changeDetectorRef: ChangeDetectorRef,
private dataService: DataService
private dataService: DataService,
private formBuilder: FormBuilder
) {}
public ngOnInit() {
@ -140,6 +143,19 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
};
});
this.filterForm
.get('tag')
.valueChanges.pipe(takeUntil(this.unsubscribeSubject))
.subscribe((tagId) => {
const tag = this.tags.find(({ id }) => {
return id === tagId;
});
this.selectedTagChanged.emit(tag);
this.onCloseAssistant();
});
this.searchFormControl.valueChanges
.pipe(
map((searchTerm) => {
@ -181,8 +197,14 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
public ngOnChanges() {
this.dateRangeFormControl.setValue(this.user?.settings?.dateRange ?? null);
this.tagsFormControl.setValue(
this.user?.settings?.['filters.tags']?.[0] ?? null
this.filterForm.setValue(
{
tag: this.user?.settings?.['filters.tags']?.[0] ?? null
},
{
emitEvent: false
}
);
}
@ -219,16 +241,6 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
this.closed.emit();
}
public onTagChange() {
const selectedTag = this.tags.find(({ id }) => {
return id === this.tagsFormControl.value;
});
this.selectedTagChanged.emit(selectedTag);
this.onCloseAssistant();
}
public setIsOpen(aIsOpen: boolean) {
this.isOpen = aIsOpen;
}

102
libs/ui/src/lib/assistant/assistant.html
View File

@ -86,57 +86,55 @@
</div>
</div>
</div>
<div
*ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
class="filter-container"
>
<mat-tab-group
animationDuration="0"
mat-align-tabs="start"
[mat-stretch-tabs]="false"
(click)="$event.stopPropagation();"
<form [formGroup]="filterForm">
<div
*ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
class="filter-container"
>
<mat-tab>
<ng-template mat-tab-label
><ion-icon class="mr-2" name="calendar-clear-outline" /><span i18n
>Date Range</span
></ng-template
>
<div class="p-3">
<mat-form-field appearance="outline" class="w-100 without-hint">
<mat-select
[formControl]="dateRangeFormControl"
(selectionChange)="onChangeDateRange($event.value)"
>
@for (range of dateRangeOptions; track range) {
<mat-option [value]="range.value">{{ range.label }}</mat-option>
}
</mat-select>
</mat-form-field>
</div>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label
><ion-icon class="mr-2" name="pricetag-outline" /><span i18n
>Tags</span
></ng-template
>
<div class="p-3">
<mat-radio-group
color="primary"
[formControl]="tagsFormControl"
(change)="onTagChange()"
<mat-tab-group
animationDuration="0"
mat-align-tabs="start"
[mat-stretch-tabs]="false"
(click)="$event.stopPropagation();"
>
<mat-tab>
<ng-template mat-tab-label
><ion-icon class="mr-2" name="calendar-clear-outline" /><span i18n
>Date Range</span
></ng-template
>
<mat-radio-button class="d-flex flex-column" i18n [value]="null"
>No tag</mat-radio-button
>
@for (tag of tags; track tag.id) {
<mat-radio-button class="d-flex flex-column" [value]="tag.id"
>{{ tag.name }}</mat-radio-button
>
}
</mat-radio-group>
</div>
</mat-tab>
</mat-tab-group>
</div>
<div class="p-3">
<mat-form-field appearance="outline" class="w-100 without-hint">
<mat-select
[formControl]="dateRangeFormControl"
(selectionChange)="onChangeDateRange($event.value)"
>
@for (range of dateRangeOptions; track range) {
<mat-option [value]="range.value">{{ range.label }}</mat-option>
}
</mat-select>
</mat-form-field>
</div>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label
><ion-icon class="mr-2" name="pricetag-outline" /><span i18n
>Tags</span
></ng-template
>
<div class="p-3">
<mat-radio-group color="primary" formControlName="tag">
<mat-radio-button class="d-flex flex-column" i18n [value]="null"
>No tag</mat-radio-button
>
@for (tag of tags; track tag.id) {
<mat-radio-button class="d-flex flex-column" [value]="tag.id"
>{{ tag.name }}</mat-radio-button
>
}
</mat-radio-group>
</div>
</mat-tab>
</mat-tab-group>
</div>
</form>