wikimedia/mediawiki-extensions-Translate

'use strict';

/**
 * @class
 * @extends OO.ui.TextInputWidget
 * @mixes OO.ui.mixin.LookupElement
 *
 * @author Abijeet Patro
 * @license GPL-2.0-or-later
 * @since 2022.02
 * @constructor
 * @param {Object} [config] Configuration options
 * @param {Function} [config.onFail] Callback function triggered when an error occurs
 * @param {Function} [config.onSelect] Callback function triggered when an item is selected
 * @param {Array} [config.entityType] Entity type to query for - "groups" and/or "messages"
 * @param {Function} [config.filterResults] Callback function to filter the results returned from the API
 * @stable for use inside gadgets and extensions
 */
var EntitySelectorWidget = function ( config ) {
    // Parent constructor
    OO.ui.TextInputWidget.call( this, {
        classes: [ 'tes-entity-selector' ],
        placeholder: mw.msg( 'translate-tes-type-to-search' ),
        autocomplete: config.autocomplete || false
    } );
    // Mixin constructors
    OO.ui.mixin.LookupElement.call( this, {
        allowSuggestionsWhenEmpty: config.allowSuggestionsWhenEmpty || false
    } );

    this.entityNotFound = new OO.ui.MenuOptionWidget( {
        label: mw.msg( 'translate-tes-entity-not-found' ),
        disabled: true,
        highlightable: false,
        pressable: false,
        icon: 'info',
        classes: [ 'tes-optgroup-label' ]
    } );

    this.messageLabel = new OO.ui.MenuOptionWidget( {
        label: mw.msg( 'translate-tes-optgroup-message' ),
        disabled: true,
        highlightable: false,
        pressable: false,
        classes: [ 'tes-optgroup-label' ]
    } );

    this.groupLabel = new OO.ui.MenuOptionWidget( {
        label: mw.msg( 'translate-tes-optgroup-group' ),
        disabled: true,
        highlightable: false,
        pressable: false,
        classes: [ 'tes-optgroup-label' ]
    } );

    this.errorLabel = new OO.ui.MenuOptionWidget( {
        disabled: true,
        highlightable: false,
        pressable: false,
        icon: 'error',
        classes: [ 'tes-error-label' ]
    } );

    var validGroupTypes = [ 'aggregate-groups', 'translatable-pages', 'message-bundles' ];
    var noop = function () {};
    this.allowSuggestionsWhenEmpty = config.allowSuggestionsWhenEmpty || false;
    this.failureCallback = config.onFail || noop;
    this.selectCallback = config.onSelect || noop;
    this.filterResults = config.filterResults || null;
    this.entityTypeToFetch = config.entityType;
    this.groupTypesToFetch = config.groupTypes;
    this.inputId = config.inputId || null;
    this.limit = config.limit || 10;

    if ( this.entityTypeToFetch && !Array.isArray( this.entityTypeToFetch ) ) {
        throw new Error( 'entityType must be an array.' );
    }

    if ( this.groupTypesToFetch ) {
        for ( var i = 0; i < this.groupTypesToFetch.length; i++ ) {
            if ( validGroupTypes.indexOf( this.groupTypesToFetch[ i ] ) === -1 ) {
                throw new Error(
                    this.groupTypesToFetch[ i ] +
                    ' is invalid. Allowed types: ' + validGroupTypes );
            }
        }
    }

    this.selectedEntity = null;
    if ( this.inputId ) {
        this.$input.attr( 'id', this.inputId );
    }
};

OO.inheritClass( EntitySelectorWidget, OO.ui.TextInputWidget );
OO.mixinClass( EntitySelectorWidget, OO.ui.mixin.LookupElement );

EntitySelectorWidget.prototype.getLookupRequest = function () {
    var value = this.getValue();
    var widget = this;

    if ( !this.allowSuggestionsWhenEmpty && value === '' ) {
        return $.Deferred().resolve( [] );
    }

    // Detect if there is an existing  request pending
    // and abort it if it is.
    if ( this.isPending() ) {
        this.abortLookupRequest();
    }

    var deferred = $.Deferred();
    var currentRequestTimeout = setTimeout(
        function () {
            currentRequestTimeout = null;
            var api = new mw.Api();
            api.get( {
                action: 'translationentitysearch',
                query: value,
                entitytype: widget.entityTypeToFetch,
                grouptypes: widget.groupTypesToFetch,
                limit: widget.limit
            } ).then( function ( result ) {
                var response = result.translationentitysearch;
                if ( widget.filterResults ) {
                    response = widget.filterResults( result.translationentitysearch );
                }
                deferred.resolve( response );
            }, function ( msg, error ) {
                mw.log.error( error );
                widget.failureCallback( error, mw.msg( 'translate-tes-server-error' ) );
                deferred.resolve( error );
            } );
        },
        250
    );

    deferred.abort = function () {
        clearTimeout( currentRequestTimeout );
        currentRequestTimeout = null;
        // Stop showing the loader
        widget.popPending();
    };

    return deferred;
};

EntitySelectorWidget.prototype.getLookupMenuOptionsFromData = function ( response ) {
    var groups = response.groups || [];
    var messages = response.messages || [];
    var finalResult = [];
    var i = 0;

    if ( response && response.error ) {
        this.errorLabel.setLabel( mw.msg( 'translate-tes-server-error' ) );
        finalResult.push( this.errorLabel );
        return finalResult;
    }

    if ( groups.length ) {
        // Only add the label if both entities: groups and messages are to be fetched
        if ( this.entityTypeToFetch.length !== 1 ) {
            finalResult.push( this.groupLabel );
        }

        for ( ; i < groups.length; ++i ) {
            finalResult.push(
                new OO.ui.MenuOptionWidget( {
                    data: {
                        type: 'group',
                        data: groups[ i ].group
                    },
                    label: groups[ i ].label
                } )
            );
        }
    }
    if ( messages.length ) {
        // Only add the label if both entities: groups and messages are to be fetched
        if ( this.entityTypeToFetch.length !== 1 ) {
            finalResult.push( this.messageLabel );
        }

        for ( i = 0; i < messages.length; ++i ) {
            var messageOption = new OO.ui.MenuOptionWidget( {
                data: {
                    type: 'message',
                    data: messages[ i ].pattern
                },
                label: messages[ i ].pattern
            } );
            if ( messages[ i ].count > 1 ) {
                messageOption.$element.append(
                    $( '<span>' )
                        .text( mw.msg( 'translate-tes-message-prefix', messages[ i ].count ) )
                        .addClass( 'tes-message-subtext' )
                );
            }
            finalResult.push( messageOption );
        }
    }

    if ( !finalResult.length ) {
        finalResult.push( this.entityNotFound );
    }

    return finalResult;
};

EntitySelectorWidget.prototype.getLookupCacheDataFromResponse = function ( response ) {
    return response || [];
};

/**
 * Override the LookupElement method to use the label as selected value instead
 * of data.
 *
 * @param {OO.ui.MenuOptionWidget} item
 */
EntitySelectorWidget.prototype.onLookupMenuChoose = function ( item ) {
    this.selectedEntity = item;
    this.setValue( item.getLabel() );
    this.selectCallback( item.getData() );
};

EntitySelectorWidget.prototype.getSelectedEntity = function () {
    return this.selectedEntity.getData();
};

module.exports = EntitySelectorWidget;