JSFiddle - React, Tailwind, and code Playground

by gedave

HTML

<div ng-controller="ctrlPAT">
    <table>
        <thead>
            <tr>     
                <th>Part Number</th>
                <th>Description</th>
                <th>Avail</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in PART_NUM_LIST" class="partAvailability" partNum="{{item.partNum}}">
                <td>{{item.partNum}}</td>
                <td>{{item.description}}</td>
                <td></td>
                <!-- Start of Part Availability PopOver -->
                <td test="2417163">
                    <div id="partAvailability-content-wrapper{{item.partNum}}" class="popPartsAvail">
                        <!--<div>-->
                        <table class="table table-hover table-condensed" style="width: 800px">
                            <thead>
                                <tr>     
                                    <th>partNum</th>
                                    <th>Warehouse</th>
                                    <th>Quantity</th>
                                    <th>cutTime</th>
                                    <th>estDel</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in PART_NUM_AVAILABILITY_LIST | filter: 2417163 ">     
                                    <td>{{item.partNum}}</td>
                                    <td>{{item.Warehouse}}</td>
                                    <td>{{item.Quantity}}</td>
                                    <td>{{item.cutTime}}</td>
                                    <td>{{item.estDel}}</td>
                                </tr>
                            </tbody>
                        </table>
                        <!--</div>-->
                    </div>
                </td>
                <!-- end of Part Availability PopOver -->
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var app = angular.module('myApp', []);
$(document).ready(function () {

    // Popover partAvailability
    $('.partAvailability').each(function () {
        $(this).popover({
            html: true,
            placement: 'left',
            trigger: 'hover', // Change to Hover after testing
            content: function () {
                return $('#partAvailability-content-wrapper' + $(this).attr("partNum")).html() + $(this).attr("partNum");
            }
        }).on('click', function (e) {
            e.preventDefault();
        });
    });


});

ctrlPAT = function ($scope) {
    $scope.moduleTitle = "Parts And Tools";

    $scope.PART_NUM_LIST = [{
        partNum: "2304255-2",
        description: "8CH Cardiac Coil",
        availability: "2",
        comments: "LOWER FRUs.  2"
    }, {
        partNum: "2417163",
        description: "ASSY,FRU,CABLE,VALUE 8CH CTL",
        availability: "1",
        comments: "Added per HDx RSPL"
    }, {
        partNum: "",
        description: "",
        availability: "0",
        comments: ""
    }];

    $scope.PART_NUM_SEARCH_LIST = [{
        partNum: "2296092-2",
        description: "INTEGRATED HEAD ASSEMBLY"
    }, {
        partNum: "2215142",
        description: "DRF1 CIRCUIT BOARD"
    }, {
        partNum: "2294300-3",
        description: "MGD CHASSIS AGP BOARD"
    }, {
        partNum: "2296092-2",
        description: "INTEGRATED HEAD ASSEMBLY"
    }, {
        partNum: "2321556",
        description: "DQA-HEAD SNR PHANTOM"
    }, {
        partNum: "2351573",
        description: "SRFDII RF AMP 2230683 FRU ASSEMBLY"
    }, {
        partNum: "2368697-8",
        description: "LINUX DDR WORKSTATION - GEMS MR USA"
    }, {
        partNum: "2275756",
        description: "KEYBOARD, NORTH AMERICAN PC PS/2"
    }, {
        partNum: "2224562",
        description: "1.5T RF AMPLIFIER POWER MODULE"
    }, {
        partNum: "2160200-43",
        description: "ERBTEC #550020 SYSTEM SUPPORT MODULE"
    },...