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

Resolve strict template errors

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>
 }

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) {
+        @if (platformForm.get('url')?.value; as url) {
-          <gf-entity-logo
+          <gf-entity-logo class="mat-icon" matSuffix [url]="url" />
-            class="mat-icon"
-            matSuffix
-            [url]="platformForm.get('url').value"
-          />
         }
       </mat-form-field>
     </div>

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"

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,
+  input
-  OnChanges
 } 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 {
+export class GfFooterComponent {
-  @Input() public info: InfoItem;
+  public readonly info = input.required<InfoItem | undefined>();
-  @Input() public user: User;
 
-  public currentYear = new Date().getFullYear();
+  protected readonly 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
-    });
-  }
 
-  public ngOnChanges() {
+  protected readonly hasPermissionForStatistics = computed(() => {
-    this.hasPermissionForStatistics = hasPermission(
+    return hasPermission(
-      this.info?.globalPermissions,
+      this.info()?.globalPermissions,
       permissions.enableStatistics
     );
+  });
 
-    this.hasPermissionForSubscription = hasPermission(
+  protected readonly hasPermissionForSubscription = computed(() => {
-      this.info?.globalPermissions,
+    return hasPermission(
+      this.info()?.globalPermissions,
       permissions.enableSubscription
     );
+  });
 
-    this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
+  protected readonly hasPermissionToAccessFearAndGreedIndex = computed(() => {
-      this.info?.globalPermissions,
+    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
+    });
   }
 }

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

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"

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"
+            [tooltip]="selectedPlatform.name ?? ''"
-            [url]="selectedPlatform?.url"
+            [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>

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;
   }