P42_UI/app/views/projects/soe/SoeFeedbacksView.js

class SoeFeedbacksView extends EICDomContent {

    DOMContentLoaded(options) {

        this.pic = options.pic;
        this.number = options.number;

        this.components = ui.eicfy(this.el);
        
        for(let model in options.models) this[model] = options.models[model];

        this.pic = options.pic
        this.number = options.number

        let btAdd = this.components.find(o => o.el.classList.contains('add'));
        if(this.soe.hasPrivilege('create')) {
            btAdd.click = this.onAddFeedback.bind(this);
        } else {
            btAdd.disabled = true;
        }

        this.soe.fundings(this.pic, this.number).then(this.onFundingsUpdate.bind(this));
    }

    onFundingsUpdate(payload) {
        let totalItems = 0;
        let totalFundings = 0;

        this.find('.soe-project > header h1').innerHTML = payload.proposal.acronym;
        this.find('.soe-project section .number').innerHTML = payload.proposal.number;
        this.find('.soe-project section .company').innerHTML = payload.company.name;
        this.find('.soe-project section .pic').innerHTML = payload.company.pic;
        this.find('.soe-project section .country').innerHTML = payload.company.country;
        this.find('.soe-project section .abstract').innerHTML = payload.proposal.abstract;

        let list = this.find('.soe-project .list')
        list.innerHTML = '';

        for(let funding of payload.fundings) {
            let li = ui.create(`<article eiccard primary>
                        <header>
                            <div class="cols-2 right">
                                <div>
                                    <h1>Source(s): ${funding.fundingSource.map(item => app.meta.getItem( 'soe-fundings', item).label).join(' + ')}</h1>
                                    <h2>Date: ${ui.format.date(funding.cutoffDate)}</h2>
                                </div>
                                <div eicdropdown>
                                    <button eicbutton rounded basic icon="icon-more" small></button>
                                    <menu eicmenu></menu>
                                </div>
                            </div>
                        </header>
                        <section>
                            ${funding.fundingAmount ? '<div success>Funding: <b>' + ui.format.currency(funding.fundingAmount) + '</b></div>': '' }
                            <div>Duration: ${funding.duration} month(s)</div>
                            <p>${funding.additionalDetails}</p>
                            <div>
                                <span>Success Story: ${funding.successStory ? 'Yes': 'No'}</span>
                                <p>${funding.successStoryDetails}</p>
                            </div>
                            <div class="cols-2">
                            <div secondary xsmall>creation: <span>${ui.format.date(funding.statusHistory[funding.statusHistory.length - 1].dateTime)}</span> by <span>${funding.statusHistory[funding.statusHistory.length - 1].author}</span></div>
                            <div secondary xsmall>Last update: <span>${ui.format.date(funding.statusHistory[0].dateTime)}</span> by <span>${funding.statusHistory[0].author}</span></div>
                            </div>
                        </section>
                    </article>`);

            if(this.soe.hasPrivilege('update')) {
                let edit = ui.create(`<li menuitem primary class="menu-link" data-id="${funding.id}"><a href="#" title="edit"><i class="icon-edit"></i><label>edit</label></a></li>`);
                edit.addEventListener('click', this.onEditFeedback.bind(this));
                li.querySelector('[eicmenu]').append(edit);    
            }
            
            let history = ui.create(`<li menuitem primary class="menu-link" data-id="${funding.id}"><a href="#" title="history"><i class="icon-history"></i><label>history</label></a></li>`);
            history.addEventListener('click', this.onHistoryFeedback.bind(this));
            li.querySelector('[eicmenu]').append(history);
            
            ui.eicfy(li);
            list.append(li);

            totalItems++;
            totalFundings += funding.fundingAmount;
        }

        this.find('.insight .items').innerHTML = totalItems
        this.find('.insight .fundings').innerHTML = ui.format.currency( totalFundings)
        this.components.find(o => o.constructor.name == 'Card' && o.el.classList.contains('project')).loading = false;
    }

    async onAddFeedback(event) {
        event.stopPropagation();
        event.preventDefault();

        let result = await this.openDialog(
            await this.loadContent(
                'projects/soe/dialogs/SoeFeedbackFormDialog',
                { title: 'Provide a feedback' }, 
                {  
                    pic: this.pic,
                    number: this.number,
                    models: { soe: this.soe },
                    mode: 'create'
                }
            )
        );

        if(result) {
            this.soe.fundings(this.pic, this.number)
            .then(this.onFundingsUpdate.bind(this));

            app.events.channel.dispatchEvent(new Event('soe_update'))
        }
    }

    async onEditFeedback(event) {
        //event.stopPropagation();
        event.preventDefault();

        console.log(event.currentTarget.dataset.id)
        let result = await this.openDialog(
            await this.loadContent(
                'projects/soe/dialogs/SoeFeedbackFormDialog',
                { title: 'Editing feedback' }, 
                {  
                    pic: this.pic,
                    number: this.number,
                    id: event.currentTarget.dataset.id,
                    models: { soe: this.soe },
                    mode: 'edit'
                }
            )
        );

        if(result) {
            this.soe.fundings(this.pic, this.number)
            .then(this.onFundingsUpdate.bind(this));

            app.events.channel.dispatchEvent(new Event('soe_update'));
        }
    }

    async onHistoryFeedback(event) {
        //event.stopPropagation();
        event.preventDefault();

        await this.openDialog(
            await this.loadContent(
                'projects/soe/dialogs/SoeFeedbackHistoryDialog',
                { title: 'Feedbacks History' }, 
                {  
                    id: event.currentTarget.dataset.id,
                    models: { soe: this.soe } 
                }
            )
        );
    }
}

app.registerClass('SoeFeedbacksView', SoeFeedbacksView);