Browse Source

Task/resolve strict template errors in shell and dialogs (#8102)

Resolve strict template errors
pull/8070/head^2
Kenrick Tandrian 11 hours ago
committed by GitHub
parent
commit
ce042c1cd7
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 2
      apps/client/src/app/app.component.html
  2. 8
      apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html
  3. 18
      apps/client/src/app/components/footer/footer.component.html
  4. 80
      apps/client/src/app/components/footer/footer.component.ts
  5. 10
      apps/client/src/app/components/header/header.component.html
  6. 4
      apps/client/src/app/components/user-account-membership/user-account-membership.html
  7. 8
      apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
  8. 7
      apps/client/src/app/util/date.util.ts

2
apps/client/src/app/app.component.html

@ -48,6 +48,6 @@
@if (showFooter) {
<footer class="justify-content-center overflow-hidden w-100">
<gf-footer class="py-4" [info]="info" [user]="user" />
<gf-footer class="py-4" [info]="info" />
</footer>
}

8
apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html

@ -28,12 +28,8 @@
matInput
(keydown.enter)="$event.stopPropagation()"
/>
@if (platformForm.get('url')?.value) {
<gf-entity-logo
class="mat-icon"
matSuffix
[url]="platformForm.get('url').value"
/>
@if (platformForm.get('url')?.value; as url) {
<gf-entity-logo class="mat-icon" matSuffix [url]="url" />
}
</mat-form-field>
</div>

18
apps/client/src/app/components/footer/footer.component.html

@ -6,7 +6,7 @@
<div class="col-sm">
<div class="h6 mt-2" i18n>Personal Finance</div>
<ul class="list-unstyled">
@if (hasPermissionToAccessFearAndGreedIndex) {
@if (hasPermissionToAccessFearAndGreedIndex()) {
<li>
<a i18n [routerLink]="routerLinkMarkets">Markets</a>
</li>
@ -18,7 +18,7 @@
<div class="h6 mt-2">Ghostfolio</div>
<ul class="list-unstyled">
<li><a i18n [routerLink]="routerLinkAbout">About</a></li>
@if (hasPermissionForSubscription) {
@if (hasPermissionForSubscription()) {
<li>
<a i18n [routerLink]="routerLinkBlog">Blog</a>
</li>
@ -27,43 +27,43 @@
<a i18n [routerLink]="routerLinkAboutChangelog">Changelog</a>
</li>
<li><a i18n [routerLink]="routerLinkFeatures">Features</a></li>
@if (hasPermissionForSubscription) {
@if (hasPermissionForSubscription()) {
<li>
<a i18n [routerLink]="routerLinkFaq"
>Frequently Asked Questions (FAQ)</a
>
</li>
}
@if (!hasPermissionForSubscription) {
@if (!hasPermissionForSubscription()) {
<li>
<a i18n [routerLink]="routerLinkAboutLicense">License</a>
</li>
}
@if (hasPermissionForStatistics) {
@if (hasPermissionForStatistics()) {
<li>
<a [routerLink]="routerLinkOpenStartup">Open Startup</a>
</li>
}
@if (hasPermissionForSubscription) {
@if (hasPermissionForSubscription()) {
<li>
<a i18n [routerLink]="routerLinkPricing">Pricing</a>
</li>
}
@if (hasPermissionForSubscription) {
@if (hasPermissionForSubscription()) {
<li>
<a i18n [routerLink]="routerLinkAboutPrivacyPolicy"
>Privacy Policy</a
>
</li>
}
@if (hasPermissionForSubscription) {
@if (hasPermissionForSubscription()) {
<li>
<a i18n [routerLink]="routerLinkAboutTermsOfService"
>Terms of Service</a
>
</li>
}
@if (hasPermissionForSubscription) {
@if (hasPermissionForSubscription()) {
<li>
<a
class="align-items-baseline d-flex"

80
apps/client/src/app/components/footer/footer.component.ts

@ -1,4 +1,4 @@
import { InfoItem, User } from '@ghostfolio/common/interfaces';
import { InfoItem } from '@ghostfolio/common/interfaces';
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
import { publicRoutes } from '@ghostfolio/common/routes/routes';
import { GfLogoComponent } from '@ghostfolio/ui/logo';
@ -6,9 +6,9 @@ import { GfLogoComponent } from '@ghostfolio/ui/logo';
import {
ChangeDetectionStrategy,
Component,
computed,
CUSTOM_ELEMENTS_SCHEMA,
Input,
OnChanges
input
} from '@angular/core';
import { RouterModule } from '@angular/router';
import { IonIcon } from '@ionic/angular/standalone';
@ -23,51 +23,53 @@ import { openOutline } from 'ionicons/icons';
styleUrls: ['./footer.component.scss'],
templateUrl: './footer.component.html'
})
export class GfFooterComponent implements OnChanges {
@Input() public info: InfoItem;
@Input() public user: User;
export class GfFooterComponent {
public readonly info = input.required<InfoItem | undefined>();
public currentYear = new Date().getFullYear();
public hasPermissionForStatistics: boolean;
public hasPermissionForSubscription: boolean;
public hasPermissionToAccessFearAndGreedIndex: boolean;
public routerLinkAbout = publicRoutes.about.routerLink;
public routerLinkAboutChangelog =
publicRoutes.about.subRoutes.changelog.routerLink;
public routerLinkAboutLicense =
publicRoutes.about.subRoutes.license.routerLink;
public routerLinkAboutPrivacyPolicy =
publicRoutes.about.subRoutes.privacyPolicy.routerLink;
public routerLinkAboutTermsOfService =
publicRoutes.about.subRoutes.termsOfService.routerLink;
public routerLinkBlog = publicRoutes.blog.routerLink;
public routerLinkFaq = publicRoutes.faq.routerLink;
public routerLinkFeatures = publicRoutes.features.routerLink;
public routerLinkMarkets = publicRoutes.markets.routerLink;
public routerLinkOpenStartup = publicRoutes.openStartup.routerLink;
public routerLinkPricing = publicRoutes.pricing.routerLink;
public routerLinkResources = publicRoutes.resources.routerLink;
public constructor() {
addIcons({
openOutline
});
}
protected readonly currentYear = new Date().getFullYear();
public ngOnChanges() {
this.hasPermissionForStatistics = hasPermission(
this.info?.globalPermissions,
protected readonly hasPermissionForStatistics = computed(() => {
return hasPermission(
this.info()?.globalPermissions,
permissions.enableStatistics
);
});
this.hasPermissionForSubscription = hasPermission(
this.info?.globalPermissions,
protected readonly hasPermissionForSubscription = computed(() => {
return hasPermission(
this.info()?.globalPermissions,
permissions.enableSubscription
);
});
this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
this.info?.globalPermissions,
protected readonly hasPermissionToAccessFearAndGreedIndex = computed(() => {
return hasPermission(
this.info()?.globalPermissions,
permissions.enableFearAndGreedIndex
);
});
protected readonly routerLinkAbout = publicRoutes.about.routerLink;
protected readonly routerLinkAboutChangelog =
publicRoutes.about.subRoutes.changelog.routerLink;
protected readonly routerLinkAboutLicense =
publicRoutes.about.subRoutes.license.routerLink;
protected readonly routerLinkAboutPrivacyPolicy =
publicRoutes.about.subRoutes.privacyPolicy.routerLink;
protected readonly routerLinkAboutTermsOfService =
publicRoutes.about.subRoutes.termsOfService.routerLink;
protected readonly routerLinkBlog = publicRoutes.blog.routerLink;
protected readonly routerLinkFaq = publicRoutes.faq.routerLink;
protected readonly routerLinkFeatures = publicRoutes.features.routerLink;
protected readonly routerLinkMarkets = publicRoutes.markets.routerLink;
protected readonly routerLinkOpenStartup =
publicRoutes.openStartup.routerLink;
protected readonly routerLinkPricing = publicRoutes.pricing.routerLink;
protected readonly routerLinkResources = publicRoutes.resources.routerLink;
public constructor() {
addIcons({
openOutline
});
}
}

10
apps/client/src/app/components/header/header.component.html

@ -124,7 +124,7 @@
>About</a
>
</li>
@if (hasPermissionToAccessAssistant) {
@if (hasPermissionToAccessAssistant && user(); as user) {
<li class="d-inline-flex list-inline-item">
<button
#assistantTrigger="matMenuTrigger"
@ -144,7 +144,7 @@
class="no-max-width"
xPosition="before"
[overlapTrigger]="true"
(closed)="assistantElement()?.setIsOpen(false)"
(closed)="assistantElement().setIsOpen(false)"
>
<gf-assistant
#assistant
@ -156,7 +156,7 @@
hasPermissionToChangeDateRange()
"
[hasPermissionToChangeFilters]="hasPermissionToChangeFilters()"
[user]="user()"
[user]="user"
(closed)="closeAssistant()"
(dateRangeChanged)="onDateRangeChange($event)"
(filtersChanged)="onFiltersChanged($event)"
@ -191,7 +191,7 @@
<a class="d-flex" mat-menu-item [routerLink]="routerLinkPricing"
><span class="align-items-center d-flex"
><span>
@if (user().subscription.offer.isRenewal) {
@if (user()?.subscription?.offer?.isRenewal) {
<ng-container i18n>Renew Plan</ng-container>
} @else {
<ng-container i18n>Upgrade Plan</ng-container>
@ -203,7 +203,7 @@
></a>
<hr class="m-0" />
}
@if (user()?.access?.length > 0) {
@if ((user()?.access?.length ?? 0) > 0) {
<button mat-menu-item (click)="impersonateAccount(null)">
<span class="align-items-center d-flex">
<ion-icon

4
apps/client/src/app/components/user-account-membership/user-account-membership.html

@ -3,7 +3,9 @@
<div class="col">
<div class="align-items-center d-flex flex-column">
<gf-membership-card
[expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
[expiresAt]="
(user?.subscription?.expiresAt | date: defaultDateFormat) ?? ''
"
[hasPermissionToCreateApiKey]="hasPermissionToCreateApiKey"
[hover3d]="true"
[name]="user?.subscription?.type"

8
apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@ -43,7 +43,7 @@
}}</span>
</mat-form-field>
</div>
<div [class.d-none]="platforms?.length < 1">
<div [class.d-none]="platforms.length < 1">
<mat-form-field appearance="outline" class="w-100">
<mat-label i18n>Platform</mat-label>
@if (selectedPlatform) {
@ -51,8 +51,8 @@
class="ml-3"
matPrefix
[hasPlaceholder]="true"
[tooltip]="selectedPlatform?.name"
[url]="selectedPlatform?.url"
[tooltip]="selectedPlatform.name ?? ''"
[url]="selectedPlatform.url"
/>
}
<input
@ -73,7 +73,7 @@
<gf-entity-logo
class="mr-1"
[hasPlaceholder]="true"
[tooltip]="platformEntry.name"
[tooltip]="platformEntry.name ?? ''"
[url]="platformEntry.url"
/>
<span>{{ platformEntry.name }}</span>

7
apps/client/src/app/util/date.util.ts

@ -10,16 +10,17 @@ export function formatRelativeTime({
date,
language
}: {
date: string;
date: Date | string | null | undefined;
language?: string;
}) {
if (date) {
const distanceString = formatDistanceToNowStrict(parseISO(date), {
const parsedDate = typeof date === 'string' ? parseISO(date) : date;
const distanceString = formatDistanceToNowStrict(parsedDate, {
addSuffix: true,
locale: getDateFnsLocale(language)
});
return Math.abs(differenceInSeconds(parseISO(date), new Date())) < 60
return Math.abs(differenceInSeconds(parsedDate, new Date())) < 60
? $localize`just now`
: distanceString;
}

Loading…
Cancel
Save