WebBuild/wwwroot/tenants/themes/compact/components/userthemes/usertheme.js

var Unibase;
(function (Unibase) {
    let Themes;
    (function (Themes) {
        let Compact;
        (function (Compact) {
            let Components;
            (function (Components) {
                class UserTheme extends Unibase.Platform.Core.BaseComponent {
                    constructor() {
                        super(...arguments);
                        this.layoutElement = '#user-themes #menu-layouts .card-body .row.layout-row a';
                        this.detailsViewElement = '#user-themes #detail-list-view .card-body .row.detail-row a';
                        this.backgroundImageElement = '#user-themes #background-image-view .card-body .row a';
                        this.displayModeElement = '#user-themes #theme-switcher-colors .card-body .row a';
                        this.currentUserTheme = {
                            LayoutId: 0,
                            DetailsViewId: 0,
                            DisplayModeId: 0,
                            BackgroundImageId: 0,
                            ThemeId: 0,
                            IsCompanyTheme: false,
                        };
                    }
                    userTheme(isCompany, companyId, roleId, isRole) {
                        let instance = this;
                        var _fileCacheHelper = Unibase.Platform.Helpers.FileCacheHelper.Instance();
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadCssFiles(['platform/layout/components/layoutbuilder/style.layoutbuilder.css'], function () {
                            if (companyId == undefined || companyId == "" || companyId == null) {
                                companyId = 0;
                            }
                            if (roleId == undefined || roleId == "" || roleId == null) {
                                roleId = 0;
                            }
                            Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().getLayoutBuilderInfo(companyId, roleId).then(function (response) {
                                $(".biz-wrapper").addClass("biz-settings-toggle");
                                $(".hk-wrapper").addClass("biz-settings-toggle");
                                / Plain Html /;
                                let leftHtml = Unibase.Platform.Layouts.Components.LayoutBuilder_Template.Instance().getLeftHtml();
                                let onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveUserTheme()";
                                if (isCompany || isRole) {
                                    onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveCompanyTheme()";
                                }
                                let html = ` 
                                        <div class="user-themes" id="user-themes">
                                            <div class="user-themes-header"></div>
                                                <div class="user-themes-body">
                                                    ${leftHtml}
                                                </div>
                                                <div class="user-themes-footer">
                                                <a href="javascript:;" class="btn btn-theme px-4 w-100" type="button" onclick="` + onclick + `">Apply</a>
                                                </div>
                                        </div>`;
                                $("#settings-panel-body").html(html);
                                $("#settings-panel-head-title").html("Themes");
                                let themeSwitchHtml = ` <div class="card theme-switcher">
                                                    <div class="card-header">
                                                        <a href="javascript:;" class="no-collapse biz-primary-text-color-removed" > Theme Switcher </a>
                                                        </div>
                                                    <div class="title-devider biz-border-color-removed"> </div>
                                                        <div id="theme-switcher-colors">
                                                            <div class="card-body pb-0" >
                                                                <div class="row dropdown-menu-scrollbar checkbox-container">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>`;
                                $("#user-themes .background-change").before(themeSwitchHtml);
                                response.result.LayoutInfo.forEach((layout) => {
                                    let curLayout = layout;
                                    let layoutId = curLayout.LayoutId;
                                    curLayout.Thumbnail = curLayout.Thumbnail.replace(".png", ".svg");
                                    $("#user-themes #menu-layouts .layout-row").append(`<a href="javascript:;" class="col-6 p-0 pr-2 p-relative" data-id="${layoutId}" data-index="${curLayout.LayoutIndex}">	                                    
                                            <img src="${curLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${curLayout.LayoutName}" />
	                                        <i class="zmdi zmdi-check"></i>
                                        </a>`);
                                });
                                $(instance.layoutElement).click(function () {
                                    $(instance.layoutElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.currentUserTheme.LayoutId = id;
                                });
                                response.result.DetailViewInfo.forEach((viewLayout) => {
                                    if (viewLayout.DetailsViewName != "Popup") {
                                        let id = viewLayout.DetailsViewId;
                                        $("#user-themes #detail-list-view .detail-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${id}">	                                    
                                    <img src="${viewLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${viewLayout.DetailsViewName}" />
	                                <i class="zmdi zmdi-check"></i>
                                </a>`);
                                    }
                                });
                                $('.isStructSettingsEnableChk').parent().siblings().remove();
                                $('[for="isStructSettingsEnableChk"]').remove();
                                $(instance.detailsViewElement).click(function () {
                                    $(instance.detailsViewElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.currentUserTheme.DetailsViewId = id;
                                });
                                response.result.DisplayModesInfo.forEach((displayMode) => {
                                    $("#user-themes #theme-switcher-colors .row").append(`<a href="javascript:;" class="p-relative mr-2 mb-2" data-id="${displayMode.DisplayModeId}" title="${displayMode.DisplayModeName}">
                                            <div class="p-relative color-box border biz-border-color-removed" style="background-color:${displayMode.PrimaryColor}">
                                        
                                            </div>
                                            <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                });
                                $(instance.displayModeElement).click(function () {
                                    $(instance.displayModeElement).removeClass('active');
                                    $(this).addClass('active');
                                    $(`${instance.backgroundImageElement}.solid-color .color-box`).css("background-color", $(this).find('.color-box').css("background-color"));
                                    $(`${instance.backgroundImageElement}.solid-color color-box`).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.currentUserTheme.DisplayModeId = id;
                                });
                                let solidColorImage = `<a href="javascript:;" class="col-4 p-relative px-1 solid-color active" data-id="0">
                                                            <div class="p-relative color-box border biz-border-color-removed" style="height:65px">
                                                                    
                                                            </div>
                                                            <i class="zmdi zmdi-check"></i>
                                                        </a>`;
                                $("#user-themes #background-image-view .row").append(solidColorImage);
                                response.result.BackgroundImages.forEach((backgroundImage) => {
                                    let IsDefaultClass = backgroundImage.IsDefault ? 'default' : '';
                                    $("#user-themes #background-image-view .row").append(`<a href="javascript:;" class="col-4 p-relative px-1 ${IsDefaultClass}" data-url="${backgroundImage.Thumbnail}" data-id="${backgroundImage.BackgroundImageId}">
                                            <div class="p-relative">
                                                <img src="${backgroundImage.Thumbnail}" class="rounded w-100" data-dynamic="1" onerror = "ReloadImage(event)" />
                                                <div class="delete" data-id="${backgroundImage.BackgroundImageId}">
                                                    <i class="fa fa-trash"></i> 
                                                </div>
                                            </div>
                                            <i class="zmdi zmdi-check"></i>
                                        </a>`);
                                });
                                $(instance.backgroundImageElement).click(function () {
                                    $(instance.backgroundImageElement).removeClass('active');
                                    $(this).addClass('active');
                                    instance.currentUserTheme.BackgroundImageId = Number($(this).attr('data-id'));
                                });
                                let currentTheme = Unibase.Themes.Compact.Components.Index.Instance().currentTheme;
                                if (isCompany || isRole) {
                                    currentTheme = response.result.CompanyTheme;
                                    if (currentTheme === '') {
                                        instance.currentUserTheme.LayoutId = 0;
                                        instance.currentUserTheme.DetailsViewId = 0;
                                        instance.currentUserTheme.DisplayModeId = 0;
                                        instance.currentUserTheme.BackgroundImageId = 0;
                                        instance.currentUserTheme.ThemeId = 0;
                                    }
                                    if (isRole && $(".hdn_themeid").length === 0) {
                                        $('._bizgaze_popup_container').last().find('.section_Hidden').append(`<input type="hidden" class="hdn_themeid" value="0"><input type="hidden" class="hdn_displaymodeid" value="0">`);
                                    }
                                    if (currentTheme === '' && $(".hdn_themeid").val() != "0") {
                                        instance.bindSelectedUserThemeSettings();
                                        return;
                                    }
                                }
                                $(`${instance.layoutElement}[data-id="${currentTheme.layoutId}"]`).click();
                                $(`${instance.detailsViewElement}[data-id="${currentTheme.detailsViewId}"]`).click();
                                $(`${instance.displayModeElement}[data-id="${currentTheme.displayModeId}"]`).click();
                                $(`${instance.backgroundImageElement}[data-id="${currentTheme.backgroundImageId}"]`).click();
                                instance.currentUserTheme.ThemeId = currentTheme.themeId;
                                instance.currentUserTheme.IsCompanyTheme = currentTheme.isCompanyTheme;
                            });
                        });
                    }
                    bindSelectedUserThemeSettings() {
                        const instance = this;
                        const currentTheme = JSON.parse($(".hdn_themeid").val().toString());
                        const { LayoutId, DetailsViewId, DisplayModeId, BackgroundImageId } = currentTheme;
                        $(`${instance.layoutElement}[data-id="${LayoutId}"]`).trigger('click');
                        $(`${instance.detailsViewElement}[data-id="${DetailsViewId}"]`).trigger('click');
                        $(`${instance.displayModeElement}[data-id="${DisplayModeId}"]`).trigger('click');
                        $(`${instance.backgroundImageElement}[data-id="${BackgroundImageId}"]`).trigger('click');
                    }
                    init(isCompany, companyId) {
                        let instance = this;
                        var _fileCacheHelper = Unibase.Platform.Helpers.FileCacheHelper.Instance();
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadCssFiles(['platform/layout/components/layoutbuilder/style.layoutbuilder.css'], function () {
                            Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFiles(['platform/core/infos/status.js', 'platform/layout/managers/themelayoutmanager.js'], function () {
                                if (companyId == undefined || companyId == "" || companyId == null) {
                                    companyId = 0;
                                }
                                Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().getLayoutBuilderInfo(companyId, 0).then(function (response) {
                                    $(".biz-wrapper").addClass("biz-settings-toggle");
                                    $(".hk-wrapper").addClass("biz-settings-toggle");
                                    let leftHtml = Unibase.Platform.Layouts.Components.LayoutBuilder_Template.Instance().getLeftHtml();
                                    let onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveUserTheme()";
                                    if (isCompany) {
                                        onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveCompanyTheme()";
                                    }
                                    let html = `<div class="user-themes" id="user-themes">
                                                <div class="user-themes-header"></div>
                                                    <div class="user-themes-body">
                                                        ${leftHtml}
                                                    </div>
                                                 <div class="user-themes-footer">
                                                    <a href="javascript:;" class="btn btn-theme px-4 w-100" type="button" onclick="` + onclick + `">Apply</a>
                                                 </div>
                                            </div>`;
                                    $("#settings-panel-body").html(html);
                                    $("#settings-panel-head-title").html("Themes");
                                    let themeSwitchHtml = `<div class="card theme-switcher">
                                                        <div class="card-header">
                                                            <a href="javascript:;" class="no-collapse biz-primary-text-color-removed" > Theme Switcher </a>
                                                         </div>
                                                        <div class="title-devider biz-border-color-removed"> </div>
                                                            <div id="theme-switcher-colors">
                                                                <div class="card-body pb-0" >
                                                                    <div class="row dropdown-menu-scrollbar checkbox-container">
                                                                    </div>
                                                             </div>
                                                         </div>
                                                      </div>`;
                                    $("#user-themes .background-change").before(themeSwitchHtml);
                                    response.result.LayoutInfo.forEach((layout) => {
                                        let curLayout = layout;
                                        let layoutId = curLayout.LayoutId;
                                        curLayout.Thumbnail = curLayout.Thumbnail.replace(".png", ".svg");
                                        $("#user-themes #menu-layouts .layout-row").append(`<a href="javascript:;" class="col-6 p-0 pr-2 p-relative" data-id="${layoutId}" data-index="${curLayout.LayoutIndex}">	                                    
                                                <img src="${curLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${curLayout.LayoutName}" />
	                                            <i class="zmdi zmdi-check"></i>
                                            </a>`);
                                    });
                                    $(instance.layoutElement).click(function () {
                                        $(instance.layoutElement).removeClass('active');
                                        $(this).addClass('active');
                                        let id = Number($(this).attr('data-id'));
                                        instance.currentUserTheme.LayoutId = id;
                                    });
                                    response.result.DetailViewInfo.forEach((viewLayout) => {
                                        if (viewLayout.DetailsViewName != "Popup") {
                                            let id = viewLayout.DetailsViewId;
                                            $("#user-themes #detail-list-view .detail-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${id}">	                                    
                                        <img src="${viewLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${viewLayout.DetailsViewName}" />
	                                    <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                        }
                                    });
                                    $(instance.detailsViewElement).click(function () {
                                        $(instance.detailsViewElement).removeClass('active');
                                        $(this).addClass('active');
                                        let id = Number($(this).attr('data-id'));
                                        instance.currentUserTheme.DetailsViewId = id;
                                    });
                                    response.result.DisplayModesInfo.forEach((displayMode) => {
                                        $("#user-themes #theme-switcher-colors .row").append(`<a href="javascript:;" class="p-relative mr-2 mb-2" data-id="${displayMode.DisplayModeId}" title="${displayMode.DisplayModeName}">
                                                <div class="p-relative color-box border biz-border-color-removed" style="background-color:${displayMode.PrimaryColor}">
                                        
                                                </div>
                                                <i class="zmdi zmdi-check"></i>
                                        </a>`);
                                    });
                                    $(instance.displayModeElement).click(function () {
                                        $(instance.displayModeElement).removeClass('active');
                                        $(this).addClass('active');
                                        $(`${instance.backgroundImageElement}.solid-color .color-box`).css("background-color", $(this).find('.color-box').css("background-color"));
                                        $(`${instance.backgroundImageElement}.solid-color color-box`).addClass('active');
                                        let id = Number($(this).attr('data-id'));
                                        instance.currentUserTheme.DisplayModeId = id;
                                    });
                                    let solidColorImage = `<a href="javascript:;" class="col-4 p-relative px-1 solid-color active" data-id="0">
                                                                <div class="p-relative color-box border biz-border-color-removed" style="height:65px">
                                                                    
                                                                </div>
                                                                <i class="zmdi zmdi-check"></i>
                                                            </a>`;
                                    $("#user-themes #background-image-view .row").append(solidColorImage);
                                    response.result.BackgroundImages.forEach((backgroundImage) => {
                                        let IsDefaultClass = backgroundImage.IsDefault ? 'default' : '';
                                        $("#user-themes #background-image-view .row").append(`<a href="javascript:;" class="col-4 p-relative px-1 ${IsDefaultClass}" data-url="${backgroundImage.Thumbnail}" data-id="${backgroundImage.BackgroundImageId}">
                                                <div class="p-relative">
                                                    <img src="${backgroundImage.Thumbnail}" class="rounded w-100" data-dynamic="1" onerror = "ReloadImage(event)" />
                                                    <div class="delete" data-id="${backgroundImage.BackgroundImageId}">
                                                        <i class="fa fa-trash"></i> 
                                                    </div>
                                                </div>
                                                <i class="zmdi zmdi-check"></i>
                                            </a>`);
                                    });
                                    $(instance.backgroundImageElement).click(function () {
                                        $(instance.backgroundImageElement).removeClass('active');
                                        $(this).addClass('active');
                                        instance.currentUserTheme.BackgroundImageId = Number($(this).attr('data-id'));
                                    });
                                    let currentTheme = Unibase.Themes.Compact.Components.Index.Instance().currentTheme;
                                    if (isCompany) {
                                        currentTheme = response.result.CompanyTheme;
                                    }
                                    $(`${instance.layoutElement}[data-id="${currentTheme.layoutId}"]`).click();
                                    $(`${instance.detailsViewElement}[data-id="${currentTheme.detailsViewId}"]`).click();
                                    $(`${instance.displayModeElement}[data-id="${currentTheme.displayModeId}"]`).click();
                                    $(`${instance.backgroundImageElement}[data-id="${currentTheme.backgroundImageId}"]`).click();
                                    instance.currentUserTheme.ThemeId = currentTheme.themeId;
                                    instance.currentUserTheme.IsCompanyTheme = currentTheme.isCompanyTheme;
                                });
                            });
                        });
                    }
                    saveCompanyTheme() {
                        let instance = this;
                        let postData = {
                            LayoutId: instance.currentUserTheme.LayoutId,
                            ThemeId: instance.currentUserTheme.ThemeId || 0,
                            DetailsViewId: instance.currentUserTheme.DetailsViewId,
                            DisplayModeId: instance.currentUserTheme.DisplayModeId,
                            BackgroundImageId: instance.currentUserTheme.BackgroundImageId
                        };
                        const placeholder = $('._bizgaze_popup_container').last().find('.form-error-message').first().attr('id');
                        if (!postData.LayoutId && !postData.DetailsViewId && !postData.DisplayModeId) {
                            MessageHelper.Instance().showError('Select Theme.', placeholder);
                            return;
                        }
                        if (!postData.LayoutId) {
                            MessageHelper.Instance().showError('Select Preferred Layout in Theme.', placeholder);
                            return;
                        }
                        else if (!postData.DetailsViewId) {
                            MessageHelper.Instance().showError('Select Preferred Details View in Theme.', placeholder);
                            return;
                        }
                        else if (!postData.DisplayModeId) {
                            MessageHelper.Instance().showError('Select Theme Switcher.', placeholder);
                            return;
                        }
                        $(".hdn_themeid").val(JSON.stringify(postData));
                        $(".hdn_displaymodeid").val(instance.currentUserTheme.DisplayModeId);
                        $(".biz-wrapper,.hk-wrapper").removeClass("biz-settings-toggle");
                    }
                    saveUserTheme() {
                        let instance = this;
                        let postData = {
                            LayoutId: instance.currentUserTheme.LayoutId,
                            ThemeId: instance.currentUserTheme.IsCompanyTheme ? 0 : instance.currentUserTheme.ThemeId,
                            DetailsViewId: instance.currentUserTheme.DetailsViewId,
                            DisplayModeId: instance.currentUserTheme.DisplayModeId,
                            BackgroundImageId: instance.currentUserTheme.BackgroundImageId
                        };
                        Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveUserTheme(postData).then(function (response) {
                            if (response.status == Unibase.Data.Status.Success) {
                                MessageHelper.Instance().showSuccess(response.message, '');
                                Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().refrshLayout(response);
                            }
                        });
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new UserTheme();
                        }
                        return this.instance;
                    }
                }
                Components.UserTheme = UserTheme;
            })(Components = Compact.Components || (Compact.Components = {}));
        })(Compact = Themes.Compact || (Themes.Compact = {}));
    })(Themes = Unibase.Themes || (Unibase.Themes = {}));
})(Unibase || (Unibase = {}));