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

var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Analytics;
        (function (Analytics) {
            let Components;
            (function (Components) {
                class CalendarViewerSettings extends Platform.Core.BaseComponent {
                    constructor() {
                        super();
                        this.reportManager = Analytics.Managers.ReportManager.Instance();
                        this.viewerManager = Analytics.Managers.ViewerManager.Instance();
                        this.ReportId = 0;
                    }
                    jsFiles() {
                        return ["platform/analytics/components/calendarviewer/calendarviewer.settings.js"];
                    }
                    cssFiles() {
                        return [];
                    }
                    html(id, containerid) {
                        var html = `<div class="b-b bg-white modal-header">
    <strong class="text-dark">Calendar</strong>
</div>
<div class="modal-body" id="CalendarViewer_modal">
    <div id="divCalendar_ErrorMessage"></div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-6 mb-20">
                    <div id="div_CalendarName" class="floating-label-form-group" style="">
                        <label for="calendarname">CalendarName</label><input type="text" id="CalendarName"
                            class="form-control value-control floating-label-control" data-placeholder="CalendarName"
                            placeholder="Calendar Name" data-label="Calendar 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-6 mb-20">
                    <div id="div_ValueColumn">
                        <label for="valuecolumn">Value Column</label><select id="ValueColumn_AutoComplete"
                            class="form-control text-control required">
                            <option value="0" selected="">Select Value Column</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6 mb-20">
                    <div id="div_TextColumn">
                        <label for="textcolumn">Text Column</label><select id="TextColumn_AutoComplete"
                            class="form-control text-control required">
                            <option value="0" selected="">Select Text Column</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6 mb-20">
                    <div id="div_FromDate">
                        <label for="fromdate">FromDate</label>
                        <div class="input-group"><select type="text" id="date_FromDate"
                                class="form-control value-control datepicker-input hasDatepicker  floating-label-control"
                                placeholder="From Date " data-label="From Date ">
                                <option value="0" selected="">Select From Date Column</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div id="div_ToDate">
                        <label for="fromdate">ToDate</label>
                        <div class="input-group"><select type="text" id="date_ToDate"
                                class="form-control value-control datepicker-input hasDatepicker  floating-label-control"
                                placeholder="To Date " data-label="To Date ">
                                <option value="0" selected="">Select To Date Column</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 align-self-end">
                    <label for="showCalTime"><strong>Show Time</strong></label><label id="lblshowCalTime"
                        class="switch form-inline pull-right" style=""><input id="showCalTime"
                            data-group="showCalTime" type="checkbox" data-isdynamic="false"><span></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bg-white modal-footer">
    <a class="btn btn-light btn-sm btn-center mr-auto" 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;
                        var reportid = Number(instance.ReportId);
                        $("#CalendarViewer_modal").css("height", $(window).outerHeight() - (Number($(".modal-header").outerHeight()) + Number($(".modal-footer").outerHeight())) + 'px');
                        var data = [];
                        this.reportManager.getColumns(reportid).then(function (response) {
                            var res = response.result;
                            for (let i = 0; i < res.length; i++) {
                                data.push({ id: res[i].AliasName, text: res[i].AliasName });
                            }
                            $("#date_FromDate").select2({
                                placeholder: 'Select From Date Column',
                                data: data,
                            });
                            $("#date_ToDate").select2({
                                placeholder: 'Select To Date Column',
                                data: data,
                            });
                            $("#TextColumn_AutoComplete").select2({
                                placeholder: 'Select Text Column',
                                data: data,
                                allowClear: true
                            });
                            $("#ValueColumn_AutoComplete").select2({
                                placeholder: 'Select Value Column',
                                data: data,
                                allowClear: true
                            });
                            if (id != 0) {
                                instance.getCalendarById(id);
                            }
                        });
                        $("#btnClose").click(function () {
                            $('#' + containerid).modal('hide');
                            $('#' + containerid).remove();
                        });
                        jQuery("#btnSave").unbind().click(function () {
                            instance.saveCalendar(id, reportid, containerid, null);
                        });
                    }
                    getCalendarById(id) {
                        var instance = this;
                        instance.viewerManager.getCalendarView(id).then(function (response) {
                            instance.response = response.result;
                            $("#Txt_Display_Name").val(instance.response.DisplayName ? instance.response.DisplayName.trim() : instance.response.CalendarName.trim());
                            $("#CalendarName").val(instance.response.CalendarName.trim()).attr("readonly", 'true').css("cursor", "not-allowed");
                            $("#ValueColumn_AutoComplete").val(instance.response.ValueColumn).trigger("change");
                            $("#TextColumn_AutoComplete").val(instance.response.TextColumn).trigger("change");
                            $("#date_FromDate").val(instance.response.FromDateColumn).trigger("change");
                            $("#date_ToDate").val(instance.response.ToDateColumn).trigger("change");
                        });
                    }
                    saveCalendar(id, reportid, containerid, obj) {
                        var instance = this;
                        var PostData = obj;
                        if (obj == null) {
                            PostData = {
                                CalendarViewId: Number(id),
                                CalendarName: $("#CalendarName").val(),
                                ValueColumn: $("#ValueColumn_AutoComplete option:selected").text(),
                                TextColumn: $("#TextColumn_AutoComplete option:selected").text(),
                                ToDateColumn: $("#date_ToDate option:selected").text(),
                                FromDateColumn: $("#date_FromDate option:selected").text(),
                                ReportId: Number(this.ReportId),
                                DisplayModeTypeId: 1,
                                ViewAll: instance.response && instance.response.ViewAll || true,
                                DisplayName: $("#Txt_Display_Name").val().toString().trim(),
                                IsFromUI: Number(id) == 0 ? true : false,
                            };
                        }
                        this.fileCacheHelper.loadJsFile("platform/analytics/managers/reportmanager.js", function () {
                            instance.viewerManager.saveCalendarView(PostData).then(function (response) {
                                if (response.status == Unibase.Data.Status.Error) {
                                    MessageHelper.Instance().showError(response.message, 'divCalendar_ErrorMessage');
                                }
                                else {
                                    MessageHelper.Instance().showSuccess(response.message, '');
                                    $('#' + containerid).modal('hide');
                                    $('#' + containerid).remove();
                                }
                            });
                        });
                    }
                    static Instance() {
                        if (this._instance === undefined)
                            this._instance = new Unibase.Platform.Analytics.Components.CalendarViewerSettings();
                        return this._instance;
                    }
                }
                Components.CalendarViewerSettings = CalendarViewerSettings;
            })(Components = Analytics.Components || (Analytics.Components = {}));
        })(Analytics = Platform.Analytics || (Platform.Analytics = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));