ontotext-reusable-ui-components/onto-search/esm2015/lib/onto-search-results/onto-search-results.component.js

Unified reusable UI components designed for the Ontotext ecosystem.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { moveItemInArray } from '@angular/cdk/drag-drop';
export class OntoSearchResultsComponent {
    constructor() {
        /**
         * Fired whenever there is change in sorting column or direction.
         * Sends a {@link Sort} object
         */
        this.sortData = new EventEmitter();
        this.initialSort = true;
    }
    ngOnChanges(changes) {
        if (changes.config && changes.config.currentValue) {
            if (this.initialSort) {
                this.sortColumnConfigurations();
                this.initialSort = false;
            }
            this.setDisplayColumns([...this.getVisibleColumnNames()]);
        }
    }
    reorderColumns(event) {
        moveItemInArray(this.config.columnConfigurations, this.findColumnConfigIndexByName(this.displayColumns[event.previousIndex]), this.findColumnConfigIndexByName(this.displayColumns[event.currentIndex]));
        this.setDisplayColumns(this.getVisibleColumnNames());
    }
    findColumnConfigIndexByName(name) {
        return this.config.columnConfigurations.findIndex((columnConfig) => columnConfig.name === name);
    }
    /**
     * Sorts the column configurations by permanent columns first
     */
    sortColumnConfigurations() {
        const permanentCC = this.getFilteredColumnConfigs((column) => column.permanent);
        const dynamicCC = this.getFilteredColumnConfigs((column) => !column.permanent);
        this.config.columnConfigurations = [...permanentCC, ...dynamicCC];
    }
    setDisplayColumns(columnNamesArray) {
        this.displayColumns = columnNamesArray;
    }
    getFilteredColumnConfigs(filterPredicate) {
        return this.config.columnConfigurations.filter(filterPredicate);
    }
    getVisibleColumnNames() {
        return this.getFilteredColumnConfigs((column) => column.permanent || !column.hidden)
            .map((column) => column.name);
    }
}
OntoSearchResultsComponent.decorators = [
    { type: Component, args: [{
                selector: 'onto-search-results',
                template: "<div class=\"table-component\" [ngClass]=\"componentClass\" appCypressData=\"table-component\">\n  <table *ngIf=\"config\" cdk-table [dataSource]=\"datasource\"\n         matSort (matSortChange)=\"sortData.next($event)\"\n         [matSortDisabled]=\"!config.enableSort\" [matSortDisableClear]=\"true\"\n         [matSortActive]=\"sort?.active\" [matSortDirection]=\"sort?.direction\"\n         class=\"onto-table onto-table-fixed-layout\" appCypressData=\"onto-table\"\n         cdkDropList cdkDropListLockAxis=\"x\" cdkDropListOrientation=\"horizontal\"\n         (cdkDropListDropped)=\"reorderColumns($event)\">\n    <ng-container *ngFor=\"let columnConfig of config.columnConfigurations; let i=index;\"\n                  cdkColumnDef=\"{{columnConfig.name}}\">\n      <th cdk-header-cell id=\"{{columnConfig.name}}\"\n          class=\"onto-table-header-cell {{'onto-table-column-' + columnConfig.name}}\"\n          *cdkHeaderCellDef appCypressData=\"onto-table-header-cell\"\n          mat-sort-header [disabled]=\"!columnConfig.enableSort\"\n          cdkDrag cdkDragLockAxis=\"x\">\n        <div>{{columnConfig.label}}</div>\n      </th>\n      <td cdk-cell class=\"onto-table-cell {{'onto-table-column-' + columnConfig.name}}\"\n          *cdkCellDef=\"let row\" appCypressData=\"onto-table-cell\">\n        <div>\n          <ng-container *ngIf=\"columnConfig.dataFunction; else cellTemplate\">\n            {{columnConfig.dataFunction(row)}}\n          </ng-container>\n          <ng-template #cellTemplate [ngTemplateOutlet]=\"columnConfig.dataTemplate\"\n                       [ngTemplateOutletContext]=\"{$implicit: row}\"></ng-template>\n        </div>\n      </td>\n      <ng-container *ngIf=\"config.showFooter\">\n        <td cdk-footer-cell\n            class=\"onto-table-footer-cell {{'onto-table-column-' + columnConfig.name}}\"\n            *cdkFooterCellDef appCypressData=\"onto-table-footer-cell\">\n          <div>{{columnConfig.footerFunction(datasource, columnConfig)}}</div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <tr cdk-header-row class=\"onto-table-header-row\" appCypressData=\"onto-table-header-row\"\n        *cdkHeaderRowDef=\"displayColumns\"></tr>\n    <tr cdk-row class=\"onto-table-row\" appCypressData=\"onto-table-row\"\n        *cdkRowDef=\"let row; columns: displayColumns\"></tr>\n    <ng-container *ngIf=\"config.showFooter\">\n      <tr cdk-footer-row class=\"onto-table-footer-row\" appCypressData=\"onto-table-footer-row\"\n          *cdkFooterRowDef=\"displayColumns\"></tr>\n    </ng-container>\n  </table>\n</div>\n",
                styles: [":host{width:100%}.onto-table-fixed-layout{table-layout:fixed}.onto-table{background:#fff;border-spacing:0;display:table;font-family:Roboto,sans-serif;width:100%}.onto-table-footer-row,.onto-table-header-row,.onto-table-row{align-items:center;border-style:solid;border-width:0 0 1px;box-sizing:border-box;display:flex}.onto-table-header-row{height:56px}.onto-table-footer-row,.onto-table-row{min-height:48px}.onto-table-cell,.onto-table-footer-cell,.onto-table-header-cell{align-items:center;border-bottom-color:#000;display:flex;flex:1;font-size:16px;font-weight:400;height:100%;min-height:inherit;overflow:hidden;padding:0;word-wrap:break-word}.onto-table-cell div,.onto-table-footer-cell div,.onto-table-header-cell div{padding:0}.onto-table-cell div:first-of-type,.onto-table-footer-cell div:first-of-type,.onto-table-header-cell div:first-of-type{padding-left:24px}.onto-table-cell div:last-of-type,.onto-table-footer-cell div:last-of-type,.onto-table-header-cell div:last-of-type{padding-right:24px}.onto-table-header-cell{text-align:left}.onto-table-cell,.onto-table-footer-cell{font-size:14px}.cdk-drag-preview{box-sizing:border-box;position:relative}.cdk-drag-preview:after{border:1px solid rgba(0,0,0,.4);border-radius:4px;bottom:0;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);content:\"\";left:5px;position:absolute;right:5px;top:0}.cdk-drag-placeholder{color:transparent;position:relative;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder:after{background:rgba(0,0,0,.1);border:1px dashed rgba(0,0,0,.4);border-radius:4px;bottom:0;content:\"\";left:5px;position:absolute;right:5px;top:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}"]
            },] }
];
OntoSearchResultsComponent.propDecorators = {
    datasource: [{ type: Input }],
    config: [{ type: Input }],
    sort: [{ type: Input }],
    componentClass: [{ type: Input }],
    sortData: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib250by1zZWFyY2gtcmVzdWx0cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiL29wdC9qZW5raW5zX2pvYnMvd29ya3NwYWNlL3JldXNhYmxlLXVpLWNvbXBvbmVudHMtcmVsZWFzZS9wcm9qZWN0cy9vbnRvLXNlYXJjaC9zcmMvIiwic291cmNlcyI6WyJsaWIvb250by1zZWFyY2gtcmVzdWx0cy9vbnRvLXNlYXJjaC1yZXN1bHRzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFnQixNQUFNLGVBQWUsQ0FBQztBQUcvRixPQUFPLEVBQWMsZUFBZSxFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFPcEUsTUFBTSxPQUFPLDBCQUEwQjtJQUx2QztRQWdDRTs7O1dBR0c7UUFFSCxhQUFRLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFHaEQsZ0JBQVcsR0FBRyxJQUFJLENBQUM7SUE2QzdCLENBQUM7SUEzQ1EsV0FBVyxDQUFDLE9BQXNCO1FBQ3ZDLElBQUksT0FBTyxDQUFDLE1BQU0sSUFBSSxPQUFPLENBQUMsTUFBTSxDQUFDLFlBQVksRUFBRTtZQUNqRCxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7Z0JBQ3BCLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO2dCQUNoQyxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQzthQUMxQjtZQUNELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUMsQ0FBQyxDQUFDO1NBQzNEO0lBQ0gsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUE0QjtRQUN6QyxlQUFlLENBQ1gsSUFBSSxDQUFDLE1BQU0sQ0FBQyxvQkFBb0IsRUFDaEMsSUFBSSxDQUFDLDJCQUEyQixDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxDQUFDLEVBQzFFLElBQUksQ0FBQywyQkFBMkIsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDL0UsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDLENBQUM7SUFDdkQsQ0FBQztJQUVPLDJCQUEyQixDQUFDLElBQVk7UUFDOUMsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLG9CQUFvQixDQUFDLFNBQVMsQ0FBQyxDQUFDLFlBQVksRUFBRSxFQUFFLENBQUMsWUFBWSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQztJQUNsRyxDQUFDO0lBRUQ7O09BRUc7SUFDSyx3QkFBd0I7UUFDOUIsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDaEYsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUMvRSxJQUFJLENBQUMsTUFBTSxDQUFDLG9CQUFvQixHQUFHLENBQUMsR0FBRyxXQUFXLEVBQUUsR0FBRyxTQUFTLENBQUMsQ0FBQztJQUNwRSxDQUFDO0lBRU8saUJBQWlCLENBQUMsZ0JBQTBCO1FBQ2xELElBQUksQ0FBQyxjQUFjLEdBQUcsZ0JBQWdCLENBQUM7SUFDekMsQ0FBQztJQUVPLHdCQUF3QixDQUFDLGVBQWtEO1FBQ2pGLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQyxNQUFNLENBQUMsZUFBZSxDQUFDLENBQUM7SUFDbEUsQ0FBQztJQUVPLHFCQUFxQjtRQUMzQixPQUFPLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsTUFBTSxDQUFDLFNBQVMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUM7YUFDL0UsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7O1lBcEZGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUscUJBQXFCO2dCQUMvQixnakZBQW1EOzthQUVwRDs7O3lCQUtFLEtBQUs7cUJBUUwsS0FBSzttQkFNTCxLQUFLOzZCQU1MLEtBQUs7dUJBT0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlc30gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0NvbHVtbkNvbmZpZywgVGFibGVDb25maWd9IGZyb20gJy4vbW9kZWxzL2NvbmZpZ3VyYXRpb24tdHlwZXMnO1xuaW1wb3J0IHtTb3J0fSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zb3J0JztcbmltcG9ydCB7Q2RrRHJhZ0Ryb3AsIG1vdmVJdGVtSW5BcnJheX0gZnJvbSAnQGFuZ3VsYXIvY2RrL2RyYWctZHJvcCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ29udG8tc2VhcmNoLXJlc3VsdHMnLFxuICB0ZW1wbGF0ZVVybDogJy4vb250by1zZWFyY2gtcmVzdWx0cy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL29udG8tc2VhcmNoLXJlc3VsdHMuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgT250b1NlYXJjaFJlc3VsdHNDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAvKipcbiAgICogVGhlIGRhdGEgc291cmNlIGZvciB0aGUgdGFibGVcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBkYXRhc291cmNlOiBhbnlbXTtcblxuICAvKipcbiAgICogVGFibGUgY29uZmlndXJhdGlvbiwgY29udGFpbmluZyB0YWJsZSBhbmQgY29sdW1uIHNwZWNpZmljIGNvbmZpZ3VyYXRpb25cbiAgICogSWYgY29uZmlndXJhdGlvbiBpcyBjaGFuZ2VkIGR5bmFtaWNhbGx5IGl0IG11c3QgYmUgcGFzc2VkIGFzIG5ldyBvYmplY3QgdG9cbiAgICogYmUgZGV0ZWN0ZWQgYnkgYW5ndWxhciBjaGFuZ2UgZGV0ZWN0aW9uXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgY29uZmlnOiBUYWJsZUNvbmZpZztcblxuICAvKipcbiAgICogVGFibGUgc29ydCBpbmZvcm1hdGlvblxuICAgKi9cbiAgQElucHV0KClcbiAgc29ydDogU29ydDtcblxuICAvKipcbiAgICogU3R5bGluZyBjbGFzcyBhcHBsaWVkIHRvIGRpdiB3cmFwcGVyIG9mIHRoZSB0YWJsZVxuICAgKi9cbiAgQElucHV0KClcbiAgY29tcG9uZW50Q2xhc3M6IHN0cmluZyB8IHN0cmluZ1tdO1xuXG4gIC8qKlxuICAgKiBGaXJlZCB3aGVuZXZlciB0aGVyZSBpcyBjaGFuZ2UgaW4gc29ydGluZyBjb2x1bW4gb3IgZGlyZWN0aW9uLlxuICAgKiBTZW5kcyBhIHtAbGluayBTb3J0fSBvYmplY3RcbiAgICovXG4gIEBPdXRwdXQoKVxuICBzb3J0RGF0YTogRXZlbnRFbWl0dGVyPFNvcnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxTb3J0PigpO1xuICBkaXNwbGF5Q29sdW1uczogc3RyaW5nW107XG5cbiAgcHJpdmF0ZSBpbml0aWFsU29ydCA9IHRydWU7XG5cbiAgcHVibGljIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlcy5jb25maWcgJiYgY2hhbmdlcy5jb25maWcuY3VycmVudFZhbHVlKSB7XG4gICAgICBpZiAodGhpcy5pbml0aWFsU29ydCkge1xuICAgICAgICB0aGlzLnNvcnRDb2x1bW5Db25maWd1cmF0aW9ucygpO1xuICAgICAgICB0aGlzLmluaXRpYWxTb3J0ID0gZmFsc2U7XG4gICAgICB9XG4gICAgICB0aGlzLnNldERpc3BsYXlDb2x1bW5zKFsuLi50aGlzLmdldFZpc2libGVDb2x1bW5OYW1lcygpXSk7XG4gICAgfVxuICB9XG5cbiAgcmVvcmRlckNvbHVtbnMoZXZlbnQ6IENka0RyYWdEcm9wPHN0cmluZ1tdPik6IHZvaWQge1xuICAgIG1vdmVJdGVtSW5BcnJheShcbiAgICAgICAgdGhpcy5jb25maWcuY29sdW1uQ29uZmlndXJhdGlvbnMsXG4gICAgICAgIHRoaXMuZmluZENvbHVtbkNvbmZpZ0luZGV4QnlOYW1lKHRoaXMuZGlzcGxheUNvbHVtbnNbZXZlbnQucHJldmlvdXNJbmRleF0pLFxuICAgICAgICB0aGlzLmZpbmRDb2x1bW5Db25maWdJbmRleEJ5TmFtZSh0aGlzLmRpc3BsYXlDb2x1bW5zW2V2ZW50LmN1cnJlbnRJbmRleF0pKTtcbiAgICB0aGlzLnNldERpc3BsYXlDb2x1bW5zKHRoaXMuZ2V0VmlzaWJsZUNvbHVtbk5hbWVzKCkpO1xuICB9XG5cbiAgcHJpdmF0ZSBmaW5kQ29sdW1uQ29uZmlnSW5kZXhCeU5hbWUobmFtZTogc3RyaW5nKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5jb25maWcuY29sdW1uQ29uZmlndXJhdGlvbnMuZmluZEluZGV4KChjb2x1bW5Db25maWcpID0+IGNvbHVtbkNvbmZpZy5uYW1lID09PSBuYW1lKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBTb3J0cyB0aGUgY29sdW1uIGNvbmZpZ3VyYXRpb25zIGJ5IHBlcm1hbmVudCBjb2x1bW5zIGZpcnN0XG4gICAqL1xuICBwcml2YXRlIHNvcnRDb2x1bW5Db25maWd1cmF0aW9ucygpOiB2b2lkIHtcbiAgICBjb25zdCBwZXJtYW5lbnRDQyA9IHRoaXMuZ2V0RmlsdGVyZWRDb2x1bW5Db25maWdzKChjb2x1bW4pID0+IGNvbHVtbi5wZXJtYW5lbnQpO1xuICAgIGNvbnN0IGR5bmFtaWNDQyA9IHRoaXMuZ2V0RmlsdGVyZWRDb2x1bW5Db25maWdzKChjb2x1bW4pID0+ICFjb2x1bW4ucGVybWFuZW50KTtcbiAgICB0aGlzLmNvbmZpZy5jb2x1bW5Db25maWd1cmF0aW9ucyA9IFsuLi5wZXJtYW5lbnRDQywgLi4uZHluYW1pY0NDXTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0RGlzcGxheUNvbHVtbnMoY29sdW1uTmFtZXNBcnJheTogc3RyaW5nW10pOiB2b2lkIHtcbiAgICB0aGlzLmRpc3BsYXlDb2x1bW5zID0gY29sdW1uTmFtZXNBcnJheTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0RmlsdGVyZWRDb2x1bW5Db25maWdzKGZpbHRlclByZWRpY2F0ZTogKGNvbHVtbjogQ29sdW1uQ29uZmlnKSA9PiBib29sZWFuKTogQ29sdW1uQ29uZmlnW10ge1xuICAgIHJldHVybiB0aGlzLmNvbmZpZy5jb2x1bW5Db25maWd1cmF0aW9ucy5maWx0ZXIoZmlsdGVyUHJlZGljYXRlKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0VmlzaWJsZUNvbHVtbk5hbWVzKCk6IHN0cmluZ1tdIHtcbiAgICByZXR1cm4gdGhpcy5nZXRGaWx0ZXJlZENvbHVtbkNvbmZpZ3MoKGNvbHVtbikgPT4gY29sdW1uLnBlcm1hbmVudCB8fCAhY29sdW1uLmhpZGRlbilcbiAgICAgICAgLm1hcCgoY29sdW1uKSA9PiBjb2x1bW4ubmFtZSk7XG4gIH1cbn1cbiJdfQ==