P42_UI/app/views/projects/icmp/ProjectFundingPODashboardView.js

/**
 */

class ProjectFundingPODashboardView extends EICDomContent {
    
    DOMContentLoaded(options) {
        this.components = ui.eicfy(this.el);
        
        for(let model in options.models) this[model] = options.models[model];

        this.list = new DataGrid(this.find('.projects-list'), {
            height: '39vh',
            headers: [
                {label: 'number', filter: 'text', sortable: true},
                {label: 'Acronym', filter: 'text', sortable: true},
                {label: 'Organisation', filter: 'text', sortable: true},
                {label: 'Type', filter: 'list', sortable: true},
                {label: 'Status', filter: 'list', sortable: true},
                {label: 'Referrer', type: 'markup', filter: 'text', sortable: false},
                {label: 'Last update', type: 'date', filter: 'text', sortable: true},
            ]
        });
        this.list.onRowClick = this.onProjectSelect.bind(this);

        this.nav = new NodeMap(this.find('[eicnodemap]'), {
            "orientation": "linear",
            "resizable": true,
            "allowDrag": true,
            "entity": {
                "width": 160,
                "height": 80,
                "gap": 60
            }
        });
        this.nav.click = this.onNavChange.bind(this);

        app.events.channel.addEventListener('project_node_updated', this.onProjectUpdated.bind(this))
        app.Assets.loadJson({name:'workflows/wf-projects-funding.json'})
        .then(this.setupWorflow.bind(this));
        
        this.list.loading = true;

        this.projects.get('techdd')
        .then(this.refreshProjects.bind(this));
    }

    setupWorflow(data) { this.nav.data = data; }

    refreshProjects(data) {
        this.list.loading = false;
        this.list.clear();

        this.todos = [];

        let metrics = {
            draft: 0,
            approval: 0,
            rejected: 0
        }

        let phases = {}
        
        for(let item of data) {
            for(let phase of item.phases) {
                let id = JSON.stringify({
                    number: item.project.number,
                    node: phase.type,
                    nodeId: phase.id
                })

                let status = '';
                let label = app.meta.getItem('icmp-techdd-status', phase.statusHistory[0].value).label;
                let severity = '';
                let version = 'Regular'

                switch(phase.version) {
                    case 'techdd-report-v1-enhanced':
                        version = 'Enhanced'
                        break;
                    case 'techdd-report-v1-full':
                        version = 'Full'
                        break;
                }
                
                switch(phase.statusHistory[0].value) {
                    case 'created':
                    case 'updated':
                        status = 'draft';
                        severity = 'info'
                        break;
                    case 'submitted':
                    case 'submitting':
                        status = 'approval';
                        severity = 'accent'
                        break;
                    default:
                        status = phase.statusHistory[0].value;
                        severity = 'danger'
                }

                let contributors = [];
                for(let contributor of item.project.contributors) {
                    let fullname = contributor.information.name.firstName + ' ' + contributor.information.name.lastName;
                    let component = new UserIcon(null, {uuid: contributor.euLoginId, fullname: fullname, showStatus: true})
                    contributors.push(`<span style="font-size:0">${fullname}</span>` + component.el.outerHTML)
                }

                let row = this.list.addRow(id, [
                    item.project.number,
                    item.project.acronym,
                    item.organisation.name,
                    version,
                    `<span eicchip small ${severity}>${label}</span>`,
                    contributors.join(''),
                    phase.statusHistory[0].dateTime
                ])

                if(item.project.contributor) {
                    row.setAttribute('accent', '')
                }

                phases[phase.type] = phases[phase.type] ? phases[phase.type] + 1: 1;

                metrics[status]++; 
            }
        }

        if(metrics.approval > 0) {
            this.todos.push({ 
                scope: 'projects', 
                message: `${metrics.approval} report${metrics.approval > 1 ? 's':''} requesting review` 
            })
        }  
        if(metrics.draft > 0) {
            this.todos.push({ 
                scope: 'projects', 
                message: `${metrics.draft} report${metrics.draft > 1 ? 's':''} being drafted` 
            })
        }  
        if(metrics.rejected > 0) {
            this.todos.push({ 
                scope: 'projects', 
                message: `${metrics.rejected} project${metrics.rejected > 1 ? 's':''} requesting reopening` 
            })
        }    

        this.refreshMetrics(phases);
        this.refreshTodos();
    }

    refreshMetrics(data) {
        for(let id in data) {
            let node = this.nav.entities.find(o => o.id == id)
            node.badge = data[id];
        }
    }

    refreshTodos() {
        let activities = this.find('.activities ul')
        activities.innerHTML = '';
        if(this.todos.length > 0) {
            ui.show(activities);
            for(let activity of this.todos) {
                activities.append(ui.create(`<li>${activity.message}</li>`))
            }
        } else {
            ui.hide(activities);
        }
    }

    onNavChange(node) {
        switch(node.id) {
            case 'techdd':
                break;
            default: 
                ui.growl.append('You don\'t have access to this resource', 'danger', 900)
        }
    }

    onProjectSelect(row) {
        let id = JSON.parse(row.dataset.id)
        app.Router.route(`/icmp/projects/${id.number}/${id.node}/${id.nodeId}`, { });
    }

    onProjectUpdated() {
        this.projects.get('techdd')
        .then(this.refreshProjects.bind(this));
    } 
}

app.registerClass('ProjectFundingPODashboardView',ProjectFundingPODashboardView);