feat: Remove LetDirective

meta-d · Jan 31, 2024 · aad148c · aad148c
1 parent a2b55a4
commit aad148c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 33 deletions.
diff --git a/apps/cloud/src/app/features/setting/data-sources/data-sources.module.ts b/apps/cloud/src/app/features/setting/data-sources/data-sources.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core'
 import { ButtonGroupDirective, DensityDirective } from '@metad/ocap-angular/core'
 import { ContentLoaderModule } from '@ngneat/content-loader'
-import { LetDirective } from '@ngrx/component'
 import { FormlyModule } from '@ngx-formly/core'
 import { TranslateModule } from '@ngx-translate/core'
 import { MaterialModule, SharedModule } from '../../../@shared'
@@ -17,7 +16,6 @@ import { PACDataSourcesComponent } from './data-sources.component'
     TranslateModule,
     PACDataSourcesRoutingModule,
     ContentLoaderModule,
-    LetDirective,
 
     ButtonGroupDirective,
     DensityDirective

diff --git a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.html b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.html
@@ -21,9 +21,9 @@
         <div>
           {{ 'IndicatorApp.MOM' | translate: {Default: 'MOM'} }}
         </div>
-        <div *ngrxLet="mom$ as mom" [ngClass]="{'Trend-Up': mom === TREND.Up, 'Trend-Down': mom === TREND.Down}">
-          <mat-icon *ngIf="mom === TREND.Up" displayDensity="compact">arrow_drop_up</mat-icon>
-          <mat-icon *ngIf="mom === TREND.Down" displayDensity="compact">arrow_drop_down</mat-icon>
+        <div [ngClass]="{'Trend-Up': mom$() === TREND.Up, 'Trend-Down': mom$() === TREND.Down}">
+          <mat-icon *ngIf="mom$() === TREND.Up" displayDensity="compact">arrow_drop_up</mat-icon>
+          <mat-icon *ngIf="mom$() === TREND.Down" displayDensity="compact">arrow_drop_down</mat-icon>
           {{(indicator.data?.MOM | percent:'0.2-2' | replaceNullWithText:'-' )!}}
         </div>
       </div>
@@ -41,9 +41,9 @@
         <div>
           {{ 'IndicatorApp.YOY' | translate: {Default: 'YOY'} }}
         </div>
-        <div *ngrxLet="yoy$ as yoy" [ngClass]="{'Trend-Up': yoy === TREND.Up, 'Trend-Down': yoy === TREND.Down}">
-          <mat-icon *ngIf="yoy === TREND.Up" displayDensity="compact">arrow_drop_up</mat-icon>
-          <mat-icon *ngIf="yoy === TREND.Down" displayDensity="compact">arrow_drop_down</mat-icon>
+        <div [ngClass]="{'Trend-Up': yoy$() === TREND.Up, 'Trend-Down': yoy$() === TREND.Down}">
+          <mat-icon *ngIf="yoy$() === TREND.Up" displayDensity="compact">arrow_drop_up</mat-icon>
+          <mat-icon *ngIf="yoy$() === TREND.Down" displayDensity="compact">arrow_drop_down</mat-icon>
           {{(indicator.data?.YOY | percent:'0.2-2' | replaceNullWithText:'-' )!}}
         </div>
       </div>

diff --git a/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.ts b/libs/apps/indicator-market/src/lib/indicator-detail/indicator-detail.component.ts
@@ -74,6 +74,7 @@ import { IndicatoryMarketComponent } from '../indicator-market.component'
 import { IndicatorsStore } from '../services/store'
 import { IndicatorState, Trend, TrendColor, TrendReverseColor } from '../types'
 import { nanoid } from 'nanoid'
+import { toSignal } from '@angular/core/rxjs-interop'
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -405,8 +406,10 @@ export class IndicatorDetailComponent {
     })
   )
 
