Nopcommerce 4.x Admin :Basic and Advanced setting

Nopcommerce 4.x Admin :Basic and Advanced setting

src/Presentation/Nop.Admin/Models/Settings/ModeModel.cs

using Nop.Web.Framework.Mvc;
using Nop.Web.Framework.Mvc.Models;

namespace Nop.Admin.Models.Settings
{
    public partial class ModeModel : BaseNopModel
    {
        public string ModeName { get; set; }
        public bool Enabled { get; set; }
    }
}

Components View

src/Presentation/Nop.Admin/Components/SettingMode.cs

using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using Nop.Admin.Models.Settings;
using Nop.Core;
using Nop.Services.Common;

namespace Nop.Admin.Components
{
    public class SettingModeViewComponent : ViewComponent
    {
        private readonly IWorkContext _workContext;

        public SettingModeViewComponent(IWorkContext workContext)
        {
            this._workContext = workContext;
        }

        public async Task<IViewComponentResult> InvokeAsync(string modeName = "settings-advanced-mode")
        {
            var model = new ModeModel()
            {
                ModeName = modeName,
                Enabled = _workContext.CurrentCustomer.GetAttribute<bool>(modeName)
            };

            return View(model);
        }
    }
}

Components 

src/Presentation/Nop.Admin/Views/Shared/Components/SettingMode/Default.cshtml

@model ModeModel
<div class="form-group">
    <div class="col-md-12">
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="advanced-settings-mode" checked="@Model.Enabled">
            <label class="onoffswitch-label" for="advanced-settings-mode">
                <span class="onoffswitch-inner" 
                      data-locale-basic="@T["Admin.Configuration.Settings.Mode.Basic"]" 
                      data-locale-advanced="@T["Admin.Configuration.Settings.Mode.Advanced"]"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
        <script type="text/javascript">
            function checkAdvancedSettingsMode(advanced) {
                if (advanced) {
                    $("body").addClass("advanced-settings-mode");
                    $("body").removeClass("basic-settings-mode");
                } else {
                    $("body").removeClass("advanced-settings-mode");
                    $("body").addClass("basic-settings-mode");
                }
            }
            checkAdvancedSettingsMode($("#advanced-settings-mode").is(':checked'));
            $(document).ready(function() {
                $("#advanced-settings-mode").click(function() {
                    checkAdvancedSettingsMode($(this).is(':checked'));
                    saveUserPreferences('@(Url.Action("SavePreference", "Preferences"))', '@Model.ModeName', $(this).is(':checked'));
                });
            });
        </script>
    </div>
</div>

src/Presentation/Nop.Admin/Views/Topic/_CreateOrUpdate.cshtml

@model TopicModel

@Html.ValidationSummary(false)
@Html.HiddenFor(model => model.Id)
@inject IEventPublisher eventPublisher

<script>
    $(document).ready(function () {
        bindBootstrapTabSelectEvent('topic-edit');
    });
</script>

<div class="content">
    <div class="form-horizontal">
        <div class="row">
            <div class="col-md-12 clearfix">
                <div class="pull-left">
                    @await Component.InvokeAsync("SettingMode", new { modeName = "topic-advanced-mode" })  //call  SettingMode
                </div>
            </div>
        </div>
        <div id="topic-edit" class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                @Html.RenderBootstrapTabHeader("tab-info", @T["Admin.ContentManagement.Topics.Info"], true)
                @Html.RenderBootstrapTabHeader("tab-seo", @T["Admin.Common.SEO"], customCssClass: "advanced-setting")
            </ul>
            <div class="tab-content">
                @Html.RenderBootstrapTabContent("tab-info", await Html.PartialAsync("_CreateOrUpdate.Info", Model), true)
                @Html.RenderBootstrapTabContent("tab-seo", await Html.PartialAsync("_CreateOrUpdate.Seo", Model))
            </div>
        </div>
    </div>
</div>

output

http://localhost:5999/Topic/Edit/5e06f62a2328b1510af3eda1

<div class="form-group">
    <div class="col-md-12">
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="advanced-settings-mode">
            <label class="onoffswitch-label" for="advanced-settings-mode">
                <span class="onoffswitch-inner" data-locale-basic="Basic" data-locale-advanced="Advanced"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
        <script type="text/javascript">
            function checkAdvancedSettingsMode(advanced) {
                if (advanced) {
                    $("body").addClass("advanced-settings-mode");
                    $("body").removeClass("basic-settings-mode");
                } else {
                    $("body").removeClass("advanced-settings-mode");
                    $("body").addClass("basic-settings-mode");
                }
            }
            checkAdvancedSettingsMode($("#advanced-settings-mode").is(':checked'));
            $(document).ready(function() {
                $("#advanced-settings-mode").click(function() {
                    checkAdvancedSettingsMode($(this).is(':checked'));
                    saveUserPreferences('/Preferences/SavePreference', 'topic-advanced-mode', $(this).is(':checked'));
                });
            });
        </script>
    </div>
</div>

basic-settings-mode

<body class="skin-blue sidebar-mini basic-settings-mode" style="">
<div class="form-group">
                <div class="col-md-3">
                    <div class="label-wrapper"><label class="control-label" for="IncludeInTopMenu" title="">Include in top menu</label></div>
                </div>
                <div class="col-md-9">
                    <input class="check-box" data-val="true" data-val-required="The Include in top menu field is required." id="IncludeInTopMenu" name="IncludeInTopMenu" type="checkbox" value="true">
                    <span class="field-validation-valid" data-valmsg-for="IncludeInTopMenu" data-valmsg-replace="true"></span>
                </div>
 </div>

<div class="form-group advanced-setting">
                <div class="col-md-3">
                    <div class="label-wrapper"><label class="control-label" for="Published" title="">Published</label></div>
                </div>
                <div class="col-md-9">
                    <input class="check-box" data-val="true" data-val-required="The Published field is required." id="Published" name="Published" type="checkbox" value="true">
                    <span class="field-validation-valid" data-valmsg-for="Published" data-valmsg-replace="true"></span>
                </div>
            </div>
....

advanced-settings-mode

<body class="skin-blue sidebar-mini advanced-settings-mode" style="">  <!--advanced-settings-mode-->
<div class="form-group">
                <div class="col-md-3">
                    <div class="label-wrapper"><label class="control-label" for="IncludeInTopMenu" title="">Include in top menu</label></div>
                </div>
                <div class="col-md-9">
                    <input class="check-box" data-val="true" data-val-required="The Include in top menu field is required." id="IncludeInTopMenu" name="IncludeInTopMenu" type="checkbox" value="true">
                    <span class="field-validation-valid" data-valmsg-for="IncludeInTopMenu" data-valmsg-replace="true"></span>
                </div>
</div>
<div class="form-group advanced-setting">
                <div class="col-md-3">
                    <div class="label-wrapper"><label class="control-label" for="Published" title="">Published</label></div>
                </div>
                <div class="col-md-9">
                    <input class="check-box" data-val="true" data-val-required="The Published field is required." id="Published" name="Published" type="checkbox" value="true">
                    <span class="field-validation-valid" data-valmsg-for="Published" data-valmsg-replace="true"></span>
                </div>
            </div>
...