ProjectProto.js

"use strict";
function ProjectComponent(){
    this.projectDiv = document.createElement('div');
    this.projectDropdown = document.createElement('div');
    this.projectRows = [];
}
ProjectComponent.prototype.createProjectDiv = function(){
    this.projectDiv.classList.add('project');
    const projectsTable = document.createElement('table');
    const tableHeader = document.createElement('thead');
    projectsTable.appendChild(tableHeader);
    const headerRow = document.createElement('tr');
    const projectHeaderColumn = document.createElement('th');
    projectHeaderColumn.textContent = 'Project';
    const roleHeaderColumn = document.createElement('th');
    roleHeaderColumn.textContent = 'Role';
    headerRow.appendChild(projectHeaderColumn);
    headerRow.appendChild(roleHeaderColumn);
    tableHeader.appendChild(headerRow);
    const tableBody = document.createElement('tbody');
    tableBody.classList.add('selected-projects','enabled');
    projectsTable.appendChild(tableBody);
    const projectPlus = document.createElement('i');
    projectPlus.classList.add('fa','fa-plus-circle','fa-lg','project-plus');
    projectPlus.id = 'projectPlusButton';
    projectPlus.setAttribute('data-toggle','dropdown');
    projectPlus.setAttribute('aria-haspopup','true');
    projectPlus.setAttribute('aria-expanded','false');
    projectPlus.textContent = 'Project';
    projectPlus.onclick = handleProjectPlusDropdownClickEvent;
    this.projectDropdown.classList.add('dropdown-menu','project-dropdown');
    this.projectDropdown.setAttribute('aria-labelledby',"projectPlusButton");
    this.projectDropdown.onclick = handleProjectPlusDropdownClickEvent;

    this.projectDiv.appendChild(projectsTable);
    this.projectDiv.appendChild(projectPlus);
    this.projectDiv.appendChild(this.projectDropdown);
    return this.projectDiv;
}
ProjectComponent.prototype.createSelectedProjectsTR = function (name, id){
    const projectRow = document.createElement('tr');
    projectRow.setAttribute('project-id', id);
    projectRow.classList.add('new-row');
    const projectNameColumn = document.createElement('td'); 
    projectNameColumn.classList.add('project-name');
    projectNameColumn.textContent = name;
    const selectColumn = document.createElement('td');
    const selectElement = document.createElement('select');
    selectElement.options.add(createLoadingOption());
    
    selectColumn.appendChild(selectElement);
    const minusButton = document.createElement('i');
    minusButton.onclick = handleProjectMinusClickEvent;
    minusButton.classList.add('fa','fa-minus-circle','fa-lg','project-minus');
    const minusColumn = document.createElement('td');
    minusColumn.appendChild(minusButton);
    //add to the row
    projectRow.appendChild(projectNameColumn);
    projectRow.appendChild(selectColumn)
    projectRow.appendChild(minusColumn);
    this.projectRows.push(projectRow);
    return projectRow;
}
ProjectComponent.prototype.loadComponent = function(data, exclude){
    if(data && data.length > 0 && data[0].workspaces){
        if(exclude){
            const filterdOptions = data[0].workspaces.data.filter(workspace => !exclude.includes(workspace.id))
            data[0].workspaces.data = filterdOptions;
        }
        this.loadProjectDropdown(data.shift());
        //loop the roles. and load them
        if(data.length === this.projectRows.length){
            data.forEach((item, index) => {
                this.loadProjectRow(item, this.projectRows[index]);
            });
        }
    }
}
ProjectComponent.prototype.loadProjectDropdown = function({workspaces}){
    workspaces.data.forEach(workspace => {
        const child = document.createElement('a');
        child.classList.add('dropdown-item');
        child.setAttribute('data-id', workspace.id);
        child.textContent = workspace.name;
        this.projectDropdown.appendChild(child);
    });
}
ProjectComponent.prototype.loadProjectRow = function(data, row){
    const selectElement = row.querySelector('select');
    populateSelectElement(data.roles.data, selectElement, 'displayName');
}
ProjectComponent.prototype.removeProjectDropdown = function (dropdownItems, id) {
    //const dropdownItems = this.clientProjectSelections.querySelectorAll('.project .project-dropdown a');
    const dropdownItem = [...dropdownItems].find(item => item.id === id);
    if(dropdownItem){
        dropdownItem.remove()
    }
}