JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<script src="//knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<div class="test">
    <input type="search" data-bind="textInput:searchTerm" />
    <div class="client-list" data-bind="foreach:renderedClients">
        <div class="name" data-bind="text:name"></div>
        <div class="program-list" data-bind="foreach:renderedPrograms">
            <div class="name" data-bind="text:name"></div>
            <div class="cycle-list" data-bind="foreach:renderedCycles">
                <div class="name" data-bind="text:name"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

'use strict';

function Cycle(id) {
    this.id = id;
    this.name = 'Cycle ' + id;
}

function Program(id) {
    this.id = id;
    this.name = 'Program ' + id;
    this.cycles = ko.observableArray([]);
    this.renderedCycles = ko.observableArray([]);
}

Program.prototype.search = function (term, max) {
    const searchedItems = [];
    let ret = max;
    const programMatches = this.name.indexOf(term) >= 0;
    if (programMatches) 
        ret--;
    if (ret > 0) this.cycles.peek().every((c) => {
        if (c.name.indexOf(term) >= 0) {
            ret--;
            searchedItems.push(c);
        }
        return ret > 0;
    });
    if(searchedItems.length > 0 && !programMatches)
        ret--;
    this.renderedCycles(searchedItems);
    return {
        max: ret,
        isEmpty: ret === max
    };
}

function Client(id) {
    this.id = id;
    this.name = 'Client ' + id;
    this.programs = ko.observableArray([]);
    this.renderedPrograms = ko.observableArray([]);
}
Client.prototype.search = function (term, max) {
    const searchedItems = [];
    let ret = max;
    const clientMatches  =this.name.indexOf(term) >= 0;
    if (clientMatches) ret--;
    if (ret > 0) this.programs.peek().every((p) => {
        const psearch = p.search(term, ret);
        ret = psearch.max;
        if (!psearch.isEmpty) {
            searchedItems.push(p);
        }
        return ret > 0;
    });
    if(searchedItems.length > 0 && !clientMatches)
        ret--;
    this.renderedPrograms(searchedItems);
    return {
        max: ret,
        isEmpty: ret === max
    };
}

const clients = ko.observableArray([new Client(1), new Client(2), new Client(3), new Client(4)]);
clients().forEach(c => {
    for (let pindex = 0; pindex < 5; pindex++) {
        const prog = new Program(pindex);
        c.programs.push(prog);
        for(let index =0; index < 5; index++)
            prog.cycles.push(new Cycle(index));
    }
});
const searchTerm = ko.observable('');
const maxItems =...