JSFiddle - React, Tailwind, and code Playground

by jimmym715

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<h2>User Accounts</h2>
<p>You have <span data-bind="text: users().length">&nbsp;</span> user acount(s)</p>
<p>Click on the user name in the list below to edit.</p>
<div id="editFrame">
    <div class="masterList">
        <ul id="userAccountList" data-bind="foreach: users">
            <li data-bind="click: $root.selectUser"><a href="#" data-bind="text: email"></a></li>
        </ul>
    </div>
   <div id="userDetail" class="details" data-bind="with: currentUser">
        <h3>
            Details for <span data-bind="text: firstName" />
        </h3>
        <ul>
            <li>
                <label for="detailsUserEmail">
                    E-mail</label><input id="detailsUserEmail" data-bind="value: email" /></li>
            <li>
                <label for="detailsFirstName">
                    First Name</label><input id="detailsFirstName" data-bind="value: firstName" /></li>
            <li>
                <label for="detailsLastName">
                    Last Name</label><input id="detailsLastName" data-bind="value: lastName" /></li>            
        </ul>
        <div class="permissionsList">
            <h4>Permissions</h4>            
            <p> The check state for the following checkboxes should be determined by the presence of a currentUser.UserPermissions.PermissionId that matches the PermissionList.PermissionId used to set the value.</p>
            <ul data-bind="foreach: $root.permissions">
                <li><label>
                    <input type="checkbox" data-bind="value: id, checked: $parent.userPermissions" />&nbsp;<span data-bind="text:name" />
                </label></li>
            </ul>
        </div>
       <div>
           User Permission IDs: [<span data-bind="text: userPermissions"></span>]
       </div>
    </div>
</div>

CSS

h2{font-size:1.3em}

.masterList
        {
            width: 25%;
            float: left;
        }
        #userDetail, .details
        {
            clear: both;
            float: left;
            margin-left: 25.1%;
            width: 74.9%;
        }
        
        .details ul
        {
            list-style-type: none;
        }
        
        .details ul li
        {
            margin: .5em 1em;
        }
        #editFrame
        {
            overflow: auto;
        }
h4 {font-weight:bold;}

JavaScript

$(function() {

    var initialData = {
        "UserList": [{
            "UserId": 1,
            "UserEmail": "jdoe@gmail.com",
            "ClientId": -1,
            "FirstName": "John",
            "LastName": "Doe",
            "UserPermissions": [{
                "UserId": 1,
                "PermissionId": 1,
                "CreatedBy": "system"},
            {
                "UserId": 1,
                "PermissionId": 2,
                "CreatedBy": "system"}]
        },{
            "UserId": 2,
            "UserEmail": "jsmith@gmail.com",
            "ClientId": -1,
            "FirstName": "Jane",
            "LastName": "Smith",
            "CreatedBy": "system",
            "UserPermissions": [{
                "UserId": 2,
                "PermissionId": 1,
                "CreatedBy": "system"},
            {
                "UserId": 2,
                "PermissionId": 3,
                "CreatedBy": "system"}]
        }],
        "PermissionList": [{
            "PermissionId": 1,
            "Name": "Basic",
            "Description": "Basic Access"
        },{
            "PermissionId": 2,
            "Name": "Power User",
            "Description": "Power User"
        },{
            "PermissionId": 3,
            "Name": "Admin",
            "Description": "System Administrator"
        }]
    };
    
    var AppViewModel = function() {
        var self = this;
        
        //list of client users
        self.users = ko.observableArray();
    
        //list of permissions available to this client
        self.permissions = ko.observableArray();
    
        //user to display in details area
        self.currentUser = ko.observable();
    
        //select user from the master list
        self.selectUser = function(u) {
            self.currentUser(u);
        };
    }
        
    var UserAccount = function() {
        var self = this;
    
        self.id = ko.observable();
        self.email = ko.observable();
       ...