Disco/Disco.Web/Areas/Config/Views/AuthorizationRole/Index.cshtml

@model Disco.Web.Areas.Config.Models.AuthorizationRole.IndexModel
@{
    Authorization.Require(Claims.DiscoAdminAccount);
    ViewBag.Title = Html.ToBreadcrumb("Configuration", MVC.Config.Config.Index(), "Authorization Roles");
}
@if (Model.Tokens.Count == 0)
{
    <div class="form" style="width: 450px; padding: 100px 0;">
        <h2>No authorization roles are configured</h2>
    </div>  
}
else
{
    <table class="tableData">
        <tr>
            <th>Name
            </th>
            <th>Linked Groups/Users
            </th>
        </tr>
        @foreach (var item in Model.Tokens)
        {
            <tr>
                <td>
                    @Html.ActionLink(item.Role.Name, MVC.Config.AuthorizationRole.Index(item.Role.Id))
                </td>
                <td>
                    @if (item.SubjectIds.Count == 0)
                    {
                        <span class="smallMessage">&lt;None&gt;</span>
                    }
                    else
                    {
                        @(string.Join(", ", item.SubjectIds.OrderBy(i => i)))
                    }
                </td>
            </tr>
        }
    </table>
}
<!-- #region Administrator Subjects -->
<div id="Config_AuthRoles_Subjects_Update_Dialog" class="dialog" title="Disco Administrators">
    <div id="Config_AuthRoles_Subjects_Update_Dialog_ListContainer">
        <span id="Config_AuthRoles_Subjects_Update_Dialog_None" class="smallMessage">None Associated</span>
        <ul id="Config_AuthRoles_Subjects_Update_Dialog_List" class="none">
            @foreach (var sg in Model.AdministratorSubjects)
            {
                var displayName = sg.Id == sg.Name ? sg.Id : string.Format("{0} [{1}]", sg.Name, sg.Id);
                <li class="@(sg.IsGroup ? "group" : "user")" data-subjectid="@sg.Id">@if (sg.IsGroup)
                                                                                     {
                    <i class="fa fa-users fa-lg"></i>@displayName
                                                                                     }
                                                                                     else
                                                                                     {
                    <i class="fa fa-user fa-lg"></i>@displayName
                                                                                     }<i class="fa fa-times-circle remove"></i></li>
            }
        </ul>
    </div>
    <div id="Config_AuthRoles_Subjects_Update_Dialog_AddContainer">
        <input type="text" id="Config_AuthRoles_Subjects_Update_Dialog_TextAdd" />
        <a id="Config_AuthRoles_Subjects_Update_Dialog_Add" href="#" class="button small">Add</a>
    </div>
    <form id="Config_AuthRoles_Subjects_Update_Dialog_Form" action="@(Url.Action(MVC.API.AuthorizationRole.UpdateAdministratorSubjects(null, true)))" method="post"></form>
</div>
<script>
    (function () {
        var dialog, textAdd, list, noSubjects, form;

        function showDialog() {
            if (!dialog) {
                dialog = $('#Config_AuthRoles_Subjects_Update_Dialog').dialog({
                    resizable: false,
                    modal: true,
                    autoOpen: false,
                    width: 350,
                    height: 420,
                    buttons: {
                        "Save Changes": saveChanges,
                        Cancel: cancel
                    }
                });

                dialog.on('click', '.remove', remove);

                list = $('#Config_AuthRoles_Subjects_Update_Dialog_List');
                noSubjects = $('#Config_AuthRoles_Subjects_Update_Dialog_None');

                textAdd = $('#Config_AuthRoles_Subjects_Update_Dialog_TextAdd');

                textAdd.watermark('Search Subjects')
                    .autocomplete({
                        source: '@(Url.Action(MVC.API.AuthorizationRole.SearchSubjects()))',
                        minLength: 2,
                        focus: function (e, ui) {
                            textAdd.val(ui.item.Id);
                            return false;
                        },
                        select: function (e, ui) {
                            textAdd.val(ui.item.Id).blur();
                            return false;
                        }
                    }).data('ui-autocomplete')._renderItem = function (ul, item) {
                        return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append("<a><strong>" + item.Name + "</strong><br>" + item.Id + " (" + item.Type + ")</a>")
                            .appendTo(ul);
                    };

                $('#Config_AuthRoles_Subjects_Update_Dialog_Add').click(add);
            }

            dialog.dialog('open');

            updateNoSubjects();
            return false;
        }

        function cancel() {
            $(this).dialog("close");

            list.find('li').each(function () {
                $this = $(this);
                if ($this.is('[data-subjectstatus="new"]')) {
                    $this.remove();
                } else {
                    if ($this.is('[data-subjectstatus="removed"]')) {
                        $this.show();
                    }
                }
            });
        }

        function remove() {
            $this = $(this).closest('li');

            if ($this.is('[data-subjectstatus="new"]')) {
                $this.remove();
            } else {
                $this.attr('data-subjectstatus', 'removed').hide();
            }

            updateNoSubjects();
        }

        function add() {
            var id = textAdd.val();

            $.ajax({
                url: '@Url.Action(MVC.API.AuthorizationRole.Subject())',
                method: 'post',
                data: { Id: id }
            }).done(function (response) {
                if (response) {
                    if (list.find('li[data-subjectid="' + response.Id + '"]').length == 0) {

                        var liIcon = $('<i>').addClass('fa fa-lg');
                        if (response.Type === 'user')
                            liIcon.addClass('fa-user');
                        else
                            liIcon.addClass('fa-users');

                        var li = $('<li>')
                            .append(liIcon)
                            .append($('<span>').text(response.Id == response.Name ? response.Id : response.Name + ' [' + response.Id + ']'))
                            .append($('<i>').addClass('fa fa-times-circle remove'))
                            .addClass(response.Type)
                            .attr('data-subjectid', response.Id)
                            .attr('data-subjectstatus', 'new');

                        list.append(li);

                        updateNoSubjects();
                    } else {
                        alert('That subject has already been added');
                    }
                } else {
                    alert('Unknown Id');
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + errorThrown);
            });
            }

        function updateNoSubjects() {
            if (list.find('li:visible').length > 0)
                noSubjects.hide();
            else
                noSubjects.show();
        }

        function saveChanges() {
            var form = $('#Config_AuthRoles_Subjects_Update_Dialog_Form').empty();

            list.find('li[data-subjectstatus!="removed"]').each(function () {
                var subjectId = $(this).attr('data-subjectid');

                form.append($('<input>').attr({
                    'name': 'Subjects',
                    'type': 'hidden'
                }).val(subjectId));

            }).get();

            form.submit();

            dialog.dialog("disable");
            dialog.dialog("option", "buttons", null);
        }

        $(function () {
            $('#Config_AuthRoles_UpdateAdministrators').click(showDialog);
        });

    })();
</script>
<!-- #endregion -->
<div class="actionBar">
    <a id="Config_AuthRoles_UpdateAdministrators" href="#" class="button">Update Disco Administrators [@Model.AdministratorSubjects.Count]</a>
    @Html.ActionLinkButton("Create Authorization Role", MVC.Config.AuthorizationRole.Create())
</div>