WebBuild/wwwroot/platform/analytics/components/templateviewer/templateviewer.settings.js

var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Analytics;
        (function (Analytics) {
            let Components;
            (function (Components) {
                class TemplateViewerSettings extends Platform.Core.BaseComponent {
                    constructor() {
                        super();
                        this.subTemplateCount = 1;
                        this.Templates = [];
                        this.TemplateNames = [];
                        this.viewerManager = Analytics.Managers.ViewerManager.Instance();
                        this.reportViewer = Components.ReportViewer.Instance();
                        this.ReportId = 0;
                    }
                    jsFiles() {
                        return ["platform/analytics/providers/iviewersettings.js",
                            "platform/analytics/managers/interfaces/iviewermanager.js"];
                    }
                    cssFiles() {
                        return [];
                    }
                    html(id, containerid) {
                        var html = `<div class="b-b bg-white header pa-10"><strong class="text-dark">Template</strong>
                       </div>
                    <div data-simplebar class="simple-scroll-bar scrollable" id="TemplateViewer_modal"> 
                      <div id="divTemplateView_ErrorMessage"></div>
                        <div class="Template_Section card"> 
                            <div class="card-body"> 
                                <div class="row">
                                    <div class="col-sm-5">
                                         <div id="div_TemplateName" class="floating-label-form-group floating-label-form-group-with-value">
                                              <label for="templatename" id="lbl_TemplateName">Template Name</label>
                                              <input type="text" id="Txt_Template_Name" class="form-control value-control floating-label-control" placeholder="Template Name" data-placeholder="Template Name" data-label="Template Name">
                                         </div>
                                     </div>
                                    <div class="col-sm-4">
                                         <div id="div_DisplayName" class="floating-label-form-group floating-label-form-group-with-value">
                                              <label for="displayname" id="lbl_DisplayName">Display Name</label>
                                              <input type="text" id="Txt_Display_Name" class="form-control value-control floating-label-control" placeholder="Display Name" data-placeholder="Display Name" data-label="Display Name">
                                         </div>
                                     </div>
                                    <div class="col-sm-3"> 
                                        <div id="div_TemplatePageSize" class="floating-label-form-group floating-label-form-group-with-value">
                                              <label for="TemplatePageSize" id="lbl_TemplatePageSize"> Page Size </label>
                                              <input type="text" id="Txt_TemplatePageSize" class="form-control value-control floating-label-control" placeholder="Template PageSize" data-placeholder="Template PageSize" data-label="Template PageSize">
                                         </div> 
                                    </div>
                                    <div class="col-sm-4"> 
                                        <div class="form-group mt-40"><label for="frmchkIsEnableCardMode" style=""><b> Enable Card Mode </b></label><label id="lblIsEnableCardMode" class="switch m-t form-inline pull-right" style=""><input id="chkIsEnableCardMode" data-group="chkIsEnableCardMode" type="checkbox" data-isdynamic="false"><span></span></label></div> 
                                    </div>
                                    <div class="col-sm-5"> 
                                        <div class="form-group mt-40"><label for="frmchkIsEnableSubTemplatesMode" style=""><b> Enable Sub Templates Mode </b></label><label id="lblIsEnableSubTemplatesMode" class="switch m-t form-inline pull-right" style=""><input id="chkIsEnableSubTemplatesMode" data-group="chkIsEnableSubTemplatesMode" type="checkbox" data-isdynamic="false"><span></span></label></div> 
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group mt-40"><label for="frmchkIsCarousel" style=""><b> Is Carousel </b></label><label id="lblIsCarousel" class="switch m-t form-inline pull-right" style=""><input id="chkIsCarousel" data-group="chkIsCarousel" type="checkbox" data-isdynamic="false"><span></span></label></div> 
                                     </div>
                                    <div class="col-sm-4">
                                        <div class="form-group d-flex align-items-center mt-15"><label class="font-weight-bold mr-10" for="desktopRadio">Is Desktop</label><input type="radio" id="desktopRadio" name="layoutRadio" checked value="1"></div>
                                    </div>
                                    <div class="col-sm-5">
                                        <div class="form-group d-flex align-items-center mt-15"><label class="font-weight-bold mr-10" for="mobileRadio">Is Mobile</label><input type="radio" id="mobileRadio" name="layoutRadio" value="2"></div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group d-flex align-items-center mt-15"><label class="font-weight-bold mr-10" for="bothLayoutRadio">Both</label><input type="radio" id="bothLayoutRadio" name="layoutRadio" value="3"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group mt-15"><label for="chkOverrideWidgetPageSize" class="font-weight-bold">Override Widget Page Size</label><label class="switch pull-right"><input id="chkOverrideWidgetPageSize" type="checkbox"><span></span></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>    
                        <div class="TemplateHeader_Section card"> 
                            <div class="card-header"> Template Header </div> 
                            <div class="card-body"> 
                                <div id="div_TemplateHeader" class="">            
                                    <textarea id="input_templateheader" placeholder="Template Header" rows="6" class="w-100"></textarea>
                                </div>
                            </div>                 
                        </div>
                        <div class="TemplateText_Section card"> 
                            <div class="card-header"> Template Text </div> 
                            <div class="card-body">                                
                                <div id="div_TemplateText" class="">            
                                    <textarea id="input_TemplateText" placeholder="Template Text" rows="6" class="w-100"></textarea>                    
                                </div>
                            </div>
                        </div>
                        <div class="TemplateFooter_Section card"> 
                            <div class="card-header"> Template Footer </div> 
                            <div class="card-body">                                
                                <div id="div_TemplateFooter" class="">            
                                    <textarea id="input_TemplateFooter" placeholder="Template Footer" rows="6" class="w-100"></textarea>                    
                                </div>
                            </div>
                        </div>
                        <div class="Js_Section card"> 
                            <div class="card-header"> Js </div> 
                            <div class="card-body">                                
                                <div id="div_Js" class="">            
                                    <textarea id="input_Js" placeholder="Js" rows="6" class="w-100"></textarea>                    
                                </div>
                            </div>
                        </div>
                        <div class="printheadertext_Section card"> 
                            <div class="card-header"> Print Header Text </div> 
                            <div class="card-body">                                
                                <div id="div_printheadertext " class="">            
                                    <textarea id="input_printheadertext" placeholder="Print Header Text" rows="6" class="w-100"></textarea>                    
                                </div>
                            </div>
                        </div>
                        <div class="printtemplatetext_Section card"> 
                            <div class="card-header"> Print Template Text </div> 
                            <div class="card-body">                                
                                <div id="div_printtemplatetext" class="">            
                                    <textarea id="input_printtemplatetext" placeholder="Print Template Text" rows="6" class="w-100"></textarea>                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="printfootertext_Section card"> 
                            <div class="card-header"> Print Footer Text </div>
                            <div class="card-body">                                
                                <div id="div_printfootertext" class="">            
                                    <textarea id="input_printfootertext" placeholder="Print Footer Text" rows="6" class="w-100"></textarea>                    
                                </div>
                            </div>
                        </div>
                        <div class="SubTemplates_Section card">
                            <div class="card-header"> Sub Templates <a class="pull-right btn btn-icon py-0 hidden" id="subtmp_plus" aria-hidden="true"><i class="fa fa-plus"></i></a></div>
                            <div class="card-body">
                                <div id="subtmp_div" class="mt-10">
                                    <div class="row" id="divsubtmp_1">
                                       <div class="col-11  floating-label-form-group-with-value">                    
                                            <select class="select_templates form-control" id="cmdsub_1" onclick="Unibase.Platform.Analytics.Components.TemplateViewerSettings.Instance().selectedSubTemplate(1)" multiple="multiple"><option value="0">Select Sub Template</option></select>
                                        </div>
                                        <a class="col-1 btn btn-icon subtmp_delete hidden" id="subtmp_delete_1" onclick="Unibase.Platform.Analytics.Components.TemplateViewerSettings.Instance().removeSubTemplate(1)"><i class="fa fa-times"></i></a>
                                     </div>
                                 </div>
                             </div>
                        </div>
                    </div>
                    </div>
                    
                    <div class="bg-white footer">
                        <a class="btn btn-light btn-sm btn-center mr-auto btn-close" id="btnClose">Close</a>
                        <a class="btn btn-primary btn-center btn-sm text-white" id="btnSave">Save</a>
                    </div>`;
                        return html;
                    }
                    load(id, containerid, callback) {
                        var instance = this;
                        instance.TemplateNames = [];
                        instance.templateResponse = null;
                        $("#Txt_TemplatePageSize").val(20);
                        $("#chkIsEnableCardMode").change(function () {
                            var IsEnableCardMode = $("#chkIsEnableCardMode").prop("checked");
                            $("#input_templateheader").val("");
                            $(".TemplateHeader_Section").removeClass("hidden");
                        });
                        $("#subtmp_plus").click(function () {
                            instance.subTemplateCount++;
                            let html = `<div class="row mt-10" id="divsubtmp_` + instance.subTemplateCount + `">
                                                    <div class="col-11  floating-label-form-group-with-value">                    
                                                         <select class="select_templates form-control" id="cmdsub_` + instance.subTemplateCount + `" onclick="Unibase.Platform.Analytics.Components.TemplateViewerSettings.Instance().selectedSubTemplate(` + instance.subTemplateCount + `)" multiple="multiple"><option value="0">Select Sub Template</option></select>
                                                    </div>
                                                    <a class="col-1 btn btn-icon subtmp_delete" id="subtmp_delete_` + instance.subTemplateCount + `" onclick="Unibase.Platform.Analytics.Components.TemplateViewerSettings.Instance().removeSubTemplate(` + instance.subTemplateCount + `)"><i class="fa fa-times"></i></a>
                                                 </div>`;
                            $("#subtmp_div").append(html);
                            for (var i = 0; i < instance.Templates.length; i++) {
                                $(".select_templates").append(`<option value="` + instance.Templates[i].TemplateName.trim() + `">` + instance.Templates[i].TemplateName.trim() + `</option>`);
                            }
                        });
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/analytics/templates';
                        AutoCompleteHelper.getHelper().Create("#cmdsub_1", "hfReportAutoComplete", url, null);
                        if (id != 0) {
                            instance.getTemplateById(id);
                        }
                        jQuery("#btnSave").click(function () {
                            instance.saveTemplate(id, Number(instance.ReportId), containerid, null);
                        });
                        $("#layoutRadio").click(function () { });
                    }
                    removeSubTemplate(SubTmpCount) {
                        let instance = this;
                        $("#divsubtmp_" + SubTmpCount).remove();
                        instance.TemplateNames.splice(SubTmpCount, 1);
                    }
                    selectedSubTemplate(SubTmpCount) {
                        let instance = this;
                        let SubTemplateVal = $("#cmdsub_" + SubTmpCount + " option:selected").text();
                        instance.TemplateNames[SubTmpCount] = SubTemplateVal;
                    }
                    getTemplateById(id) {
                        var instance = this;
                        instance.subTemplateCount = 1;
                        instance.viewerManager.getTemplateView(id).then(function (response) {
                            var resp = response.result;
                            instance.templateResponse = response.result;
                            $("#Txt_Template_Name").val(resp.TemplateName.trim()).attr("readonly", 'true').css("cursor", "not-allowed");
                            if (resp.DisplayName != null) {
                                $("#Txt_Display_Name").val(resp.DisplayName.trim());
                            }
                            $("#input_templateheader").val(HtmlHelper.getHelper().decode(resp.HeaderText.trim()));
                            $("#input_TemplateText").val(HtmlHelper.getHelper().decode(resp.TemplateText.trim()));
                            $("#input_TemplateFooter").val(HtmlHelper.getHelper().decode(resp.FooterText.trim()));
                            if (resp.Js != null) {
                                $("#input_Js").val(resp.Js.trim());
                            }
                            $("#chkIsEnableCardMode").prop("checked", resp.EnableCardMode);
                            $("#chkIsCarousel").prop("checked", resp.IsCarousel);
                            $("input[name=layoutRadio][value=" + resp.DisplayModeTypeId + "]").prop('checked', 'checked');
                            $("#chkIsEnableSubTemplatesMode").prop("checked", resp.EnableSubTemplatesMode);
                            if (resp.PageSize != 0) {
                                $("#Txt_TemplatePageSize").val(resp.PageSize);
                            }
                            resp.PrintTemplateText && ($("#input_printtemplatetext").val(HtmlHelper.getHelper().decode(resp.PrintTemplateText.trim())));
                            resp.PrintHeaderText && ($("#input_printheadertext").val(HtmlHelper.getHelper().decode(resp.PrintHeaderText.trim())));
                            resp.PrintFooterText && ($("#input_printfootertext").val(HtmlHelper.getHelper().decode(resp.PrintFooterText.trim())));
                            if (resp.SubTemplates != "" && resp.SubTemplates != null) {
                                instance.viewerManager.getTemplates(resp.SubTemplates).then((response) => {
                                    if (response.status == Unibase.Data.Status.Success) {
                                        var templates = response.result;
                                        for (var i = 0; i < templates.length; i++) {
                                            $("#cmdsub_1").append(new Option(templates[i].TemplateName, templates[i].TemplateViewId.toString(), true, true));
                                        }
                                    }
                                });
                            }
                        });
                    }
                    saveTemplate(id, reportid, containerid, obj) {
                        var instance = this;
                        var PostData = obj;
                        let SubTemplateTexts = "";
                        let subTempaltes = $("#cmdsub_1").select2("data");
                        SubTemplateTexts = subTempaltes.map(x => x.text).join("|");
                        if (obj == null) {
                            PostData = {
                                HeaderText: HtmlHelper.getHelper().encode($("#input_templateheader").val()),
                                TemplateText: HtmlHelper.getHelper().encode($("#input_TemplateText").val()),
                                FooterText: HtmlHelper.getHelper().encode($("#input_TemplateFooter").val()),
                                Js: $("#input_Js").val(),
                                TemplateName: $("#Txt_Template_Name").val().toString().trim(),
                                DisplayName: $("#Txt_Display_Name").val().toString().trim(),
                                ReportId: Number(reportid),
                                TemplateViewId: Number(id),
                                EnableCardMode: $("#chkIsEnableCardMode").prop("checked"),
                                EnableSubTemplatesMode: $("#chkIsEnableSubTemplatesMode").prop("checked"),
                                IsCarousel: $("#chkIsCarousel").prop("checked"),
                                PageSize: Number($("#Txt_TemplatePageSize").val()),
                                SubTemplates: SubTemplateTexts,
                                DisplayModeTypeId: Number($('input[name="layoutRadio"]:checked').val()),
                                PrintTemplateText: HtmlHelper.getHelper().encode($("#input_printtemplatetext").val() || ""),
                                PrintHeaderText: HtmlHelper.getHelper().encode($("#input_printheadertext").val() || ""),
                                PrintFooterText: HtmlHelper.getHelper().encode($("#input_printfootertext").val() || ""),
                                ViewAll: instance.templateResponse ? instance.templateResponse.ViewAll : true,
                                IsFromUI: Number(id) == 0 ? true : false,
                            };
                        }
                        instance.viewerManager.saveTemplateView(PostData).then(function (response) {
                            if (response.status == Unibase.Data.Status.Error) {
                                MessageHelper.Instance().showError(response.message, 'divTemplateView_ErrorMessage');
                            }
                            else {
                                MessageHelper.Instance().showSuccess(response.message, '');
                                $('#' + containerid).modal('hide');
                                $('#' + containerid).remove();
                            }
                        });
                    }
                    deleteTemplate(id, containerid, ev) {
                        if (ev != undefined)
                            ev.stopPropagation();
                        var instance = this;
                        bootbox.confirm("Do you want to Delete the Template ?", function (result) {
                            if (result) {
                                instance.viewerManager.deleteTemplate(id, instance.ReportId).then(function (delresponse) {
                                    if (delresponse.status == Unibase.Data.Status.Success) {
                                        MessageHelper.Instance().showSuccess(delresponse.message, '');
                                        $(`#deleteTemplateIcon_${id}`).parents('.biz-views-dropdown').siblings('.views-dropdown-toggle').dropdown('toggle');
                                    }
                                    else {
                                        let errMsgEl = $(`#deleteTemplateIcon_${id}`).parents('.biz-views-dropdown').find('#dpErrMessage_' + containerid).attr('id');
                                        MessageHelper.Instance().showError(delresponse.message, errMsgEl);
                                    }
                                }, null);
                            }
                        });
                    }
                    updateViewerStatus(viewerId, viewerTypeId) {
                        var instance = this;
                        instance.viewerManager.updateViewerStatus(viewerId, viewerTypeId).then(function (viewerres) {
                            if (viewerres.status == Unibase.Data.Status.Success) {
                                if (Number(viewerres.result) == Unibase.Platform.Core.Enums.RowStatus.Active) {
                                    $(".tempStatus_" + viewerId).text("Active").addClass("btn-success").removeClass("btn-red");
                                }
                                else {
                                    $(".tempStatus_" + viewerId).text("InActive").addClass("btn-red").removeClass("btn-success");
                                }
                            }
                        });
                    }
                    deleteViewer(id, viewerTypeId, containerid, ev) {
                        if (ev != undefined)
                            ev.stopPropagation();
                        var instance = this;
                        bootbox.confirm("Do you want to Delete the Template ?", function (result) {
                            if (result) {
                                var rv = instance.reportViewer.getReportViewerInstance(containerid);
                                if (rv.reportResponse && rv.reportResponse.result && rv.reportResponse.result.ReportInfo && rv.reportResponse.result.ReportInfo.ReportId)
                                    instance.ReportId = rv.reportResponse.result.ReportInfo.ReportId;
                                instance.viewerManager.deleteViewer(instance.ReportId, id, viewerTypeId).then(function (delresponse) {
                                    if (delresponse.status == Unibase.Data.Status.Success) {
                                        MessageHelper.Instance().showSuccess(delresponse.message, '');
                                        $(`#deleteTemplateIcon_${id}`).parents('.biz-views-dropdown').siblings('.views-dropdown-toggle').dropdown('toggle');
                                    }
                                    else {
                                        let errMsgEl = $(`#deleteTemplateIcon_${id}`).parents('.biz-views-dropdown').find('#dpErrMessage_' + containerid).attr('id');
                                        MessageHelper.Instance().showError(delresponse.message, errMsgEl);
                                    }
                                }, null);
                            }
                        });
                    }
                    loadViewers() {
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/analytics/viewers';
                        AutoCompleteHelper.getHelper().Create("#cmdsub_1", "hfReportAutoComplete", url, null);
                    }
                    static Instance() {
                        if (this._instance === undefined)
                            this._instance = new Unibase.Platform.Analytics.Components.TemplateViewerSettings();
                        return this._instance;
                    }
                }
                Components.TemplateViewerSettings = TemplateViewerSettings;
            })(Components = Analytics.Components || (Analytics.Components = {}));
        })(Analytics = Platform.Analytics || (Platform.Analytics = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));