JSFiddle - React, Tailwind, and code Playground

by Jon Kittell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2>Admin page</h2>

<div data-bind='simpleGrid: gridViewModel'> </div>
 
<button data-bind='click: addItem'>
    Add item
</button>
 
<button data-bind='click: sortByName'>
    Sort by name
</button>
 
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button> 


<button data-bind='click: approveAll'>Approve All Leads</button>
<button data-bind='click: submit'>Submit</button>

<h3>Approved</h3>
<span data-bind='foreach: approvedLeads'>
    <p data-bind='text: number'></p>

JavaScript

debugger;

function Lead(number, approve, deny) {
    this.number = ko.observable(number);
    this.approve = ko.observable(approve);
    this.deny = ko.observable(deny);
}

var initialData = function() {
    var items = [];
    for (var i = 0; i < 10; i++) {
        items.push(new Lead(i, false, false));
    }
    return items;
}

function GridViewModel(items) {
    var self = this;    
    self.leads = ko.observableArray([]);
    self.approvedLeads = ko.observableArray([]);
    self.deniedLeads = ko.observableArray([]);
    
    
    
    self.approveLead = function(lead) {
        if (exists(lead, self.approvedLeads()) == false) self.approvedLeads.push(lead);
    };
    
    self.denyLead = function(lead) {
        self.approvedLeads.remove(lead);
        self.deniedLeads.push(lead);
    };
    
    self.approveAll = function() {
        for (var i = 0; i < self.leads().length; i++) {
            self.approvedLeads.push(self.leads()[i]);
        }
    };
    
    self.submit = function() {
        alert("Sending to server");
    };
    
    self.exists = function(item, array) {
        if($.inArray(item, array) === -1) {
            //process data if "item" is not in array
            return false;
        } else {
            //process if "some" is in array
            return true;
        }
    };
};

ko.applyBindings(new GridViewModel(initialData);