Merge pull request #2816 from IDEMSInternational/fix/combo-box

fix: combo box visibility bug
IDEMSInternational · Feb 27, 2025 · 777af75 · 777af75
2 parents 4d6eb54 + 107aa1c
commit 777af75
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 33 deletions.
diff --git a/src/app/shared/components/template/components/combo-box/combo-box.component.html b/src/app/shared/components/template/components/combo-box/combo-box.component.html
@@ -1,18 +1,18 @@
-@if (variant === "modal") {
+@if (params().variant === "modal") {
   <button
     class="open-combobox margin-t-regular"
     (click)="openModal()"
     [ngClass]="{
       disabled: disabled(),
-      'placeholder-style': (!_row.value && placeholder) || prioritisePlaceholder,
+      'placeholder-style': (!_row.value && params().placeholder) || params().prioritisePlaceholder,
       'with-value': _row.value,
       'no-value': !_row.value
     }"
     [disabled]="disabled()"
   >
     {{ displayText() | translate }}
   </button>
-} @else if (variant === "dropdown") {
+} @else if (params().variant === "dropdown") {
   <div class="combo-box-container dropdown">
     <ion-select
       [class.hasValue]="!!_row.value"

diff --git a/src/app/shared/components/template/components/combo-box/combo-box.component.ts b/src/app/shared/components/template/components/combo-box/combo-box.component.ts
@@ -1,4 +1,4 @@
-import { Component, computed, effect, OnDestroy, signal } from "@angular/core";
+import { Component, computed, effect, OnDestroy, Signal, signal } from "@angular/core";
 import { ModalController } from "@ionic/angular";
 import { ComboBoxModalComponent } from "./combo-box-modal/combo-box-modal.component";
 import {
@@ -8,11 +8,20 @@ import {
   getStringParamFromTemplateRow,
 } from "src/app/shared/utils";
 import { TemplateBaseComponent } from "../base";
-import { ITemplateRowProps } from "../../models";
+import { FlowTypes, ITemplateRowProps } from "../../models";
 import { ReplaySubject, map, filter, switchMap } from "rxjs";
 import { DataItemsService } from "../data-items/data-items.service";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 
+interface IComboBoxParams {
+  disabled: boolean;
+  disabledText: string;
+  placeholder: string;
+  prioritisePlaceholder: boolean;
+  style: string;
+  variant: "modal" | "dropdown";
+}
+
 @Component({
   selector: "plh-combo-box",
   templateUrl: "./combo-box.component.html",
@@ -22,13 +31,9 @@ export class TmplComboBoxComponent
   extends TemplateBaseComponent
   implements ITemplateRowProps, OnDestroy
 {
-  public variant: "modal" | "dropdown";
-  public placeholder: string;
-  public prioritisePlaceholder: boolean;
-  public disabledText: string;
-  private style: string;
+  public params: Signal<IComboBoxParams> = computed(() => this.getParams(this.parameterList()));
+
   public answerText = signal("");
-  private authorDisabled = false;
   private customAnswerSelected = signal(false);
   private customAnswerText: string;
   private componentDestroyed$ = new ReplaySubject(1);
@@ -50,12 +55,14 @@ export class TmplComboBoxComponent
     return getAnswerListParamFromTemplateRow(this.rowSignal(), "answer_list", []);
   });
 
-  public disabled = computed(() => this.authorDisabled || this.answerOptions().length === 0);
+  public disabled = computed(() => this.params().disabled || this.answerOptions().length === 0);
 
   public displayText = computed(() => {
-    if (this.disabled()) return this.disabledText;
+    if (this.disabled()) return this.params().disabledText;
     if (this.customAnswerSelected()) return this.customAnswerText;
-    return this.answerText() && !this.prioritisePlaceholder ? this.answerText() : this.placeholder;
+    return this.answerText() && !this.params().prioritisePlaceholder
+      ? this.answerText()
+      : this.params().placeholder;
   });
 
   constructor(
@@ -79,25 +86,25 @@ export class TmplComboBoxComponent
       },
       { allowSignalWrites: true }
     );
-    effect(() => {
-      this.parameterList();
-      this.getParams();
-    });
   }
 
-  getParams() {
-    this.placeholder = getStringParamFromTemplateRow(this._row, "placeholder", "");
-    this.prioritisePlaceholder = getBooleanParamFromTemplateRow(
-      this._row,
-      "prioritise_placeholder",
-      false
-    );
-    this.disabledText = getStringParamFromTemplateRow(this._row, "disabled_text", "");
-    this.style = getStringParamFromTemplateRow(this._row, "style", "");
-    this.variant = getStringParamFromTemplateRow(this._row, "variant", "modal") as
-      | "modal"
-      | "dropdown";
-    this.authorDisabled = getBooleanParamFromTemplateRow(this._row, "disabled", false);
+  private getParams(authorParams?: FlowTypes.TemplateRow["parameter_list"]): IComboBoxParams {
+    return {
+      disabled: getBooleanParamFromTemplateRow(this._row, "disabled", false),
+      disabledText: getStringParamFromTemplateRow(this._row, "disabled_text", ""),
+      placeholder: getStringParamFromTemplateRow(this._row, "placeholder", ""),
+      prioritisePlaceholder: getBooleanParamFromTemplateRow(
+        this._row,
+        "prioritise_placeholder",
+        false
+      ),
+      style: getStringParamFromTemplateRow(this._row, "style", ""),
+      variant: getStringParamFromTemplateRow(
+        this._row,
+        "variant",
+        "modal"
+      ) as IComboBoxParams["variant"],
+    };
   }
 
   public async handleDropdownChange(value) {
@@ -114,12 +121,12 @@ export class TmplComboBoxComponent
         row: this._row,
         selectedValue: this.customAnswerSelected() ? this.answerText() : this._row.value,
         customAnswerSelected: this.customAnswerSelected(),
-        style: this.style,
+        style: this.params().style,
       },
     });
 
     modal.onDidDismiss().then(async (data) => {
-      this.prioritisePlaceholder = false;
+      this.params().prioritisePlaceholder = false;
       this.answerText.set(data?.data?.answer?.text);
       this.customAnswerSelected.set(data?.data?.customAnswerSelected);
       this.customAnswerText = this.customAnswerSelected() ? data?.data?.answer?.text : "";