tailjng 0.1.9 → 0.1.11

package/src/lib/components/select/select-dropdown/dropdown-select.component.ts

@@ -35,13 +35,18 @@ import type {
 } from './dropdown-select.types';
 import {
   DROPDOWN_PANEL_DEFAULTS,
+  canResolveSelectedByFindOne,
+  extractOptionsFromResponse,
   filterOptionsBySearch,
+  getOptionValueFilterKey,
   mapObjectOptions,
   mapPrimitiveOptions,
+  mergeDropdownOptions,
+  optionValuesEqual,
   positionDropdownPanel,
+  readDropdownPaginationMeta,
   rebuildEndpointUrl,
   resetDropdownPanelStyles,
-  resolveOptionLabel,
 } from './dropdown-select.util';
 
 export type {
@@ -55,14 +60,21 @@ export type {
 } from './dropdown-select.types';
 export {
   DROPDOWN_PANEL_DEFAULTS,
+  extractOptionsFromResponse,
   filterOptionsBySearch,
   getNestedValue,
   mapObjectOptions,
   mapPrimitiveOptions,
+  mergeDropdownOptions,
+  optionValuesEqual,
   positionDropdownPanel,
+  readDropdownPaginationMeta,
   rebuildEndpointUrl,
   resetDropdownPanelStyles,
   resolveOptionLabel,
+  resolveOptionLabelFromTemplate,
+  getOptionValueFilterKey,
+  canResolveSelectedByFindOne,
 } from './dropdown-select.util';
 
 /**
@@ -79,6 +91,16 @@ export {
  *   optionValue="value"
  *   [showClear]="true"
  * />
+ *
+ * <!-- Nested API payload: data.typeAccess.options[] -->
+ * <JDropdownSelect
+ *   type="searchable"
+ *   endpoint="enum/typeAccess"
+ *   dataPath="typeAccess.options"
+ *   optionLabel="label"
+ *   optionValue="value"
+ *   optionLabelTemplate="Acceso {label} (id {value})"
+ * />
  * ```
  *
  * Icons in template: `[icon]="Icons.ChevronDown"` (see `readonly Icons = Icons`).
@@ -132,12 +154,34 @@ export class JDropdownSelectComponent
   // Property name(s) used to build option text (supports dot paths)
   @Input() optionLabel: string | string[] = 'text';
 
-  // Property name used as the option value
+  // Property name used as the option value (supports dot paths)
   @Input() optionValue = 'value';
 
   // Separator when `optionLabel` is an array of keys
   @Input() labelSeparator = ' ';
 
+  /**
+   * Custom label template per option. Use `{field}` placeholders with dot paths.
+   * Example: `El valor es {value} de {label}`.
+   * Takes precedence over `optionLabel` / `labelSeparator`.
+   */
+  @Input() optionLabelTemplate = '';
+
+  /**
+   * Optional formatter for full control over the displayed label.
+   * Takes precedence over `optionLabelTemplate` when provided.
+   */
+  @Input() optionLabelFn?: (option: Record<string, unknown>) => string;
+
+  /** @deprecated Alias of `dataPath` for a single top-level key in `response.data`. */
+  @Input() responseKey = '';
+
+  /**
+   * Dot path from `response.data` to the options array.
+   * Examples: `users`, `typeAccess.options`, `catalog.items`.
+   */
+  @Input() dataPath = '';
+
   // Prepends a synthetic “TODOS” option with `value: null` (searchable mode)
   @Input() showAllOption = false;
 
@@ -164,8 +208,20 @@ export class JDropdownSelectComponent
   // Searchable: sort order sent to the API
   @Input() sort: DropdownSortOrder = 'ASC';
 
-  // Searchable: max records per request
-  @Input() limit = 1000;
+  // Searchable: records per page (infinite scroll loads next pages)
+  @Input() limit = 30;
+
+  /** Appends next API pages when scrolling the options list (searchable mode). */
+  @Input() infiniteScroll = true;
+
+  /**
+   * Fetches the selected row when it is not in loaded pages (edit forms).
+   * Uses `findOne` for simple CRUD endpoints or `filter[optionValue]` as fallback.
+   */
+  @Input() resolveSelected = true;
+
+  /** Override filter key used to resolve the selected value (default: last segment of `optionValue`). */
+  @Input() resolveSelectedFilterKey = '';
 
   // Searchable panel: show inline search input
   @Input() isSearch = true;
@@ -211,6 +267,7 @@ export class JDropdownSelectComponent
 
   @ViewChild('selectButton') selectButton!: ElementRef<HTMLElement>;
   @ViewChild('dropdownPanel') dropdownPanel?: ElementRef<HTMLElement>;
+  @ViewChild('optionsList') optionsList?: ElementRef<HTMLElement>;
 
   isColumnSelectorOpen = false;
   selectedValue: unknown = null;
@@ -218,6 +275,9 @@ export class JDropdownSelectComponent
   internalOptions: DropdownOption[] = [];
   filteredOptions: DropdownOption[] = [];
 
+  isLoadingMore = false;
+  hasMorePages = false;
+
   searchTerm = '';
   dropdownWidth = 0;
 
@@ -231,8 +291,14 @@ export class JDropdownSelectComponent
 
   private readonly searchSubject = new Subject<string>();
   private searchSubscription?: Subscription;
+  private apiSubscription?: Subscription;
   private clickOutsideListener?: (event: MouseEvent) => void;
 
+  private currentPage = 1;
+  private totalPages = 1;
+  private resolvedSelectedOption: DropdownOption | null = null;
+  private isResolvingSelected = false;
+
   private onChange: (value: unknown) => void = () => {};
   private onTouched: () => void = () => {};
 
@@ -260,12 +326,12 @@ export class JDropdownSelectComponent
       .pipe(debounceTime(1000), distinctUntilChanged())
       .subscribe(() => {
         if (this.type === 'searchable') {
-          this.loadData();
+          this.loadData(true);
         }
       });
 
     if (this.loadOnInit && this.type === 'searchable') {
-      this.loadData();
+      this.loadData(true);
     }
 
     this.updateSelectedLabel();
@@ -290,6 +356,7 @@ export class JDropdownSelectComponent
     }
 
     this.searchSubscription?.unsubscribe();
