JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<div class="ng-app:TVPremieresApp" id="ng-app" ng-app="TVPremieresApp" ng-controller="staffController" ng-init="init()">
<div ng-switch="!dave==''">
<h1 ng-switch-when="true">
{{dave}} staff list
</h1>
<h1 ng-switch-default>
Test
</h1>
</div>
    <div class="search-box">
        <label>Filter:</label>
        <input ng-model="query">
        <label>Area:</label>
        <select ng-model="areas" ng-init="areas=dave" ng-options="t for t in dataArr | areaArrFilter" >
            <option value="" >All</option>
        </select>
        <label>Position:</label>
        <select ng-model="poslist" ng-options="c.position for c in dataArr | posArrFilter:areas | orderBy:'position'">
            <option value="">All</option>
       </select>
        <label>Results: {{david = (dataArr | filter:query | listArrFilter:areas | posFilter:poslist.position).length}} found</label>
    </div>
    <div class="results-top"></div>
    <div class="results-container">
        <table class="mytable" ng-switch="david>0">
            <tbody  ng-switch-when="true">
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Work area</th>
                    <th>Ext</th>
                </tr>
                <tr ng:repeat="item in filteredDataArr = ( dataArr | filter:query | listArrFilter:areas | posFilter:poslist.position |  startFrom:currentPage*pageSize | limitTo:pageSize | orderBy:'lname')">
                    <td ng-switch="!!item.enumber"><a ng-href="http://www.rmit.edu.au/browse?ADV=Search&QRY={{item.enumber}}&Search=Search&STYPE=PEOPLE" ng-switch-when="true">{{item.title}}, {{item.fname}} {{item.lname}}</a><span ng-switch-when="false">{{item.title}}, {{item.fname}} {{item.lname}}</span></td>
                    <td>{{item.position}}</td>
                    <td>{{item.wkarea}}</td>
                    <td>992{{item.ext}}</td>
          ...

CSS

table tr td {
    border-bottom: 1px solid #ccc;
    padding:0.5em 0.5em;
    width:11.6%;
    font-size:14px;
}
table td:first-child {
    width:30%;
}
table {
    width:100%;
}
table th {
    text-align:left;
    border-bottom: 1px solid #ccc;
}
Select {
    Width:140px;
    height:21px;
    margin-right:4px;
}
.search-box {
    background-color:#333333;
    padding:5px;
    margin-bottom:15px;
    color:#ffffff;
    height:34px;
}
.search-box label {
    Color:#ffffff;
    padding-left:2px;
}   
.pages li{
display: inline;
list-style-type: none;
padding-right: 20px;
    margin-left:0; 
    padding-left:0;
}
.selected{
  text-decoration:none;  
}


.pages{
     margin-left:0; 
        padding-left:4px;
}

JavaScript

/*------------------App---------------------*/
var app = angular.module('TVPremieresApp', []);

app.filter('listArrFilter', function () {

    return function (items, name) {      
        var arrayToReturn = [];
        for (var i = 0; i < items.length; i++) {
            if ((items[i].wkarea == name) || (name==undefined) || (name==="")) {
                arrayToReturn.push(items[i]);
            }
        }
        return arrayToReturn;
    };
});

app.filter('posFilter', function () {

    return function (items, name) {      
        var arrayToReturn = [];
        for (var i = 0; i < items.length; i++) {
            if ((items[i].position == name) || (name==undefined) || (name==="")) {
                arrayToReturn.push(items[i]);
            }
        }
        return arrayToReturn;
    };
});

app.filter('areaArrFilter', function () {
    return function (items) {           
        var arrayToReturn = [];      
        for (var i = 0; i < items.length; i++) {   
            //alert(arrayToReturn.indexOf(items[i].wkarea));
                if (arrayToReturn.indexOf(items[i].wkarea) == -1) {
                     arrayToReturn.push(items[i].wkarea);
                }   
        }
        return arrayToReturn;
    };
});

app.filter('posArrFilter', function () {
    return function (items, name) {           
        var arrayToReturn = [];
        var arrayDupe = [];
        for (var i = 0; i < items.length; i++) {           
                if((items[i].wkarea==name) || (name==undefined) || (name==="")){
                    if(arrayDupe.indexOf(items[i].position) === -1){
                        arrayDupe.push(items[i].position);
                        arrayToReturn.push(items[i]);
                    }
                }   
        }
        
        return arrayToReturn;
    };
});

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

/*-------------App...