cshtml View:


@model ...UserManagementViewModel
@using ...BackOfficeSite
@using Kendo.Mvc.UI
@{
    ViewBag.Title = Resources.User.UserManagement;
    Layout = "~/Views/Shared/_LayoutBO.cshtml";
}

@using BayView.Ashram.Presentation.BackOfficeSite.Models


@section scripts
{
    <script type="text/javascript" src="@Links.Scripts.ThirdParty.kendo_aspnetmvc_min_js"></script>
    <script type="text/javascript" src="@Links.Scripts.ashram_bo_kendogrid_js"></script>
    <script type="text/javascript" src="@Links.Scripts.ashram_bo_userManagement_js"></script>

    <script type="text/javascript">
        ashram.bo.kendogrid.ActionHeaderTitle = '@Resources.User.tbl_Actions';

        ashram.bo.userManagement.urls = {
            editUserUrl: '@Url.Action("UserInfo", "User")',
            deactivateUserUrl: '@Url.Action("DeactivateUser", "User")',
            activateUserUrl: '@Url.Action("ActivateUser", "User")',
            eventLogUrl: '@Url.Action("EventLog", "User")',
            unlockUserUrl: '@Url.Action("UnlockUser", "User")',
            closeUserUrl: '@Url.Action("CloseUser", "User")'
        };

        ashram.bo.userManagement.messages = {
            editUser: '@Resources.User.EditUser',
            deactivateUser: '@Resources.User.DeactivateUser',
            deactivateUserConfirm: '@Resources.User.DeactivateUserConfirm',
            activateUser: '@Resources.User.ActivateUser',
            activateUserConfirm: '@Resources.User.ActivateUserConfirm',
            unlockUser: '@Resources.User.UnlockUser',
            unlockUserConfirm: '@Resources.User.UnlockUserConfirm',
            closeUser: '@Resources.User.CloseUser',
            closeUserConfirm: '@Resources.User.CloseUserConfirm',
            userManagement: '@Resources.User.UserManagement',
            success: "@Resources.Common.Success",
            eventLog: "@Resources.User.EventLog",
            resetPassword: "@Resources.User.ResetPassword",
            resetPasswordConfirm: "@Resources.User.ResetPasswordConfirm",
            passwordResetSucceed: "@Resources.User.PasswordResetSucceed",
            passwordResetFail: "@Resources.User.PasswordResetFail"
        };

        ashram.bo.userManagement.globals = {
            defaultDropDownOption: '@Resources.Common.Criteria_DropDown_DefaultOption',
            statusActive: '@Resources.User.StatusActive',
            statusInactive: '@Resources.User.StatusInactive',
            statusClosed: '@Resources.User.StatusClosed',
            yesLabel: '@Resources.Common.Yes_Label',
            noLabel: '@Resources.Common.No_Label'
        };

        ashram.bo.up = {
            view: '@Model.Permissions.UserAccount.Access',
            edit: '@Model.Permissions.UserAccount.Modify',
            create: '@Model.Permissions.UserAccount.Create',
            chngPass: '@Model.Permissions.UserAccount.ChangeMyPassword',
            resetPass: '@Model.Permissions.UserAccount.ResetPassword'
        };
    </script>
}

<h3>@Resources.User.UserManagement</h3>
@* TODO: uncomment when clarifications about users search provided *@
<div id="usersSearchCriteria">
    <div id="users_criteria_div" class="form-inline hide-content">
        <div class="fields_row first">

            <div class="field_col first">
                <label>User Name:</label>
                @Html.DropDownManagementFilters("UserName_","selectpicker")
                <input type="text" id="txtUserName">
            </div>

            <div class="field_col second">
                <label>Email:</label>
                @Html.DropDownManagementFilters("Email_","selectpicker")
                <input type="text" id="txtEmail">
            </div>

            <div class="field_col third">
                <label>Status:</label>
                @Html.DropDownUserStatuses("UserStatusID", null, HtmlHelper.AnonymousObjectToHtmlAttributes(new { @class = "selectpicker" }), Resources.Common.Criteria_DropDown_DefaultOption)
            </div>
        </div>

        <div class="fields_row second">
            <div class="field_col first">
                <label>First Name:</label>
                @Html.DropDownManagementFilters("FirstName_","selectpicker")
                <input type="text" id="txtFirstName">
            </div>

            <div class="field_col second">
                <label>Last Name:</label>
                @Html.DropDownManagementFilters("LastName_","selectpicker")
                <input type="text" id="txtLastName">
            </div>

            <div class="field_col third">
                <label>Is Locked:</label>
                @Html.DropDownYesNo("IsLockedUser", Resources.Common.Criteria_DropDown_DefaultOption, string.Empty)
            </div>
        </div>

        <div class="fields_row third">
            <div class="field_col first">
                <label>Role:</label>
                @Html.DropDownRoles(Resources.Common.Criteria_DropDown_DefaultOption, string.Empty, Model.RolesSelectList)
            </div>
        </div>

        <div class="fields_row fourth">
            <input id="btnSearch" type="submit" class="action btn btn-primary" value="@Resources.Role.Search">
        </div>
    </div>
    <a href="#" class="hide-head"></a>
