Mr.Combet Webshell 🔥

View File Name : _BaselineExpenseTab.cshtml


@model RER_Project.DataAccess.ViewModels.Baseline.BaselineViewModel
@using RER_Project.Core.Helpers;
@using RER_Project.BusinessLayer.BusinessService

@{
    var meta = AppUserService.GetCurrent();
}

@if (Model.MemberDetailView.IsActive)
{
    <form id="CreateExpenses">
        <input type="hidden" id="ExpenseId" name="Id" />

        @*<input type="hidden" class="form-control" name="ExpenseDate" id="expenseDate" />
            <input type="hidden" class="form-control" name="ExpenseDateNepali" id="expenseDateNepali" />*@
        <div id="eror_msg"></div>
        <div class="row">
            @*<div class="form-group col-md-2">
                    <label><strong>Fiscal Year</strong></label>
                    <select type="text" class="form-control required" name="FiscalYear" id="FiscalYearExpense" data-api="/fiscal_year/select"></select>
                </div>*@
            @*<div class="form-group col-md-2">
                    <label><strong>Quadrimester</strong></label>
                    <select type="text" class="form-control required" name="Quadtrimester" id="QuadtrimesterExpense" data-api="/quadtrimester/select"></select>
                </div>*@
            <div class="form-group col-md-2">
                <label><strong>Commodity </strong></label>
                <select type="text" class="form-control required" name="Commodity" id="CommodityExpense" onchange="expenseCommodityChangeCalled()">
                    <option value="@Model.MemberDetailView.Commodity">@Model.MemberDetailView.CommodityName</option>
                    <option value="6">Others</option>
                </select>
            </div>

            <div class="form-group col-md-2 hideshow">
                <label><strong>Product Name</strong></label>
                <select type="text" class="form-control  required" name="Category" id="CategoryExpense" data-api="/commodity_subtype/select"></select>
            </div>
            <div class="form-group col-md-2">
                <label><strong>Expense Head</strong></label>
                <select type="text" class="form-control required" name="ExpenseHead" id="ExpenseHead" data-api="/expense-head/select"></select>
            </div>

            <div class="form-group col-md-2">
                <label><strong>Expense Amount</strong></label>
                <div class="inputWithIcon">
                    <input type="text" class="curr form-control required currencyFormatter" onkeypress="return isNumberKey(this,event)" maxlength="10" id="ExpenseAmount" name="ExpenseAmount">
                    <span><strong>Rs</strong></span>
                </div>
                @*<input type="text" onkeypress="return isNumberKey(this,event)" maxlength="8" class="required form-control" id="ExpenseAmount" name="ExpenseAmount" />*@
            </div>

            <div class="form-group col-md-4">
                <label class="align-label-btm">&nbsp;&nbsp;</label>
                @if (Model.MemberDetailView.IsActive)
                {
                    if (meta.RoleId == (int)EnumRoleHelper.Roles.Admin || meta.RoleId == (int)EnumRoleHelper.Roles.MnE || meta.RoleId == (int)EnumRoleHelper.Roles.MnEOfficer)
                    {
                        <input type="button" value="Save" class="btn btn-primary" id="SubmitExpenses" />
                    }

                }
                <a href="/group-members?groupId=@Model.MemberDetailView.GroupId" class="btn btn-default"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i> Back</a>
            </div>

        </div>
        <div class="row">


        </div>




    </form>
}
<div class="row">
    <div class="form-group col-md-6">
        <div class="pull-left">
            <a class="btn btn-primary btnPrevious"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i> &nbsp;Previous</a>
            <a class="btn btn-primary btnNext">Next <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></a>
        </div>
    </div>

    <div class="form-group col-md-6">
        <div class="pull-right">
            @*<input type="button" value="Save" class="btn btn-primary" id="SubmitExpenses" />
                <a href="/groups" class="btn btn-default">Back</a>*@
        </div>
    </div>


