coveo-search-ui-extensions/bin/es6/components/UserActions/QueryList.js

Small generic components to extend the functionality of Coveo's Search UI framework.

import { Component, Initialization, ComponentOptions, get, Omnibox, l } from 'coveo-search-ui';
import { UserProfileModel } from '../../models/UserProfileModel';
import { ExpandableList } from './ExpandableList';
import { search } from '../../utils/icons';
import './Strings';
import { UserActionEvents } from './Events';
const DEFAULT_TRANSFORMATION = () => (query) => {
    const container = document.createElement('div');
    container.classList.add('coveo-list-row');
    const icon = document.createElement('div');
    icon.classList.add('coveo-row-icon');
    icon.innerHTML = search;
    const link = document.createElement('a');
    link.classList.add('coveo-link');
    link.innerText = query;
    link.title = query;
    container.appendChild(icon);
    container.appendChild(link);
    return Promise.resolve(container);
};
/**
 * Display the list of the most recent queries of a user.
 */
export class QueryList extends Component {
    /**
     * Create an instance of **QueryList**. Initialize is needed the **UserProfileModel** and fetch user actions related to the **UserId**.
     *
     * @param element Element on which to bind the component.
     * @param options Initialization options of the component.
     * @param bindings Bindings of the Search-UI environment.
     */
    constructor(element, options, bindings) {
        super(element, QueryList.ID, bindings);
        this.element = element;
        this.options = options;
        this.bindings = bindings;
        this.options = ComponentOptions.initComponentOptions(element, QueryList, options);
        if (!this.options.userId) {
            this.disable();
            return;
        }
        this.userProfileModel = get(this.root, UserProfileModel);
        this.userProfileModel.getActions(this.options.userId).then((actions) => {
            this.sortedQueryList = [...actions]
                .filter((action) => action.query)
                .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
                .reverse()
                .reduce(this.filterDuplicateQueries, []);
            this.render();
        }, this.logger.error.bind(this.logger));
    }
    filterDuplicateQueries(accumulator, action) {
        return !accumulator.find((existing) => existing.query === action.query) ? [...accumulator, action] : accumulator;
    }
    render() {
        new ExpandableList(this.element, this.sortedQueryList, {
            maximumItemsShown: this.sortedQueryList.length,
            minimumItemsShown: this.options.numberOfItems,
            transform: (action) => this.options.transform(action.query).then((element) => {
                if (action.raw.origin_level_1) {
                    this.addTooltipElement(element, action);
                }
                return this.makeClickable(action.query, element);
            }),
            listLabel: this.options.listLabel,
            messageWhenEmpty: l(`${QueryList.ID}_no_queries`),
            showMoreMessage: l(`${QueryList.ID}_more`),
            showLessMessage: l(`${QueryList.ID}_less`),
        });
    }
    /**
     * Make a list item element generate a query when click if an omnibox is present.
     * @param query The query to generate.
     * @param listItem  The list item element.
     */
    makeClickable(query, listItem) {
        const omniboxElement = this.root.querySelector('.CoveoOmnibox');
        if (omniboxElement != null) {
            listItem.addEventListener('click', () => {
                get(omniboxElement, Omnibox, true).setText(query);
                this.usageAnalytics.logSearchEvent(UserActionEvents.submit, {});
                this.queryController.executeQuery();
            });
            listItem.style.cursor = 'pointer';
        }
        return listItem;
    }
    addTooltipElement(element, action) {
        const insertBeforeElement = element.querySelector('.coveo-link');
        if (insertBeforeElement) {
            const tooltip = document.createElement('div');
            tooltip.classList.add('coveo-tooltip-origin1');
            tooltip.innerText = action.raw.origin_level_1;
            const parentNode = insertBeforeElement.parentNode;
            parentNode.insertBefore(tooltip, insertBeforeElement);
        }
    }
}
/**
 * Identifier of the Search-UI component.
 */
QueryList.ID = 'QueryList';
/**
 * Default initialization options of the **QueryList** class.
 */
QueryList.options = {
    numberOfItems: ComponentOptions.buildNumberOption({
        defaultValue: 3,
        min: 1,
        required: true,
    }),
    listLabel: ComponentOptions.buildStringOption({
        defaultValue: 'Most Recent Queries',
    }),
    transform: ComponentOptions.buildCustomOption(DEFAULT_TRANSFORMATION, {
        defaultValue: DEFAULT_TRANSFORMATION(),
    }),
    userId: ComponentOptions.buildStringOption({ required: true }),
};
Initialization.registerAutoCreateComponent(QueryList);
//# sourceMappingURL=QueryList.js.map