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 ICT Administrators" data-searchsubjectsurl="@(Url.Action(MVC.API.System.SearchSubjects()))" data-subjecturl="@Url.Action(MVC.API.System.Subject())">
    @using (Html.BeginForm(MVC.API.AuthorizationRole.UpdateAdministratorSubjects(null, true)))
    {
        @Html.AntiForgeryToken()
        <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">
                        <input type="hidden" name="subjects" value="@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" />
        <button id="Config_AuthRoles_Subjects_Update_Dialog_Add" type="button" class="button small">Add</button>
    </div>
</div>
<script>
    (function () {
        let dialog = null;
        let originalList = null;
        let list = null;
        let textAdd = null;
        let noSubjects = null;

        function showDialog() {
            if (!dialog) {
                list = $('#Config_AuthRoles_Subjects_Update_Dialog_List');
                originalList = list.html();
                noSubjects = $('#Config_AuthRoles_Subjects_Update_Dialog_None');
                textAdd = $('#Config_AuthRoles_Subjects_Update_Dialog_TextAdd');

                dialog = $('#Config_AuthRoles_Subjects_Update_Dialog').dialog({
                    resizable: false,
                    modal: true,
                    autoOpen: false,
                    width: 350,
                    buttons: {
                        "Save Changes": saveChanges,
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        list.html(originalList);
                    }
                });

                dialog.on('click', '.remove', function () {
                    $(this).closest('li').remove();
                    updateNoSubjects();
                });

                textAdd.watermark('Search Subjects')
                    .autocomplete({
                        source: dialog.attr('data-searchsubjectsurl'),
                        minLength: 2,
                        focus: function (e, ui) {
                            textAdd.val(ui.item.Id);
                            return false;
                        },
                        select: function (e, ui) {
                            textAdd.val(ui.item.Id).blur();
                            $('#Config_AuthRoles_Subjects_Update_Dialog_Add').trigger('click');
                            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').on('click', add);
            }

            dialog.dialog('open');

            updateNoSubjects();
            return false;
        }

        async function add() {
            const id = textAdd.val();

            try {
                const body = new FormData();
                body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
                body.append('id', id);
                const response = await fetch(dialog.attr('data-subjecturl'), {
                    method: 'POST',
                    body: body
                });

                if (response.ok) {
                    const data = await response.json();

                    if (!data)
                        throw 'Unknown user id';

                    if (!data.IsGroup && !data.IsUserAccount)
                        throw data.Name + ' [' + data.Id + '] is a ' + data.Type + '. Only users and groups can be added.';

                    if (list.find('li[data-subjectid="' + data.Id.replace('\\', '\\\\') + '"]').length != 0) {
                        throw 'That subject has already been added';
                    }

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

                    const li = $('<li>')
                        .append($('<input>').attr({ type: 'hidden', name: 'subjects', value: data.Id }))
                        .append(liIcon)
                        .append($('<span>').text(data.Id == data.Name ? data.Id : data.Name + ' [' + data.Id + ']'))
                        .append($('<i>').addClass('fa fa-times-circle remove'))
                        .addClass(data.Type)
                        .attr('data-subjectid', data.Id)
                        .attr('data-subjectstatus', 'new');

                    list.append(li);
                    textAdd.val('');

                    updateNoSubjects();
                } else {
                    alert('Error: ' + response.statusText);
                }

            } catch (e) {
                alert('Error: ' + e);
            }

            return false;
        }

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

        function saveChanges() {
            dialog
                .dialog("option", "buttons", null)
                .find('form').trigger('submit');
        }

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

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