Improve resource permission modal UX and fix heading

modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/AddResourcePermissionManagementModal.cshtml

@@ -35,7 +35,7 @@
                 <span class="text-danger field-validation-valid" data-valmsg-for="AddModel.ProviderKey" data-valmsg-replace="true"></span>
             </div>
             <div class="mb-3" id="permissionList">
-                <h5>@L["ResourcePermissionPermissions"]</h5>
+                <h4>@L["ResourcePermissionPermissions"]</h4>
                 <div class="form-check form-switch mb-2">
                     <input class="form-check-input" id="grantAllresourcePermissions" type="checkbox">
                     <label class="form-check-label" for="grantAllresourcePermissions">@L["GrantAllResourcePermissions"]</label>

modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/UpdateResourcePermissionManagementModal.cshtml

@@ -23,7 +23,7 @@
         <input asp-for="@Model.ProviderKey" />
         <abp-modal-body>
             <div class="mb-3" id="permissionList">
-                <h5>@L["ResourcePermissionPermissions"]</h5>
+                <h4>@L["ResourcePermissionPermissions"]</h4>
                 <div class="form-check form-switch mb-2">
                     <input class="form-check-input" id="grantAllresourcePermissions" type="checkbox" checked="@Model.ResourcePermissions.Permissions.All(x => x.IsGranted)">
                     <label class="form-check-label" for="grantAllresourcePermissions">@L["GrantAllResourcePermissions"]</label>

modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/add-resource-permission-management-modal.js

@@ -54,10 +54,38 @@ var abp = abp || {};
         if ($providerKey.val()) {
             $permissionManagementForm.valid();
         }
+        var providerKey = $providerKey.val();
+        if (!providerKey) {
+            $items.prop('checked', false);
+            $all.prop("checked", false);
+            return;
+        }
+
+        $items.prop('disabled', true);
+        var resourceName = $("#ResourceName").val();
+        var resourceKey = $("#ResourceKey").val();
+        var providerName = $('input[name="AddModel.ProviderName"]:checked').val();
+        volo.abp.permissionManagement.permissions.getResourceByProvider(resourceName, resourceKey, providerName, providerKey).then(function (result) {
+            $items.prop('disabled', false);
+            var grantedPermissionNames = result.permissions.filter(function (p) {
+                return p.isGranted === true;
+            }).map(function (p) {
+                return p.name;
+            });
+            $items.each(function () {
+                var $checkbox = $(this);
+                if (grantedPermissionNames.indexOf($checkbox.val()) >= 0) {
+                    $checkbox.prop('checked', true);
+                } else {
+                    $checkbox.prop('checked', false);
+                }
+            });
+            $all.prop("checked", $items.length === $items.filter(":checked").length);
+        });
     });
 
     $permissionManagementForm.submit(function () {
-         $(this).valid();
+        $(this).valid();
     });
 
 })(jQuery);