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

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

import { Component, Initialization, ComponentOptions, HtmlTemplate, QueryUtils, l, get } from 'coveo-search-ui';
import { UserProfileModel } from '../../models/UserProfileModel';
import { ExpandableList } from './ExpandableList';
import { UserActionType } from '../../rest/UserProfilingEndpoint';
import { duplicate } from '../../utils/icons';
import './Strings';
/**
 * Display the list of the most recent clicked documents of a user.
 */
export class ClickedDocumentList extends Component {
    /**
     * Create an instance of **ClickedDocumentList**. 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, ClickedDocumentList.ID, bindings);
        this.element = element;
        this.options = options;
        this.bindings = bindings;
        this.options = ComponentOptions.initComponentOptions(element, ClickedDocumentList, options);
        if (!this.options.userId) {
            this.disable();
            return;
        }
        this.userProfileModel = get(this.root, UserProfileModel);
        this.userProfileModel.getActions(this.options.userId).then((actions) => {
            this.sortedDocumentsList = actions
                .filter((action) => action.document && action.type === UserActionType.Click)
                .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
                .reverse()
                .reduce(this.filterDuplicatesClickAction, [])
                .map((action) => {
                action.document.searchInterface = this.searchInterface;
                return action;
            });
            this.render();
        }, this.logger.error.bind(this.logger));
    }
    filterDuplicatesClickAction(accumulator, action) {
        return !accumulator.find((existing) => existing.raw.uri_hash === action.raw.uri_hash) ? [...accumulator, action] : accumulator;
    }
    render() {
        new ExpandableList(this.element, this.sortedDocumentsList, {
            maximumItemsShown: this.sortedDocumentsList.length,
            minimumItemsShown: this.options.numberOfItems,
            transform: (action) => {
                QueryUtils.setStateObjectOnQueryResult(this.queryStateModel.get(), action.document);
                QueryUtils.setSearchInterfaceObjectOnQueryResult(this.searchInterface, action.document);
                return this.options.template.instantiateToElement(action.document, {
                    wrapInDiv: true,
                    checkCondition: true,
                    currentLayout: 'list',
                    responsiveComponents: this.searchInterface.responsiveComponents,
                }).then((element) => {
                    Initialization.automaticallyCreateComponentsInsideResult(element, action.document);
                    if (action.raw.origin_level_1) {
                        this.addTooltipElement(element, action);
                    }
                    return element;
                });
            },
            listLabel: this.options.listLabel,
            messageWhenEmpty: l(`${ClickedDocumentList.ID}_no_clicked_documents`),
            showMoreMessage: l(`${ClickedDocumentList.ID}_more`),
            showLessMessage: l(`${ClickedDocumentList.ID}_less`),
        });
    }
    addTooltipElement(element, action) {
        const insertBeforeElement = element.querySelector('.CoveoResultLink');
        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.
 */
ClickedDocumentList.ID = 'ClickedDocumentList';
/**
 * Default initialization options of the **ClickedDocumentList** class.
 */
ClickedDocumentList.options = {
    numberOfItems: ComponentOptions.buildNumberOption({
        defaultValue: 3,
        min: 1,
    }),
    listLabel: ComponentOptions.buildStringOption({
        defaultValue: 'Most Recent Clicked Documents',
    }),
    userId: ComponentOptions.buildStringOption({ required: true }),
    template: ComponentOptions.buildTemplateOption({
        defaultValue: HtmlTemplate.fromString(`<div class="coveo-list-row">
                    <div class="coveo-row-icon">${duplicate}</div>
                    <a class="CoveoResultLink"/a>
                </div>`, {
            layout: 'list',
        }),
    }),
};
Initialization.registerAutoCreateComponent(ClickedDocumentList);
//# sourceMappingURL=ClickedDocumentList.js.map