WebBuild/wwwroot/platform/dashboards/components/createdashboard.js

var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Dashboards;
        (function (Dashboards) {
            let Components;
            (function (Components) {
                class CreateDashboard extends Platform.Core.BaseComponent {
                    constructor() {
                        super();
                        this.dashboardManager = Dashboards.Managers.DashboardManager.Instance();
                    }
                    cssFiles() {
                        return [];
                    }
                    jsFiles() {
                        return ["platform/dashboards/managers/dashboardmanager.js", "platform/dashboards/requests/dashboards.js", "platform/dashboards/components/dashboardpermissions.js", "platform/portlets/managers/portletmanager.js"];
                    }
                    html(id, containerid) {
                        let html = `<form id="frm_Bizgaze_EditDashboard" method="post" data-validate="parsley" class="w-f bg-white"><div class="header b-b bg-white"><strong id="form_header_name">Create Dashboard</strong><a class="btn btn-xs btn-icon ml-auto"><i class="ti-help-alt"></i></a></div><div class="scrollable"><div id="Unibase_EditDashboardErrorMessages" class="clear"></div><div id="EditDashboard" class="card"><div class="card-header">Details</div><div class="card-body">
                        <div class="row"><div class="col-lg-12"><div class="floating-label-form-group floating-label-form-group-with-value focus" id="div_DashboardName"><label for="txt_NewDashboardName" id="lbl_Dashboardname">Dashboard Name<span class="text-danger"> *</span></label><div class=""><input type="text" id="Txt_EditDashboardName" class="form-control value-control floating-label-control" data-isdynamic="false" placeholder="Dashboard Name *" data-placeholder="Enter Dashboard Name" data-label="Dashboard Name *" /></div><input type="hidden" id="EditDashboardId" value="0" /></div></div></div><div class="row my-4"><div class="col-lg-6"><div class="floating-label-form-group floating-label-form-group-with-value focus" id="div_DashboardGroup"><label for="ddl_Title" id="lbl_Title">Dashboard Group</label>
                                    <select id="ddl_DashboardGroups" class="form-control" style="font-size:14px"></select>
                                    <label for="Validation" id="lblValidation_DashboardGroup"></label>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="floating-label-form-group floating-label-form-group-with-value focus" id="div_Dashboardindex">
                                    <label for="lbl_EditDashboardIndex" id="lbl_Dashboardindex">Index Number</label>
                                    <div class="input-group">
                                        <input type="number" id="Txt_EditDashboardIndex" min="0" onkeypress="return event.charCode != 45 && event.charCode!=101" class="form-control value-control floating-label-control" data-isdynamic="false" placeholder="Dashboard Index" data-placeholder="Enter Dashboard Index" data-label="Dashboard Index" />
                                    </div>
                                </div>
                            </div>
                            </div>
                            <div class="row"><div class="col-lg-6 d-flex justify-content-between align-items-center"><span>Pin Common Filters</span><label class="switch mb-0" for="pinCmnFiltersChk"><input type="checkbox" class="pin-cmn-filters-chk" id="pinCmnFiltersChk"><span></span></label></div>
                            <div class="col-sm-6 m-b hidden">
                                <label>Select Lobs</label>
                                <input type="hidden" id="hfLobs" />
                                <select multiple="multiple" id="txtLobs" style="width:100%" class="txtLobs"></select></div></div>
                        </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <span>Permissions</span>
                    </div>
                    <div class="card-body">
                        <div id="divBizgaze_DashboardPermissions_MessagesPlaceholder" class="clear m-b-sm">
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <strong>Is Trackable ?</strong>

                                <a href="javascript:;">
                                    <label class="switch pull-right">
                                        <input id="Ch_IsTrackable" type="checkbox"  data-group="Viewable">
                                        <span class="slider round"></span>
                                    </label>
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <strong>Everyone can view?</strong>

                                <a href="javascript:;">
                                    <label class="switch pull-right">
                                        <input id="chkIsDashboardViewable" type="checkbox" data-group="Viewable" checked>
                                        <span class="slider round"></span>
                                    </label>
                                </a>
                            </div>
                        </div>
                        <div class="row hidden mb-4" id="div_DashboardViewRoles">
                            <div class="col-sm-12 m-b">
                                <label>Roles that <strong>can</strong> view</label>
                                <input type="hidden" id="hfDashboardViewRoles" />
                                <select type="text" id="txtDashboardViewRoles" style="width:100%" value="" multiple="multiple"></select>
                            </div>

                        </div>
                        <div class="row" id="div_DashboardExcludeViewRoles">
                            <div class="col-sm-12 m-b">
                                <label>Roles that <strong>can't</strong> view</label>
                                <input type="hidden" id="hfDashboardExcludeViewRoles" />
                                <select type="text" id="txtDashboardExcludeViewRoles" style="width:100%" value="" multiple="multiple"></select>
                            </div>
                        </div>
                        <div class="row" id="divWPStages">
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer bg-white b-t">
                <a href="javascript:;" id="btn_CloseDashboard" class="pull-left btn btn-light btn-sm mr-auto">Close</a>
                <a href="javascript:;" id="btn_SaveDashboard" class="pull-right btn btn-sm btn-primary">Save</a>
            </div>
        </form>`;
                        return html;
                    }
                    load(id, containerid, callback) {
                        var instance = this;
                        instance.loadDashboardGroups();
                        $('#chkIsDashboardViewable').change(function () {
                            var viewable = $("#chkIsDashboardViewable").prop('checked');
                            if (viewable) {
                                $('#div_DashboardViewRoles').addClass("hidden");
                                $('#div_DashboardExcludeViewRoles').removeClass("hidden");
                            }
                            else {
                                $('#div_DashboardExcludeViewRoles').removeClass("hidden");
                                $('#div_DashboardViewRoles').removeClass("hidden");
                            }
                        });
                        let IncludeRoles = [];
                        let ExcludeRoles = [];
                        $('#txtDashboardViewRoles').on("select2:select", function (e) {
                            var result = e.params.data;
                            if (Number(result.id) != 0) {
                                var roleId = result.id;
                                IncludeRoles.push(roleId);
                                $(ExcludeRoles).each(function (i, value) {
                                    if (value == roleId) {
                                        var index = ExcludeRoles.indexOf(value);
                                        if (index > -1) {
                                            ExcludeRoles.splice(index, 1);
                                        }
                                        ExcludeRoles.splice(value, 1);
                                        jQuery("#txtDashboardExcludeViewRoles").val(ExcludeRoles).trigger('change');
                                        return false;
                                    }
                                });
                            }
                        });
                        $('#txtDashboardViewRoles').on("select2:unselect", function (e) {
                            var result = e.params.data;
                            if (Number(result.id) != 0) {
                                var roleId = Number(result.id);
                                IncludeRoles.pop(roleId);
                            }
                        });
                        $('#txtDashboardExcludeViewRoles').on("select2:select", function (e) {
                            var result = e.params.data;
                            if (Number(result.id) != 0) {
                                var roleId = result.id;
                                ExcludeRoles.push(roleId);
                                $(IncludeRoles).each(function (i, value) {
                                    if (value == roleId) {
                                        var index = IncludeRoles.indexOf(value);
                                        if (index > -1) {
                                            IncludeRoles.splice(index, 1);
                                        }
                                        jQuery("#txtDashboardViewRoles").val(IncludeRoles).trigger('change');
                                        return false;
                                    }
                                });
                            }
                        });
                        $('#txtDashboardExcludeViewRoles').on("select2:unselect", function (e) {
                            var result = e.params.data;
                            if (Number(result.id) != 0) {
                                var roleId = result.id;
                                ExcludeRoles.pop(roleId);
                            }
                        });
                        $("#btn_SaveDashboard").click(function () {
                            if ($("#Txt_EditDashboardName").val() == '') {
                                MessageHelper.Instance().showError("Dashboard Name is required", 'Unibase_EditDashboardErrorMessages');
                                return false;
                            }
                            let reqObj = new Unibase.Platform.Dashboards.Requests.Dashboard();
                            reqObj.DashboardName = String($("#Txt_EditDashboardName").val());
                            reqObj.DashboardIndex = Number($("#Txt_EditDashboardIndex").val());
                            reqObj.DashboardGroupId = Number($("#ddl_DashboardGroups").val());
                            reqObj.ViewRoles = IncludeRoles;
                            reqObj.ExcludeRoles = ExcludeRoles;
                            reqObj.IsTrackable = $("#Ch_IsTrackable").is(":checked");
                            reqObj.ViewAllStages = true;
                            reqObj.PinCommonFilters = $("#pinCmnFiltersChk").is(':checked');
                            instance.dashboardManager.saveDashboard(reqObj).then(function (response) {
                                if (response.errors == null) {
                                    instance.navigationHelper.closePopUp();
                                    MessageHelper.Instance().showSuccess('Dashboard Saved Successfully', '');
                                    Unibase.Platform.Dashboards.Components.ManageDashboard.Instance().loadDashboardGroups();
                                }
                                else
                                    MessageHelper.Instance().showError(response.errors[0], 'Unibase_EditDashboardErrorMessages');
                            });
                        });
                        $("#btn_CloseDashboard").click(function () {
                            instance.navigationHelper.closePopUp();
                        });
                        var _Permissions_ViewRoles = [];
                        var ExcludeViewRoles = [];
                        var Ids = [];
                        var ExludedIds = [];
                        var ViewRoleElementId = "txtDashboardViewRoles";
                        var ExcludeRoleElementId = "txtDashboardExcludeViewRoles";
                        Unibase.Platform.Dashboards.Components.DashboardPermissions.Instance().select2dashboardbinding(0, false, _Permissions_ViewRoles, ExcludeViewRoles, Ids, ExludedIds, ViewRoleElementId, ExcludeRoleElementId);
                    }
                    loadDashboardGroups() {
                        var instance = this;
                        instance.dashboardManager.getDashboardGroups().then(function (response) {
                            var indexhtml = "";
                            let html = "";
                            for (var i = 0; i < response.result.length; i++) {
                                html += '<option value="' + response.result[i].DashboardGroupId + '">' + response.result[i].DashboardGroupName + '</option>';
                                indexhtml += '<input type="hidden" class="portletscount_' + response.result[i].DashboardGroupId + '" value = "' + response.result[i].PortletCount + '">';
                            }
                            var selectOpt = '<option value="0">No Group</option>';
                            $('#ddl_DashboardGroups').html(selectOpt + html).append(indexhtml);
                            $('#ddl_DashboardGroups').change(function () {
                                var portletscount = 0;
                                var groupid = Number($('#ddl_DashboardGroups').val());
                                portletscount = Number($('.portletscount_' + groupid + '').val());
                                $('#Txt_EditDashboardIndex').val(portletscount);
                                if (groupid != 0) {
                                    $('#Txt_EditDashboardIndex').attr('disabled', 'true');
                                }
                            });
                        });
                    }
                    static Instance() {
                        return new CreateDashboard();
                    }
                }
                Components.CreateDashboard = CreateDashboard;
            })(Components = Dashboards.Components || (Dashboards.Components = {}));
        })(Dashboards = Platform.Dashboards || (Platform.Dashboards = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));