</div>
<div>
    <div class="row">
        <div class="col-lg-12">

            <div class="ibox float-e-margins">
                <div id="output" style="margin: 10px;"></div>
            </div>
        </div>
    </div>

</div>
<div class="table-responsive" style="margin-top: 16px;">
    <table class="table table-bordered table-hover display" name="tblExpenses" id="tblExpenses">
        <thead>
            <tr>
                @*<th>Commodity</th>
                    <th>Product Name </th>*@
                <th>Expense Head</th>

                <th style="text-align:center">Expense Amount (Rs)</th>
                @if (Model.MemberDetailView.IsActive)
                {
                    <th>Action</th>
                }
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <h3>Total Expense : <span id="totalExpense"></span></h3>
    <br />
    <h3><u><span>Other Commodity</span></u></h3>

    <table class="table table-bordered table-hover display" name="tblExpenseForOtherCommodity" id="tblExpenseForOtherCommodity">
        <thead>
            <tr>
                <th>Expense Head</th>

                <th style="text-align:center">Expense Amount (Rs)</th>
                @if (Model.MemberDetailView.IsActive)
                {
                    <th>Action</th>
                }
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <h3>Total Expense : <span id="totalExpenseOther"></span></h3>

</div>



<script type="text/javascript">


    function loadExpenseList() {


        $("#CommodityExpense").trigger("change");

         WorkForce.loader.show();
             const ajax = request();

         function request() {

            const url = '/baseline/expenses/member/' + @Model.MemberDetailView.Id;

             return window.getAjaxRequest(url, "Get", @Model.MemberDetailView.Id);
            }


            ajax.done(function (response) {
                console.log(response);
              addExpensesToTable(response);
                WorkForce.loader.hide();


                var status = '@Model.MemberDetailView.IsActive';
                if (status === 'False') {
                    $('.hideshow').hide();
                }




                });

        ajax.fail(function (xhr) {
            ShowMessage("error", xhr.responseText);
        });
        }

    function addExpensesToTable(response) {
        debugger;
            console.log(response);
        $('#tblExpenses tbody > tr').remove();
         $('#tblExpenseForOtherCommodity tbody > tr').remove();

        var status = '@Model.MemberDetailView.IsActive';

        var table = $("#tblExpenses tbody");
        var tableForOtherCommodity = $("#tblExpenseForOtherCommodity tbody");

        var totalExpense = 0;
        var totalExpenseOther = 0;

            let group = response.reduce((r, a) => {

             r[a.category] = [...r[a.category] || [], a];
             return r;
            }, {});

        for (var key in group) {
            if (key !== '-') {
                var row = "<tr  style='line-height:30px;background-color:#edf0ee;color:black'>";
                var obj = group[key];


                row += "<th > Product : " + key + " ( " + '@Model.MemberDetailView.CommodityName' + " )" + "</th>";
                var sum = 0;
                obj.forEach(function (x) {
                    sum += parseFloat(x.expense_amount || 0);
                });
                row += "<th style='text-align:right'> Total : Rs. " + getNumberWithComma(sum) + "  </span></th><th class='hideshow'></th></tr>";
                sum = 0;
                obj.forEach(function (x) {

                    totalExpense += parseFloat(x.expense_amount || 0);

                    row += "<td>&nbsp;<strong>-</strong>&nbsp;&nbsp;&nbsp;" + x.expense_head + "</td>";
                    row += "<td><strong><center>" + getNumberWithComma(x.expense_amount || 0) + "</center></strong></td>";
                    row += "<td class='hideshow'>" + "<a class='btn btn-default btn-xs expense_edit_delete'  style='color:dodgerblue' onclick=editExpenseForm(" + x.id + ',1' + ") ><i  class='fa fa-edit'></i ></a>"
                        + "&nbsp;&nbsp;<a class='btn btn-default btn-xs expense_edit_delete' style='color:dodgerblue' onclick=deleteBaselineExpenseByExpenseId(" + x.id + ") ><i class='fa fa-trash'></i ></a>" +
                        //"&nbsp;<span  style='cursor:pointer' onclick=showExpenseRecommendPopUp(" + x.id + ")  class='badge'>Recommend</span></td>
                    "</tr > ";
                    console.log(totalExpense)
                    $('#totalExpense').text('Rs.' + getNumberWithComma(totalExpense));
                })
                table.append(row);
            }
            else {
                debugger;
                 var rowOther = "<tr  style='line-height:30px;'>";
                var objOther = group[key];

                var sumOther = 0;
                objOther.forEach(function (x) {
                    sumOther += parseFloat(x.expense_amount || 0);
                });


                objOther.forEach(function (x) {

                    totalExpenseOther += parseFloat(x.expense_amount || 0);

                    rowOther += "<td>&nbsp;<strong>-</strong>&nbsp;&nbsp;&nbsp;" + x.expense_head + "</td>";
                    rowOther += "<td><strong><center>" + getNumberWithComma(x.expense_amount || 0) + "</center></strong></td>";
                    rowOther += "<td class='hideshow'>" + "<a class='btn btn-default btn-xs expense_edit_delete' style='color:dodgerblue' onclick=editExpenseForm(" + x.id + ',2'+ ") ><i  class='fa fa-edit'></i ></a>"
                        + "&nbsp;&nbsp;<a class='btn btn-default btn-xs expense_edit_delete' style='color:dodgerblue' onclick=deleteBaselineExpenseByExpenseId(" + x.id + ") ><i class='fa fa-trash'></i ></a> " +
                        //"&nbsp;<span  onclick=showExpenseRecommendPopUp(" + x.id + ")  class='badge'>Recommend</span></td>
                    "</tr>";

                })
                 $('#totalExpenseOther').text(' Rs. ' + getNumberWithComma(sumOther));
                tableForOtherCommodity.append(rowOther);
            }



            }


        if (status === 'False') {
            $('.hideshow').hide();
        }

          var role = '@meta.RoleId';
       // alert(role);
        if (role == 1 || role == 4 || role == 20) {
          
            $('.expense_edit_delete').show();
        }
        else {
            $('.expense_edit_delete').hide();
          
        }

    }




           $("#SubmitExpenses").off("click").on("click", function () {


                 const form = $("#CreateExpenses");

            $.validator.unobtrusive.parse(form);

            if (!form.valid()) {
                return false;
            };

            if (!window.confirmAction()) {
                return;
            };
                WorkForce.loader.show();

            function request(model) {
                const url = "/baseline/expenses/create";
                const data = JSON.stringify(model);
                return window.getAjaxRequest(url, "POST", data);
            }
            function getModel() {

                return ({

                    BaselineExpenses: getBaselineExpenses()
                });
            }





              function getBaselineExpenses() {

                  var expenseData = {};
                  expenseData.BaselineId = $('#baselineId').val();
                  expenseData.Id = removeCommaFromString($('#ExpenseId').val());
                  expenseData.GroupId = '@Model.MemberDetailView.GroupId';
                  expenseData.MemberId = '@Model.MemberDetailView.Id';
                  expenseData.DistrictId = '@Model.MemberDetailView.DistrictId';
                  expenseData.FiscalYear = $("#FiscalYearExpense").val();
                  expenseData.Quadtrimester = $("#QuadtrimesterExpense").val();
                  expenseData.Commodity = $("#CommodityExpense").val();
                  expenseData.Category = $("#CategoryExpense option:selected").val();
                  expenseData.ExpenseHead =  $("#ExpenseHead option:selected").val();
                  expenseData.Unit = $("#Unit option:selected").val();
                  expenseData.ExpenseAmount = removeCommaFromString($("#ExpenseAmount").val());
                  expenseData.ExpenseDate = $("#expenseDate").val();
                  expenseData.ExpenseDateNepali = $("#expenseDateNepali").val();
                  expenseData.DistrictId = $("#DistrictId option:selected").val();
                  debugger;
                  return expenseData;
            }



            const model = getModel();


            const ajax = request(model);

            ajax.done(function (response) {
                WorkForce.loader.hide();
                showNotification("success");
                $('#CommodityExpense').val('@Model.MemberDetailView.Commodity').change();
                clearExpenseData();
                loadExpenseList();
            });

            ajax.fail(function (xhr) {
                WorkForce.loader.hide();
                ShowMessage("error", xhr.responseText);
            });

           });


        function clearExpenseData() {
             $('#ExpenseId').val('');
            $('#CategoryExpense').val('');
            $('#ExpenseHead').val('');
            $('#Unit').val('');
            $('#ExpenseAmount').val('');
        }


    function editExpenseForm(id, x) {
        if (x == 1) {
              $('.hideshow').show();
        }
        else {
             $('.hideshow').hide();
        }

            const ajax = request(id);

         function request(id) {

            const url = '/baseline/expense/' + id;

             return window.getAjaxRequest(url, "Get", id);

        }
        ajax.done(function (response) {
             setTimeout(
                 function () {

                         $("#CategoryExpense").val(response.Category);
                        $('#ExpenseHead').val(response.ExpenseHead);

                 }, 300);

                $('#ExpenseId').val(response.Id);

                $('#ExpenseAmount').val(getNumberWithComma(response.ExpenseAmount));


                  $("#CommodityExpense").val(response.Commodity);



                //OnChange Commodity
                $('#CommodityExpense').trigger("change");




               window.scrollTo(0, 0);
        });

        ajax.fail(function (xhr) {

            ShowMessage("error", xhr.responseText);
        });
       }

    function deleteBaselineExpenseByExpenseId(expenseId) {
         let conf = confirm(`Are you sure you want to delete this Baseline Expense ?`);
        if (!conf) {

            return;
        } else {

            const ajaxResponse = requestBaselineExpenseToDelete(expenseId);

            ajaxResponse.done(function (response) {
                WorkForce.loader.hide();
                if (response) {
                    loadExpenseList();
                    ShowMessage("success", "Successfully Deleted this Baseline Expense");
                }

                WorkForce.loader.hide();
            });

            ajaxResponse.fail(function (xhr) {
                WorkForce.loader.hide();
                ShowMessage("Error", xhr.responseText);
            });

            WorkForce.loader.hide();


        }
    }


    function requestBaselineExpenseToDelete(expenseId) {

         const url = "/baseline/expense/delete/";
         const data = JSON.stringify({ "Id": expenseId});
         return window.getAjaxRequest(url, "POST", data);
    }

    function isNumberKey(element,evt)
  {
           var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
    return false;
  else {
    var len = $(element).val().length;
    var index = $(element).val().indexOf('.');
    if (index > 0 && charCode == 46) {
      return false;
    }
    if (index > 0) {
      var CharAfterdot = (len + 1) - index;
      if (CharAfterdot > 3) {
        return false;
      }
    }

  }
  return true;
       }


    function getNumberWithComma(value) {
        if (isNaN(value)) {
           // alert(value);
            return 0;
        }
        else {
               return   Number(parseFloat(value).toFixed(2)).toLocaleString("en-IN", { minimumFractionDigits: 0 })
        }

    }

    function removeCommaFromString(value) {
        var result = parseFloat(value.replace(/,/g, ''));
        if (isNaN(result)) {
            return 0;
        }
        else {
            return result;
        }
    }

    function expenseCommodityChangeCalled() {
        const commodityId = $('#CommodityExpense').val();
        if (commodityId != 6) {

            $('.hideshow').show();
             $('#CategoryExpense').addClass("required");
        }
        else {
            $('.hideshow').hide();
            $('#CategoryExpense').removeClass("required");
        }
    }

        function showExpenseRecommendPopUp(id) {

        $('#recommendModel').modal('show');
        $('#RowIdInPopUp').val(id);
        $('#TableName').val('Expense');
    }

</script>



<style>

    @@import url('../../Content/plugins/pivotTable/pivot.css');
</style>