MediaWiki:ProgressList.js

function updateActionView() {
    $('#progress_list').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()
        $('#progress_list').show()
    }
    else {
        $('#intro').show()
        $('#progress_list').hide()
    }

    // filter actions based on selections 
    var filtered_actions = filterActions(domains, years, select_orgs)
    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)

    var grouped_actions = groupActions(filtered_actions)
    renderActions(grouped_actions)
    document.querySelectorAll('.rowgroup-header').forEach(function(e) {        
        scrollObserver.observe(e)
    });
}

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: #00426b'})

            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 header_count = $('<span>', {class: 'action_count'}).text(group.length + ' edistysaskelta')
            year_header.append(header_count)
            group.forEach(obj => {
                action_card = renderProgress(obj)
                year_container.append(action_card)                
            })                           

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

function renderProgress(obj) {
    var action_card = $('<div>', {class: 'card mb-4 ' + class_map[obj.action_field]})
    var action_header = $('<div>', {class: 'card-header', style:'color: #ffffff;  background-color:' + color_map[obj.action_field]}).html(obj.action_field + ' - ' + obj['section_type_name'] + '  ' + obj.section_ordinal + '<a style="color:white" data-toggle="collapse" href="#collapse' + obj.action_id +'"><i  class="bi bi-chevron-down float-right"></i></a>')
    var action_body = $('<div>', {class: 'card-body'})
    var action_section = $('<div>', {class:'collapse', id: 'collapse' + obj.action_id }).html(
        '<h5 style="margin-top: 1em">'+ obj.section_name + '<i title="Avaa linjausteksti" style="margin-left: 1em;" class="bi bi-box-arrow-up-right"></i></a></h5><p> ' + obj.section_desc + '</p>'
    )
    var action_title = $('<h5>', {class: 'card-title'}).text(obj.name)
    var action_org = $('<h6>', {class: 'card-text'}).text(obj.org)
    var action_text = $('<p>', {class: 'card-text'}).text(obj.desc)
    var d = new Date(obj.date)
    var action_date = $('<span>', {class: 'float-right'}).text(d.toLocaleDateString('fi-FI'))
    console.log(action_date)
    action_card.append(action_header)
    
    action_card.append(action_body)
    
    action_header.append(action_section)
    action_body.append(action_date)
    action_body.append(action_title)
    action_body.append(action_org)
    action_body.append(action_text)

    return action_card
}

function groupActions(actions, org_actors) {
    // group first by year
    groups = group_actions_by_year(actions)
    console.log(groups)
    return groups

}

function group_actions_by_year(actions) {    
    return actions.reduce((groups, item) => {
        year = getProgressYear(item)
        const group = (groups[year] || []);
        group.push(item);
        groups[year] = group;
        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, selected_orgs) {
    // actors      
    var result = progressItemList.filter(action => {
        return intersection(
            new Set(action.businessID), 
            selected_orgs).size > 0
    })
    // years
    result = result.filter(action => {        
        return years.has(getProgressYear(action))
    })
    // domains
    result = result.filter(action => {
        return domains.has(action.action_domain)
    })
    return result
}