WebBuild/wwwroot/apps/tm/targets/components/w_dbpplanningwidget.js

var Bizgaze;
(function (Bizgaze) {
    let Apps;
    (function (Apps) {
        let TM;
        (function (TM) {
            let Targets;
            (function (Targets) {
                let Components;
                (function (Components) {
                    class DBPPlanningWidget extends Unibase.Platform.Core.BaseComponent {
                        cssFiles() {
                            return [];
                        }
                        jsFiles() {
                            return ['apps/tm/targets/components/savetargetvalue.js'];
                        }
                        html() {
                            var html = '<div></div>';
                            return html;
                        }
                        load() {
                        }
                        init(Containerid) {
                            var instance = this;
                            Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().loadHtml(Containerid);
                            $(".submit").click(function () {
                                alert("hai");
                            });
                            $('.TargetValue-row').keyup(function (event) {
                                if (event.which != 46 && (event.which < 47 || event.which > 59)) {
                                    event.preventDefault();
                                    if ((event.which == 46)) {
                                        event.preventDefault();
                                    }
                                }
                            });
                            $(".saveTargetPlan").click(function () {
                                Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().save(false);
                            });
                            $(".SendforDBCApproval").click(function () {
                                Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().save(true);
                            });
                        }
                        loadHtml(containerid) {
                            var html = `<div class="card pb-15 mb-0" id="DBPTarget">
                                <div class="card-header Configure_Target">Target</div>
                                    <div class="card-body text-center" >
                                        <a href="javascript:;" onclick="Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().loadEditPlan();" class="btn btn-success px-5"> Configure Target </a>
                                     </div></div>`;
                            $("." + containerid).html(html);
                        }
                        loadEditPlan() {
                            $(".Configure_Target").html('');
                            var html = `<div class="card-body text-center Edit_TargetPlan">
                                         <a href="javascript:;" onclick="Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().loadPlanningHtml();"   type="button" class="btn btn-info">Edit Target Plan</a>
                                         <a href="javascript:;"  type="button" class="btn btn-info">Send for DBC Approval</a>
                                       </div>`;
                            $("#DBPTarget").html(html);
                        }
                        loadPlanningHtml() {
                            const instance = this;
                            $(".Edit_TargetPlan").html('');
                            var html = `<div class="card-body d-flex align-items-end">
                                           <div class="col-md-3 floating-label-form-group-with-value" id="IncludedTags">
                                             <label for="txt_States">States</label>
                                             <input type="hidden" class="hf_States" value="" />
                                             <select style="width:100%" id="txt_States" value="" class="no-border form-control select2_IncludedTags  txtIncludedTags" IsTagSelect="false" multiple="multiple">
                                               <option value="0">Select</option>
                                             </select>
                                           </div>
                                           <div class="col-md-3 floating-label-form-group-with-value" id="Districts">
                                             <label for="txt_Districts">Districts</label>
                                             <input type="hidden" class="hf_Districts" value="" />
                                             <select style="width:100%" id="txt_Districts" value="" class="no-border form-control select2_Districts  txtDistricts" IsTagSelect="false" multiple="multiple">
                                               <option value="0">Select</option>
                                             </select>
                                           </div>
                                           <div class="col-md-3 floating-label-form-group-with-value" id="IncludedTags">
                                             <label for="txt_segment">Segments</label>
                                             <input type="hidden" class="hf_segment" value="" />
                                             <select style="width:100%" id="txt_segment" value="" class="no-border form-control select2_IncludedTags  txtIncludedTags" IsTagSelect="false" multiple="multiple">
                                               <option value="0">Select</option>
                                             </select>
                                           </div>
                                           <div class="col-md-3">
                                             <a href="javascript:;" onclick="Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().ApplyFilter()" type="submit" id="submit" class="btn btn-primary h-100 mt-4">Apply Filter</a>
                                             <button class="h-100 mt-4 ml-2 btn btn-light">Clear</button>
                                           </div>
                                         </div>
                                         <div class="table-responsive px-10">
                                           <table class="table table-bordered table-striped" id="tblDBPTarget">
                                             <thead>
                                               <tr class="bg-light">
                                                 <th>District Name</th>
                                                 <th>Product Line</th>
                                                 <th>Segment</th>
                                                 <th class="text-center">Plan Name</th>
                                                 <th class="text-center">Quantity</th>
                                               </tr>
                                             </thead>
                                             <tbody class="table_DBPTbody d-none" id="tableDBPTbody"></tbody>
                                            <tfoot id="tableDBPTFoot" class="table-active font-weight-600"></tfoot>
                                           </table>
                                           <div id="dbpTablePagination" class="pagination custom-pagination pagination-rounded pull-right"></div>
                                         </div>
                                         <div class="text-right m-auto">
                                           <button type="button" class="btn btn-info saveTargetPlan" onclick="Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().save(false);">Save as Draft</button>
                                           <button type="button" onclick="Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().save(true);" class="btn btn-info SendforDBCApproval">Send for DBC Approval</button>
                                         </div>`;
                            $("#DBPTarget").html(html);
                            var url = _appsettings.server_url() + '/apis/v4/bizgaze/mobil/targets/getdbpsegments';
                            AutoCompleteHelper.getHelper().Create($("#txt_segment"), ".hf_segment", url, function (response) {
                            });
                            var url = _appsettings.server_url() + '/apis/v4/bizgaze/mobil/targets/getdbpstates';
                            AutoCompleteHelper.getHelper().Create($("#txt_States"), ".hf_States", url, function (response) {
                            });
                            var stateIds = $("#txt_States").val();
                            var url = _appsettings.server_url() + '/apis/v4/bizgaze/mobil/targets/getdbpdistricts/stateId/' + stateIds;
                            AutoCompleteHelper.getHelper().Create($("#txt_Districts"), ".hf_Districts", url, function (response) {
                            });
                            $("#txt_States").change(function () {
                                var stateIds = $("#txt_States").val();
                                var url = _appsettings.server_url() + '/apis/v4/bizgaze/mobil/targets/getdbpdistricts/stateId/' + stateIds;
                                AutoCompleteHelper.getHelper().Create($("#txt_Districts"), ".hf_Districts", url, function (response) {
                                });
                            });
                            Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().ApplyDistricts();
                        }
                        ApplyDistricts() {
                            var instance = this;
                            instance.fileCacheHelper.loadJsFile('apps/tm/targets/managers/targetmanager.js', function () {
                                Bizgaze.Apps.TM.Targets.Managers.TargetManager.Instance().ApplyDBPDistricts().then(function (response) {
                                    let data = response.result;
                                    var state_Ids = data.StateIds;
                                    var state_Names = data.StateNames;
                                    var district_Ids = data.DistrictIds;
                                    var district_Names = data.DistrictNames;
                                    var stateIds = [];
                                    var stateNames = [];
                                    var districtIds = [];
                                    var districtNames = [];
                                    stateIds = state_Ids.split(",");
                                    stateNames = state_Names.split(",");
                                    districtIds = district_Ids.split(",");
                                    districtNames = district_Names.split(",");
                                    if (stateIds.length != 0) {
                                        for (let i = 0; i < stateIds.length; i++) {
                                            var state_option = new Option(stateNames[i], stateIds[i], true, true);
                                            $("#txt_States").append(state_option).trigger('change');
                                        }
                                    }
                                    if (districtIds.length != 0) {
                                        for (let j = 0; j < districtIds.length; j++) {
                                            var state_option = new Option(districtNames[j], districtIds[j], true, true);
                                            $("#txt_Districts").append(state_option).trigger('change');
                                        }
                                    }
                                });
                            });
                        }
                        ApplyFilter() {
                            var instance = this;
                            var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                            var targetdefinitionid = Number(Unibase.Themes.Providers.Detail_Settings.Instance().InputParameters.find(x => x.Key == "hf_" + InstalledAppId + "_targetdefinitionid").Value);
                            var stateid = ($("#txt_States").val()).toString().length === 0 ? 0 : ($("#txt_States").val()).toString();
                            var districtid = ($("#txt_Districts").val()).toString().length === 0 ? 0 : ($("#txt_Districts").val()).toString();
                            var segmentid = ($("#txt_segment").val()).toString().length === 0 ? 0 : ($("#txt_segment").val()).toString();
                            var productlinetagid = "adfgb";
                            var distributorid = 0;
                            var obj = {
                                StateId: stateid,
                                DistrictId: districtid,
                                SegmentId: segmentid,
                                ProductLineId: productlinetagid,
                                DistributorId: distributorid,
                                TargetDefinitionId: targetdefinitionid
                            };
                            instance.fileCacheHelper.loadJsFile('apps/tm/targets/managers/targetmanager.js', function () {
                                instance.navigationHelper.showLoading();
                                Bizgaze.Apps.TM.Targets.Managers.TargetManager.Instance().GetDBPTargetPlannings(obj).then(function (response) {
                                    if (response) {
                                        $("#divDBPPlanning2021").html('<tr class="row-dbpitem hidden"></tr>');
                                        $(".row-dbpitem:last").before('<tr></tr>');
                                    }
                                    else {
                                        return false;
                                    }
                                    $(".table_DBPTbody").html('');
                                    for (var i = 0; i < response.result.length; i++) {
                                        let isplanRow = response.result[i].PlanName == '2023';
                                        let isGrandTotal = response.result[i].SegmentTag == 'GrandTotal';
                                        var res = response.result;
                                        var html = ``;
                                        if (!isGrandTotal) {
                                            if (isplanRow) {
                                                html = `<tr class="bg-white TargetValue-row">
                                                        <td class="Districtname">` + response.result[i].DistrictName + `</td>
                                                        <td class="ProductLine">` + response.result[i].ProductLineTag + `</td>
                                                        <td class="Segment" >` + response.result[i].SegmentTag + `</td>
                                                        <td class="text-center PlanName">` + response.result[i].PlanName + `</td>
                                                        <td class="text-center"><input type="text" onkeyup="return Bizgaze.Apps.TM.Targets.Components.DBPPlanningWidget.Instance().calTotal(this)" class="text-center TargetValue editTarget" value=` + response.result[i].TotalQty + `></td>
                                                         <input type="hidden" id="hf_PlanId" value=` + res[i].PlanId + ` />
                                                         <input type="hidden" id="hf_StateId" value=` + res[i].StateId + ` />
                                                         <input type="hidden" id="hf_DistrictId" value=` + res[i].DistrictId + ` />
                                                   <input type="hidden" class="hf_ProductlineId" id="hf_ProductlineId" value=` + res[i].ProductlineId + `>
                                                     <input type="hidden" class="hf_SegmentTagId" id="hf_SegmentTagId" value=` + res[i].SegmentTagId + `>
                                                    <input type="hidden" id="hf_PlanId" value=` + res[i].PlanId + ` />
                                                     </tr>`;
                                            }
                                            else {
                                                html = `<tr class="bg-white">
                                                        <td class="Districtname">` + response.result[i].DistrictName + `</td>
                                                        <td class="ProductLine">` + response.result[i].ProductLineTag + `</td>
                                                        <td class="Segment" >` + response.result[i].SegmentTag + `</td>
                                                        <td class="text-center PlanName">` + response.result[i].PlanName + `</td>
                                                        <td class="text-center Quantity">` + response.result[i].TotalQty + `</td>
                                                     </tr>`;
                                            }
                                        }
                                        else {
                                            let totalHtml = '';
                                            if (isplanRow && isGrandTotal) {
                                                totalHtml = `<tr>
                                                          <td colspan="3">GrandTotal</td>
                                                          <td class="text-center">2023</td>
                                                          <td class="text-center gtqty">` + response.result[i].TotalQty + `</td>
                                                          </tr>`;
                                            }
                                            else {
                                                totalHtml = `<tr>
                                                          <td colspan="3">GrandTotal</td>
                                                          <td class="text-center">2022</td>
                                                          <td class="text-center">` + response.result[i].TotalQty + `</td>
                                                        </tr>`;
                                            }
                                            $('#tableDBPTFoot').html(totalHtml);
                                        }
                                        $(".table_DBPTbody:last").append(html);
                                    }
                                    instance.loadPagination();
                                    instance.navigationHelper.hideLoading();
                                });
                                instance.fileCacheHelper.loadJsFile('apps/tm/targets/managers/targetmanager.js', function () {
                                    Bizgaze.Apps.TM.Targets.Managers.TargetManager.Instance().getTargetDefinitionDetails(targetdefinitionid).then(function (response) {
                                        if (response) {
                                            if (response.result.StageName == "Completed") {
                                                $(".editTarget").attr("disabled", "disabled");
                                            }
                                        }
                                    });
                                });
                            });
                        }
                        loadPagination() {
                            var instance = this;
                            instance.fileCacheHelper.loadJsFile('"libs/jquery/pagination/jquery.pagination.js"', function () {
                                const pageSize = 20;
                                const tableRows = $('#tableDBPTbody tr');
                                const totalRecords = tableRows.length;
                                tableRows.hide();
                                $('#tableDBPTbody').removeClass('d-none');
                                $('#tableDBPTbody tr').slice(0, 20).show();
                                const handlePaginationClick = (page_index) => {
                                    const indexPageSize = page_index * pageSize;
                                    $('#tableDBPTbody tr:visible').hide();
                                    $('#tableDBPTbody tr').slice(indexPageSize, indexPageSize + pageSize).show();
                                };
                                let elem = $('#dbpTablePagination');
                                elem.pagination(totalRecords, pageSize, {
                                    items_per_page: pageSize,
                                    callback: handlePaginationClick
                                });
                            });
                        }
                        calTotal(event) {
                            let gtqty = 0;
                            $(".table_DBPTbody").find(".TargetValue-row").each(function () {
                                var colval = Number($(this).find(".TargetValue").val());
                                gtqty = gtqty + colval;
                            });
                            $(".gtqty").val(gtqty);
                            $(".gtqty").text(gtqty);
                        }
                        save(IsApproval) {
                            var instance = this;
                            var postdata = [];
                            $("#tblDBPTarget").find(".TargetValue-row").each(function () {
                                postdata.push({
                                    StateId: Number($(this).find("#hf_StateId").val()),
                                    DistrictId: Number($(this).find("#hf_DistrictId").val()),
                                    ProductlineId: Number($(this).find(".hf_ProductlineId").val()),
                                    SegmentTagId: Number($(this).find(".hf_SegmentTagId").val()),
                                    TotalQty: Number($(this).find(".TargetValue").val()),
                                    PlanName: "2023 Plan",
                                    PlanId: Number($(this).find("#hf_PlanId").val()),
                                    TargetDefinitionId: Number(Unibase.Themes.Providers.Detail_Settings.Instance().InputParameters.find(x => x.Key == "hf_" + Unibase.Themes.Providers.DetailHelper.installedAppId + "_targetdefinitionid").Value),
                                    IsApproval: IsApproval,
                                });
                            });
                            instance.fileCacheHelper.loadJsFile('apps/tm/targets/managers/targetmanager.js', function () {
                                Bizgaze.Apps.TM.Targets.Managers.TargetManager.Instance().saveTargetPlan(postdata).then(function (response) {
                                    if (response) { }
                                    var detail_instance = Unibase.Themes.Compact.Components.Details.Instance();
                                    var containerid = $("._bizgaze_detail_container:visible").attr("id");
                                    var _installedAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                                    var portletid = detail_instance.unibase_core_activeportletid;
                                    detail_instance.loadWidgets(_installedAppId, portletid, "#" + containerid + "");
                                });
                            });
                        }
                        approval() {
                            var instance = this;
                            var targetdefinitionid = 101274070000002;
                            instance.fileCacheHelper.loadJsFile('apps/tm/targets/managers/targetmanager.js', function () {
                                Bizgaze.Apps.TM.Targets.Managers.TargetManager.Instance().saveApprove(targetdefinitionid).then(function (response) {
                                    if (response) {
                                    }
                                });
                            });
                        }
                        static Instance() {
                            if (this.instance === undefined) {
                                this.instance = new DBPPlanningWidget();
                            }
                            return this.instance;
                        }
                    }
                    Components.DBPPlanningWidget = DBPPlanningWidget;
                })(Components = Targets.Components || (Targets.Components = {}));
            })(Targets = TM.Targets || (TM.Targets = {}));
        })(TM = Apps.TM || (Apps.TM = {}));
    })(Apps = Bizgaze.Apps || (Bizgaze.Apps = {}));
})(Bizgaze || (Bizgaze = {}));