mirror of https://github.com/ghostfolio/ghostfolio
Thomas Kaul
1 year ago
committed by
GitHub
GitHub
12 changed files with 382 additions and 236 deletions
@ -1,169 +1,169 @@ |
|||||
<div |
<div (click)="$event.stopPropagation()"> |
||||
[style.width]="deviceType === 'mobile' ? '85vw' : '30rem'" |
|
||||
(click)="$event.stopPropagation();" |
|
||||
(keydown.tab)="$event.stopPropagation()" |
|
||||
> |
|
||||
<div class="align-items-center d-flex search-container"> |
|
||||
<ion-icon class="ml-2 mr-0" name="search-outline" /> |
|
||||
<input |
|
||||
#search |
|
||||
autocomplete="off" |
|
||||
autocorrect="off" |
|
||||
class="border-0 p-2 w-100" |
|
||||
name="search" |
|
||||
type="text" |
|
||||
[formControl]="searchFormControl" |
|
||||
[placeholder]="placeholder" |
|
||||
/> |
|
||||
<div |
|
||||
*ngIf="deviceType !== 'mobile' && !searchFormControl.value" |
|
||||
class="hot-key-hint mx-1 px-1" |
|
||||
> |
|
||||
/ |
|
||||
</div> |
|
||||
<button |
|
||||
*ngIf="searchFormControl.value" |
|
||||
class="h-100 no-min-width px-3 rounded-0" |
|
||||
mat-button |
|
||||
(click)="initialize()" |
|
||||
> |
|
||||
<ion-icon class="m-0" name="close-circle-outline" /> |
|
||||
</button> |
|
||||
<button |
|
||||
*ngIf="!searchFormControl.value" |
|
||||
class="h-100 no-min-width px-3 rounded-0" |
|
||||
mat-button |
|
||||
(click)="onCloseAssistant()" |
|
||||
> |
|
||||
<ion-icon class="m-0" name="close-outline" /> |
|
||||
</button> |
|
||||
</div> |
|
||||
<div |
<div |
||||
*ngIf="isLoading || searchFormControl.value" |
[style.width]="deviceType === 'mobile' ? '85vw' : '30rem'" |
||||
class="overflow-auto py-3 result-container" |
(keydown.tab)="$event.stopPropagation()" |
||||
> |
> |
||||
<div> |
<div class="align-items-center d-flex search-container"> |
||||
<div class="h6 mb-1 px-2" i18n>Holdings</div> |
<ion-icon class="ml-2 mr-0" name="search-outline" /> |
||||
<gf-assistant-list-item |
<input |
||||
*ngFor="let searchResultItem of searchResults?.holdings" |
#search |
||||
mode="holding" |
autocomplete="off" |
||||
[item]="searchResultItem" |
autocorrect="off" |
||||
(clicked)="onCloseAssistant()" |
class="border-0 p-2 w-100" |
||||
|
name="search" |
||||
|
type="text" |
||||
|
[formControl]="searchFormControl" |
||||
|
[placeholder]="placeholder" |
||||
/> |
/> |
||||
<ng-container *ngIf="searchResults?.holdings?.length === 0"> |
<div |
||||
<ngx-skeleton-loader |
*ngIf="deviceType !== 'mobile' && !searchFormControl.value" |
||||
*ngIf="isLoading" |
class="hot-key-hint mx-1 px-1" |
||||
animation="pulse" |
> |
||||
class="mx-2" |
/ |
||||
[theme]="{ |
</div> |
||||
|
<button |
||||
|
*ngIf="searchFormControl.value" |
||||
|
class="h-100 no-min-width px-3 rounded-0" |
||||
|
mat-button |
||||
|
(click)="initialize()" |
||||
|
> |
||||
|
<ion-icon class="m-0" name="close-circle-outline" /> |
||||
|
</button> |
||||
|
<button |
||||
|
*ngIf="!searchFormControl.value" |
||||
|
class="h-100 no-min-width px-3 rounded-0" |
||||
|
mat-button |
||||
|
(click)="onCloseAssistant()" |
||||
|
> |
||||
|
<ion-icon class="m-0" name="close-outline" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div |
||||
|
*ngIf="isLoading || searchFormControl.value" |
||||
|
class="overflow-auto py-3 result-container" |
||||
|
> |
||||
|
<div> |
||||
|
<div class="h6 mb-1 px-2" i18n>Holdings</div> |
||||
|
<gf-assistant-list-item |
||||
|
*ngFor="let searchResultItem of searchResults?.holdings" |
||||
|
mode="holding" |
||||
|
[item]="searchResultItem" |
||||
|
(clicked)="onCloseAssistant()" |
||||
|
/> |
||||
|
<ng-container *ngIf="searchResults?.holdings?.length === 0"> |
||||
|
<ngx-skeleton-loader |
||||
|
*ngIf="isLoading" |
||||
|
animation="pulse" |
||||
|
class="mx-2" |
||||
|
[theme]="{ |
||||
height: '1.5rem', |
height: '1.5rem', |
||||
width: '100%' |
width: '100%' |
||||
}" |
}" |
||||
|
/> |
||||
|
<div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
<div *ngIf="hasPermissionToAccessAdminControl" class="mt-3"> |
||||
|
<div class="h6 mb-1 px-2" i18n>Asset Profiles</div> |
||||
|
<gf-assistant-list-item |
||||
|
*ngFor="let searchResultItem of searchResults?.assetProfiles" |
||||
|
mode="assetProfile" |
||||
|
[item]="searchResultItem" |
||||
|
(clicked)="onCloseAssistant()" |
||||
/> |
/> |
||||
<div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div> |
<ng-container *ngIf="searchResults?.assetProfiles?.length === 0"> |
||||
</ng-container> |
<ngx-skeleton-loader |
||||
</div> |
*ngIf="isLoading" |
||||
<div *ngIf="hasPermissionToAccessAdminControl" class="mt-3"> |
animation="pulse" |
||||
<div class="h6 mb-1 px-2" i18n>Asset Profiles</div> |
class="mx-2" |
||||
<gf-assistant-list-item |
[theme]="{ |
||||
*ngFor="let searchResultItem of searchResults?.assetProfiles" |
|
||||
mode="assetProfile" |
|
||||
[item]="searchResultItem" |
|
||||
(clicked)="onCloseAssistant()" |
|
||||
/> |
|
||||
<ng-container *ngIf="searchResults?.assetProfiles?.length === 0"> |
|
||||
<ngx-skeleton-loader |
|
||||
*ngIf="isLoading" |
|
||||
animation="pulse" |
|
||||
class="mx-2" |
|
||||
[theme]="{ |
|
||||
height: '1.5rem', |
height: '1.5rem', |
||||
width: '100%' |
width: '100%' |
||||
}" |
}" |
||||
/> |
/> |
||||
<div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div> |
<div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div> |
||||
</ng-container> |
</ng-container> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
<form [formGroup]="filterForm"> |
||||
<form [formGroup]="filterForm"> |
<div |
||||
<div |
*ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures" |
||||
*ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures" |
class="filter-container" |
||||
class="filter-container" |
|
||||
> |
|
||||
<div class="p-3"> |
|
||||
<mat-form-field appearance="outline" class="w-100 without-hint"> |
|
||||
<mat-label i18n>Date Range</mat-label> |
|
||||
<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-group |
|
||||
animationDuration="0" |
|
||||
mat-align-tabs="start" |
|
||||
[mat-stretch-tabs]="false" |
|
||||
(click)="$event.stopPropagation();" |
|
||||
> |
> |
||||
<mat-tab> |
<div class="p-3"> |
||||
<ng-template mat-tab-label |
<mat-form-field appearance="outline" class="w-100 without-hint"> |
||||
><ion-icon name="albums-outline" /><span |
<mat-label i18n>Date Range</mat-label> |
||||
class="d-none d-sm-block ml-2" |
<mat-select |
||||
i18n |
[formControl]="dateRangeFormControl" |
||||
>Accounts</span |
(selectionChange)="onChangeDateRange($event.value)" |
||||
></ng-template |
> |
||||
> |
@for (range of dateRangeOptions; track range) { |
||||
<div class="p-3"> |
<mat-option [value]="range.value">{{ range.label }}</mat-option> |
||||
<mat-radio-group color="primary" formControlName="account"> |
|
||||
<mat-radio-button class="d-flex flex-column" i18n [value]="null" |
|
||||
>No account</mat-radio-button |
|
||||
> |
|
||||
@for (account of accounts; track account.id) { |
|
||||
<mat-radio-button class="d-flex flex-column" [value]="account.id" |
|
||||
>{{ account.name }}</mat-radio-button |
|
||||
> |
|
||||
} |
|
||||
</mat-radio-group> |
|
||||
</div> |
|
||||
</mat-tab> |
|
||||
<mat-tab> |
|
||||
<ng-template mat-tab-label |
|
||||
><ion-icon name="pricetag-outline" /><span |
|
||||
class="d-none d-sm-block ml-2" |
|
||||
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> |
</mat-select> |
||||
</div> |
</mat-form-field> |
||||
</mat-tab> |
</div> |
||||
</mat-tab-group> |
<mat-tab-group |
||||
<div class="p-3"> |
animationDuration="0" |
||||
<button |
mat-align-tabs="start" |
||||
class="w-100" |
[mat-stretch-tabs]="false" |
||||
color="primary" |
|
||||
i18n |
|
||||
mat-flat-button |
|
||||
[disabled]="!hasFilter(filterForm.value)" |
|
||||
(click)="onResetFilters()" |
|
||||
> |
> |
||||
Reset Filters |
<mat-tab> |
||||
</button> |
<ng-template mat-tab-label |
||||
|
><ion-icon name="albums-outline" /><span |
||||
|
class="d-none d-sm-block ml-2" |
||||
|
i18n |
||||
|
>Accounts</span |
||||
|
></ng-template |
||||
|
> |
||||
|
<div class="p-3"> |
||||
|
<mat-radio-group color="primary" formControlName="account"> |
||||
|
<mat-radio-button class="d-flex flex-column" i18n [value]="null" |
||||
|
>No account</mat-radio-button |
||||
|
> |
||||
|
@for (account of accounts; track account.id) { |
||||
|
<mat-radio-button class="d-flex flex-column" [value]="account.id" |
||||
|
>{{ account.name }}</mat-radio-button |
||||
|
> |
||||
|
} |
||||
|
</mat-radio-group> |
||||
|
</div> |
||||
|
</mat-tab> |
||||
|
<mat-tab> |
||||
|
<ng-template mat-tab-label |
||||
|
><ion-icon name="pricetag-outline" /><span |
||||
|
class="d-none d-sm-block ml-2" |
||||
|
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 class="p-3"> |
||||
|
<button |
||||
|
class="w-100" |
||||
|
color="primary" |
||||
|
i18n |
||||
|
mat-flat-button |
||||
|
[disabled]="!hasFilter(filterForm.value)" |
||||
|
(click)="onResetFilters()" |
||||
|
> |
||||
|
Reset Filters |
||||
|
</button> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</form> |
||||
</form> |
</div> |
||||
|
|||||
Loading…
Reference in new issue