From 47d2636cc97677a902319f6c29772e5be06394f0 Mon Sep 17 00:00:00 2001
From: Sonlis <bastien.jeannelle@gmail.com>
Date: Thu, 15 Aug 2024 19:57:02 +0300
Subject: [PATCH] Make the loading general for rules

---
 .../app/components/rule/rule.component.html   | 10 +--
 .../app/components/rules/rules.component.html |  4 +-
 .../app/components/rules/rules.component.ts   |  3 +-
 .../portfolio/fire/fire-page.component.ts     |  3 +
 .../app/pages/portfolio/fire/fire-page.html   | 73 +++++++++----------
 5 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/apps/client/src/app/components/rule/rule.component.html b/apps/client/src/app/components/rule/rule.component.html
index a3ef7a4b5..db2d45a8a 100644
--- a/apps/client/src/app/components/rule/rule.component.html
+++ b/apps/client/src/app/components/rule/rule.component.html
@@ -47,22 +47,18 @@
     } @else {
       <div class="flex-grow-1">
         <div class="h6 my-1">{{ rule?.name }}</div>
-        <div class="evaluation">
-          @if (rule?.evaluation) {
-            {{ rule?.evaluation }}
-          }
-        </div>
+        <div class="evaluation">{{ rule?.evaluation }}</div>
       </div>
       <div>
         <button
           class="mx-1 no-min-width px-2"
           mat-button
-          [matMenuTriggerFor]="accountMenu"
+          [matMenuTriggerFor]="rulesMenu"
           (click)="$event.stopPropagation()"
         >
           <ion-icon name="ellipsis-horizontal" />
         </button>
-        <mat-menu #accountMenu="matMenu" xPosition="before">
+        <mat-menu #rulesMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdateRule(rule)">
             @if (rule?.isActive) {
               <ng-container i18n>Deactivate</ng-container>
diff --git a/apps/client/src/app/components/rules/rules.component.html b/apps/client/src/app/components/rules/rules.component.html
index 682b01e54..643cfcadd 100644
--- a/apps/client/src/app/components/rules/rules.component.html
+++ b/apps/client/src/app/components/rules/rules.component.html
@@ -9,13 +9,13 @@
         </mat-card>
       }
 
-      @if (rules?.length === 0) {
+      @if (isLoading) {
         <gf-rule [isLoading]="true" />
       }
 
       @if (rules !== null && rules !== undefined) {
         @for (rule of rules; track rule.key) {
-          <gf-rule [rule]="rule" (ruleUpdated)="onRulesUpdated($event)" />
+          <gf-rule [rule]="rule" (ruleUpdated)="onRuleUpdated($event)" />
         }
       }
     </div>
diff --git a/apps/client/src/app/components/rules/rules.component.ts b/apps/client/src/app/components/rules/rules.component.ts
index ec62251ef..ec8aad7c2 100644
--- a/apps/client/src/app/components/rules/rules.component.ts
+++ b/apps/client/src/app/components/rules/rules.component.ts
@@ -17,13 +17,14 @@ import {
 })
 export class RulesComponent {
   @Input() hasPermissionToCreateOrder: boolean;
+  @Input() isLoading: boolean;
   @Input() rules: PortfolioReportRule[];
 
   @Output() rulesUpdated = new EventEmitter<UpdateUserSettingDto>();
 
   public constructor() {}
 
-  public onRulesUpdated(event: UpdateUserSettingDto) {
+  public onRuleUpdated(event: UpdateUserSettingDto) {
     this.rulesUpdated.emit(event);
   }
 }
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
index 18c5c2a34..6c9239c70 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
@@ -105,6 +105,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
 
   public initializePortfolioReport() {
     this.isLoadingPortfolioReport = true;
+
     this.dataService
       .fetchPortfolioReport()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -125,6 +126,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
         this.feeRules =
           portfolioReport.rules['fees'].filter((rule) => rule.isActive) || null;
         this.isLoadingPortfolioReport = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }
@@ -170,6 +172,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
 
   public onRulesUpdated(event: UpdateUserSettingDto) {
     this.isLoading = true;
+
     this.dataService
       .putUserSetting(event)
       .pipe(takeUntil(this.unsubscribeSubject))
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.html b/apps/client/src/app/pages/portfolio/fire/fire-page.html
index ff2e70662..e24add5dd 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.html
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html
@@ -124,13 +124,12 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
-          <gf-rules
-            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-            [rules]="emergencyFundRules"
-            (rulesUpdated)="onRulesUpdated($event)"
-          />
-        }
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
+          [rules]="emergencyFundRules"
+          (rulesUpdated)="onRulesUpdated($event)"
+        />
       </div>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
@@ -139,13 +138,12 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
-          <gf-rules
-            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-            [rules]="currencyClusterRiskRules"
-            (rulesUpdated)="onRulesUpdated($event)"
-          />
-        }
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
+          [rules]="currencyClusterRiskRules"
+          (rulesUpdated)="onRulesUpdated($event)"
+        />
       </div>
       <div class="mb-4">
         <h4 class="align-items-center d-flex m-0">
@@ -154,13 +152,12 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
-          <gf-rules
-            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-            [rules]="accountClusterRiskRules"
-            (rulesUpdated)="onRulesUpdated($event)"
-          />
-        }
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
+          [rules]="accountClusterRiskRules"
+          (rulesUpdated)="onRulesUpdated($event)"
+        />
       </div>
       <div>
         <h4 class="align-items-center d-flex m-0">
@@ -169,29 +166,29 @@
             <gf-premium-indicator class="ml-1" />
           }
         </h4>
-        @if (!isLoadingPortfolioReport) {
-          <gf-rules
-            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
-            [rules]="feeRules"
-            (rulesUpdated)="onRulesUpdated($event)"
-          />
-        }
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [isLoading]="isLoadingPortfolioReport"
+          [rules]="feeRules"
+          (rulesUpdated)="onRulesUpdated($event)"
+        />
       </div>
-      <div>
-        <h4 class="align-items-center d-flex m-0">
-          <span i18n>Inactive</span>
-          @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
-          }
-        </h4>
-        @if (!isLoadingPortfolioReport) {
+      @if (inactiveRules?.length > 0) {
+        <div>
+          <h4 class="align-items-center d-flex m-0">
+            <span i18n>Inactive</span>
+            @if (user?.subscription?.type === 'Basic') {
+              <gf-premium-indicator class="ml-1" />
+            }
+          </h4>
           <gf-rules
             [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+            [isLoading]="isLoadingPortfolioReport"
             [rules]="inactiveRules"
             (rulesUpdated)="onRulesUpdated($event)"
           />
-        }
-      </div>
+        </div>
+      }
     </div>
   </div>
 </div>