</div>

<div id="bulkGrid">

    @(Html.Kendo().Grid<UserSearchResultModel>()
            .Name("grid")

            .Columns(columns =>
            {
                columns.Bound(p => p.UserName).Title(Resources.User.tbl_UserName);
                columns.Bound(p => p.EmailAddress).Title(Resources.User.tbl_EmailAddress);
                columns.Bound(p => p.FirstName).Title(Resources.User.tbl_FirstName);
                columns.Bound(p => p.LastName).Title(Resources.User.tbl_LastName);
                columns.Bound(p => p.Role).Title(Resources.User.tbl_Role);
                columns.Bound(p => p.CreatedDate).Title(Resources.User.tbl_DateCreated);
                columns.Bound(p => p.ModifiedDate).Title(Resources.User.tbl_DateModified).HtmlAttributes(new { @class = "tdDateModified" });
                columns.Bound(p => p.ModifiedBy).Title(Resources.User.tbl_ModifiedBy).HtmlAttributes(new { @class = "tdModifiedBy" });
                columns.Bound(p => p.Status).Title(Resources.User.tbl_Status).HtmlAttributes(new { @class = "tdStatus" });
                columns.Bound(p => p.IsLockedStr).Title(Resources.User.tbl_IsLocked).HtmlAttributes(new { @class = "tdIsLocked" });
                columns.Template(p => p)
               .ClientTemplate("<div class='user_Action_Wraper' data-id='#=UserId#' data-status='#=Status#' data-locked='#=IsLockedStr#'></div>")
               .Title((Resources.User.tbl_Actions));

            })
                .Pageable(pager => pager.PageSizes(WebConfigValues.GridItemsPerPage).ButtonCount(5).Input(true))
                .Sortable()
                .Events(events => events.DataBound(@<text>
                    function () {
                        ashram.bo.userManagement.populateIcons.apply(this, arguments);
                        ashram.bo.utils.applyGridScrollToTopBehavior.apply(this, arguments);
                    }
                </text>
                ))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Model(model => model.Id(p => p.UserId))
                    .Read(read => read.Action("UsersRead", "User"))
                )
                )
</div>



js file:

