Mr.Combet Webshell 🔥

View File Name : SelfWorkPlanActivityReporting.cshtml

@using RER_Project.BusinessLayer.BusinessService
@{
    var meta = AppUserService.GetCurrent();
}


<div class="wrapper wrapper-content animated">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <label style="font-size: medium"><b>WorkPlan Activity Reporting</b></label>


                    <button type="button" class="btn btn-primary pull-right" onclick="tableToExcel('pvtTable1','PivotDownload')">
                        <i class="fa fa-file-excel-o" aria-hidden="true"></i>&nbsp;&nbsp;Download Report
                    </button>
                    @*<button type="button" class="btn btn-primary pull-right" onclick="tableToExcelEPPlus()">
                            <i class="fa fa-file-excel-o" aria-hidden="true"></i>&nbsp;&nbsp;Download Report
                        </button>*@
                    <hr />
                    <form id="WorkPlanActivityReporting">
                        <input type="hidden" name="CurrentPage" id="CurrentPage" />
                        <div class="row">
                            @*<div class="form-group col-md-4">
                                    <label><strong>User:</strong> </label>
                                    <select type="text" class="form-control required" name="UserId" id="UserId" data-api-selected-value="@meta.UserId" data-api="/users/select"></select>
                                </div>*@

                            <div class="form-group col-md-4">
                                <label><strong>User:</strong><span class="small" id="select-all" style="color:blue"><strong>Select All</strong></span> &nbsp;&nbsp;</label>
                                <select type="text" class="form-control required" multiple name="UserId" id="UserId" data-api-selected-value="@meta.UserId" data-api="/users/select"></select>
                                <input type="hidden" id="SelectedUserIds" name="SelectedUserIds" />
                            </div>
                            <div class="form-group col-md-3">
                                <label><strong>Year:</strong> </label> <br />
                                <select type="text" class="form-control required" onchange="yearChanged(event)" name="YearId" id="YearId" data-api="/year_nepali/select"></select>
                            </div>

                            <div class="form-group col-md-3">
                                <label><strong>Month:</strong> </label> <br />
                                <select type="text" class="form-control required" name="MonthId" id="MonthId" data-api="/month/select/keyvalue"></select>
                            </div>
                            <div class="form-group col-md-2">
                                <br />
                                <input type="button" value="Search" class="btn btn-primary" id="SearchButton" onclick="Search()" /><span>&nbsp;&nbsp;</span>
                            </div>
                        </div>



                    </form>
                    <div id="loadPartialView"></div>
                </div>
            </div>
        </div>
    </div>




</div>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script>
    $(function () {
        window.initializeSelectApis();
        WorkForce.loader.show();
        document.getElementById('CurrentPage').value = 1;
        //  getActivityReportingList();


        var userId = $('#UserId');
        //$(userId).select2({
        //    multiple: true,
        //    allowClear: true
        //});

        $(userId).select2({
            multiple: true,
            allowClear: true,
        }).change(function () {
            var selectedUserIDs = $.map($(userId).select2('data'), function (val, i) {
                return val.id;
            }).join(",");

            $('#SelectedUserIds').val(selectedUserIDs);
        });

        WorkForce.loader.hide();

    });

    function yearChanged(event) {
        console.log(event);
    }

    async function Search() {
        WorkForce.loader.show();
        document.getElementById('CurrentPage').value = 1;
        await getActivityReportingList();
    }




    function callSearchPagination(id) {
        WorkForce.loader.show();
        document.getElementById('CurrentPage').value = id;
        getActivityReportingList();
    }

    function tableToExcelEPPlus() {

    }

    $("#select-all").click(function () {
        //if ($("#checkbox").is(':checked')) {
        $("#UserId > option").prop("selected", "selected");
        $("#UserId").trigger("change");
        //} else {
        //$("#UserId > option").get(0).remove();

        //$("#UserId option[value='Select']").remove();
        $('#UserId option[value="Select"]').remove();
        //    $("#UserId").trigger("change");
        //}
    });

    async function getActivityReportingList() {

        var xhr = new XMLHttpRequest();
        var yearText = $('#YearId option:selected').html();
        var yearPart = 0;
        if (yearText != undefined) {
            yearPart = yearText.replace(' BS', '');
        }

        var jsonData = {
            //UserId: Number($("#UserId").val()),
            UserIds: document.getElementById('SelectedUserIds').value,
            YearId: Number(yearPart),
            MonthId: Number($("#MonthId").val()),
            CurrentPage: document.getElementById('CurrentPage').value
        };
        debugger;
        var urlSearchParams = new URLSearchParams(jsonData);

        xhr.open('POST', '/workplan/activity/reporting/search', true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

        xhr.onload = function () {
            if (this.status == 200) {
                WorkForce.loader.hide();
                document.getElementById("loadPartialView").innerHTML = this.responseText;
            }
        }
        xhr.send(urlSearchParams);
    }


    var tableToExcel = (function () {
        var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><style> table, td {border:2em solid black;padding:20px !important;border-spacing: 10px}table {border-collapse:collapse}</style> <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
        return function (table, name) {

            if (!table.nodeType) table = document.getElementsByClassName(table)[0] // look here we have taken first table with classname
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()







</script>