DocFragment Search Result

by Jimmy Chandra

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="pleaseWait">Please wait...</div>
<div id="searchResult" class="container-fluid">
</div>

CSS

.progress { margin-bottom: 0 }

JavaScript

(function() {
    'use strict';
    
    function renderProgressBar(data, container) {
        var percentage = data + '%';
        var divProgress = document.createElement("div");
        divProgress.className = "progress";
        
        var divProgressBar = document.createElement("div");
        divProgressBar.className = "progress-bar";
        divProgressBar.style.width = percentage;
        
        var spanProgress = document.createElement("span");
        spanProgress.textContent = percentage;
        
        divProgressBar.appendChild(spanProgress);        
        divProgress.appendChild(divProgressBar);
        
        container.appendChild(divProgress);        
    }
    
    function renderActionButtons(data, container) {
        var btnApprove = document.createElement("button");
        btnApprove.type = "button";
        btnApprove.className = "btn btn-xs btn-primary";
        btnApprove.style.width = "105px";
        btnApprove.textContent = "Approve";        
        container.appendChild(btnApprove);                
    }
    
    function renderSearchItem(data, container) {
        data.forEach(function(doc) {
            var tr = document.createElement("tr");
            
            var tdFileName = document.createElement("td");
            tdFileName.textContent = doc.fileName;
            tr.appendChild(tdFileName);       
            
            var tdDocType = document.createElement("td");
            tdDocType.textContent = doc.type;
            tr.appendChild(tdDocType);
            
            var tdDocNumber = document.createElement("td");
            tdDocNumber.textContent = doc.number;
            tr.appendChild(tdDocNumber);
            
            var tdSupplier = document.createElement("td");
            tdSupplier.textContent = doc.supplier;
            tr.appendChild(tdSupplier);
            
            var tdDocDate = document.createElement("td");
            tdDocDate.className = "text-right";
           ...