BaseFilterView

Licrus IQ platformunda geliştirdiğiniz liste ekranlarında bazı durumlarda arama kriterleri (filterler) kullanmak isteyebilirsiniz. BaseFilterView, ayrı bir bileşen olarak liste ekranınıza filtre paneli eklemenizi kolaylaştıracaktır. Bu sayede uygulama genelinde benzer fonksiyonlara ve görünümlere sahip filtre panelleri oluşacaktır.

Aşağıdaki kod örneğinde Çağrı listesine kullanılan CallIndexViewFilter inceleyebilirsiniz.

class CallIndexViewFilter extends BaseFilterView {
    constructor(selector: string) {
        super(selector, "#filter-row");
    }

    public dateRangeChange(e) {
        var value = <DateRange>parseInt(e.currentTarget.value);
        var $target = $(e.currentTarget.getAttribute("data-target"));
        if (value == DateRange.Custom) {
            $target.show();
        }
        else {
            $target.hide();
            $target.find("input").val("");
            $target.find("input").change();
        }
    }

}
_viewFilter = new CallIndexViewFilter("#view-filter-wrapper");

Attributes

Attribute Adı	Açıklaması
data-filter	HTML elementin bir filtre alanı olduğunu belirtir.
data-clear	Filtre alanı için temizleme butonun eklenmesi isteniyorsa true değer verilir. İstenmiyorsa false değer verilir. Varsayılan değeri true’dur. Özellikle temizle butonu istenmeyen alanların belirtilmesi için kullanılır.

Methods

Filter bileşeninde kullanılan metodların listesini aşağıda görebilirsiniz. Metodlar çoğu zaman filtre panel tarafından yönetilir.

constructor

BaseFilterView’ı miras alan sınıf (inherited), mutlaka BaseFilterView’a ait constructor’ı çağırmalıdır. Constructor iki paremtre almaktadır.	Parametre	Açıklama
target: string	Filter alanlarının alınacağı container için selector. #id veya .classname kullanılabilir. ID kullanılması tavsiye edilir.
badgeTarget: string	Filter alanlarından seçilenlerin label ve value şeklinde badge olarak gösterilecekleri seçili filtreler paneli. Selector olarak #id veya .classname olarak kullanılabilir. ID kullanılması tavsiye edilmektedir.

clear

Tüm filter seçeneklerini temizlemek için kullanılır.

public clear();

search

Filtre panelinin kullanıldığı parent view’da yer alan search fonksiyonunu tetikler. FiltreView bileşenin kullanıldığı Parent View’da diğer bir deyişle liste ekranında mutlaka pulic search():void şeklinde bir fonksiyon tanımı olmalıdır.

public search();

getField

Id değeri verilen alan için FilterViewField tipinde filtre bilgilerini verir. Geri dönüş tipinin detayları için FilterViewField sınıfını inceleyin.

public getField(filterId: string): FilterViewField

fieldAdded

Bir filter nesnesi eklendikten sonra tetiklenir. Parametre olarak eklenmek istenen filter nesnesini alır.

public fieldAdded(field: FilterViewField);

fieldRemoved

Bir filter nesnesi kaldırıldıktan sonra tetiklenir. Parametre olarak silinmek istenen filter nesnesini alır.

public fieldRemoved(field: FilterViewField);

toggleFilter

Filtre seçeneklerini göstermek ve gizlemek için kullanılır. Verilen parametrenin değerine göre işlem yapar. Eğer değer verilmeden çağrılırsa kapalı paneli gösterir, panel açıksa gizler. İşlem sonucu için FakePromise nesnesinin metodları kullanılır.

public toggleFilter(hide: boolean = false): FakePromise;

showFilter

Filtre paneli göstermek için kullanılır. Filter paneli zaten açıksa bir işlem yapmaz.

public showFilter();

isOpen

Filter panelinin açık olup olmadığını kontrol etmek için kullanılır. Filter paneli açıksa true diğer durumda false değer verir.

public isOpen();

Events

Şu an için desteklenen bir event bulunmuyor.

Örnek

filter.ts

class SampleIndexViewFilter extends BaseFilterView {
    constructor(selector: string) {
        super(selector, "#filter-row");
    }
}
_viewFilter = new SampleIndexViewFilter("#view-filter-wrapper");

filter.html

<div class="panel filter" id="view-filter-wrapper">
    <div class="panel-body">
        <div class="row">
            <div class="col-12 form-group">
                <div class="input-group input-group-icon">
                    <span class="input-group-addon">
                        <span class="icon wb-search" aria-hidden="true"></span>
                    </span>
                    <input type="search" id="entiity-list-filter-box" class="form-control input-sm" data-filter="true" data-clear="false" data-model="Keywords" placeholder="{res:Anahtar Kelime}" />
                    <span class="input-group-addon" ng-click="_viewFilter.toggleFilter()">
                        <i class="icon wb-more-horizontal"></i>
                        <i class="icon wb-close"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="filter-body-wrapper">
            <div class="filter-body">
                <div class="row">
                    <div class="col-6 form-group">
                        <input class="form-control" type="text" id="filter-callid" data-filter="true" data-model="Id" placeholder="{res:Çağrı No}" />
                    </div>
                    <div class="col-6 form-group">
                        <input class="form-control" type="text" id="filter-customer" data-model="CustomerName" placeholder="{res:Müşteri (Ad, Ünvan, Telefon vs.)}" data-filter="true" />
                    </div>
                </div>
                <div class="row filter-footer">
                    <div class="col-10">
                    </div>
                    <div class="col-2 form-group">
                        <button type="button" class="btn btn-primary" ng-click="search()">
                            <i class="icon wb-search" aria-hidden="true"></i>{res:Listele}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

index.html

<!-- seçili filtre kriterlerinin gösterileceği alan -->
<div class="badge-filter-row" id="filter-row"></div>

<!-- filter panelinin gösterileceği alan -->
<div id="view-filter"> </div>

index.ts

class SamplIndexView extends BaseIndexView {

    constructor() {
        var parameter = new ViewParameter();
        //diğer view paremetreleri
        super(parameter);
    }

    private filter: any;
    public onInit() {
        ViewEngine.loadView(<LoadViewArgs>{
            route: "full/path/index-filter",
            target: "#view-filter",
            instanceVariable: "_viewFilter",
            data: this.filter
        });

        this.filter = {};

        DataBinder.connect(this.filter, "#view-filter");
    }

    public search() {
        _viewFilter.toggleFilter(true);
        //arama fonksiyonu çağrılır.
    }
}
_co = new SamplIndexView();