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

@using EnVisage.Code
@model EnVisage.Models.ExpenditureCategoriesListModel
@{
  ViewBag.Title = "Expenditure Categories";
}
@section scripts
{
    <script type="text/javascript">
        var ctr = 0;
        var evdttbl = null;
        var UOMArr = new Array();
        init.push(function() {
            // Parse incoming Uom list for data table filter
            var uomsForFilterJson = $('#unitsOfMeasureFilterValues').val();
            var uomsStruct = JSON.parse(uomsForFilterJson);

            if (uomsStruct && (uomsStruct.length > 0))
                for (var index = 0; index < uomsStruct.length; index++) {

                    UOMArr.push(uomsStruct[index].Name);
                }
            evdttbl = $('#uom').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": document.URL,
                "sServerMethod": "POST",
                "drawCallback": function(settings) {
                    $('.rowexpander').click(expandRow);
                    if (settings.json.sSearch_ != null &&
                        settings.json.sSearch_.length > 1 &&
                        settings.json.sSearch_[2].length > 0 &&
                        settings.aoPreSearchCols[2].sSearch.length === 0) {
                        $('span.filterColumn>select').val(settings.json.sSearch_[2]);
                    }
                },
                "aoColumns": [
                    {
                        "mDataProp": "Name",
                        "mRender": function(data, type, full) {
                            return '<a class="rowexpander" href="javascript:;"><i class="fa fa-plus-square" title="Expand"></i> ' +
                                data +
                                '</a>';
                        }
                    },
                    { "mDataProp": "TypeS" },
                    { "mDataProp": "UseTypeS" },
                    { "mDataProp": "GLName" },
                    { "mDataProp": "GLNumber" },
                    {
                        "mDataProp": "UOM",
                        @*"mData": function(data, type, full) {
                            var uom = data.UOM;
                            return uom;
                        }*@
                    },
                    { "mDataProp": "CreditDepartment" },
                    {
                        "mData": function(data, type, full) {
                            @if (SecurityManager.CheckSecurityObjectPermission(Areas.ExpenditureCategories, AccessLevel.Write))
                            {
                                <text>
                                    ctr++;
                                    return ('<a id="btnEdit' +
                                            ctr +
                                            '" onclick="return CheckLock(this.id, \'ExpenditureCategory\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' +
                                            'class="btn btn-sm btn-primary popover-warning popover-dark" href="@Url.Action("Edit", "ExpenditureCategory", new {id = "_rplcmnt_"})"><i class="fa fa-edit"></i> Edit</a> ' +
                                            '<a id="btnDelete' +
                                            ctr +
                                            '" onclick="return CheckLock(this.id, \'ExpenditureCategory\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' +
                                            (((data.ScenarioDetailCount > 0) || (data.ResourcesCount > 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", "ExpenditureCategory", new {id = "_rplcmnt_"})"'
                                            ) +
                                            ' ><i class="fa fa-trash-o"></i> Delete</a>')
                                        .replace(/_rplcmnt_/g, data.Id);
                                </text>
                            }
                            else
                            {
                                <text>
                                    return "";
                                </text>
                            }
                        }
                    }
                ]
            }).columnFilter({
                "aoColumns": [
                    { "type": "null" },
                    { "type": "null" },
                    { "type": "select", sSelector: "@Request.QueryString["UOM"]" }
                ]
            });


            @if (SecurityManager.CheckSecurityObjectPermission(Areas.ExpenditureCategories, AccessLevel.Write))
            {
                <text>
                    $('#uom_wrapper .table-caption').html(
                        '<a class="btn btn-primary" href="@Url.Action("Edit", "ExpenditureCategory")"><i class="fa fa-plus"></i> Add Expenditure Category</a>');
                </text>
            }
            $('#uom_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
            $('#uom_wrapper .dataTables_processing').addClass("table-caption");
            $('#uom_wrapper .dataTables_processing').html(
                '<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');

            // SA. ENV-723. Fill data table Uoms filter with values
            var filterSelectControl = $('span.filterColumn>select');

            for (var index = 0; index < UOMArr.length; index++) {
                var optionHtml = '<option value="' + UOMArr[index] + '" class="">' + UOMArr[index] + '</option>';
                filterSelectControl.append(optionHtml);
            }

            $(filterSelectControl).children('option:first').val('All units');
            $(filterSelectControl).children('option:first').text('All units');
        });

        $(document).ready(function() {
            setTimeout(function() {
                    $('.DT-lf-right>div:first').after(
                        '<div class="DT-search" style="vertical-align: middle"><div id="uom_filter" class="dataTables_filter"></div></div>');
                    $('#uom_filter').append($('span.filter_select'));
                    $('span.filter_select select').width(128);
                    $('span.filter_select select').height(28);
                },
                500);
        });

        function expandRow(evt) {
            var tr = $(this).closest('tr');
            var row = evdttbl.DataTable().row(tr);

            if (row.child.isShown()) {
                $(this).children("i.fa").removeClass("fa-minus-square").addClass("fa-plus-square");
                row.child.hide();
            } else {
                $(this).children("i.fa").removeClass("fa-plus-square").addClass("fa-minus-square");
                row.child("<div id='infoPanel" + row.data().Id + "'></div>").show();
                $('#infoPanel' + row.data().Id).closest('td').addClass("no-padding no-border");
                var loadUrl = '@Url.Action("Details", "ExpenditureCategory", new {id = "_rplcmnt_"})'
                    .replace(/_rplcmnt_/g, row.data().Id);
                $('#infoPanel' + row.data().Id).load(loadUrl,
                    function(response, status, xhr) {
                        if (status == "error") {
                            showErrorModal('Loading error',
                                'We are sorry but there was an error, please try again later.');
                        }
                    });
            }
        }
    </script>
}
<div class="table-light table-responsive">
  @Html.HiddenFor(x => x.UnitsOfMeasureJson, new { id = "unitsOfMeasureFilterValues" })
  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="uom">
    <thead>
      <tr>
        <th>Expenditure Category Name
        </th>
        <th>Type
        </th>
        <th>Usage
        </th>
        <th>GL Account Name
        </th>
        <th>GL Account Number
        </th>
        <th>Unit of Measure
        </th>
        <th>Cost Center
        </th>
        <th></th>
      </tr>
    </thead>
    <tfoot style="display: none;">
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </tfoot>
  </table>
</div>