Feature/migrate assistant and value component to control flow (part 3) (#4981)

* Migrate to control flow

* Update changelog

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Migrated the `@ghostfolio/ui/assistant` component to control flow
+- Migrated the `@ghostfolio/ui/value` component to control flow
 - Renamed `GranteeUser` to `granteeUser` in the `Access` database schema
 - Improved the language localization for French (`fr`)
 - Upgraded `class-validator` from version `0.14.1` to `0.14.2`

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

@@ -36,69 +36,40 @@
         </button>
       }
     </div>
-    <div
+    @if (searchFormControl.value) {
-      *ngIf="searchFormControl.value"
+      <div class="overflow-auto py-2 result-container">
-      class="overflow-auto py-2 result-container"
+        @if (searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks) {
-    >
+          <div class="mb-2">
-      @if (searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks) {
+            <div class="font-weight-bold px-3 text-muted title" i18n>
-        <div class="mb-2">
+              Quick Links
-          <div class="font-weight-bold px-3 text-muted title" i18n>
+            </div>
-            Quick Links
+            @for (
+              searchResultItem of searchResults?.quickLinks;
+              track searchResultItem
+            ) {
+              <gf-assistant-list-item
+                [item]="searchResultItem"
+                (clicked)="onCloseAssistant()"
+              />
+            }
+            @if (isLoading.quickLinks) {
+              <ngx-skeleton-loader
+                animation="pulse"
+                class="mx-3"
+                [theme]="{
+                  height: '1.5rem',
+                  width: '100%'
+                }"
+              />
+            }
           </div>
-          @for (
-            searchResultItem of searchResults?.quickLinks;
-            track searchResultItem
-          ) {
-            <gf-assistant-list-item
-              [item]="searchResultItem"
-              (clicked)="onCloseAssistant()"
-            />
-          }
-          @if (isLoading.quickLinks) {
-            <ngx-skeleton-loader
-              animation="pulse"
-              class="mx-3"
-              [theme]="{
-                height: '1.5rem',
-                width: '100%'
-              }"
-            />
-          }
-        </div>
-      }
-      <div>
-        <div class="font-weight-bold px-3 text-muted title" i18n>Holdings</div>
-        @for (
-          searchResultItem of searchResults?.holdings;
-          track searchResultItem
-        ) {
-          <gf-assistant-list-item
-            [item]="searchResultItem"
-            (clicked)="onCloseAssistant()"
-          />
         }
-        @if (searchResults?.holdings?.length === 0) {
+        <div>
-          @if (isLoading.holdings) {
-            <ngx-skeleton-loader
-              animation="pulse"
-              class="mx-3"
-              [theme]="{
-                height: '1.5rem',
-                width: '100%'
-              }"
-            />
-          } @else {
-            <div class="px-3 py-1 text-muted" i18n>No entries...</div>
-          }
-        }
-      </div>
-      @if (hasPermissionToAccessAdminControl) {
-        <div class="mt-2">
           <div class="font-weight-bold px-3 text-muted title" i18n>
-            Asset Profiles
+            Holdings
           </div>
           @for (
-            searchResultItem of searchResults?.assetProfiles;
+            searchResultItem of searchResults?.holdings;
             track searchResultItem
           ) {
             <gf-assistant-list-item
@@ -106,8 +77,8 @@
               (clicked)="onCloseAssistant()"
             />
           }
-          @if (searchResults?.assetProfiles?.length === 0) {
+          @if (searchResults?.holdings?.length === 0) {
-            @if (isLoading.assetProfiles) {
+            @if (isLoading.holdings) {
               <ngx-skeleton-loader
                 animation="pulse"
                 class="mx-3"
@@ -121,8 +92,38 @@
             }
           }
         </div>
-      }
+        @if (hasPermissionToAccessAdminControl) {
-    </div>
+          <div class="mt-2">
+            <div class="font-weight-bold px-3 text-muted title" i18n>
+              Asset Profiles
+            </div>
+            @for (
+              searchResultItem of searchResults?.assetProfiles;
+              track searchResultItem
+            ) {
+              <gf-assistant-list-item
+                [item]="searchResultItem"
+                (clicked)="onCloseAssistant()"
+              />
+            }
+            @if (searchResults?.assetProfiles?.length === 0) {
+              @if (isLoading.assetProfiles) {
+                <ngx-skeleton-loader
+                  animation="pulse"
+                  class="mx-3"
+                  [theme]="{
+                    height: '1.5rem',
+                    width: '100%'
+                  }"
+                />
+              } @else {
+                <div class="px-3 py-1 text-muted" i18n>No entries...</div>
+              }
+            }
+          </div>
+        }
+      </div>
+    }
   </div>
   <form [formGroup]="filterForm">
     @if (!searchFormControl.value) {

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

@@ -10,7 +10,7 @@
       class="align-items-center d-flex"
       [ngClass]="position === 'end' ? 'justify-content-end' : ''"
     >
-      <ng-container *ngIf="isNumber || value === null">
+      @if (isNumber || value === null) {
         @if (colorizeSign && !useAbsoluteValue) {
           @if (+value > 0) {
             <div class="mr-1 text-success">+</div>
@@ -59,7 +59,7 @@
             </div>
           }
         }
-      </ng-container>
+      }
       @if (isString) {
         <div
           class="mb-0 text-truncate value"