P42_UI/app/views/projects/bypass/BypassPluginManagementContent.js

class BypassPluginManagementContent extends BypassBaseManagementContent {

    DOMContentLoaded(options) {

        super.DOMContentLoaded(options);
        Object.assign(this, app.helpers.basicDialogs)
        
        let components = ui.eicfy(this.el);

        this.programsArticle = components.find(component => component.el.classList.contains('programmes-article'));   

        this.programsGrid = new DataGrid(this.find('.programmes-list'), {
            headers: [ { label: 'Program'} ],
            height: '320px',
            actions: []
        });

        let programmeBt = this.find('.programme-create');
        if(this.tokens.hasPrivilege('addProgram')) {
            programmeBt.addEventListener('click', this.onProgramAdd.bind(this));
        } else {
            ui.hide(programmeBt);
        }

        this.programsGrid.loading = true;
        this.tokens.getPrograms(this.profile.track, this.profile.domain)
        .then(this.fillPrograms.bind(this));
    }

    fillPrograms(payload) {
        this.programsGrid.clear();
        this.programsGrid.loading = false;

        for(let item of payload) {
            let row = this.programsGrid.addRow(0, [ item ]);

            // checking if programme can be deleted 
            if(this.tokens.hasPrivilege('removeProgram')) {
                let button = ui.create(`<button eicbutton small danger title="delete this programme" data-label="${item}" data-track="${this.profile.track}" data-domain="${this.profile.domain}" >delete</button>`);
                button.addEventListener('click', this.onProgramDelete.bind(this));
                row.querySelector('.cell.actions').appendChild(button);
            }
        }
    }

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

        let result = await this.openDialog(
            await this.loadContent(
                'projects/bypass/dialogs/BypassProgramAddDialog',
                { title: 'Add a programme' }, 
                { model: this.tokens, profile: this.profile }
            )
        );
        
        if(result) {
            ui.growl.append('Programme added', 'success');
            this.programsGrid.loading = true;
            this.tokens.getPrograms(this.profile.track, this.profile.domain)
            .then((payload) => {
                this.fillPrograms(payload);
                this.programsArticle.expand();
            })
        } 
    }

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

        let result = await this.confirmDialog({
            title: 'Delete this programme',
            message: `Please be aware that you are about to delete the programme "<strong>${event.target.dataset.label}</strong>"<br>
                      Are you positive ?`,
            okLabel: 'Delete',
            okPromise:() => { 
                let payload = {
                    track: event.target.dataset.track,
                    domain: event.target.dataset.domain,
                    program: event.target.dataset.label
                }
                // this promise should always return a result (awaited above) 
                // either built here or from the model action.
                return(this.tokens.removeProgram(payload))
            }
        });

        if(result) {
            this.programsGrid.loading = true;
            this.tokens.getPrograms(this.profile.track, this.profile.domain)
            .then(this.fillPrograms.bind(this));
        }
    }
}

app.registerClass('BypassPluginManagementContent', BypassPluginManagementContent);