Disco/Disco.Web/Views/Device/_DeviceTable.cshtml

@model IEnumerable<Disco.Models.Services.Searching.DeviceSearchResultItem>
@using Disco.Services.Devices.DeviceFlags;
@{
    var canShowDevices = Authorization.Has(Claims.Device.Show);
    var canShowUsers = Authorization.Has(Claims.User.Show);

    Html.BundleDeferred("~/ClientScripts/Modules/Disco-DataTableHelpers");
}
<div class="genericData deviceTable">
    @if (Model != null && Model.Count() > 0)
    {
        <table class="genericData deviceTable">
            <thead>
                <tr>
                    <th>Serial</th>
                    <th>Asset</th>
                    <th class="date">Decommissioned</th>
                    <th>Name</th>
                    <th>Model</th>
                    <th>Profile</th>
                    <th>Batch</th>
                    <th>Assigned User</th>
                    <th>Jobs</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr class="@(item.DecommissionedDate.HasValue ? "decommissioned" : string.Empty)">
                        <td>
                            @if (canShowDevices)
                            {@Html.ActionLink(item.Id, MVC.Device.Show(item.Id))}
                        else
                        {@item.Id}
                            @if (Authorization.Has(Claims.Device.ShowFlagAssignments))
                            {
                                @if (item.DeviceFlagAssignments != null && item.DeviceFlagAssignments.Count > 0)
                                {
                                    <div class="flags">
                                        @foreach (var flag in item.DeviceFlagAssignments.Where(f => !f.RemovedDate.HasValue).Select(f => Tuple.Create(f, DeviceFlagService.GetDeviceFlag(f.DeviceFlagId))))
                                        {
                                            <i class="flag fa fa-@(flag.Item2.Icon) fa-fw d-@(flag.Item2.IconColour)">
                                                <span class="details">
                                                    <span class="name">@flag.Item2.Name</span>@if (flag.Item1.Comments != null)
                                                    {<span class="comments">@flag.Item1.Comments.ToHtmlComment()</span>}<span class="added">@CommonHelpers.FriendlyDateAndUser(flag.Item1.AddedDate, flag.Item1.AddedUserId)</span>
                                                </span>
                                            </i>
                                        }
                                    </div>
                                }
                            }
                        </td>
                        <td>
                            @item.AssetNumber
                        </td>
                        <td>
                            @if (item.DecommissionedDate.HasValue)
                            {@CommonHelpers.FriendlyDate(item.DecommissionedDate.Value)}
                        </td>
                        <td>
                            @if (string.IsNullOrWhiteSpace(item.ComputerName))
                            {
                                <span class="smallMessage">Unknown</span>
                            }
                            else
                            {
                                @item.ComputerName
                            }
                        </td>
                        <td>
                            @if (item.DeviceModelDescription != null)
                            {
                                <span>@item.DeviceModelDescription</span>
                            }
                            else
                            {
                                <span class="smallMessage">Unknown</span>
                            }
                        </td>
                        <td>
                            @item.DeviceProfileName
                        </td>
                        <td>
                            @if (item.DeviceBatchName != null)
                            {
                                <span>@item.DeviceBatchName</span>
                            }
                            else
                            {
                                <span class="smallMessage">N/A</span>
                            }
                        </td>
                        <td>
                            @if (string.IsNullOrEmpty(item.AssignedUserId))
                            {
                                <span class="smallMessage">N/A</span>
                            }
                            else
                            {
                                <span>
                                    @if (canShowUsers)
                                    {
                                        @Html.ActionLink(item.AssignedUserDescription, MVC.User.Show(item.AssignedUserId))
                                    }
                                    else
                                    {
                                        @item.AssignedUserDescription
                                    }
                                </span>
                            }
                        </td>
                        <td>
                            @item.JobCount
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <script type="text/javascript">
    $(function () {
        var userTable = $('table.deviceTable');

        userTable.each(function () {
            var $this = $(this);

            if (!$this.data('deviceTable_Flags')) {
                $this.tooltip({
                    items: 'i.flag',
                    content: function () {
                        var $this = $(this);
                        return $this.children('.details').html();
                    },
                    tooltipClass: 'FlagAssignment_Tooltip',
                    position: {
                        my: "right top",
                        at: "right bottom",
                        collision: "flipfit flip"
                    },
                    hade: {
                        effect: ''
                    },
                    close: function (e, ui) {
                        ui.tooltip.hover(
                            function () {
                                $(this).stop(true).fadeTo(100, 1);
                            },
                            function () {
                                $(this).fadeOut(100, function () { $(this).remove(); });
                            });
                    }
                });

                $this.data('deviceTable_Flags', true)
            }
        });
    });
        </script>
    }
    else
    {
        <span class="smallMessage">No Devices Found</span>
    }
</div>