MediaWiki:OrgActionList.js

var actions = [];
var progressItems = {};
var orgs = {}
var org_name = null

function updateActionView() {
    $('#org_actions').text('')
    var domains = getSelectedOptions('#domains')
    var years = getSelectedOptions('#years')
    var actors = getSelectedOptions('#actors')
    var select_orgs = getSelectedOptions('#orgs')
    console.log(domains)
    console.log(years)
    console.log(select_orgs)
    console.log(actors)

    if(select_orgs.size > 0) {
        $('#intro').hide()
    }
    else {
        $('#intro').show()
    }

    // filter actions based on selections 
    filtered_actions = filterActions(domains, years)
    console.log(filtered_actions)
    // render 
    var column_grouping = 'org' //getSelectedOptions('#col_grouping').values().next().value
    var row_grouping = 'none' // getSelectedOptions('#row_grouping').values().next().value
    console.log(row_grouping)

    console.log(column_grouping)
    // get a set of actors for each selected org
    org_actors = []
    select_orgs.forEach(businessID => {
        businessID = '' + businessID   
        console.log(orgs)
        var org_name = orgs[businessID].name
        var actors = orgs[businessID].responsible_actors.map(re => re.id)
        console.log(org_name)
        console.log(actors)
        org_actors.push({
            'name': org_name,
            'id': businessID,
            'actors': actors
        })
    })
    $('#selected-orgs-row').text('')
    if(org_actors.length > 0) {
        grouped_actions = groupActions(filtered_actions, org_actors)
        renderActionHeader(org_actors)
        renderActions(grouped_actions, org_actors)
        document.querySelectorAll('.rowgroup-header').forEach(function(e) {        
            scrollObserver.observe(e)
        });    
    }
}

function renderActionHeader(org_actors) {    
    org_actors.forEach(org_actor => {
        var col = $('<div>', {class:'col'}).html('<h1>' + org_actor.name + '</h1>')
        $('#selected-orgs-row').append(col)
    })   
}

function renderActions(actions, org_actors)  {
    for(var year = 2020; year < 2026; year++)  {
        if((''+year in actions)) {
            
            var group = actions[year]
            var year_container = $('<div>', {id: 'year' + year, class: 'year-container'})
            var year_header_container = $('<div>', {class: 'sticky-top', style:'z-index: 5; background-color: white'})

            var year_header = $('<div>', {id: 'year'+ year+'-header', class: 'year-header '}).html('<h1 class="year">'+year+'</h1>')
            year_container.append(year_header_container)
            year_header_container.append(year_header)
    
            $('#nav-item-year' + year).show()
            var colContainer = $('<div>', {class:'container-fluid'})
            var colRow = $('<div>', {class: 'row'})
            
            org_actors.forEach(org_actor => {
                var colTitle = org_actor.name
                var colCol = $('<div>', {class: 'col'})
                if(Array.isArray(group[colTitle])) {
                    //var colgroup_header = $('<div>', {class: 'colgroup-header'}).html('<h2>'+colTitle+'</h2>')
                    //colCol.append(colgroup_header)
                    group[colTitle].forEach(obj => {
                        action_card = renderAction(obj)
                        colCol.append(action_card)                
                    })    
                }
                colRow.append(colCol)

            })
            
            colContainer.append(colRow)
            year_container.append(colContainer)

        }
        else {
            $('#year' + year).hide()
        }
        $('#org_actions').append(year_container)
    }
}

function groupActions(actions, org_actors) {
    // group first by year
    groups = group_actions_by_year(actions)
    // then by org
    groups = group_by_org(groups, org_actors)
    return groups
}

function group_by_org(groups, org_actors) {   
    console.log(org_actors) 
    Object.keys(groups).forEach(function(key) {
        var data = groups[key]
        const parents = data.reduce((parents, item) => {
            org_actors.forEach(org_actor => {
                var value = org_actor.name
                var candidates = item['action_responsible_actor'].map(ra => ra.fulltext)
                console.log(candidates)
                
                var common_values = intersection(new Set(candidates), new Set(org_actor.actors))
                console.log(common_values)
                console.log(common_values.size)
                if(common_values.size  > 0) {
                    const c = parents[value] || []
                    console.log(c)
                    if(c.indexOf(item) < 0) {
                        
                        c.push(item)
                        console.log(c)
                    }
                    console.log(value)
                    parents[value] = c
                    
                }
            })
            return parents               

        }, {});
        groups[key] = parents
    })
    return groups
}

function filterActions(domains, years) {
    // years
    var result = actions.filter(action => {        
        return years.has(getActionYear(action))
    })
    // domains
    result = result.filter(action => {
        return domains.has(action.action_domain)
    })
    return result
}