WebBuild/wwwroot/platform/controls/dropdown/dropdown.settings.js

var Unibase;
(function (Unibase) {
    let Forms;
    (function (Forms) {
        let Controls;
        (function (Controls) {
            class DropDown_Settings extends Unibase.Platform.Core.BaseComponent {
                constructor() {
                    super(...arguments);
                    this.ParentDocPropertyId = 0;
                }
                loadControlPropertiesHtml(controlpropList, container) {
                    return ``;
                }
                bindPropertySettings(prop) {
                    var propertySettings = prop.PropertySettings;
                    return "";
                }
                savePropertySettings(prop) {
                    var propertySettings = prop.PropertySettings;
                    return "";
                }
                loadSettingHtml(container) {
                    let html = `<section class="card"><div class="b-b bg-white card-header"><strong class="text-dark Title" id="cpheader">Drop Down Setting</strong></div><div class="row"><div class="col-sm-4 ml-30"><label for="chkIsReportData" style="margin-top:19px; margin-right:20px;"><b>Is ReportData</b></label ><label id="lblIsReportData" class="switch m-t form-inline pull-right mt-10" style="color:grey"><input id="chkIsReportData" data-group="IsRequired" type="checkbox"><span></span></label></div><div class="col-sm-4 ml-30"><label for="chkIsReportData" style="margin-top:19px; margin-right:20px;"><b>Enable Select Option</b></label><label id="lblIsReportData" class="switch m-t form-inline pull-right mt-10" style="color:grey"><input id="chkSelectOption" data-group="IsRequired" type="checkbox" checked><span></span></label></div></div><div class="card-body" id="drpDwnStatic"><div class="row"><div class="col-sm-12"><ul class="list-group list-group-flush dropdownOptions font-14 m-t-n-md ui-sortable" id="dropdownOptions"></ul></div></div><div class="row"><div class="col-sm-6" id="divDropDownList"><div class="divDropDownList"><a href="javascript:" class="btn btn-primary" onclick="Unibase.Forms.Controls.DropDown_Settings.Instance().AddDropDownOptions(0, '', '', '', '', '', '', '');" id="addNewDropDown">Add New Drop Down</a></div></div></div></div><div class="card-body hidden" id="drpDwnUsingReport"><div class="row"><div class="col-sm-4"><label class="font-bold" style="color:grey">Report<span class="text-danger" id="spnIsRequired_Section"> *</span></label><select class="form-control" id="drpDwnReports"><option value="0">--Select--</option></select></div><div class="col-sm-4"><label class="font-bold" style="color:grey">Id Column<span class="text-danger" id="spnIsRequired_Section"> *</span></label><select class="form-control" id="drpDwnIdColumns"></select></div><div class="col-sm-4"><label class="font-bold" style="color:grey">Text Column<span class="text-danger" id="spnIsRequired_Section"> *</span></label><select class="form-control" id="drpDwnTextColumns"></select></div></div></div></section>`;
                    $(container).append(html);
                    $("#drpDwnReports").select2({ placeholder: 'Select Report', width: '100%' });
                    $("#drpDwnIdColumns").select2({ placeholder: 'Select IdColumn', width: '100%' });
                    $("#drpDwnTextColumns").select2({ placeholder: 'Select TextColumn', width: '100%' });
                    var instance = this;
                    instance.DropDownIdArray = [];
                    $("#chkIsReportData").on("change", function () {
                        if ($("#chkIsReportData").prop("checked")) {
                            $("#drpDwnUsingReport").removeClass("hidden");
                            Unibase.Forms.Controls.DropDown_Settings.Instance().LoadReports();
                            $("#drpDwnStatic").addClass("hidden");
                            $('#drpDwnReports').addClass("required");
                            $('#drpDwnIdColumns').addClass("required");
                            $('#drpDwnTextColumns').addClass("required");
                        }
                        else {
                            $("#drpDwnUsingReport").addClass("hidden");
                            $("#drpDwnStatic").removeClass("hidden");
                            $('.option-group').remove();
                            $('#drpDwnReports').removeClass("required");
                            $('#drpDwnIdColumns').removeClass("required");
                            $('#drpDwnTextColumns').removeClass("required");
                        }
                    });
                }
                bindControlData(controldatajson) {
                    var instance = this;
                    if (controldatajson != undefined && controldatajson != "") {
                        $("#chkSelectOption").prop('checked', Boolean(controldatajson[0].EnableSelectOption));
                        if ((controldatajson.length == 1) && (controldatajson[0].ReportId != 0)) {
                            $("#chkIsReportData").prop("checked", true);
                            $("#drpDwnUsingReport").removeClass("hidden");
                            $("#drpDwnStatic").addClass("hidden");
                            Unibase.Forms.Controls.DropDown_Settings.Instance().LoadReports();
                            Unibase.Forms.Controls.DropDown_Settings.Instance().LoadReportCoulmns(controldatajson[0].ReportId);
                            setTimeout(function () {
                                $("#drpDwnReports").val(controldatajson[0].ReportId).select2();
                                jQuery("#drpDwnIdColumns").val(controldatajson[0].ColumnValue).trigger('change');
                                jQuery("#drpDwnTextColumns").val(controldatajson[0].ColumnText).trigger('change');
                            }, 200);
                            instance.DropDownIdArray.push(controldatajson[0].DropDownColumnId);
                        }
                        else {
                            $("#chkSelectOption").prop('checked', Boolean(controldatajson[0].EnableSelectOption));
                            $("#chkIsReportData").prop("checked", false);
                            $("#drpDwnUsingReport").addClass("hidden");
                            $("#drpDwnStatic").removeClass("hidden");
                            for (var i = 0; i < controldatajson.length; i++) {
                                var DropDownParentId = controldatajson[i].DropDownParentId;
                                var ParentDocPropertyId = controldatajson[i].ParentDocPropertyId;
                                var IndexNumber = controldatajson[i].IndexNumber;
                                $("#DropDownParentId").val(controldatajson[i].DropDownParentId);
                                DropDown_Settings.Instance().ParentDocPropertyId = controldatajson[i].ParentDocPropertyId;
                                DropDown_Settings.Instance().AddDropDownOptions(controldatajson[i].DropDownColumnId, controldatajson[i].ColumnText, controldatajson[i].ColumnValue, '', ParentDocPropertyId, IndexNumber, DropDownParentId, controldatajson[i].ParentDropDownColumnName);
                                instance.DropDownIdArray.push(controldatajson[i].DropDownColumnId);
                            }
                        }
                    }
                    $(".option-group").addClass('floating-label-form-group-with-value');
                }
                SaveControlData(controldatajson) {
                    var arr = [];
                    var instance = this;
                    if ($("#chkIsReportData").prop("checked")) {
                        var data = {
                            DropDownColumnId: Number(instance.DropDownIdArray[0] == null ? 0 : instance.DropDownIdArray[0]),
                            ColumnText: $("#drpDwnTextColumns option:selected").val(),
                            ColumnValue: $("#drpDwnIdColumns option:selected").val(),
                            DocPropertyId: Number(Unibase.Platform.Forms.Components.PropertyEditor.Instance().DocPropertyId),
                            ControlId: Unibase.Platform.Forms.Components.ControlEditor.Instance().ControlId,
                            IndexNumber: $(this).index() + 1,
                            ReportId: Number($("#drpDwnReports option:selected").val()),
                            EnableSelectOption: Boolean($("#chkSelectOption").prop('checked')),
                        };
                        arr.push(data);
                    }
                    else {
                        var i = 0;
                        $(".option-group").each(function () {
                            var data = {
                                DropDownColumnId: Number(instance.DropDownIdArray[i] == null ? 0 : instance.DropDownIdArray[i]),
                                ColumnText: $(this).find(".rdbText").val(),
                                ColumnValue: $(this).find(".rdbValue").val(),
                                DocPropertyId: Number(Unibase.Platform.Forms.Components.PropertyEditor.Instance().DocPropertyId),
                                ControlId: Unibase.Platform.Forms.Components.ControlEditor.Instance().ControlId,
                                IndexNumber: $(this).index() + 1,
                                ReportId: 0,
                                EnableSelectOption: Boolean($("#chkSelectOption").prop('checked')),
                            };
                            arr.push(data);
                            i++;
                        });
                    }
                    var ControlJsonText = JSON.stringify(arr);
                    return ControlJsonText;
                }
                LoadReports() {
                    Unibase.Platform.Analytics.Managers.ReportManager.Instance().getReports().then(function (response) {
                        var html = "";
                        for (let i = 0; i < response.length; i++) {
                            var data = response[i];
                            html += '<option value="' + data.ReportId + '">' + data.ReportName + '</option>';
                        }
                        $("#drpDwnReports").append(html);
                        $("#drpDwnReports").change(function () {
                            $("#drpDwnIdColumns").text('');
                            $("#drpDwnTextColumns").text('');
                            var ReportClass = $("#drpDwnReports option:selected").val().toString();
                            var ReportId = Number(ReportClass);
                            Unibase.Forms.Controls.DropDown_Settings.Instance().LoadReportCoulmns(ReportId);
                        });
                    });
                }
                LoadReportCoulmns(ReportId) {
                    Unibase.Platform.Analytics.Managers.ReportManager.Instance().getHeaderColumns(ReportId).then(function (response) {
                        var html = '<option value="0"> --Select-- </option>';
                        for (let i = 0; i < response.length; i++) {
                            var data = response[i];
                            html += '<option value="' + data.field + '">' + data.title + '</option>';
                        }
                        $("#drpDwnIdColumns").append(html);
                        $("#drpDwnTextColumns").append(html);
                    });
                }
                AddDropDownOptions(DropDownColumnId, ColumnText, ColumnValue, ParentDocPropertyName, ParentDocPropertyId, IndexNumber, DropDownParentId, ParentDropDownColumnName) {
                    var instance = this;
                    var ddcId = 0;
                    var Index = $('.option-group').length;
                    var indicator = Index;
                    if (Index == 0) {
                        indicator = 0;
                    }
                    if (DropDownColumnId != 0) {
                        ddcId = DropDownColumnId;
                        indicator = IndexNumber;
                    }
                    else {
                        indicator += 1;
                        Index = indicator;
                    }
                    var text = '<li class="list-group-item ui-sortable-handle option-group" id="divDropDownOption_' + Index + '"><div class="" > ' +
                        '<div class="floating-label-form-group hidden" id="divParentDocPropertyName" style="border-left:0px;">' +
                        '<label for="lblValue" id="lbl" class="font-bold">Parent PropertyName</label>' +
                        '<input type="text" id="rdbParentDocPropertyName_' + Index + '" class="form-control value-control floating-label-control rdbParentDocPropertyName" data-controlpropertyname="Name" data-isdefault="true" data-required="true" data-regularexp="" data-validatemsg="" placeholder="Value" data-placeholder="Enter value column" data-label="Options" maxlength="50" disabled="true" />' +
                        '</div>' +
                        '<div class="hidden floating-label-form-group" id="divParentColumnName" style = "border-left:0px;"><label for="lblValue" id="lbl" class="font-bold">Parent ColumnName</label><select id="txtAutoComplete_ParentDDLColumn_' + Index + '" class="txtAutoComplete_ParentDDLColumn form-control text-control " style="width:100%;"></select></div>' +
                        '<i class="fa fa-sort pull-left"></i><div class=""><span id="option_header_' + Index + '">Drop-down text-</span><span id="IndexnumberDetails_' + Index + '" class="IndexnumberDetails"></span><a href="javascript:;" class="ml-auto btn-xs delete btn btn-icon btn-icon-circle btn-pink btn-icon-style-3 pull-right delete_" onclick="Unibase.Forms.Controls.DropDown_Settings.Instance().RemoveDropDownOption(' + DropDownColumnId + ',' + Index + ')"><span class="btn-icon-wrap"><i class="fa fa-times remove-icon_' + Index + '"></i><span></a></div>' +
                        '<div class="row">' +
                        '<div class="col-sm-6" id="columnid" style = "border-left:0px;" ><div class="floating-label-form-group"><label for="lblName" id="lbl" class="font-bold">Text<span class="text-danger" id="spnIsRequired_Section"> *</span></label>' +
                        '<input type="text" id="rdbText_' + Index + '" class="form-control floating-label-control rdbText required" data-controlpropertyname="Name" data-isdefault="true" data-required="true" data-regularexp="" data-validatemsg="" placeholder="Text " data-placeholder="Enter text column" data-label="Text " maxlength="50" /></div></div>' +
                        '<div class="col-sm-6" id="columnVal" style = "border-left:0px;" ><div class="floating-label-form-group"><label for="lblValue" id="lbl" class="font-bold">Value<span class="text-danger" id="spnIsRequired_Section"> *</span></label>' +
                        '<input type="text" id="rdbValue_' + Index + '" class="form-control floating-label-control rdbValue required" data-controlpropertyname="Name" data-isdefault="true" data-required="true" data-regularexp="" data-validatemsg="" placeholder="Value " data-placeholder="Enter value column" data-label="Value " maxlength="50" />' +
                        '</div></div>' +
                        '</div></div></li>';
                    $("#dropdownOptions").append(text);
                    if (ColumnText != '' || ColumnText != undefined) {
                        $("#rdbText_" + Index).val(ColumnText);
                    }
                    if (ColumnValue != '' || ColumnValue != undefined) {
                        $("#rdbValue_" + Index).val(ColumnValue);
                        $("#DropDownParentId_" + Index).val($("#DropDownParentId").val());
                    }
                    if (IndexNumber != '' && IndexNumber != undefined) {
                        $("#IndexnumberDetails_" + Index).text(IndexNumber);
                        $("#IndexNumber").removeClass('hidden');
                    }
                    if (indicator != undefined) {
                        $("#IndexnumberDetails_" + Index).text(indicator);
                        $("#IndexNumber").removeClass('hidden');
                    }
                    let e = $("#dropdownOptions");
                    e.sortable({
                        stop: function (e, ui) {
                            var index = 1;
                            $("#dropdownOptions").find('.option-group').each(function () {
                                var index = $(this).index() + 1;
                                $(this).find(".IndexnumberDetails").text(index);
                            });
                        }
                    });
                }
                RemoveDropDownOption(DropDownColumnId, Index) {
                    $("#divDropDownOption_" + Index).remove();
                    $("#dropdownOptions").find('.option-group').each(function () {
                        var index = $(this).index() + 1;
                        $(this).find(".IndexnumberDetails").text(index);
                    });
                }
                static Instance() {
                    if (this._instance === undefined)
                        this._instance = new DropDown_Settings();
                    return this._instance;
                }
            }
            Controls.DropDown_Settings = DropDown_Settings;
        })(Controls = Forms.Controls || (Forms.Controls = {}));
    })(Forms = Unibase.Forms || (Unibase.Forms = {}));
})(Unibase || (Unibase = {}));