Disco/Disco.Web/Views/User/_UserTable.cshtml

@model IEnumerable<Disco.Models.Services.Searching.UserSearchResultItem>
@using Disco.Services.Users.UserFlags;
@{
    Html.BundleDeferred("~/ClientScripts/Modules/Disco-DataTableHelpers");
}
<div class="genericData userTable">
    @if (Model != null && Model.Count() > 0)
    {
        <table class="genericData userTable">
            <thead>
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Surname
                    </th>
                    <th>
                        Given Name
                    </th>
                    <th>
                        Display Name
                    </th>
                    <th>
                        Assigned Devices
                    </th>
                    <th>
                        Jobs
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @if (Authorization.Has(Claims.User.Show))
                            {
                                @Html.ActionLink(item.FriendlyId, MVC.User.Show(item.Id))
                            }
                            else
                            {
                                @item.FriendlyId
                            }
                            @if (Authorization.Has(Claims.User.ShowFlagAssignments))
                            {
                                @if (item.UserFlagAssignments != null && item.UserFlagAssignments.Count > 0)
                                {
                                    <div class="flags">
                                        @foreach (var flag in item.UserFlagAssignments.Where(f => !f.RemovedDate.HasValue).Select(f => Tuple.Create(f, UserFlagService.GetUserFlag(f.UserFlagId))))
                                        {
                                            <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.Surname
                        </td>
                        <td>
                            @item.GivenName
                        </td>
                        <td>
                            @item.DisplayName
                        </td>
                        <td>
                            @item.AssignedDevicesCount
                        </td>
                        <td>
                            @item.JobCountOpen @if (item.JobCount > item.JobCountOpen)
                            {
                                <span class="smallMessage">(@(item.JobCount - item.JobCountOpen) Closed)</span>
                            }
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        <script type="text/javascript">
            $(function () {
                var userTable = $('table.userTable');

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

                    if (!$this.data('userTable_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('userTable_Flags', true)
                    }
                });
            });
        </script>
    }
    else
    {
        <span class="smallMessage">No Users Found</span>
    }
</div>