+    this.apiSubscription?.unsubscribe();
   }
 
   // =====================================================
@@ -301,15 +368,21 @@ export class JDropdownSelectComponent
    * @param value Selected option value or `null`.
    */
   writeValue(value: unknown): void {
+    if (!optionValuesEqual(this.selectedValue, value)) {
+      if (
+        value == null ||
+        !this.resolvedSelectedOption ||
+        !optionValuesEqual(this.resolvedSelectedOption.value, value)
+      ) {
+        this.resolvedSelectedOption = null;
+      }
+    }
+
     this.selectedValue = value;
+    this.updateSelectedLabel();
 
-    if (this.internalOptions.length > 0) {
-      this.updateSelectedLabel();
-    } else {
-      setTimeout(() => {
-        this.updateSelectedLabel();
-        this.cdr.detectChanges();
-      });
+    if (value != null && this.type === 'searchable' && !this.findSelectedOption()) {
+      this.resolveSelectedOption();
     }
 
     this.cdr.markForCheck();
@@ -344,12 +417,7 @@ export class JDropdownSelectComponent
     if (this.options?.length > 0 && typeof this.options[0] !== 'object') {
       this.internalOptions = mapPrimitiveOptions(this.options);
     } else if (this.options?.length > 0) {
-      this.internalOptions = mapObjectOptions(
-        this.options as Record<string, unknown>[],
-        this.optionLabel,
-        this.optionValue,
-        this.labelSeparator,
-      );
+      this.internalOptions = this.mapOptions(this.options as Record<string, unknown>[]);
     }
 
     this.filteredOptions = [...this.internalOptions];
@@ -357,6 +425,26 @@ export class JDropdownSelectComponent
     this.cdr.detectChanges();
   }
 
+  /** Maps raw API/static objects to normalized panel options. */
+  private mapOptions(options: Record<string, unknown>[]): DropdownOption[] {
+    const mapped = mapObjectOptions(
+      options,
+      this.optionLabel,
+      this.optionValue,
+      this.labelSeparator,
+      this.optionLabelFn ? undefined : this.optionLabelTemplate || undefined,
+    );
+
+    if (!this.optionLabelFn) {
+      return mapped;
+    }
+
+    return mapped.map((option) => ({
+      ...option,
+      text: this.optionLabelFn!(option.original as Record<string, unknown>),
+    }));
+  }
+
   /**
    * Selects an option, updates the form model and closes the panel.
    * @param option Normalized option from the panel list.
@@ -364,6 +452,7 @@ export class JDropdownSelectComponent
   selectOption(option: DropdownOption): void {
     this.selectedValue = option.value;
     this.selectedLabel = option.text;
+    this.resolvedSelectedOption = option;
     this.onChange(this.selectedValue);
     this.selectionChange.emit(option.original ?? option.value);
     this.closePanel();
@@ -375,11 +464,21 @@ export class JDropdownSelectComponent
    */
   clearSelection(event: Event): void {
     event.stopPropagation();
+    this.resolvedSelectedOption = null;
     this.writeValue(null);
     this.onChange(null);
     this.selectionChange.emit(null);
   }
 
+  /** Whether an option value matches the current selection. */
+  isOptionSelected(value: unknown): boolean {
+    return optionValuesEqual(this.selectedValue, value);
+  }
+
+  private findSelectedOption(): DropdownOption | undefined {
+    return this.internalOptions.find((option) => this.isOptionSelected(option.value));
+  }
+
   /**
    * Syncs `selectedLabel` with `selectedValue` and `internalOptions`.
    */
@@ -389,8 +488,62 @@ export class JDropdownSelectComponent
       return;
     }
 
