Browse Source

Feature/migrate assistant and value component to control flow (#4905)

* Migrate to control flow

* Update changelog
pull/4908/head
Thomas Kaul 3 weeks ago
committed by GitHub
parent
commit
66ef2c2fec
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 2
      CHANGELOG.md
  2. 57
      libs/ui/src/lib/assistant/assistant.html
  3. 35
      libs/ui/src/lib/value/value.component.html

2
CHANGELOG.md

@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- Improved the style of the assistant
- Migrated the `@ghostfolio/ui/assistant` component to control flow
- Migrated the `@ghostfolio/ui/value` component to control flow
- Migrated the `HtmlTemplateMiddleware` to use `@Injectable()`
- Renamed `User` to `user` in the database schema
- Improved the language localization for Catalan (`ca`)

57
libs/ui/src/lib/assistant/assistant.html

@ -40,23 +40,20 @@
*ngIf="searchFormControl.value"
class="overflow-auto py-2 result-container"
>
<div
*ngIf="searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks"
class="mb-2"
>
<div class="font-weight-bold px-3 text-muted title" i18n>
Quick Links
</div>
@for (
searchResultItem of searchResults?.quickLinks;
track searchResultItem
) {
<gf-assistant-list-item
[item]="searchResultItem"
(clicked)="onCloseAssistant()"
/>
}
<ng-container>
@if (searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks) {
<div class="mb-2">
<div class="font-weight-bold px-3 text-muted title" i18n>
Quick Links
</div>
@for (
searchResultItem of searchResults?.quickLinks;
track searchResultItem
) {
<gf-assistant-list-item
[item]="searchResultItem"
(clicked)="onCloseAssistant()"
/>
}
@if (isLoading.quickLinks) {
<ngx-skeleton-loader
animation="pulse"
@ -67,8 +64,8 @@
}"
/>
}
</ng-container>
</div>
</div>
}
<div>
<div class="font-weight-bold px-3 text-muted title" i18n>Holdings</div>
@for (
@ -80,7 +77,7 @@
(clicked)="onCloseAssistant()"
/>
}
<ng-container *ngIf="searchResults?.holdings?.length === 0">
@if (searchResults?.holdings?.length === 0) {
@if (isLoading.holdings) {
<ngx-skeleton-loader
animation="pulse"
@ -93,7 +90,7 @@
} @else {
<div class="px-3 py-1 text-muted" i18n>No entries...</div>
}
</ng-container>
}
</div>
<div *ngIf="hasPermissionToAccessAdminControl" class="mt-2">
<div class="font-weight-bold px-3 text-muted title" i18n>
@ -108,7 +105,7 @@
(clicked)="onCloseAssistant()"
/>
}
<ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
@if (searchResults?.assetProfiles?.length === 0) {
@if (isLoading.assetProfiles) {
<ngx-skeleton-loader
animation="pulse"
@ -121,7 +118,7 @@
} @else {
<div class="px-3 py-1 text-muted" i18n>No entries...</div>
}
</ng-container>
}
</div>
</div>
</div>
@ -149,12 +146,14 @@
@for (account of accounts; track account.id) {
<mat-option [value]="account.id">
<div class="d-flex">
<gf-entity-logo
*ngIf="account.Platform?.url"
class="mr-1"
[tooltip]="account.Platform?.name"
[url]="account.Platform?.url"
/><span>{{ account.name }}</span>
@if (account.Platform?.url) {
<gf-entity-logo
class="mr-1"
[tooltip]="account.Platform?.name"
[url]="account.Platform?.url"
/>
}
<span>{{ account.name }}</span>
</div>
</mat-option>
}

35
libs/ui/src/lib/value/value.component.html

@ -1,6 +1,8 @@
<div *ngIf="icon" class="align-self-center mr-3">
<ion-icon class="h3 m-0" [name]="icon" />
</div>
@if (icon) {
<div class="align-self-center mr-3">
<ion-icon class="h3 m-0" [name]="icon" />
</div>
}
<div class="d-flex flex-column w-100">
<ng-template #label><ng-content></ng-content></ng-template>
<ng-container *ngIf="value || value === 0 || value === null">
@ -10,8 +12,12 @@
>
<ng-container *ngIf="isNumber || value === null">
<ng-container *ngIf="colorizeSign && !useAbsoluteValue">
<div *ngIf="+value > 0" class="mr-1 text-success">+</div>
<div *ngIf="+value < 0" class="mr-1 text-danger">-</div>
@if (+value > 0) {
<div class="mr-1 text-success">+</div>
}
@if (+value < 0) {
<div class="mr-1 text-danger">-</div>
}
</ng-container>
@if (isPercent) {
<div
@ -43,12 +49,15 @@
</div>
}
@if (unit) {
<small *ngIf="size === 'medium'" class="ml-1">
{{ unit }}
</small>
<div *ngIf="size !== 'medium'" class="ml-1">
{{ unit }}
</div>
@if (size === 'medium') {
<small class="ml-1">
{{ unit }}
</small>
} @else {
<div class="ml-1">
{{ unit }}
</div>
}
}
</ng-container>
@if (isString) {
@ -81,7 +90,9 @@
<span class="h6"
><ng-container *ngTemplateOutlet="label"></ng-container
></span>
<span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
@if (subLabel) {
<span class="text-muted"> {{ subLabel }}</span>
}
</div>
<small *ngIf="size !== 'large'" class="d-block text-truncate">
<ng-container *ngTemplateOutlet="label"></ng-container>

Loading…
Cancel
Save