select-actions.js

import {bindActionCreators} from 'redux';
import ReduxConnectVue from 'redux-connect-vue';
import {select} from 'd3-selection';
import {createStructuredSelector} from 'reselect';

import {createApp} from 'vue';

import config from 'ui/config.js';

import {drawTimeSpanControls} from './time-span-controls';

import DownloadDataApp from './DownloadDataApp.vue';
import TimeSpanControlsApp from './TimeSpanControlsApp.vue';
/*
 * Helper function to render a select action button on listContainer
 */
const appendButton = function(listContainer, {uswdsIcon, buttonLabel, idOfDivToControl}) {
    const button = listContainer.append('li')
        .attr('class', 'usa-button-group__item')
        .append('button')
            .attr('class', 'usa-button')
            .attr('aria-expanded', false)
            .attr('aria-controls', idOfDivToControl)
            .attr('ga-on', 'click')
            .attr('ga-event-category', 'select-action')
            .attr('ga-event-action', `${idOfDivToControl}-toggle`)
            .on('click', function() {
                const thisButton = select(this);
                const wasSelected = thisButton.attr('aria-expanded') === 'true';

                // If this button was not selected, we need to unselect the button (if any)
                if (!wasSelected) {
                    const selectedButton = listContainer.select('.selected-action');
                    selectedButton.dispatch('click');
                }

                const actionContainer = select(`#${idOfDivToControl}`);
                thisButton
                    .classed('selected-action', !wasSelected)
                    .attr('aria-expanded', !wasSelected);

                actionContainer.attr('hidden', wasSelected ? true : null);

            });

    if (uswdsIcon) {
        button.append('svg')
            .attr('class', 'usa-icon')
            .attr('aria-hidden', 'true')
            .attr('role', 'img')
            .html(`<use xlink:href="${config.STATIC_URL}img/sprite.svg#${uswdsIcon}"></use>`);
    }
    button.append('span').html(buttonLabel);
    return button;
};

/*
 * Render the select action element on container. The store and siteno are needed to render the action forms within
 * the select action element.
 * @param {D3 selection} container
 * @param {Redux store} store
 * @param {String} siteno
 */
export const drawSelectActions = function(container, store, siteno, agencyCode) {
    const addDownloadContainer = function() {
        const downloadDataApp = createApp(DownloadDataApp, {});
        downloadDataApp.use(ReduxConnectVue, {
            store,
            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
            mapStateToPropsFactory: createStructuredSelector
        });
        downloadDataApp.provide('store', store);
        downloadDataApp.provide('siteno', siteno);
        downloadDataApp.provide('agencyCd', agencyCode);
        downloadDataApp.provide('buttonSetName', 'select-actions-set');
        downloadDataApp.mount('#download-graph-data-container-select-actions');
    };

    const addTimeSpanControlsContainer = function() {
        const timeSpanControlsApp = createApp(TimeSpanControlsApp, {});
        timeSpanControlsApp.use(ReduxConnectVue, {
            store,
            mapStateToPropsFactory: createStructuredSelector
        });

        timeSpanControlsApp.mount('#change-time-span-container');
    };




    const listContainer = container.append('ul')
        .attr('class', 'select-actions-button-group usa-button-group');
    if (config.ivPeriodOfRecord || config.gwPeriodOfRecord) {
        appendButton(listContainer, {
            buttonLabel: 'Change time span',
            idOfDivToControl: 'change-time-span-container'
        });
        container.append('div')
            .attr('id', 'change-time-span-container')
            .call(addTimeSpanControlsContainer);
            // .attr('hidden', true)
            // .call(drawTimeSpanControls, store, siteno, agencyCode);
    }

    appendButton(listContainer, {
        uswdsIcon: 'file_download',
        buttonLabel: 'Retrieve data',
        idOfDivToControl: 'download-graph-data-container-select-actions'
    });

    container.append('div')
        .attr('id', 'download-graph-data-container-select-actions')
        .attr('class', 'download-graph-data-container')
        .attr('hidden', true)
        .call(addDownloadContainer);
};