dual-data-picker/src/js/services/ui.js

## Settings editableDiv : true This use div instead input. Usefull to eliminate autocomplete feature.

export default class Ui {

    constructor(selectId, app) {
        this.app  = app;
        this.html = false;

        this._selectId      = selectId;
        this._selectField   = false;
        this._searchField   = false;
        
        this._searchId       = "";
        this._leftListId     = "";
        this._rightListId    = "";
        this._containerId   = "";
        
        this._leftList  = false;
        this._rightList = false;

        this.drawUI();
    }

    drawUI() {

        let html = this.makeHTML();
        this.insertOnPage(html);
        this.hideOriginalElement();
    }

    insertOnPage(html) {
        document.getElementById(this.selectId).insertAdjacentElement("afterend", html);
    }

    makeHTML() {
        this.html = document.createElement("div");
        this.html.setAttribute("id", this.containerId);
        this.html.classList.add("dual-data-picker");

        this.html.innerHTML = `
            <input type="text" id="` + this.searchId + `" placeholder="Search..." class="dual-data-picker__search" />
            <div class="dual-data-picker__cols">
                <div class="dual-data-picker__left" id="` + this.leftListId + `"></div>
                <div class="dual-data-picker__right" id="` + this.rightListId + `"></div>
            </div>        
        `;

        return this.html;
    }

    getMainContainer() {
        return this.html;
    }

    hideOriginalElement() {
        document.getElementById(this.selectId).style.display = "none"; 
    }

    drawOptions() {
        let data = this.app.Repository.data;
        
        for (let i = 0; i < data.length; i++) {
            if (data[i].selected == false) {
                this.leftList.appendChild(data[i].getHtml());
            }
            else {
                this.rightList.appendChild(data[i].getHtml());
            }
        }
    }

    redraw() {

        this.leftList.innerHTML = '';
        this.rightList.innerHTML = '';

        this.drawOptions();
    }

    set selectId(v) {
        this._selectId = v;
    }

    get selectId() {
        return this._selectId;
    }

    get selectField() {
        
        if (this._selectField == false) {
            this._selectField = document.getElementById(this.selectId);
        }

        return this._selectField;
    }

    get searchId() {
        if (this._searchId == "") {
            this._searchId = this.selectId + "_search-id";
        }

        return this._searchId;
    }

    get searchField() {
        if (this._searchField == false) {
            this._searchField = document.getElementById(this.searchId);
        }

        return this._searchField;
    }

    get leftListId() {
        if (this._leftListId == "") {
            this._leftListId = this.selectId + "_left-list-id";
        }

        return this._leftListId;        
    }

    get rightListId() {
        if (this._rightListId == "") {
            this._rightListId = this.selectId + "_right-list-id";
        }

        return this._rightListId;        
    }    

    get containerId() {
        if (this._containerId == "") {
            this._containerId = this.selectId + "_container";
        }

        return this._containerId;  
    }

    get leftList() {
        if (this._leftList == false) {
            this._leftList = document.getElementById(this.leftListId);
        }

        return this._leftList;
    }

    get rightList() {
        if (this._rightList == false) {
            this._rightList = document.getElementById(this.rightListId);
        }

        return this._rightList;
    }    
}