-    const selectedOption = this.internalOptions.find((option) => option.value === this.selectedValue);
-    this.selectedLabel = selectedOption ? selectedOption.text : this.placeholder;
+    const selectedOption = this.findSelectedOption();
+    if (selectedOption) {
+      this.selectedLabel = selectedOption.text;
+      this.resolvedSelectedOption = selectedOption;
+      return;
+    }
+
+    if (
+      this.resolvedSelectedOption &&
+      optionValuesEqual(this.resolvedSelectedOption.value, this.selectedValue)
+    ) {
+      this.selectedLabel = this.resolvedSelectedOption.text;
+      this.ensureSelectedOptionPinned();
+      return;
+    }
+
+    if (this.type === 'searchable' && this.resolveSelected) {
+      this.resolveSelectedOption();
+    }
+
+    if (!this.selectedLabel || this.selectedLabel === this.placeholder) {
+      this.selectedLabel = this.placeholder;
+    }
+  }
+
+  /** Keeps a resolved selection visible even if it is not in the current page. */
+  private ensureSelectedOptionPinned(): void {
+    if (!this.resolvedSelectedOption) {
+      return;
+    }
+
+    const exists = this.internalOptions.some((option) =>
+      optionValuesEqual(option.value, this.resolvedSelectedOption!.value),
+    );
+
+    if (!exists) {
+      const leading = this.showAllOption ? [{ value: null, text: 'TODOS' }] : [];
+      this.internalOptions = mergeDropdownOptions(
+        this.internalOptions,
+        [this.resolvedSelectedOption],
+        leading,
+      );
+      this.filteredOptions = [...this.internalOptions];
+    }
+  }
+
+  private applyResolvedRecord(record: Record<string, unknown>): void {
+    const [option] = this.mapOptions([record]);
+    if (!option) {
+      return;
+    }
+
+    this.resolvedSelectedOption = option;
+    this.selectedLabel = option.text;
+    this.ensureSelectedOptionPinned();
+    this.cdr.detectChanges();
   }
 
   /**
@@ -410,17 +563,209 @@ export class JDropdownSelectComponent
 
   /**
    * Loads options from the CRUD API (searchable mode).
+   * @param reset When `true`, restarts from page 1 and replaces the list.
    */
