coveo-search-ui-extensions/bin/es6/components/AttachResult/AttachResult.js

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

import { Component, ComponentOptions, $$, Initialization, analyticsActionCauseList, l, } from 'coveo-search-ui';
import { paperclipIcon, wait } from '../../utils/icons';
import { AttachResultEvents } from './Events';
import './Strings';
/**
 * The AttachResult component allows a user to link a search result to something else in their external
 * system, for instance a case, incident, request, etc.
 */
export class AttachResult extends Component {
    constructor(element, options, bindings, queryResult) {
        super(element, AttachResult.ID, bindings);
        this.element = element;
        this.options = options;
        this.bindings = bindings;
        this.queryResult = queryResult;
        this.options = ComponentOptions.initComponentOptions(element, AttachResult, options);
        this.queryResult = this.queryResult || this.resolveResult();
        this.initialize();
        this.bind.on(this.element, 'click', this.toggleAttached);
    }
    /**
     * Gets whether or not the result is currently attached.
     */
    isAttached() {
        return !!this.attached;
    }
    /**
     * Attach the query result.
     */
    attach() {
        if (this.attached || this.loading) {
            return Promise.resolve();
        }
        this.setLoading(true);
        return this.options
            .attach(this.queryResult)
            .then(() => {
            this.attached = true;
            this.usageAnalytics.logClickEvent(analyticsActionCauseList.caseAttach, {}, this.queryResult, this.element);
            this.logAnalyticsCaseEvent(analyticsActionCauseList.caseAttach);
            Coveo.$$(this.root).trigger(AttachResultEvents.Attach, { queryResult: this.queryResult });
        })
            .finally(() => {
            this.setLoading(false);
        });
    }
    /**
     * Detach the query result.
     */
    detach() {
        if (!this.attached && !this.loading) {
            return Promise.resolve();
        }
        this.setLoading(true);
        return this.options
            .detach(this.queryResult)
            .then(() => {
            this.attached = false;
            this.logAnalyticsCaseEvent(analyticsActionCauseList.caseDetach);
            Coveo.$$(this.root).trigger(AttachResultEvents.Detach, { queryResult: this.queryResult });
        })
            .finally(() => {
            this.setLoading(false);
        });
    }
    /** Toggle the state of the component. If the current result is not attached, attach it, if not, detach it. */
    toggleAttached() {
        this.attached ? this.detach() : this.attach();
    }
    initialize() {
        this.buttonElement = $$('div').el;
        this.element.appendChild(this.buttonElement);
        this.tooltipElement = $$('div', {
            className: 'coveo-caption-for-icon',
        }).el;
        this.element.appendChild(this.tooltipElement);
        this.updateInitialAttachedState();
    }
    updateInitialAttachedState() {
        this.attached = false;
        this.render();
        // Resolve the current result for the component and the initial state.
        if (this.options.isAttached) {
            this.setLoading(true);
            this.options
                .isAttached(this.queryResult)
                .then((attached) => {
                this.attached = attached;
            })
                .catch((error) => {
                this.logger.error('Error retrieving initial result attached state.', error);
            })
                .finally(() => {
                this.setLoading(false);
            });
        }
    }
    /** Set the loading property and updates the component UI. */
    setLoading(loading) {
        this.loading = loading;
        this.render();
    }
    logAnalyticsCaseEvent(cause) {
        let customData = {
            resultUriHash: this.queryResult.raw.urihash,
            author: this.queryResult.raw.author,
            articleID: this.queryResult.raw[this.options.articleIdField],
            caseID: this.options.caseId,
        };
        this.usageAnalytics.logCustomEvent(cause, customData, this.element, this.queryResult);
    }
    render() {
        $$(this.buttonElement).removeClass('coveo-icon-attached');
        $$(this.buttonElement).removeClass('coveo-icon-attach');
        $$(this.buttonElement).removeClass('coveo-icon-loading');
        if (this.loading) {
            $$(this.buttonElement).addClass('coveo-icon-loading');
            this.buttonElement.innerHTML = wait;
        }
        else {
            this.buttonElement.innerHTML = paperclipIcon;
            if (this.attached) {
                $$(this.buttonElement).addClass('coveo-icon-attached');
                $$(this.tooltipElement).text(this.options.detachCaption);
            }
            else {
                $$(this.buttonElement).addClass('coveo-icon-attach');
                $$(this.tooltipElement).text(this.options.attachCaption);
            }
        }
    }
}
AttachResult.ID = 'AttachResult';
AttachResult.options = {
    attachCaption: ComponentOptions.buildStringOption({
        defaultValue: l(`${AttachResult.ID}_Attach`),
    }),
    detachCaption: ComponentOptions.buildStringOption({
        defaultValue: l(`${AttachResult.ID}_Detach`),
    }),
    articleIdField: ComponentOptions.buildStringOption({
        defaultValue: 'permanentid',
    }),
    caseId: ComponentOptions.buildStringOption(),
    attach: ComponentOptions.buildCustomOption((name) => (result) => new Promise((resolve, reject) => {
        console.log('attached ', result);
        resolve();
    }), {
        defaultFunction: () => (result) => new Promise((resolve, reject) => {
            console.log('attached ', result);
            resolve();
        }),
    }),
    detach: ComponentOptions.buildCustomOption((name) => (result) => new Promise((resolve, reject) => {
        console.log('detached ', result);
        resolve();
    }), {
        defaultFunction: () => (result) => new Promise((resolve, reject) => {
            console.log('detached ', result);
            resolve();
        }),
    }),
};
Initialization.registerComponentFields(AttachResult.ID, ['urihash']);
Initialization.registerAutoCreateComponent(AttachResult);
//# sourceMappingURL=AttachResult.js.map