psp_panel/src/app/shared/components/abstract-select.component.ts

import { Maybe } from '@/core';
import { Component, EventEmitter, Input, model, Output, signal } from '@angular/core';
import { FormControl } from '@angular/forms';

export interface ISelectItem {
  id: number;
  name: string;
}

@Component({
  selector: 'abstract-select-field',
  template: '',
})
export abstract class AbstractSelectComponent<T = ISelectItem> {
  @Input() control = new FormControl<Maybe<number | T>>(null);
  @Input() canInsert: boolean = false;
  @Input() showLabel: boolean = true;
  @Input() showErrors: boolean = true;
  @Input() showClear: boolean = true;
  @Input() isFullDataOptionValue: boolean = false;
  @Input() optionValue = 'id';
  @Output() onChange = new EventEmitter<Maybe<T>>();

  loading = signal(false);
  items = signal<Maybe<T[]>>(null);
  isOpenFormDialog = signal(false);
  value = model<Maybe<T>>(null);

  constructor() {
    if (this.value()) {
      this.control.setValue(this.value());
    }

    this.control.valueChanges.subscribe((val) => {
      this.value.set(val as Maybe<T>);
    });
  }

  abstract getData(): void;

  refresh() {
    this.getData();
  }

  onOpenForm() {
    this.isOpenFormDialog.set(true);
  }

  get selectOptionValue() {
    if (this.isFullDataOptionValue) {
      return undefined;
    }
    return this.optionValue;
  }

  change(value: Maybe<T>) {
    if (typeof value !== 'object') {
      // @ts-ignore
      this.onChange.emit(this.items()?.find((item) => item[this.optionValue] === value));
    } else {
      this.onChange.emit(value);
    }
  }
}