-  loadData(): void {
+  loadData(reset = false): void {
     if (!this.endpoint || !this.genericService) {
       return;
     }
 
-    this.isLoading = true;
+    if (reset) {
+      this.currentPage = 1;
+      this.totalPages = 1;
+      this.hasMorePages = false;
+      this.apiSubscription?.unsubscribe();
+    } else if (!this.hasMorePages || this.isLoadingMore) {
+      return;
+    }
+
+    if (reset) {
+      this.isLoading = true;
+    } else {
+      this.isLoadingMore = true;
+    }
+
+    const params = this.buildListParams(this.currentPage);
+
+    this.apiSubscription = this.genericService
+      .findAll<Record<string, unknown>>({
+        endpoint: this._finalEndpoint,
+        params,
+      })
+      .subscribe({
+        next: (response) => {
+          const data = extractOptionsFromResponse(
+            response.data as Record<string, unknown>,
+            this.endpoint,
+            this.responseKey || undefined,
+            this.dataPath || undefined,
+          ) as Record<string, unknown>[];
+
+          const mapped = this.mapOptions(data);
+          const pagination = readDropdownPaginationMeta(response.meta);
+          this.currentPage = pagination.currentPage;
+          this.totalPages = pagination.totalPages;
+          this.hasMorePages = this.infiniteScroll && pagination.hasMore;
+
+          const leading = this.showAllOption ? [{ value: null, text: 'TODOS' as const }] : [];
+
+          if (reset) {
+            this.options = data;
+            this.internalOptions = mergeDropdownOptions([], mapped, leading);
+          } else {
+            this.options = [...(this.options as Record<string, unknown>[]), ...data];
+            this.internalOptions = mergeDropdownOptions(this.internalOptions, mapped, leading);
+          }
+
+          this.filteredOptions = [...this.internalOptions];
+          this.fullData.emit(this.options);
+          this.isLoading = false;
+          this.isLoadingMore = false;
+          this.ensureSelectedOptionPinned();
+          this.updateSelectedLabel();
+
+          if (this.selectedValue != null && !this.findSelectedOption()) {
+            this.resolveSelectedOption();
+          }
+
+          if (this.isColumnSelectorOpen) {
+            this.updateDropdownPosition();
+          }
+
+          this.cdr.detectChanges();
+        },
+        error: (error) => {
+          console.error('Error fetching data:', error);
+          this.isLoading = false;
+          this.isLoadingMore = false;
+          this.cdr.detectChanges();
+        },
+      });
+  }
+
+  /** Loads the next API page and appends options. */
+  loadMore(): void {
+    if (
+      this.type !== 'searchable' ||
+      !this.infiniteScroll ||
+      !this.hasMorePages ||
+      this.isLoading ||
+      this.isLoadingMore
+    ) {
+      return;
+    }
+
+    this.currentPage += 1;
+    this.loadData(false);
+  }
+
+  /** Infinite scroll handler for the options list. */
+  onOptionsListScroll(event: Event): void {
+    if (this.type !== 'searchable' || !this.infiniteScroll || !this.hasMorePages) {
+      return;
+    }
+
+    const element = event.target as HTMLElement;
+    const threshold = 48;
 
+    if (element.scrollTop + element.clientHeight >= element.scrollHeight - threshold) {
+      this.loadMore();
+    }
+  }
+
+  /** Fetches the selected row when editing and the value is outside loaded pages. */
+  private resolveSelectedOption(): void {
+    if (
+      !this.resolveSelected ||
+      this.selectedValue == null ||
+      this.type !== 'searchable' ||
+      !this.genericService ||
+      !this.endpoint ||
+      this.isResolvingSelected ||
+      this.findSelectedOption()
+    ) {
+      return;
+    }
+
+    this.isResolvingSelected = true;
+
+    if (
+      canResolveSelectedByFindOne(
+        this.endpoint,
+        this.dataPath,
+        this.responseKey,
+        this.selectedValue,
+      )
+    ) {
+      this.genericService
+        .findOne<Record<string, unknown>>({
+          endpoint: this._finalEndpoint,
+          id: Number(this.selectedValue),
+        })
+        .subscribe({
+          next: (record) => {
+            this.isResolvingSelected = false;
+            if (record) {
+              this.applyResolvedRecord(record);
+            } else {
+              this.resolveSelectedByFilter();
+            }
+          },
+          error: () => {
+            this.isResolvingSelected = false;
+            this.resolveSelectedByFilter();
+          },
+        });
+      return;
+    }
+
+    this.resolveSelectedByFilter();
+  }
+
+  private resolveSelectedByFilter(): void {
+    if (!this.genericService || this.selectedValue == null) {
+      this.isResolvingSelected = false;
+      return;
+    }
+
+    const filterKey =
+      this.resolveSelectedFilterKey.trim() || getOptionValueFilterKey(this.optionValue);
+    const params = this.buildListParams(1, {
+      [`filter[${filterKey}]`]: this.selectedValue,
+    });
+    params['limit'] = 1;
+
+    this.genericService
+      .findAll<Record<string, unknown>>({
+        endpoint: this._finalEndpoint,
+        params,
+      })
+      .subscribe({
+        next: (response) => {
+          this.isResolvingSelected = false;
+          const data = extractOptionsFromResponse(
+            response.data as Record<string, unknown>,
+            this.endpoint,
+            this.responseKey || undefined,
+            this.dataPath || undefined,
+          ) as Record<string, unknown>[];
+
+          if (data[0]) {
+            this.applyResolvedRecord(data[0]);
+          }
+        },
+        error: () => {
+          this.isResolvingSelected = false;
+        },
+      });
+  }
+
+  private buildListParams(page: number, extra: Record<string, unknown> = {}): Record<string, unknown> {
     const params: Record<string, unknown> = {
       sortOrder: this.sort,
       limit: this.limit,
+      page,
+      ...extra,
     };
 
     Object.keys(this.defaultFilters).forEach((key) => {
@@ -433,45 +778,7 @@ export class JDropdownSelectComponent
       params['searchFields'] = [...optionLabels, ...this.searchFields];
     }
 
-    this.genericService.findAll<Record<string, unknown>>({
-      endpoint: this._finalEndpoint,
-      params,
-    }).subscribe({
-      next: (response) => {
-        const data = (response.data[this.mainEndpoint] as Record<string, unknown>[]) || [];
-        this.options = data;
-
-        if (this.showAllOption) {
-          this.internalOptions = [{ value: null, text: 'TODOS' }];
-          this.internalOptions.push(
-            ...mapObjectOptions(data, this.optionLabel, this.optionValue, this.labelSeparator),
-          );
-        } else {
-          this.internalOptions = mapObjectOptions(
-            data,
-            this.optionLabel,
-            this.optionValue,
-            this.labelSeparator,
-          );
-        }
-
-        this.filteredOptions = [...this.internalOptions];
-        this.fullData.emit(this.options);
-        this.isLoading = false;
-        this.updateSelectedLabel();
-
-        if (this.isColumnSelectorOpen) {
-          this.updateDropdownPosition();
-        }
-
-        this.cdr.detectChanges();
-      },
-      error: (error) => {
-        console.error('Error fetching data:', error);
-        this.isLoading = false;
-        this.cdr.detectChanges();
-      },
-    });
+    return params;
   }
 
   /**
@@ -513,11 +820,11 @@ export class JDropdownSelectComponent
       this.updateDropdownPosition();
 
       if (this.type === 'searchable' && this.loadOpen) {
-        this.loadData();
+        this.loadData(true);
       }
 
       if (this.type === 'searchable' && !this.loadOnInit && this.shouldTriggerLoad()) {
-        this.loadData();
+        this.loadData(true);
       }
 
       return;