-  public readonly mom$ = this.indicator$.pipe(map((indicator) => (indicator.data?.MOM > 0 ? Trend.Up : Trend.Down)))
-  public readonly yoy$ = this.indicator$.pipe(map((indicator) => (indicator.data?.YOY > 0 ? Trend.Up : Trend.Down)))
+  // public readonly mom$ = this.indicator$.pipe(map((indicator) => (indicator.data?.MOM > 0 ? Trend.Up : Trend.Down)))
+  // public readonly yoy$ = this.indicator$.pipe(map((indicator) => (indicator.data?.YOY > 0 ? Trend.Up : Trend.Down)))
+  readonly mom$ = toSignal(this.indicator$.pipe(map((indicator) => (indicator.data?.MOM > 0 ? Trend.Up : Trend.Down))))
+  readonly yoy$ = toSignal(this.indicator$.pipe(map((indicator) => (indicator.data?.YOY > 0 ? Trend.Up : Trend.Down))))
 
   // Free dimensions as slicers bar
   public readonly freeDimensions$ = this.indicator$.pipe(

diff --git a/libs/apps/indicator-market/src/lib/indicator-market.component.html b/libs/apps/indicator-market/src/lib/indicator-market.component.html
@@ -14,7 +14,7 @@
 
     <div class="flex justify-end items-center">
       <div class="pac-indicator__tag uppercase bg-gray-500 bg-opacity-25" (click)="toggleTag($event)">
-        {{tagText$ | async}}
+        {{tagText$()}}
       </div>
       <button mat-icon-button
         [popper]="options"
@@ -50,11 +50,11 @@
       </button>
     </div>
 
-    <mat-list *ngrxLet="selected$ as selected">
+    <mat-list>
       <mat-list-item *cdkVirtualFor="let item of indicatorDataSource; trackBy: trackById; templateCacheSize: 0" matRipple
-        [class.selected]="selected === item.id"
+        [class.selected]="selected$() === item.id"
         (click)="click(item)">
-        <pac-indicator-item class="flex-1 overflow-hidden" [indicator]="item" [tag]="tag$ | async"></pac-indicator-item>
+        <pac-indicator-item class="flex-1 overflow-hidden" [indicator]="item" [tag]="tag$()"></pac-indicator-item>
       </mat-list-item>
     </mat-list>
   </cdk-virtual-scroll-viewport>

diff --git a/libs/apps/indicator-market/src/lib/indicator-market.component.ts b/libs/apps/indicator-market/src/lib/indicator-market.component.ts
@@ -3,14 +3,15 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   ElementRef,
   HostBinding,
   Inject,
   LOCALE_ID,
   ViewChild,
   ViewContainerRef
 } from '@angular/core'
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
 import { FormControl } from '@angular/forms'
 import { MatBottomSheet, MatBottomSheetRef } from '@angular/material/bottom-sheet'
 import { MatDatepicker } from '@angular/material/datepicker'
@@ -21,7 +22,7 @@ import { ComponentStore } from '@metad/store'
 import { TranslateService } from '@ngx-translate/core'
 import { includes, some } from 'lodash-es'
 import { NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'
-import { combineLatest, firstValueFrom, Observable } from 'rxjs'
+import { combineLatest, Observable } from 'rxjs'
 import { distinctUntilChanged, map, shareReplay, switchMap, tap } from 'rxjs/operators'
 import { IndicatorDetailComponent } from './indicator-detail/indicator-detail.component'
 import { MyDataSource } from './services/data-source'
@@ -47,22 +48,21 @@ export class IndicatoryMarketComponent extends ComponentStore<{ id?: string }> {
 
   @ViewChild('searchInput') searchInputRef: ElementRef
 
-  public readonly selected$ = this.indicatorsStore.currentIndicatorId$
-  public readonly tag$ = this.indicatorsStore.tag$
-  public readonly tagText$ = this.tag$.pipe(
-    switchMap(async (tag) => {
-      const tagEnum = await firstValueFrom(
-        this.translateService.get('IndicatorApp.TagEnum', {
-          Default: {
-            [TagEnum.UNIT]: 'Unit',
-            [TagEnum.MOM]: 'MOM',
-            [TagEnum.YOY]: 'YOY'
-          }
-        })
-      )
-      return tagEnum[tag]
+  // public readonly selected$ = this.indicatorsStore.currentIndicatorId$
+  // public readonly tag$ = this.indicatorsStore.tag$
+  readonly selected$ = toSignal(this.indicatorsStore.currentIndicatorId$)
+  readonly tag$ = toSignal(this.indicatorsStore.tag$)
+  readonly tagText$ = computed(() => {
+    const tag = this.tag$()
+    const tagEnum = this.translateService.instant('IndicatorApp.TagEnum', {
+      Default: {
+        [TagEnum.UNIT]: 'Unit',
+        [TagEnum.MOM]: 'MOM',
+        [TagEnum.YOY]: 'YOY'
+      }
     })
-  )
+    return tagEnum[tag]
+  })
 
   indicatorDataSource: MyDataSource // = new MyDataSource(this.indicatorsStore)
   readonly mediaMatcher$ = combineLatest(

diff --git a/libs/apps/indicator-market/src/lib/indicator-market.module.ts b/libs/apps/indicator-market/src/lib/indicator-market.module.ts
@@ -21,7 +21,6 @@ import { ReversePipe } from '@metad/core'
 import { AnalyticalCardModule } from '@metad/ocap-angular/analytical-card'
 import { ControlsModule } from '@metad/ocap-angular/controls'
 import { AppearanceDirective, OcapCoreModule } from '@metad/ocap-angular/core'
-import { LetDirective } from '@ngrx/component'
 import { TranslateModule } from '@ngx-translate/core'
 import { NgxEchartsModule } from 'ngx-echarts'
 import { MarkdownModule } from 'ngx-markdown'
@@ -40,7 +39,6 @@ import { SharedModule } from './shared/shared.module'
     FormsModule,
     ReactiveFormsModule,
     IndicatorMarketRoutingModule,
-    LetDirective,
     ScrollingModule,
     DragDropModule,
     MatListModule,