WEB-697 fix(loan-products): ensure preview step is visible on edit (#3153)

improve

src/app/products/loan-products/edit-loan-product/edit-loan-product.component.html

@@ -138,17 +138,16 @@
       </mifosx-loan-product-accounting-step>
     </mat-step>
 
-    @if (loanProductFormValidAndNotPristine) {
-      <mat-step state="preview" completed>
-        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-        <mifosx-loan-product-preview-step
-          [loanProductsTemplate]="loanProductAndTemplate"
-          [accountingRuleData]="accountingRuleData"
-          [loanProduct]="loanProduct"
-          (submitEvent)="submit()"
-        >
-        </mifosx-loan-product-preview-step>
-      </mat-step>
-    }
+    <mat-step state="preview" completed>
+      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+      <mifosx-loan-product-preview-step
+        [loanProductsTemplate]="loanProductAndTemplate"
+        [accountingRuleData]="accountingRuleData"
+        [loanProduct]="loanProduct"
+        [isValid]="loanProductFormValid"
+        (submitEvent)="submit()"
+      >
+      </mifosx-loan-product-preview-step>
+    </mat-step>
   </mat-stepper>
 </div>

src/app/products/loan-products/edit-loan-product/edit-loan-product.component.ts

@@ -255,7 +255,7 @@ export class EditLoanProductComponent implements OnInit {
     return this.loanProductAccountingStep.loanProductAccountingForm;
   }
 
-  get loanProductFormValidAndNotPristine() {
+  get loanProductFormValid(): boolean {
     if (this.isAdvancedPaymentStrategy) {
       return (
         this.loanProductDetailsForm.valid &&
@@ -264,15 +264,7 @@ export class EditLoanProductComponent implements OnInit {
         this.loanProductSettingsForm.valid &&
         this.loanProductAccountingForm.valid &&
         this.loanIncomeCapitalizationForm != null &&
-        this.loanIncomeCapitalizationForm.valid &&
-        (!this.loanProductDetailsForm.pristine ||
-          !this.loanProductCurrencyForm.pristine ||
-          !this.loanProductTermsForm.pristine ||
-          !this.loanProductSettingsForm.pristine ||
-          !this.loanProductChargesStep.pristine ||
-          !this.loanProductAccountingForm.pristine ||
-          !this.loanIncomeCapitalizationForm.pristine ||
-          this.wasPaymentAllocationChanged)
+        this.loanIncomeCapitalizationForm.valid
       );
     } else {
       return (
@@ -280,18 +272,40 @@ export class EditLoanProductComponent implements OnInit {
         this.loanProductCurrencyForm.valid &&
         this.loanProductTermsForm.valid &&
         this.loanProductSettingsForm.valid &&
-        this.loanProductAccountingForm.valid &&
-        (!this.loanProductDetailsForm.pristine ||
-          !this.loanProductCurrencyForm.pristine ||
-          !this.loanProductTermsForm.pristine ||
-          !this.loanProductSettingsForm.pristine ||
-          !this.loanProductChargesStep.pristine ||
-          !this.loanProductAccountingForm.pristine ||
-          this.wasPaymentAllocationChanged)
+        this.loanProductAccountingForm.valid
       );
     }
   }
 
+  get loanProductFormDirty(): boolean {
+    if (this.isAdvancedPaymentStrategy) {
+      return (
+        !this.loanProductDetailsForm.pristine ||
+        !this.loanProductCurrencyForm.pristine ||
+        !this.loanProductTermsForm.pristine ||
+        !this.loanProductSettingsForm.pristine ||
+        !this.loanProductChargesStep.pristine ||
+        !this.loanProductAccountingForm.pristine ||
+        !(this.loanIncomeCapitalizationForm?.pristine ?? true) ||
+        this.wasPaymentAllocationChanged
+      );
+    } else {
+      return (
+        !this.loanProductDetailsForm.pristine ||
+        !this.loanProductCurrencyForm.pristine ||
+        !this.loanProductTermsForm.pristine ||
+        !this.loanProductSettingsForm.pristine ||
+        !this.loanProductChargesStep.pristine ||
+        !this.loanProductAccountingForm.pristine ||
+        this.wasPaymentAllocationChanged
+      );
+    }
+  }
+
+  get loanProductFormValidAndNotPristine(): boolean {
+    return this.loanProductFormValid && this.loanProductFormDirty;
+  }
+
   get loanProduct() {
     const loanProduct = {
       ...this.loanProductDetailsStep.loanProductDetails,

src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html

@@ -25,7 +25,7 @@
   <button mat-raised-button [routerLink]="['../']">
     {{ 'labels.buttons.Cancel' | translate }}
   </button>
-  <button mat-raised-button color="primary" (click)="submitEvent.emit()">
+  <button mat-raised-button color="primary" [disabled]="!isValid" (click)="submitEvent.emit()">
     {{ 'labels.buttons.Submit' | translate }}
   </button>
 </div>

src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.ts

@@ -28,6 +28,7 @@ export class LoanProductPreviewStepComponent implements OnInit, OnChanges {
   @Input() loanProductsTemplate: any;
   @Input() accountingRuleData: any;
   @Input() loanProduct: any;
+  @Input() isValid: boolean = true;
   @Output() submitEvent = new EventEmitter();
 
   isAdvancedPaymentAllocation = false;