DynamicSelect Nedir / Nasıl Kullanılır?

NOT : Aktif olarak her projede kullanıldığı için bir projeden alınması önerilir. Bu dokumandaki bazı özellikler zamanla eski hale gelebilir.

dynamic-select projelerde lazy loading olarak verileri çekerek açılır liste içerisinde göstermek kullanılır ayrıca veriler gösterilirken template de kullanılabilir

Kullanımı

Eklenecek olan komponentin Module dosyası içerisine aşağıdaki kodlar eklenmelidir

import { CoreSelectSharedModule } from '@alpata/octapull.core';

Modul import

imports: [CoreSelectSharedModule];

Modül içerisine kodları ekledikten sonra İlgili komponentin Html dosyası içerisine ağağıdaki kod bloğu eklenmelidir.,

<app-dynamic-select
  [seciliId]="kisiId"
  [placeholder]="'Arama metni giriniz'"
  [filtreProperty]="''"
  [getWithFilterApi]="
  [bindValue]="''"
  [bindLabel]="''"
  [name]="''"
  [withFilterExtraFilter]="''"
>

</app-dynamic-select>

[filtreProperty]: Hangi alana göre filtreleme yapılacaksa o alanın adı yazılmalıdır

[getWithFilterApi]: Verilerin çekileceği apinin url'i yazılmalıdır. Bu api getWithFilter olmalıdır

[bindValue]: Bind edilecek alanın adı yazılmalıdır.

[bindLabel]: Liste içerisinde gösterilecek olan alanın adı yazılmalıdır

[withFilterExtraFilter]: Ekstra bir filtreleme yapılmak istenirse filtreleme parametreleri buraya yazılır.

Template Örneği

<app-dynamic-select
  [seciliId]="this.kisiId"
  [placeholder]="'Arama metni giriniz'"
  [filtreProperty]="'Ad'"
  [getWithFilterApi]="'/api/v1/HumanResources/Kisi/GetWithFilter'"
  [bindValue]="'Id'"
  [bindLabel]="'Ad'"
  [name]="'item.KisiId'"
  (secimDegisim)="plasiyerSecimDegisim($event)"
  [withFilterExtraFilter]="kilitVeOnayliFilter"
>
  <ng-template #customTemplate let-item> {{ item?.Ad }} {{ item?.Soyad }} </ng-template>
</app-dynamic-select>

Yukarıdaki örnekte ng-template arasına yazılan ad ve soyad alanlarını açılır liste içerisinde yan yana gösterimi sağlar. Bu kısımda yapılacak düzenlemelere göre açılır liste içerisinde gözükecek alan düzenlenmiş olur

secimDegisim fonsiyonu ile dışarı bir input gönderilir daha sonra fonsiyondan gelen input değeri alınır bu fonsiyon hangi seçeneğin seçildiğini belirlemeye yaramaktadır

plasiyerSecimDegisim(event: any) {
  if (event == null) {
    this.kisiId = null;
  } else {
    this.kisiId = event.Id;
  }
}

withFilterExtraFilter Bu input ile istenilen bütün alanlar filtrelenebilinir. Örneğin sadece "Kilit" alanı "false" ve "Onayli" alanı "true" olan nesnelerin gelmesi için bir filtreleme yapılmak isteniyorsa, bu input alanına aşağıdaki şekilde tanımlanmış "kilitVeOnayliFilter" dizisi gönderilmelidir.

kilitVeOnayliFilter: PTableFilter[] = [
  {
    key: "Kilit",
    value: [
    {
      matchMode: EPTableFilterValue.equals,
      operator: EPTableFilterOperator.and,
      value: "false",
    },
    ],
  },
  {
    key: "Onayli",
    value: [
    {
      matchMode: EPTableFilterValue.equals,
      operator: EPTableFilterOperator.and,
      value: "true",
    },
    ],
  },
];

Örnekte kullanılan "EPTableFilterValue" ve "EPTableFilterOperator" enum değerleri:

export declare enum EPTableFilterValue {
  contains = 'contains',
  notContains = 'notContains',
  startsWith = 'startsWith',
  endsWith = 'endsWith',
  equals = 'equals',
  notEquals = 'notEquals',
  lte = 'lte',
  gt = 'gt',
  gte = 'gte',
}
export declare enum EPTableFilterOperator {
  and = 'and',
  or = 'or',
}

Component Tüm Property input ve outputları

  /**
   * Rehber kullanımı için kod
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() rehberKodu: string;

  /**500
   * Kullanıcı yazım işlemini tamamladıktan sonra API isteği atılmadan önceki bekleme süresi.
   * Süre ms cinsindendir
   *
   * @type {number}
   * @memberof DynamicSelectComponent
   */
  @Input() apiIstekBeklemeSuresi: number = 500;

  /**
   * Her istekte gösterilecek maksimum satır sayısını belirtir.
   *
   * @type {number}
   * @memberof DynamicSelectComponent
   */
  @Input() gosterilecekSatirSayisi: number = 10;

  /**
   * Verilerin API tarafında sıralanması için kullanılacak property adı
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() sortField: string = 'Id';

  /**
   * Verilerin API tarafında sıralanması için kullanılacak olan yöntem
   * 1 veya 0 değerlerini alabilir
   *
   * @type {number}
   * @memberof DynamicSelectComponent
   */
  @Input() sortOrder: number = 1;

  /**
   * API isteklerinde ilgili property değerinin aranma yöntemi.
   * Default olarak contains ile arama yapılır.
   * p-table filtre değerleri kullanılabilir
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() matchMode: string = 'contains';

  /**
   * ng-select clearAllText metni
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() clearAllText: string = 'Tümünü temizle';

  /**
   * ng-select loadingText metni
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() loadingText: string = 'Yükleniyor';

  /**
   * ng-select notFoundText metni
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() notFoundText: string = 'Kayıt bulunamadı';

  /**
   * ng-select placeholder metni
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() placeholder: string = 'Arama metni giriniz';

  /**
   * ng-select typeToSearch metni
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() typeToSearchText: string = 'Arama metni giriniz';


  /**
   * ng-select readonly özelliği
   *
   * @type {boolean}
   * @memberof DynamicSelectComponent
   */
  @Input() readonly: boolean = false;

  /**
   * input name değeri
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() name: string = 'select-alpata';

  /**
   * Değişimlerinde tetiklenir.
   * Her değişimde tetiklendiği için geriye null değer dönebilir. Null değer kontrolü yapılmalıdır
   *
   * @memberof DynamicSelectComponent
   */
  @Output() secimDegisim = new EventEmitter<any>();

  /**
   * Filtre uygulanacak olan property adı
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() filtreProperty: string;

  /**
   * Filtre uygulanacak olan birden fazla property'i içerir. filtreProperty alanı dolu olmalıdır
   *
   * @type {string[]}
   * @memberof DynamicSelectComponent
   */
  @Input() withFilterExtraFilter: PTableFilter[];

  /**
   * getWithFilter api url bilgisi
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() getWithFilterApi: string;

  /**
   * Arama yapmadan önce yazılması gereken minimum karakter sayısı
   *
   * @type {number}
   * @memberof DynamicSelectComponent
   */
  @Input() minTermLength: number = 3;

  /**
   * Bind edilecek value değeri
   * default olarak Id değerini alır
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() bindValue: string = 'Id';

  /**
   * Select te gösterilecek olan property
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() bindLabel: string;

  /**
   * Select te gösterilecek olan ilk 10 verinin arama için kulanılacak olan startWith property adı
   *
   * @type {string}
   * @memberof DynamicSelectComponent
   */
  @Input() firstNItemSearchStartWith: string = 'a';