@blackbaud/skyux
Version:
SKY UX built on Angular 2
214 lines • 15.3 kB
JavaScript
import { Component, ContentChildren, ViewChild, Input, ChangeDetectionStrategy } from '@angular/core';
import { ListToolbarConfigSetSearchEnabledAction, ListToolbarConfigSetSortSelectorEnabledAction } from './state/config/actions';
import { Observable } from 'rxjs/Observable';
import { ListToolbarState, ListToolbarStateDispatcher, ListToolbarStateModel } from './state';
import { ListToolbarItemModel, ListToolbarSetTypeAction, ListState, ListStateDispatcher, ListSortLabelModel, ListPagingSetPageNumberAction } from '../list/state';
import { SkyListToolbarItemComponent } from './list-toolbar-item.component';
import { SkyListToolbarSortComponent } from './list-toolbar-sort.component';
import { SkyListFilterSummaryComponent, SkyListFilterInlineComponent } from '../list-filters';
import { getValue } from 'microedge-rxstate/dist/helpers';
var SkyListToolbarComponent = (function () {
function SkyListToolbarComponent(state, dispatcher, toolbarState, toolbarDispatcher) {
this.state = state;
this.dispatcher = dispatcher;
this.toolbarState = toolbarState;
this.toolbarDispatcher = toolbarDispatcher;
this.toolbarType = 'standard';
this.inlineFilterBarExpanded = false;
this.hasSortSelectors = false;
}
SkyListToolbarComponent.prototype.ngOnInit = function () {
var _this = this;
this.dispatcher.toolbarExists(true);
getValue(this.searchText, function (searchText) { return _this.updateSearchText(searchText); });
getValue(this.searchEnabled, function (searchEnabled) {
return _this.toolbarDispatcher.next(new ListToolbarConfigSetSearchEnabledAction(searchEnabled === undefined ? true : searchEnabled));
});
getValue(this.toolbarType, function (type) {
_this.dispatcher.next(new ListToolbarSetTypeAction(_this.toolbarType));
});
getValue(this.sortSelectorEnabled, function (sortSelectorEnabled) {
return _this.toolbarDispatcher.next(new ListToolbarConfigSetSortSelectorEnabledAction(sortSelectorEnabled === undefined ? true : sortSelectorEnabled));
});
this.sortSelectors = this.getSortSelectors();
// Initialize the sort toolbar item if necessary
this.sortSelectors.distinctUntilChanged().subscribe(function (currentSort) {
if (currentSort.length > 0 && !_this.hasSortSelectors) {
_this.hasSortSelectors = true;
_this.dispatcher.toolbarAddItems([
new ListToolbarItemModel({
id: 'sort-selector',
template: _this.sortSelectorTemplate,
location: 'right'
})
], 0);
}
else if (currentSort.length < 1 && _this.hasSortSelectors) {
_this.hasSortSelectors = false;
_this.dispatcher.toolbarRemoveItems([
'sort-selector'
]);
}
});
this.searchTextInput = this.state.map(function (s) { return s.search.searchText; }).distinctUntilChanged();
this.view = this.state.map(function (s) { return s.views.active; }).distinctUntilChanged();
this.leftTemplates = this.getLeftTemplates();
this.centerTemplates = this.getCenterTemplates();
this.rightTemplates = this.getRightTemplates();
this.type = this.state.map(function (state) { return state.toolbar.type; }).distinctUntilChanged();
this.type.subscribe(function (toolbarType) {
if (toolbarType === 'search') {
_this.dispatcher.toolbarRemoveItems(['search']);
}
else {
_this.dispatcher.toolbarAddItems([
new ListToolbarItemModel({
id: 'search',
template: _this.searchTemplate,
location: 'center'
})
]);
}
});
this.isSearchEnabled = this.toolbarState.map(function (s) { return s.config; })
.distinctUntilChanged().map(function (c) { return c.searchEnabled; });
this.isSortSelectorEnabled = this.toolbarState.map(function (s) { return s.config; })
.distinctUntilChanged().map(function (c) { return c.sortSelectorEnabled; });
this.hasAppliedFilters = this.state.map(function (s) {
return s.filters;
})
.distinctUntilChanged()
.map(function (filters) {
var activeFilters = filters.filter(function (f) {
return f.value !== '' &&
f.value !== undefined &&
f.value !== false &&
f.value !== f.defaultValue;
});
return activeFilters.length > 0;
});
this.hasAdditionalToolbarSection = this.state.map(function (current) {
return current.toolbar.items.length > 0;
});
};
SkyListToolbarComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.toolbarItems.forEach(function (toolbarItem) {
_this.dispatcher.toolbarAddItems([new ListToolbarItemModel(toolbarItem)], toolbarItem.index);
});
var sortModels = this.toolbarSorts.map(function (sort) {
return new ListSortLabelModel({
text: sort.label,
fieldSelector: sort.field,
fieldType: sort.type,
global: true,
descending: sort.descending
});
});
this.dispatcher.sortSetGlobal(sortModels);
this.showFilterSummary = this.filterSummary.length > 0;
this.hasInlineFilters = this.inlineFilter.length > 0;
if (this.hasInlineFilters) {
this.dispatcher.toolbarAddItems([
new ListToolbarItemModel({ template: this.inlineFilterButtonTemplate, location: 'right' })
], 0);
}
};
SkyListToolbarComponent.prototype.setSort = function (sort) {
this.dispatcher.sortSetFieldSelectors([{ fieldSelector: sort.fieldSelector, descending: sort.descending }]);
};
SkyListToolbarComponent.prototype.inlineFilterButtonClick = function () {
this.inlineFilterBarExpanded = !this.inlineFilterBarExpanded;
};
SkyListToolbarComponent.prototype.updateSearchText = function (searchText) {
var _this = this;
this.state.take(1).subscribe(function (currentState) {
_this.dispatcher.searchSetText(searchText);
if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
_this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
}
});
};
SkyListToolbarComponent.prototype.itemIsInView = function (itemView, activeView) {
return (itemView === undefined || itemView === activeView);
};
SkyListToolbarComponent.prototype.getSortSelectors = function () {
return Observable.combineLatest(this.state.map(function (s) { return s.sort.available; }).distinctUntilChanged(), this.state.map(function (s) { return s.sort.global; }).distinctUntilChanged(), this.state.map(function (s) { return s.sort.fieldSelectors; }).distinctUntilChanged(), function (available, global, fieldSelectors) {
// Get sorts that are in the global that are not in the available
var sorts = global.filter(function (g) { return available.filter(function (a) { return a.fieldSelector === g.fieldSelector; }).length === 0; });
var resultSortSelectors = sorts.concat(available).map(function (sortLabels) {
var fs = fieldSelectors.filter(function (f) {
return f.fieldSelector === sortLabels.fieldSelector
&& f.descending === sortLabels.descending;
});
var selected = false;
if (fs.length > 0) {
selected = true;
}
return {
sort: sortLabels,
selected: selected
};
});
return resultSortSelectors;
});
};
SkyListToolbarComponent.prototype.getLeftTemplates = function () {
var _this = this;
return Observable.combineLatest(this.state.map(function (s) { return s.toolbar; }).distinctUntilChanged(), this.view, function (toolbar, view) { return toolbar.items.filter(function (i) {
return i.location === 'left' && _this.itemIsInView(i.view, view);
}); });
};
SkyListToolbarComponent.prototype.getCenterTemplates = function () {
var _this = this;
return Observable.combineLatest(this.state.map(function (s) { return s.toolbar; }).distinctUntilChanged(), this.view, function (toolbar, view) { return toolbar.items.filter(function (i) {
return i.location === 'center' && _this.itemIsInView(i.view, view);
}); });
};
SkyListToolbarComponent.prototype.getRightTemplates = function () {
var _this = this;
return Observable.combineLatest(this.state.map(function (s) { return s.toolbar; }).distinctUntilChanged(), this.view.distinctUntilChanged(), function (toolbar, view) {
return toolbar.items.filter(function (i) {
return i.location === 'right' && _this.itemIsInView(i.view, view);
});
});
};
return SkyListToolbarComponent;
}());
export { SkyListToolbarComponent };
SkyListToolbarComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-list-toolbar',
template: "<div class=\"sky-list-toolbar-container\">\n <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n <sky-toolbar-section>\n <sky-toolbar-item *ngFor=\"let item of leftTemplates | async\">\n <sky-list-toolbar-item-renderer\n [template]=\"item.template\"\n [attr.sky-cmp-id]=\"item.id\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates | async\">\n <sky-list-toolbar-item-renderer\n [template]=\"item.template\"\n [attr.sky-cmp-id]=\"item.id\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates | async\"\n [attr.sky-toolbar-id]=\"item.id\">\n <sky-list-toolbar-item-renderer\n [template]=\"item.template\"\n [attr.sky-cmp-id]=\"item.id\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <ng-content></ng-content>\n </sky-toolbar-section>\n <sky-toolbar-section\n *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\">\n <ng-content select=\"sky-list-filter-summary\"></ng-content>\n </sky-toolbar-section>\n </sky-toolbar>\n <div class=\"sky-list-toolbar-search\" *ngIf=\"(type | async) === 'search'\">\n <sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [template]=\"search\" sky-cmp-id=\"search\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n </sky-toolbar-section>\n <sky-toolbar-section [hidden]=\"!(hasAdditionalToolbarSection | async)\">\n <sky-toolbar-item *ngFor=\"let item of leftTemplates | async\">\n <sky-list-toolbar-item-renderer\n [template]=\"item.template\"\n [attr.sky-cmp-id]=\"item.id\"></sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates | async\">\n <sky-list-toolbar-item-renderer\n *ngIf=\"item.id !== 'search'\"\n [template]=\"item.template\"\n [attr.sky-cmp-id]=\"item.id\"></sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates | async\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n [template]=\"item.template\"\n [attr.sky-cmp-id]=\"item.id\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <ng-content></ng-content>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div *ngIf=\"hasInlineFilters && inlineFilterBarExpanded\">\n <ng-content select=\"sky-list-filter-inline\"></ng-content>\n </div>\n</div>\n\n<ng-template #search>\n <div *ngIf=\"isSearchEnabled | async\">\n <sky-search\n #searchComponent\n [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n [searchText]=\"searchTextInput | async\"\n (searchApply)=\"updateSearchText($event)\"\n [placeholderText]=\"placeholder\">\n </sky-search>\n </div>\n</ng-template>\n\n<ng-template #sortSelector>\n <div\n class=\"sky-toolbar-item-sort-container\"\n *ngIf=\"(isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\">\n <sky-sort>\n <sky-sort-item\n *ngFor=\"let item of sortSelectors | async\"\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\">\n {{item.sort.text}}\n </sky-sort-item>\n </sky-sort>\n </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n <sky-filter-button\n (filterButtonClick)=\"inlineFilterButtonClick()\"\n [active]=\"hasAppliedFilters | async\">\n </sky-filter-button>\n</ng-template>\n",
styles: [".sky-list-toolbar-search /deep/ .sky-toolbar-container,.sky-list-toolbar-search /deep/ .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-container /deep/ sky-toolbar-item[sky-toolbar-id=\"sort-selector\"] .sky-toolbar-item{margin-right:0}.sky-toolbar-item-sort-container{margin-right:5px}\n"],
providers: [
ListToolbarState,
ListToolbarStateDispatcher,
ListToolbarStateModel
],
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
SkyListToolbarComponent.ctorParameters = function () { return [
{ type: ListState, },
{ type: ListStateDispatcher, },
{ type: ListToolbarState, },
{ type: ListToolbarStateDispatcher, },
]; };
SkyListToolbarComponent.propDecorators = {
'placeholder': [{ type: Input },],
'searchEnabled': [{ type: Input },],
'searchComponent': [{ type: ViewChild, args: ['searchComponent',] },],
'sortSelectorEnabled': [{ type: Input },],
'toolbarType': [{ type: Input },],
'searchText': [{ type: Input },],
'toolbarItems': [{ type: ContentChildren, args: [SkyListToolbarItemComponent,] },],
'toolbarSorts': [{ type: ContentChildren, args: [SkyListToolbarSortComponent,] },],
'filterSummary': [{ type: ContentChildren, args: [SkyListFilterSummaryComponent,] },],
'inlineFilter': [{ type: ContentChildren, args: [SkyListFilterInlineComponent,] },],
'searchTemplate': [{ type: ViewChild, args: ['search',] },],
'sortSelectorTemplate': [{ type: ViewChild, args: ['sortSelector',] },],
'inlineFilterButtonTemplate': [{ type: ViewChild, args: ['inlineFilterButton',] },],
};
//# sourceMappingURL=list-toolbar.component.js.map