JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div ng-app="Sorter">
    <form ng-controller="InputController" ng-submit="add()">
        <label>Model
            <input type="text" focus-on="focusInput" ng-model="currentModel">
        </label>
        <label>
            <input type="checkbox" ng-model="upperCase">Upper Case Only</label>
        <button type="submit">Add</button>
        <button type="button" ng-click="init()">Clear</button>
        <table class="model-table">
            <thead>
                <tr>
                    <th>Model</th>
                    <th>Quantity</th>
                    <th>Increase</th>
                    <th>Decrease</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="(model,quantity) in models" ng-class="{odd:($index % 2 !== 0), even:($index % 2 === 0)}">
                    <td ng-bind="model"></td>
                    <td ng-bind="quantity" class="quantity"></td>
                    <td><a href="javascript:void(0)" ng-click="increase(model)">[+]</a>

                    </td>
                    <td><a href="javascript:void(0)" ng-click="decrease(model)">[-]</a>

                    </td>
                    <td><a href="javascript:void(0)" ng-click="remove(model)">[x]</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <form ng-controller="SortingConfigController as scc" ng-submit="sort()">
        <label>Minimum Stack Height
            <input type="number" ng-model="minHeight" min="1">
        </label>
        <label>Maximum Stack Height
            <input type="number" ng-model="maxHeight" min="2">
        </label>
        <button type="button" ng-click="init()">Reset</button>
        <button type="submit">Sort</button>
    </form>
</div>

CSS

.model-table, .model-table td, .model-table th {
    border: 1px black solid;
    border-collapse:collapse;
}
.model-table td, .model-table th {
    padding-left:15px;
    padding-right:15px;
    padding-top:5px;
    padding-bottom:5px;
}
.model-table > tbody > tr > td.quantity {
    text-align:right;
    text-decoration:none;
}
input[type=checkbox] {
    cursor:pointer
}
label {
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
tr.odd a, tr.even a {
    color:white;
    font-weight:bold;
}
tr.odd {
    background-color:green;
    color:white;
}
tr.even {
    background-color:blue;
    color:white;
}
}

JavaScript

(function () {
    'use strict';
    angular.module('Sorter', []).run(['$rootScope', function ($rootScope) {
        $rootScope.models = {
            'F551CA-SX079H': 18,
                'UX302LA-C4003P': 5,
                'S551LA-CJ049H': 4,
                'F550DP-XX055H': 3,
                'S551LB-CJ150H': 3,
                'X551MA-SX298H': 3,
                'B400A-W3010G': 2,
                'F550LC-XO078H': 2,
                'R103BA-DF066H': 2,
                'R552JK-CN089H': 2,
                'F550LD-CJ321H': 1,
                'M80TA-DL004H': 1,
                'R552JV-CM323H': 1,
                'T300LA-C4006P': 1,
                'UX31A-C4032H': 1,
                'UX32VD-R4002V': 1,
                'X200CA-CT119H': 1,
                'X451CA-VX034H': 1,
                'X550LB-XX013H': 1,
                'X550LN-XX075H': 1,
                'P550CC-XX555G': 1,
                'F502CA-XX020H': 2,
                'X750JB-TY001H': 1,
                'F550CA-XX670H': 4,
                'TX300CA-C4021H': 15,
                'F550CC-XO068H': 5,
                'V550CB-CJ111H': 1,
                'H100TA-DK004H': 23,
                'U38N-C4016H': 9,
                'R750JV-T4121H': 1,
                'S550CA-CJ132H': 5,
                'S300CA-C1017H': 1,
                'S400CA-CA154H': 2,
                'N750JV-T4184H': 4,
                'X550CA-CJ693H': 2,
                'F201E-KX195H': 2,
                'F551MA-SX096H': 2,
                'F55U-SX055H': 2,
                'TAICHI31-CX022H': 11,
                'P550CA-XX391G': 1,
                'TAICHI21-CW015H': 4,
                'F750LB-T4051H': 2,
                'S56CM-XX097H': 2,
                'F202E-CT063H': 1,
                'F550CC-CJ796H': 1,
                'F550LD-XO225H': 1,
                'P550CC-XX1117G': 1,
                'P550LA-XX212G': 1,
                'R552JK-CN203H': 1,
                'R750JV-T4170H': 1,
                'S300CA-C1065H': 1,
               ...