EnVisageOnline/Main/Source/EnVisage/Views/Company/Index.cshtml

@using EnVisage.Code
@model EnVisage.Models.CompanyModel
@{
    ViewBag.Title = "Company hierarchy";
}

@section scripts
{
    <script type="text/javascript">
        var ctr = 0;
        init.push(function () {
            $('#companies').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": document.URL,
                "sServerMethod": "POST",
                "aoColumns": [
                    { "mDataProp": "Name" },
                    { "mDataProp": "ProjectsCount" },
                    { "mDataProp": "TeamsCount" },
                    {
                        "mData": function (data, type, full) {
                            return (data.Clients || []).join(", ");
                        },
                        "bSortable": false,
                        "bSearchable": false
                    },
                    {
                        "mData": function (data, type, full) {
                            return (data.Views || []).join(", ");
                        },
                        "bSortable": false,
                        "bSearchable": false
                    },
                    {
                        "mData": function (data, type, full) {
                            @if (SecurityManager.CheckSecurityObjectPermission(Areas.Company, AccessLevel.Write))
							{
							<text>
                            ctr++;
                            return ('<a id="btnEdit' + ctr + '" onclick="return CheckLock(this.id, \'Company\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + 'class="btn btn-sm btn-primary popover-warning popover-dark" href="@Url.Action("Edit", "Company", new {id = "_rplcmnt_"})"><i class="fa fa-edit"></i> Edit</a> ' +
                                    '<a id="btnDelete' + ctr + '" onclick="return CheckLock(this.id, \'Company\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + ((data.ProjectsCount + data.TeamsCount) > 0 ? 'class="btn btn-sm btn-danger popover-warning popover-dark disabled" href="javascript:void(0);"' : 'class="btn btn-sm btn-danger popover-warning popover-dark" href="@Url.Action("Delete", "Company", new {id = "_rplcmnt_"})"') + ' ><i class="fa fa-trash-o"></i> Delete</a>')
                                .replace(/_rplcmnt_/g, data.Id);
                            </text>
							}
							else
							{
							<text>
                            return "";
                            </text>
							}
                        },
                        "bSortable": false,
                        "bSearchable": false
                    }],
            });
            @if (SecurityManager.CheckSecurityObjectPermission(Areas.Company, AccessLevel.Write))
			{
			<text>
            $('#companies_wrapper .table-caption').html('<a class="btn btn-primary" href="#" onclick="loadAddCompanyModal()"><i class="fa fa-plus"></i> Add Business Unit</a>');
            </text>
			}
            $('#companies_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
            $('#companies_wrapper .dataTables_processing').addClass("table-caption");
            $('#companies_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
        });

        function loadAddCompanyModal() {
            $('.divForCreate').load('@Url.Action("AddEditCompany", "Company")', function () {
                $(".innerForm input").removeData("validator");
                $(".innerForm input").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parseDynamicContent('.innerForm');

                $('#@Html.IdFor(model => model.Watchers)').select2();
                $('#@Html.IdFor(model => model.Contributors)').select2();

                var selectedWatchersAsText = '@Model.WatchersAsText';
                var selectedContributorsAsText = '@Model.ContributorsAsText';

                var watchersAsArray = selectedWatchersAsText.split(',');
                var contributorsAsArray = selectedContributorsAsText.split(',');

                $('#@Html.IdFor(model => model.Watchers)').select2('val', watchersAsArray);
                $('#@Html.IdFor(model => model.Contributors)').select2('val', contributorsAsArray);

                $('#btnsave').click(function () {
                    if ($(this).parents('form').valid())
                        blockUI();
                });
                $('#modalAddCompany').modal('show');
            });
        }
    </script>
}

<div class="panel form-horizontal">
    <div class="panel-heading">
        <span class="panel-title">Company</span>
    </div>
    <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 radio">
                @Html.DisplayFor(model => model.Name)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ProjectsCount, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10 radio">
                @Html.DisplayFor(model => model.ProjectsCount)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CompaniesCount, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10 radio">
                @Html.DisplayFor(model => model.CompaniesCount)
            </div>
        </div>
        @if (SecurityManager.CheckSecurityObjectPermission(Areas.Company, AccessLevel.Write))
        {
            <div class="form-group" style="margin-bottom: 0;">
                <div class="col-sm-offset-2 col-sm-10">
                    <a id="btnEdit" onclick="return CheckLock(this.id, 'Company', '@Model.Id')" data-toggle="popover" data-placement="left" class="btn btn-primary popover-warning popover-dark" href="@Url.Action("EditParent", "Company", new { id = Model.Id })"><i class="fa fa-edit"></i> Edit</a>
                </div>
            </div>
        }
    </div>
</div>

<div class="table-light table-responsive">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="companies">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Number of Projects
                </th>
                <th>
                    Number of Teams
                </th>
                <th>
                    Clients
                </th>
                <th>
                    Views
                </th>
                <th style="width:129px;">

                </th>
            </tr>
        </thead>
    </table>
</div>

<div id="modalAddCompany" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
    <div class="modal-dialog divForCreate">

    </div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->