|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<div |
|
|
|
[style.width]="deviceType === 'mobile' ? '85vw' : '30rem'" |
|
|
|
(keydown.tab)="$event.stopPropagation()" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="align-items-center d-flex search-container"> |
|
|
|
<ion-icon class="ml-2 mr-0" name="search-outline" /> |
|
|
|
<input |
|
|
|
@ -14,77 +14,91 @@ |
|
|
|
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 |
|
|
|
*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" |
|
|
|
@if (deviceType !== 'mobile' && !searchFormControl.value) { |
|
|
|
<div |
|
|
|
class="hot-key-hint mx-1 px-1" |
|
|
|
> |
|
|
|
/ |
|
|
|
</div> |
|
|
|
} |
|
|
|
@if (searchFormControl.value) { |
|
|
|
<button |
|
|
|
class="h-100 no-min-width px-3 rounded-0" |
|
|
|
mat-button |
|
|
|
(click)="initialize()" |
|
|
|
> |
|
|
|
<ion-icon class="m-0" name="close-circle-outline" /> |
|
|
|
</button> |
|
|
|
} |
|
|
|
@if (!searchFormControl.value) { |
|
|
|
<button |
|
|
|
class="h-100 no-min-width px-3 rounded-0" |
|
|
|
mat-button |
|
|
|
(click)="onCloseAssistant()" |
|
|
|
> |
|
|
|
<ion-icon class="m-0" name="close-outline" /> |
|
|
|
</button> |
|
|
|
} |
|
|
|
</div> |
|
|
|
@if (isLoading || searchFormControl.value) { |
|
|
|
<div |
|
|
|
class="overflow-auto py-3 result-container" |
|
|
|
> |
|
|
|
<div> |
|
|
|
<div class="h6 mb-1 px-2" i18n>Holdings</div> |
|
|
|
@for (searchResultItem of searchResults?.holdings; track searchResultItem) { |
|
|
|
<gf-assistant-list-item |
|
|
|
mode="holding" |
|
|
|
[item]="searchResultItem" |
|
|
|
(clicked)="onCloseAssistant()" |
|
|
|
/> |
|
|
|
} |
|
|
|
@if (searchResults?.holdings?.length === 0) { |
|
|
|
@if (isLoading) { |
|
|
|
<ngx-skeleton-loader |
|
|
|
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()" |
|
|
|
/> |
|
|
|
<ng-container *ngIf="searchResults?.assetProfiles?.length === 0"> |
|
|
|
<ngx-skeleton-loader |
|
|
|
*ngIf="isLoading" |
|
|
|
animation="pulse" |
|
|
|
class="mx-2" |
|
|
|
/> |
|
|
|
} |
|
|
|
@if (!isLoading) { |
|
|
|
<div class="px-2 py-1" i18n>No entries...</div> |
|
|
|
} |
|
|
|
} |
|
|
|
</div> |
|
|
|
@if (hasPermissionToAccessAdminControl) { |
|
|
|
<div class="mt-3"> |
|
|
|
<div class="h6 mb-1 px-2" i18n>Asset Profiles</div> |
|
|
|
@for (searchResultItem of searchResults?.assetProfiles; track searchResultItem) { |
|
|
|
<gf-assistant-list-item |
|
|
|
mode="assetProfile" |
|
|
|
[item]="searchResultItem" |
|
|
|
(clicked)="onCloseAssistant()" |
|
|
|
/> |
|
|
|
} |
|
|
|
@if (searchResults?.assetProfiles?.length === 0) { |
|
|
|
@if (isLoading) { |
|
|
|
<ngx-skeleton-loader |
|
|
|
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> |
|
|
|
/> |
|
|
|
} |
|
|
|
@if (!isLoading) { |
|
|
|
<div class="px-2 py-1" i18n>No entries...</div> |
|
|
|
} |
|
|
|
} |
|
|
|
</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
<form [formGroup]="filterForm"> |
|
|
|
@if (!searchFormControl.value) { |
|
|
|
@ -94,7 +108,7 @@ |
|
|
|
<mat-select |
|
|
|
[formControl]="dateRangeFormControl" |
|
|
|
(selectionChange)="onChangeDateRange($event.value)" |
|
|
|
> |
|
|
|
> |
|
|
|
@for (range of dateRangeOptions; track range) { |
|
|
|
<mat-option [value]="range.value">{{ range.label }}</mat-option> |
|
|
|
} |
|
|
|
@ -110,93 +124,94 @@ |
|
|
|
@for (account of accounts; track account.id) { |
|
|
|
<mat-option [value]="account.id"> |
|
|
|
<div class="d-flex"> |
|
|
|
<gf-asset-profile-icon |
|
|
|
*ngIf="account.Platform?.url" |
|
|
|
class="mr-1" |
|
|
|
[tooltip]="account.Platform?.name" |
|
|
|
[url]="account.Platform?.url" |
|
|
|
/><span>{{ account.name }}</span> |
|
|
|
</div> |
|
|
|
</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="mb-3"> |
|
|
|
<mat-form-field appearance="outline" class="w-100 without-hint"> |
|
|
|
<mat-label i18n>Holding</mat-label> |
|
|
|
<mat-select |
|
|
|
formControlName="holding" |
|
|
|
[compareWith]="holdingComparisonFunction" |
|
|
|
> |
|
|
|
<mat-select-trigger>{{ |
|
|
|
filterForm.get('holding')?.value?.name |
|
|
|
}}</mat-select-trigger> |
|
|
|
<mat-option [value]="null" /> |
|
|
|
@for (holding of holdings; track holding.name) { |
|
|
|
<mat-option [value]="holding"> |
|
|
|
<div class="line-height-1 text-truncate"> |
|
|
|
<span |
|
|
|
><b>{{ holding.name }}</b></span |
|
|
|
> |
|
|
|
<br /> |
|
|
|
<small class="text-muted" |
|
|
|
>{{ holding.symbol | gfSymbol }} · |
|
|
|
{{ holding.currency }}</small |
|
|
|
> |
|
|
|
</div> |
|
|
|
</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="mb-3"> |
|
|
|
<mat-form-field appearance="outline" class="w-100 without-hint"> |
|
|
|
<mat-label i18n>Tag</mat-label> |
|
|
|
<mat-select formControlName="tag"> |
|
|
|
<mat-option [value]="null" /> |
|
|
|
@for (tag of tags; track tag.id) { |
|
|
|
<mat-option [value]="tag.id">{{ tag.label }}</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="mb-3"> |
|
|
|
<mat-form-field appearance="outline" class="w-100 without-hint"> |
|
|
|
<mat-label i18n>Asset Class</mat-label> |
|
|
|
<mat-select formControlName="assetClass"> |
|
|
|
<mat-option [value]="null" /> |
|
|
|
@for (assetClass of assetClasses; track assetClass.id) { |
|
|
|
<mat-option [value]="assetClass.id">{{ |
|
|
|
assetClass.label |
|
|
|
}}</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="d-flex w-100"> |
|
|
|
<button |
|
|
|
i18n |
|
|
|
mat-button |
|
|
|
@if (account.Platform?.url) { |
|
|
|
<gf-asset-profile-icon |
|
|
|
class="mr-1" |
|
|
|
[tooltip]="account.Platform?.name" |
|
|
|
[url]="account.Platform?.url" |
|
|
|
/> |
|
|
|
}<span>{{ account.name }}</span> |
|
|
|
</div> |
|
|
|
</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="mb-3"> |
|
|
|
<mat-form-field appearance="outline" class="w-100 without-hint"> |
|
|
|
<mat-label i18n>Holding</mat-label> |
|
|
|
<mat-select |
|
|
|
formControlName="holding" |
|
|
|
[compareWith]="holdingComparisonFunction" |
|
|
|
> |
|
|
|
<mat-select-trigger>{{ |
|
|
|
filterForm.get('holding')?.value?.name |
|
|
|
}}</mat-select-trigger> |
|
|
|
<mat-option [value]="null" /> |
|
|
|
@for (holding of holdings; track holding.name) { |
|
|
|
<mat-option [value]="holding"> |
|
|
|
<div class="line-height-1 text-truncate"> |
|
|
|
<span |
|
|
|
><b>{{ holding.name }}</b></span |
|
|
|
> |
|
|
|
<br /> |
|
|
|
<small class="text-muted" |
|
|
|
>{{ holding.symbol | gfSymbol }} · |
|
|
|
{{ holding.currency }}</small |
|
|
|
> |
|
|
|
</div> |
|
|
|
</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="mb-3"> |
|
|
|
<mat-form-field appearance="outline" class="w-100 without-hint"> |
|
|
|
<mat-label i18n>Tag</mat-label> |
|
|
|
<mat-select formControlName="tag"> |
|
|
|
<mat-option [value]="null" /> |
|
|
|
@for (tag of tags; track tag.id) { |
|
|
|
<mat-option [value]="tag.id">{{ tag.label }}</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="mb-3"> |
|
|
|
<mat-form-field appearance="outline" class="w-100 without-hint"> |
|
|
|
<mat-label i18n>Asset Class</mat-label> |
|
|
|
<mat-select formControlName="assetClass"> |
|
|
|
<mat-option [value]="null" /> |
|
|
|
@for (assetClass of assetClasses; track assetClass.id) { |
|
|
|
<mat-option [value]="assetClass.id">{{ |
|
|
|
assetClass.label |
|
|
|
}}</mat-option> |
|
|
|
} |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div class="d-flex w-100"> |
|
|
|
<button |
|
|
|
i18n |
|
|
|
mat-button |
|
|
|
[disabled]=" |
|
|
|
!hasFilter(filterForm.value) || !hasPermissionToChangeFilters |
|
|
|
" |
|
|
|
(click)="onResetFilters()" |
|
|
|
> |
|
|
|
(click)="onResetFilters()" |
|
|
|
> |
|
|
|
Reset Filters |
|
|
|
</button> |
|
|
|
<span class="gf-spacer"></span> |
|
|
|
<button |
|
|
|
color="primary" |
|
|
|
i18n |
|
|
|
mat-flat-button |
|
|
|
[disabled]="!filterForm.dirty || !hasPermissionToChangeFilters" |
|
|
|
(click)="onApplyFilters()" |
|
|
|
> |
|
|
|
<span class="gf-spacer"></span> |
|
|
|
<button |
|
|
|
color="primary" |
|
|
|
i18n |
|
|
|
mat-flat-button |
|
|
|
[disabled]="!filterForm.dirty || !hasPermissionToChangeFilters" |
|
|
|
(click)="onApplyFilters()" |
|
|
|
> |
|
|
|
Apply Filters |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
|
Shaunak
6 months ago