mirror of https://github.com/ghostfolio/ghostfolio
Thomas Kaul
12 months ago
committed by
GitHub
GitHub
12 changed files with 382 additions and 236 deletions
@ -1,169 +1,169 @@ |
|||
<div |
|||
[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 (click)="$event.stopPropagation()"> |
|||
<div |
|||
*ngIf="isLoading || searchFormControl.value" |
|||
class="overflow-auto py-3 result-container" |
|||
[style.width]="deviceType === 'mobile' ? '85vw' : '30rem'" |
|||
(keydown.tab)="$event.stopPropagation()" |
|||
> |
|||
<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()" |
|||
<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" |
|||
/> |
|||
<ng-container *ngIf="searchResults?.holdings?.length === 0"> |
|||
<ngx-skeleton-loader |
|||
*ngIf="isLoading" |
|||
animation="pulse" |
|||
class="mx-2" |
|||
[theme]="{ |
|||
<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 |
|||
*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', |
|||
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> |
|||
</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()" |
|||
/> |
|||
<ng-container *ngIf="searchResults?.assetProfiles?.length === 0"> |
|||
<ngx-skeleton-loader |
|||
*ngIf="isLoading" |
|||
animation="pulse" |
|||
class="mx-2" |
|||
[theme]="{ |
|||
<ng-container *ngIf="searchResults?.assetProfiles?.length === 0"> |
|||
<ngx-skeleton-loader |
|||
*ngIf="isLoading" |
|||
animation="pulse" |
|||
class="mx-2" |
|||
[theme]="{ |
|||
height: '1.5rem', |
|||
width: '100%' |
|||
}" |
|||
/> |
|||
<div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div> |
|||
</ng-container> |
|||
/> |
|||
<div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div> |
|||
</ng-container> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<form [formGroup]="filterForm"> |
|||
<div |
|||
*ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures" |
|||
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();" |
|||
<form [formGroup]="filterForm"> |
|||
<div |
|||
*ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures" |
|||
class="filter-container" |
|||
> |
|||
<mat-tab> |
|||
<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 |
|||
> |
|||
<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-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()" |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
<mat-tab-group |
|||
animationDuration="0" |
|||
mat-align-tabs="start" |
|||
[mat-stretch-tabs]="false" |
|||
> |
|||
Reset Filters |
|||
</button> |
|||
<mat-tab> |
|||
<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> |
|||
</form> |
|||
</form> |
|||
</div> |
|||
|
|||
Loading…
Reference in new issue