Base solution for your next web application
Open Closed

Building Role and permissions view and getting selected perm #708


User avatar
0
sayram created

In two days i'm trying to build Role View. In fuct working permissions is beats me. But i decide to try what can i do.

I reasearched JsTree and Mvc at google. And i found Recursive and FlasObject samples.

public class FlatObject
    {
        public string Id { get; set; }
        public string ParentId { get; set; }
        public string Data { get; set; }

        public FlatObject(string name, string id, string parentId)
        {
            Data = name;
            Id = id;
            ParentId = parentId;
        }

    }
    public class RecursiveObject
    {
        public string Data { get; set; }
        public string Id { get; set; }
        public FlatTreeAttribute Attr { get; set; }
        public List<RecursiveObject> Children { get; set; }
    }

    public class FlatTreeAttribute
    {
        public string id;
        public bool selected;
    }

this is the create action of RoleController

public ActionResult Create()
        {

            var permissions = _permissionManager.GetAllPermissions(multiTenancySides: Abp.MultiTenancy.MultiTenancySides.Tenant);

            List<FlatObject> flatObject = new List<FlatObject>();

            foreach (var item in permissions)
            {
                if (item.Parent != null)
                {
                    flatObject.Add(new FlatObject(item.Name, item.Name, item.Parent.Name));
                }
                else
                {
                    flatObject.Add(new FlatObject(item.Name, item.Name, ""));
                }
            }

            var recursiveObjects = FillRecursive(flatObject, "");

            var viewModel = new CreateEditRoleViewModel
            {
                Permissions = recursiveObjects
            };

            return View(viewModel);
        }
private static List<RecursiveObject> FillRecursive(List<FlatObject> flatObjects, string parentId)
        {
            List<RecursiveObject> recursiveObjects = new List<RecursiveObject>();

            foreach (var item in flatObjects.Where(x => x.ParentId.Equals(parentId)))
            {
                recursiveObjects.Add(new RecursiveObject
                {
                    Data = item.Data,
                    Id = item.Id,
                    Children = FillRecursive(flatObjects, item.Id)
                });
            }

            return recursiveObjects;
        }

and here is the ViewModel

public class CreateEditRoleViewModel
    {
        public RoleDto Role { get; set; }
        //public IReadOnlyList<Permission> Permissions { get; set; }
        public List<RecursiveObject> Permissions { get; set; }
    }

Create View

<div id="data">
                                        <ul>
                                            @foreach (var item in Model.Permissions)
                                            {
                                                <li class="jstree-open">
                                                    @item.Data
                                                    <ul>
                                                        @foreach (var child in item.Children)
                                                        {
                                                            <li class="jstree-open">@child.Data</li>
                                                        }
                                                    </ul>
                                                </li>
                                            }
                                        </ul>
                                    </div>

and finally the java script

$(document).ready(function () {
    $('#data').jstree({

        "plugins": ["checkbox"]
    });

    $('#data').on("changed.jstree", function (e, data) {
        if (data.selected.length) {
            $(data.selected).each(function (idx) {
                var node = data.instance.get_node(data.selected[idx]);
            });
        }
    });
});

and the result.

Well, 1-) How can i get the selected roles for current user and reflect it to the jsTree. 2-) How can i handle the post values?

thank you.


No answer yet!