ashram.bo.userManagement = {

    init: function () {
        $('#btnSearch').click(ashram.bo.userManagement.searchData);
        $("#RoleID").select2();
        $("#RoleID").select2("val", "");
    },

    //Deactivate user section
    deactivateUser: function (userId) {
        ashram.bo.window.confirm('',
            ashram.bo.userManagement.messages.deactivateUser,
            ashram.bo.userManagement.messages.deactivateUserConfirm,
            function (confirm) {
                if (confirm) {
                    onConfirmDeactivateUser(userId);
                }
            });

        onConfirmDeactivateUser = function (userId) {
            ashram.bo.utils.loader(true);

            var data = {
                userId: userId
            };
            ashram.bo.proxy.deactivateUser(data, onSuccessDeactivateUserCallback, ashram.bo.userManagement.onFailureCallback);
        };

        onSuccessDeactivateUserCallback = function (response) {
            ashram.bo.utils.loader(false);

            var tr = $("#trUser" + response.Content.UserId);

            ashram.bo.userManagement.updateGridRowStatus(response, tr);

            tr.find(".action_deactivate_user").hide();
            tr.find(".action_activate_user").show();

            ashram.bo.userManagement.showSuccessMessage(response);
        };

    },

    //Activate user section
    activateUser: function (userId) {
        ashram.bo.window.confirm('',
            ashram.bo.userManagement.messages.activateUser,
            ashram.bo.userManagement.messages.activateUserConfirm,
            function (confirm) {
                if (confirm) {
                    onConfirmActivateUser(userId);
                }
            });

        onConfirmActivateUser = function (userId) {
            ashram.bo.utils.loader(true);

            var data = {
                userId: userId
            };
            ashram.bo.proxy.activateUser(data, onSuccessActivateUserCallback, ashram.bo.userManagement.onFailureCallback);
        };

        onSuccessActivateUserCallback = function (response) {
            ashram.bo.utils.loader(false);

            var tr = $("#trUser" + response.Content.UserId);

            ashram.bo.userManagement.updateGridRowStatus(response, tr);

            tr.find(".action_deactivate_user").show();
            tr.find(".action_activate_user").hide();

            ashram.bo.userManagement.showSuccessMessage(response);
        };
    },

    //Unlock user section
    unlockUser: function (userId) {
        ashram.bo.window.confirm('',
            ashram.bo.userManagement.messages.unlockUser,
            ashram.bo.userManagement.messages.unlockUserConfirm,
            function (confirm) {
                if (confirm) {
                    onConfirmUnlockUser(userId);
                }
            });

        onConfirmUnlockUser = function (userId) {
            ashram.bo.utils.loader(true);

            var data = {
                userId: userId
            };
            ashram.bo.proxy.unlockUser(data, onSuccessUnlockUserCallback, ashram.bo.userManagement.onFailureCallback);
        };

        onSuccessUnlockUserCallback = function (response) {
            ashram.bo.utils.loader(false);

            var tr = $("#trUser" + response.Content.UserId);

            ashram.bo.userManagement.updateGridRowIsLocked(response, tr);

            tr.find(".action_unlock_user").hide();

            ashram.bo.userManagement.showSuccessMessage(response);
        };

    },

    //reset Password section
    resetPassword: function (userId) {
        ashram.bo.window.confirm('',
            ashram.bo.userManagement.messages.resetPassword,
            ashram.bo.userManagement.messages.resetPasswordConfirm,
            function (confirm) {
                if (confirm) {
                    onConfirmResetPassword(userId);
                }
            });

        onConfirmResetPassword = function (userId) {
            ashram.bo.utils.loader(true);

            var data = {
                userId: userId
            };
            ashram.bo.proxy.resetPassword(data, onSuccessResetPasswordCallback, onFailureResetPasswordCallback);
        };

        onSuccessResetPasswordCallback = function (response) {
            ashram.bo.utils.loader(false);
            ashram.bo.window.info('', ashram.bo.userManagement.messages.success, ashram.bo.userManagement.messages.passwordResetSucceed);

            var tr = $("#trUser" + response.Content.UserId);
            tr.find("td.tdDateModified").html(response.Content.ModifiedDate);
            tr.find("td.tdModifiedBy").html(response.Content.ModifiedBy);
        };

        onFailureResetPasswordCallback = function (response) {
            ashram.bo.utils.loader(false);

            ashram.bo.window.error('', ashram.bo.messages.popUpErrorTitle, ashram.bo.userManagement.messages.passwordResetFail);
        };
    },

    onFailureCallback: function (response) {
        ashram.bo.utils.loader(false);

        var message = response.Content && response.Content.Message
            ? response.Content.Message
            : ashram.bo.messages.technicalError;

        ashram.bo.window.error('', ashram.bo.messages.popUpErrorTitle, message);
    },

    updateGridRowStatus: function (response, tr) {
        var uid = tr.data("uid");

        tr.find("td.tdStatus").html(response.Content.Status);
        tr.find("td.tdDateModified").html(response.Content.ModifiedDate);
        tr.find("td.tdModifiedBy").html(response.Content.ModifiedBy);

        var dataRow = $('#grid').data("kendoGrid").dataSource.getByUid(uid)
        dataRow.Status = response.Content.Status;
    },

    updateGridRowIsLocked: function (response, tr) {
        var uid = tr.data("uid");

        tr.find("td.tdIsLocked").html(response.Content.IsLockedStr);
        tr.find("td.tdDateModified").html(response.Content.ModifiedDate);
        tr.find("td.tdModifiedBy").html(response.Content.ModifiedBy);

        var dataRow = $('#grid').data("kendoGrid").dataSource.getByUid(uid)
        dataRow.IsLockedStr = response.Content.IsLockedStr;
    },

    showSuccessMessage: function (response) {
        var message = response.Content && response.Content.Message
            ? response.Content.Message
            : ashram.bo.userManagement.messages.success;
        ashram.bo.window.info('', ashram.bo.userManagement.messages.success, message);
    },


    searchData: function () {
        var filter = new Array();

        var userNameCmp = ashram.bo.kendogrid.getKendoCmpByManagementFilterValue($("#UserName_CompareBy").val());
        var userName = $("#txtUserName").val();

        var emailCmp = ashram.bo.kendogrid.getKendoCmpByManagementFilterValue($("#Email_CompareBy").val());
        var email = $("#txtEmail").val();

        var firstNameCmp = ashram.bo.kendogrid.getKendoCmpByManagementFilterValue($("#FirstName_CompareBy").val());
        var firstName = $("#txtFirstName").val();

        var lastNameCmp = ashram.bo.kendogrid.getKendoCmpByManagementFilterValue($("#LastName_CompareBy").val());
        var lastName = $("#txtLastName").val();

        if (userName && userName != "") {
            filter.push({ field: "UserName", operator: userNameCmp, value: userName });
        }
        if (email && email != "") {
            filter.push({ field: "EmailAddress", operator: emailCmp, value: email });
        }
        if (firstName && firstName != "") {
            filter.push({ field: "firstName", operator: firstNameCmp, value: firstName });
        }
        if (lastName && lastName != "") {
            filter.push({ field: "LastName", operator: lastNameCmp, value: lastName });
        }

        var role = $("#RoleID option:selected").text();
        var status = $("#UserStatusID option:selected").text();
        var isLocked = $("#IsLockedUser option:selected").text();

        if (role && role != ashram.bo.userManagement.globals.defaultDropDownOption) {
            filter.push({ field: "Role", operator: "eq", value: role });
        }

        if (status && status != ashram.bo.userManagement.globals.defaultDropDownOption) {
            filter.push({ field: "Status", operator: "eq", value: status });
        }

        if (isLocked && isLocked != ashram.bo.userManagement.globals.defaultDropDownOption) {
            filter.push({ field: "IsLockedStr", operator: "eq", value: isLocked });
        }

        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.filter(filter);
    },



    populateIcons: function (e) {
        var upCheck = ashram.bo.up;

        var wrappers = $(grid).find(".user_Action_Wraper");

        for (var i = 0; i < wrappers.length; i++) {
            var userId = $(wrappers[i]).data("id");
            var status = $(wrappers[i]).data("status");
            var isLocked = $(wrappers[i]).data("locked");

            $(wrappers[i]).parent().parent().attr("id", "trUser" + userId);


            $(wrappers[i]).append("<a href='javascript:ashram.bo.userManagement.deactivateUser(\"" + userId + "\")'" +
                " class='action_deactivate_user' title='" + ashram.bo.userManagement.messages.deactivateUser + "' >"
                + ashram.bo.userManagement.messages.deactivateUser + "</a> ");

            $(wrappers[i]).append("<a href='javascript:ashram.bo.userManagement.activateUser(\"" + userId + "\")'" +
                " class='action_activate_user' title='" + ashram.bo.userManagement.messages.activateUser + "' >"
                + ashram.bo.userManagement.messages.activateUser + "</a> ");

            if (upCheck.edit == "True") {
                $(wrappers[i]).append("<a href='" + ashram.bo.userManagement.urls.editUserUrl + "/" + userId + "'" +
                    " class='action_edit_user' title='" + ashram.bo.userManagement.messages.editUser + "' >"
                    + ashram.bo.userManagement.messages.editUser + "</a> ");
            }

            $(wrappers[i]).append("<a href='javascript:ashram.bo.userManagement.unlockUser(\"" + userId + "\")'" +
                " class='action_unlock_user' title='" + ashram.bo.userManagement.messages.unlockUser + "' >"
                + ashram.bo.userManagement.messages.unlockUser + "</a> ");

            if (upCheck.resetPass == "True") {
                $(wrappers[i]).append("<a href='javascript:ashram.bo.userManagement.resetPassword(\"" + userId + "\")'" +
                    " class='action_reset_password' title='" + ashram.bo.userManagement.messages.resetPassword + "' >"
                    + ashram.bo.userManagement.messages.resetPassword + "</a> ");
            }

            $(wrappers[i]).append("<a href='" + ashram.bo.userManagement.urls.eventLogUrl + "/" + userId + "'" +
                " class='action_event_log' title='" + ashram.bo.userManagement.messages.eventLog + "' >"
                + ashram.bo.userManagement.messages.eventLog + "</a> ");

            if (status == ashram.bo.userManagement.globals.statusActive) {
                $(wrappers[i]).find(".action_activate_user").hide();
            } else {
                $(wrappers[i]).find(".action_deactivate_user").hide();
            }

            if (isLocked == ashram.bo.userManagement.globals.noLabel) {
                $(wrappers[i]).find(".action_unlock_user").hide();
            }
        }
    }

}