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

@using EnVisage.Code.HtmlHelpers
@using Microsoft.AspNet.Identity
@using EnVisage.Code
@{
	ViewBag.Title = "Expenditure Categories";
}
@section scripts
{
    <script type="text/javascript">
    	var ctr = 0;
    	var evdttbl = null;
    	var UOMArr = new Array();
    	init.push(function () {
    	    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;
                        if (UOMArr.indexOf(data.UOM) == -1) {
                            UOMArr.push(data.UOM);
                            $('span.filterColumn>select')
								.append('<option value="' + data.UOM + '" class="">' + data.UOM + '</option>');
                        }
                    
                        $('span.filterColumn>select>option:first').val('All units');
                        $('span.filterColumn>select>option:first').text('All units');
                        return uom;
                    }
                },
                { "mDataProp": "CreditDepartment" },
				{
				    "mData": function (data, type, full) {
				        @if (Html.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 ? '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 (Html.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>');
    	});

        $(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">
    <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>