ApiResourcesEdit.js

var abp = abp || {};
$(function () {
    abp.modals.apiResourceUpdate = function () {
        var initModal = function (publicApi, args) {

            var l = abp.localization.getResource('AbpIdentityServer');

            var $form = publicApi.getForm();

            var getUniqueId = function () {
                function s4() {
                    return Math.floor((1 + Math.random()) * 0x10000)
                        .toString(16)
                        .substring(1);
                }
                return 'A' + s4() + s4() + s4();
            };

            var replaceAll = function (str, placeholder, replacer) {
                if ((replacer).includes(placeholder)) {
                    return str;
                }
                while (str.includes(placeholder)) {
                    str = str.replace(placeholder, replacer);
                }
                return str;
            };

            $(document).on('click', '.otherClaim', function (event) {

                event.preventDefault();

                var otherId = $(this).attr("id");
                var claimName = $(this).attr("claim-name");
                var name = otherId.substring(0, otherId.length - "OtherId".length);
                var inputId = name + "InputId";
                var ownedId = name + "OwnedId";

                $("#" + ownedId).show();
                $("#" + otherId).hide();
                $("#" + inputId).val(claimName);
            });

            $(document).on('click', '.ownedClaim', function (event) {

                event.preventDefault();

                var ownedId = $(this).attr("id");
                var name = ownedId.substring(0, ownedId.length - "OwnedId".length);
                var inputId = name + "InputId";
                var otherId = name + "OtherId";

                $("#" + otherId).show();
                $("#" + ownedId).hide();
                $("#" + inputId).val("");
            });

            $(document).on('click', '.deleteScopeButton', function (event) {

                event.preventDefault();
                var uniqueeId = $(this).attr("data-scope-id");
                var deleteId = uniqueeId + "ApiScopeGroup";

                $("#" + deleteId).parent().remove();
            });

            var scopeIndex = $('#ScopesStartIndex').val();

            $("#AddNewScopeButton").on('click', function (event) {

                var name = $("#SampleScope_Name").val();
                var displayName = $("#SampleScope_DisplayName").val();
                var description = $("#SampleScope_Description").val();

                if (!name) {
                    abp.message.warn(abp.utils.formatString(l("MissingRequiredField"), l("Name")));
                    return;
                }

                if (!displayName) {
                    abp.message.warn(abp.utils.formatString(l("MissingRequiredField"), l("DisplayName")));
                    return;
                }

                if (!description) {
                    abp.message.warn(abp.utils.formatString(l("MissingRequiredField"), l("Description")));
                    return;
                }

                var uniqueeId = getUniqueId();

                $('.collapse').collapse('hide');

                var clone = $("#NewApiScopeGroup").clone();

                clone[0].innerHTML = replaceAll(clone[0].innerHTML, '{ScopeIndex}', scopeIndex.toString());
                clone[0].innerHTML = replaceAll(clone[0].innerHTML, '="NewScope', '="' + uniqueeId);
                clone[0].innerHTML = replaceAll(clone[0].innerHTML, '="#NewScope', '="#' + uniqueeId);
                clone[0].innerHTML = replaceAll(clone[0].innerHTML, '="CollapseId', '="Collapse' + uniqueeId + 'Id');
                clone[0].innerHTML = replaceAll(clone[0].innerHTML, '="#CollapseId', '="#Collapse' + uniqueeId + 'Id');

                var selects = $('#NewApiScopeGroup').find("input");
                $(selects).each(function (i) {
                    var select = this;
                    $(clone).find("input").eq(i).val($(select).val());
                    $(clone).find("input").eq(i).prop("checked", $(select).prop("checked"));
                    $(select).val("");
                });

                $(clone).find("#SampleScope_Name").attr('name', "ApiResource.Scopes[" + scopeIndex + "].Name");
                $(clone).find("#SampleScope_DisplayName").attr('name', "ApiResource.Scopes[" + scopeIndex + "].DisplayName");
                $(clone).find("#SampleScope_Description").attr('name', "ApiResource.Scopes[" + scopeIndex + "].Description");

                $(clone).find("#SampleScope_Required").attr('name', "ApiResource.Scopes[" + scopeIndex + "].Required");
                $(clone).find("#SampleScope_Required").next().attr('for', "ApiResource_Scopes_" + scopeIndex + "__Required");
                $(clone).find("#SampleScope_Required").attr('id', "ApiResource_Scopes_" + scopeIndex + "__Required");

                $(clone).find("#SampleScope_Emphasize").attr('name', "ApiResource.Scopes" + scopeIndex + ".Emphasize");
                $(clone).find("#SampleScope_Emphasize").next().attr('for', "ApiResource_Scopes_" + scopeIndex + "__Emphasize");
                $(clone).find("#SampleScope_Emphasize").attr('id', "ApiResource_Scopes_" + scopeIndex + "__Emphasize");

                $(clone).find("#SampleScope_ShowInDiscoveryDocument").attr('name', "ApiResource.Scopes[" + scopeIndex + "].ShowInDiscoveryDocument");
                $(clone).find("#SampleScope_ShowInDiscoveryDocument").next().attr('for', "ApiResource_Scopes_" + scopeIndex + "__ShowInDiscoveryDocument");
                $(clone).find("#SampleScope_ShowInDiscoveryDocument").attr('id', "ApiResource_Scopes_" + scopeIndex + "__ShowInDiscoveryDocument");

                $('#NewApiScopeGroup').find('.otherClaim').show();
                $('#NewApiScopeGroup').find('.ownedClaim').hide();

                $(clone).find("#WillBeCollapseBody").addClass("col-12 collapse");
                $(clone).find("#WillBeCollapseBody").attr('id', 'Collapse' + uniqueeId + 'Id');
                $(clone).find("#WillBeRemovedCard").removeClass("card");

                $(clone).find("#AddNewScopeButton").remove();

                clone.attr("id", uniqueeId + "ApiScopeGroup");

                clone.prepend(getHeader(name, uniqueeId));

                $("#NewApiScopeGroup").next().prepend('<li class="list-group-item"><div></div></li>');
                $("#NewApiScopeGroup").next().children().first().append(clone);

                scopeIndex++;
            });


            var getHeader = function (name, uniqueeId) {
                return '<div class="col col-10"><h5 class="m-0 py-1"> ' + name + '</h5></div> ' +
                    '<div class="col col-1">' +
                    '<button class="float-right btn btn-success btn-sm" ' +
                    'id="' + uniqueeId + 'CollapseButton" type="button" data-toggle="collapse" aria-expanded="false" ' +
                    ' aria-controls="Collapse' + uniqueeId + 'Id" data-target="#Collapse' + uniqueeId + 'Id" ' +
                    '> <i class="fa fa-pencil"></i> </button ></div ><div class="col col-1" > ' +
                    ' <button class="float-right deleteScopeButton btn btn-danger btn-sm" data-scope-id="' + uniqueeId + '" type="button"><i class="fa fa-trash"></i> </button>' +
                    '</div>';
            };

            var secretIndex = $('#SecretsStartIndex').val();
            var secretCount = $('#SecretsStartIndex').val();

            var getTableRow = function (type, value, description, expiration) {
                return "<tr>\r\n<td>\r\n" +
                    "                                        " + type + " </td><td>\r\n" +
                    "                                        " + value + "\r\n </td> <td>" +
                    "                                        " + description + "</td> <td>\r\n" +
                    "                                       " + expiration + " </td>\r\n<td hidden>\r\n " +
                    "                                       <input type=\"text\" name=\"ApiResource.Secrets[" + secretIndex + "].Type\"/ value=\"" + type + "\">\r\n " +
                    "                                       <input type=\"text\" name=\"ApiResource.Secrets[" + secretIndex + "].Value\" value=\"" + value + "\"/>\r\n " +
                    "                                       <input type=\"text\" name=\"ApiResource.Secrets[" + secretIndex + "].Description\" value=\"" + description + "\"/>\r\n" +
                    "                                        <input type=\"date\" name=\"ApiResource.Secrets[" + secretIndex + "].Expiration\" value=\"" + expiration + "\"/></td><td>" +
                    "                                       <button type=\"button\" class=\"btn btn-danger btn-sm float-right deleteSecretButton\">" +
                    "<i class=\"fa fa-trash\"></i>" +
                    "</button>" +
                    "</td></tr>";
            };

            $("#AddNewSecretButton").on('click', function (event) {

                event.preventDefault();

                var type = $("#SampleSecret_Type").val();
                var value = $("#SampleSecret_Value").val();

                if (!type) {
                    abp.message.warn(abp.utils.formatString(l("MissingRequiredField"), l("Type")));
                    return;
                }

                if (!value) {
                    abp.message.warn(abp.utils.formatString(l("MissingRequiredField"), l("Value")));
                    return;
                }

                var description = $("#SampleSecret_Description").val();
                var expiration = $("#SampleSecret_Expiration").val();

                $("#SampleSecret_Value").val("");
                $("#SampleSecret_Description").val("");
                $("#SampleSecret_Expiration").val("");

                var html = getTableRow(type, value, description, expiration);

                $("#SecretTableBodyId").append(html);

                secretIndex++;
                secretCount++;
                $("#SecretTableId").show();
            });

            $(document).on('click', '.deleteSecretButton', function (event) {

                event.preventDefault();

                var tag = $(this).parent().parent();

                var inputs = tag.find("input");
                $(inputs).each(function (i) {
                    $(this).val("");
                });

                tag.hide();
                secretCount--;

                if (secretCount == 0) {
                    $("#SecretTableId").hide();
                }

            });

            $("#SampleScope_Name").removeAttr("data-val-required");
            $("#SampleScope_DisplayName").removeAttr("data-val-required");
            $("#SampleScope_Description").removeAttr("data-val-required");

        };

        return {
            initModal: initModal
        };
    };
});