EnVisageOnline/Main-RMO/Source/EnVisage/Views/Role/Edit.cshtml

@model EnVisage.Models.RoleModel
@using EnVisage.Code.HtmlHelpers

@{
    ViewBag.Title = (Model.Id != Guid.Empty) ? "Edit " + Model.Name : "Add New Role";
}

@section Scripts
{
    <link rel="stylesheet" href="~/Content/stylesheets/jquery.treegrid.css">
    <script type="text/javascript" src="~/Scripts/jquery.treegrid.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.treegrid.bootstrap3.js"></script>
    <script type="text/javascript" src="~/Scripts/ProjectTree.js"></script>
    <script type="text/javascript">
        emulateNavUrl = "/Role";

        init.push(function () {
            @if (Model.Id != Guid.Empty)
            {
                <text>
            StartEdit('Role', '@Model.Id', "#btnDelete", "#btnsave", "erorMsgPlaceholder");
            </text>
            }

            $('.tree').treegrid();

            ProjectTree.buildProjectTree('@Url.Action("GetProjectAccessTree", "Role")?roleId=@Model.Id');

            $("input[name='areaswrite']").click(function () {
                var val = $(this).val();
                var read = $("input[value='" + val + "'][name='areasread']");
                if (read.length > 0 && this.checked)
                    setChecked(read);
            });
            $('#btnsave').click(function () {
                if ($(this).parents('form').valid()) {
                    blockUI();
                    beforeSubmit();
                }
            });
        });
        var ProjectListArray = []
        var AreaListArray = [];
        function projectlist(id, read, write) {
            this.id = id;
            this.p = { read: read, write: write }
        }
        function arealist(id, read, write) {
            this.id = id;
            this.p = { read: read, write: write }
        }
        function beforeSubmit() {
            $.each($("input[name='areasread']:checked"), function (i, o) {

                var value = $(this).val();
                var read = true;
                var a = new arealist(value, read, false);
                var results = $.grep(AreaListArray, function (e) { return e.id === value; });
                if (results.length == 1) {
                    a = results[0];
                    var i = ProjectListArray.indexOf(pl);
                    a.p.read = read;
                    AreaListArray[i] = a;
                }
                else
                    AreaListArray.push(a);


            });
            $.each($("input[name='projectlistread']:checked"), function (i, o) {
                var value = $(this).val();
                var read = true;
                var pl = new projectlist(value, read, false);
                var results = $.grep(ProjectListArray, function (e) { return e.id === value; });
                if (results.length == 1) {
                    pl = results[0];
                    var i = ProjectListArray.indexOf(pl);
                    pl.p.read = read;
                    ProjectListArray[i] = pl;
                }
                else
                    ProjectListArray.push(pl);
            });

            $.each($("input[name='projectlistwrite']:checked"), function (i, o) {
                var value = $(this).val();
                var write = true;
                var pl = new projectlist(value, false, write);
                var results = $.grep(ProjectListArray, function (e) { return e.id === value; });
                if (results.length == 1) {
                    pl = results[0];
                    var i = ProjectListArray.indexOf(pl);
                    pl.p.write = write;
                    ProjectListArray[i] = pl;
                }
                else
                    ProjectListArray.push(pl);
            });
            $.each($("input[name='areaswrite']:checked"), function (i, o) {
                var value = $(this).val();
                var write = true;
                var a = new arealist(value, false, write);
                var results = $.grep(AreaListArray, function (e) { return e.id === value; });
                if (results.length == 1) {
                    a = results[0];
                    var i = ProjectListArray.indexOf(a);
                    a.p.write = write;
                    AreaListArray[i] = a;
                }
                else
                    AreaListArray.push(a);
            });
            var id = $("input[name='Id']").val();
            var name = $("input[name='Name']").val();
            var projecttree = { ProjectList: ProjectListArray, AreaList: AreaListArray};
            var rolemodel = { Id: id, Name: name};

            var form = $('#frmEdit');
            var token = $('input[name="__RequestVerificationToken"]', form).val();
            var permissiondata = { projecttree: projecttree, rolemodel: rolemodel };
            var CommonErrorMessage = 'An error occurred while processing your request. Please, try again later.';
            $.ajax({
                type: "post",
                url: siteRoot + "/Role/Edit",
                context: document.body,
                data: { __RequestVerificationToken: token, editrole: permissiondata },
                error: function (response) {
                    unblockUI();
                    showErrorModal('Oops!', CommonErrorMessage);
                },
                success: function (response) {
                    window.location.href = response.Url;

                }
            });
        }

        function setChecked(o) {
            o.prop("checked", "checked");
        }
    </script>
}

<div id="erorMsgPlaceholder"></div>

@using (Html.BeginForm("Edit", "Role", FormMethod.Post, new { @class = "panel form-horizontal", id = "frmEdit" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(t => t.Id)
    @Html.Hidden("Id", Model.Id);
    <div class="panel-body">
        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="UserName">Permissions</label>
            <div class="col-sm-10">
                <table cellspacing="0" border="0">
                    <tbody>
                        <tr>
                            <td style="padding-top: 7px; vertical-align:top;">
                                <table>
                                    <tbody>
                                        @Html.GetAreaItemsList(@Url, Model)
                                    </tbody>
                                </table>
                            </td>
                            <td style="padding-top: 7px;padding-left:50px;vertical-align:top;" id="projectTree"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        @Html.ValidationSummary(false, "The role could not be saved due to the following errors:")
        <div class="form-group" style="margin-bottom: 0;">
            <div class="col-sm-offset-2 col-sm-10">
                <a class="btn btn-primary" href="@Url.Action("Index", "Role")"><i class="fa fa-backward"></i> Back to list</a>
                <button type="button" class="btn btn-success" id="btnsave"><i class="fa fa-save"></i> Save</button>
                @if (Model.Id != Guid.Empty)
                {
                    <a id="btnDelete" class="btn btn-danger" href="@Url.Action("Delete", "Role", new {@id = Model.Id})"><i class="fa fa-trash-o"></i> Delete</a>
                }
            </div>
        </div>
    </div>
}