Merge pull request #4431 from sbwalker/dev

QuillJSTextEditor setting improvements

Oqtane.Client/Modules/Controls/QuillJSTextEditor.razor

@@ -6,7 +6,7 @@
 @inject IStringLocalizer<QuillJSTextEditor> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<div class="quill-text-editor @(_settingsVisible ? "d-none" : "d-block")">
+<div class="quill-text-editor">
     <TabStrip ActiveTab="@_activetab">
         @if (_allowRichText)
         {
@@ -63,12 +63,6 @@
                                     <button class="ql-link"></button>
                                 </span>
                             }
-                            @if (_hasAdminPermission)
-                            {
-                                <span class="ql-formats">
-                                    <button class="ql-settings" @onclick="OpenSettings"></button>
-                                </span>
-                            }
                         </div>
                         <div @ref="@_editorElement"></div>
                     </div>
@@ -94,10 +88,6 @@
                         @((MarkupString)"&nbsp;&nbsp;")
                         <button type="button" class="btn btn-secondary" @onclick="CloseRawFileManager">@Localizer["Close"]</button>
                     }
-                    else if(_hasAdminPermission)
-                    {
-                        <button type="button" class="btn btn-primary ms-1" @onclick="OpenSettings">@Localizer["Settings"]</button>
-                    }
                 </div>
                 @if (ReadOnly)
                 {
@@ -109,25 +99,47 @@
                 }
             </TabPanel>
         }
-    </TabStrip>
+        @if (_allowSettings)
+        {
+            <TabPanel Name="Settings" Heading="Settings" ResourceKey="Settings">
+                <div class="quill-text-editor-settings">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="Scope" ResourceKey="Scope" ResourceType="@resourceType" HelpText="Specify if settings are scoped to the module or site">Scope: </Label>
+                        <div class="col-sm-9">
+                            <select id="Scope" class="form-select" value="@_scopeSetting" @onchange="(e => ScopeChanged(e))">
+                                <option value="Module">@SharedLocalizer["Module"]</option>
+                                @if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
+                                {
+                                    <option value="Site">@SharedLocalizer["Site"]</option>
+                                }
+                            </select>
+                        </div>
                     </div>
-<div class="quill-text-editor-settings @(_settingsVisible ? "d-block" : "d-none")">
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="AllowFileManagement" ResourceKey="AllowFileManagement" ResourceType="@resourceType" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
                         <div class="col-sm-9">
-            <input type="checkbox" id="AllowFileManagement" class="form-check-input" @bind="_allowFileManagementSetting" />
+                            <select id="AllowFileManagement" class="form-select" @bind="@_allowFileManagementSetting" required>
+                                <option value="True">@SharedLocalizer["Yes"]</option>
+                                <option value="False">@SharedLocalizer["No"]</option>
+                            </select>
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="AllowRawHtml" ResourceKey="AllowRawHtml" ResourceType="@resourceType" HelpText="Specify If Editors Can Enter Raw HTML">Allow Raw HTML: </Label>
                         <div class="col-sm-9">
-            <input type="checkbox" id="AllowRawHtml" class="form-check-input" @bind="_allowRawHtmlSetting" />
+                            <select id="AllowRawHtml" class="form-select" @bind="@_allowRawHtmlSetting" required>
+                                <option value="True">@SharedLocalizer["Yes"]</option>
+                                <option value="False">@SharedLocalizer["No"]</option>
+                            </select>
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="AllowRichText" ResourceKey="AllowRichText" ResourceType="@resourceType" HelpText="Specify If Editors Can Use Rich Text Editor">Allow Rich Text: </Label>
                         <div class="col-sm-9">
-            <input type="checkbox" id="AllowRichText" class="form-check-input" @bind="_allowRichTextSetting" />
+                            <select id="AllowRichText" class="form-select" @bind="@_allowRichTextSetting" required>
+                                <option value="True">@SharedLocalizer["Yes"]</option>
+                                <option value="False">@SharedLocalizer["No"]</option>
+                            </select>
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
@@ -150,25 +162,30 @@
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="ToolbarContent" ResourceKey="ToolbarContent" ResourceType="@resourceType" HelpText="Specify the Toolbar Content">Toolbar Content: </Label>
                         <div class="col-sm-9">
-            <textarea id="ToolbarContent" class="form-control" @bind="_toolbarContentSetting" rows="5" />
+                            <textarea id="ToolbarContent" class="form-control" @bind="_toolbarContentSetting" rows="3" />
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
                         <div class="col-sm-9 offset-sm-3">
-            <button type="button" class="btn btn-success" @onclick="@(async () => await UpdateSettings())">@SharedLocalizer["Save"]</button>
+                            <button type="button" class="btn btn-success" @onclick="@(async () => await UpdateSettings())">@Localizer["SaveSettings"]</button>
                         </div>
                     </div>
                 </div>
+            </TabPanel>
+        }
+    </TabStrip>
+</div>
 
 @code {
     private string resourceType = "Oqtane.Modules.Controls.QuillJSTextEditor, Oqtane.Client";
 
+    private bool _settingsLoaded;
     private bool _initialized = false;
 
     private QuillEditorInterop interop;
     private FileManager _fileManager;
     private string _activetab = "Rich";
-    private bool _hasAdminPermission;
+    private bool _allowSettings = false;
 
     private bool _allowFileManagement = false;
     private bool _allowRawHtml = false;
@@ -177,16 +194,13 @@
     private string _debugLevel = "info";
     private string _toolbarContent = string.Empty;
 
-    //adjust settings variables won't affect UI
+    private string _scopeSetting = "Module";
-    private bool _allowFileManagementSetting = false;
+    private string _allowFileManagementSetting = "False";
-    private bool _allowRawHtmlSetting = false;
+    private string _allowRawHtmlSetting = "False";
-    private bool _allowRichTextSetting = false;
+    private string _allowRichTextSetting = "False";
     private string _themeSetting = "snow";
     private string _debugLevelSetting = "info";
     private string _toolbarContentSetting = string.Empty;
-    private bool _settingsVisible;
-
-    private bool _settingsLoaded;
 
     private ElementReference _editorElement;
     private ElementReference _toolBar;
@@ -211,6 +225,23 @@
     [Parameter]
     public string Placeholder { get; set; }
 
+    // the following parameters were supported by the original RichTextEditor and can be passed as optional static parameters
+
+    [Parameter]
+    public bool? AllowFileManagement { get; set; }
+
+    [Parameter]
+    public bool? AllowRichText { get; set; }
+
+    [Parameter]
+    public bool? AllowRawHtml { get; set; }
+
+    [Parameter]
+    public string Theme { get; set; }
+
+    [Parameter]
+    public string DebugLevel { get; set; }
+
     public override List<Resource> Resources { get; set; } = new List<Resource>()
     {
         new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill.min.js", Location = ResourceLocation.Body },
@@ -218,7 +249,7 @@
         new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-interop.js", Location = ResourceLocation.Body }
     };
 
-    protected override async Task OnInitializedAsync()
+    protected override void OnInitialized()
     {
         interop = new QuillEditorInterop(JSRuntime);
 
@@ -227,7 +258,7 @@
             Placeholder = Localizer["Placeholder"];
         }
 
-        await LoadSettings();
+        LoadSettings();
     }
 
     protected override void OnParametersSet()
@@ -242,7 +273,8 @@
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        await LoadSettings();
+        LoadSettings();
+
         if (_allowRichText)
         {
             if (firstRender)
@@ -436,49 +468,98 @@
         StateHasChanged();
     }
 
-    private void OpenSettings()
+    private void ScopeChanged(ChangeEventArgs e)
     {
-        _settingsVisible = true;
+        _scopeSetting = (string)e.Value;
-        StateHasChanged();
+        LoadSettings();
     }
 
-    private async Task LoadSettings()
+    private void LoadSettings(bool reload = false)
     {
         try
         {
-            if (!_settingsLoaded)
+            if (!_settingsLoaded || reload)
             {
-                var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
+                _allowFileManagement = bool.Parse(GetSetting("Component", "QuillTextEditor_AllowFileManagement", "True"));
-                _allowFileManagementSetting = _allowFileManagement = SettingService.GetSetting(settings, "QuillTextEditor_AllowFileManagement", "true") == "true";
+                _allowRawHtml = bool.Parse(GetSetting("Component", "QuillTextEditor_AllowRawHtml", "True"));
-                _allowRawHtmlSetting = _allowRawHtml = SettingService.GetSetting(settings, "QuillTextEditor_AllowRawHtml", "true") == "true";
+                _allowRichText = bool.Parse(GetSetting("Component", "QuillTextEditor_AllowRichText", "True"));
-                _allowRichTextSetting = _allowRichText = SettingService.GetSetting(settings, "QuillTextEditor_AllowRichText", "true") == "true";
+                _theme = GetSetting("Component", "QuillTextEditor_Theme", "snow");
-                _themeSetting = _theme = SettingService.GetSetting(settings, "QuillTextEditor_Theme", "snow");
+                _debugLevel = GetSetting("Component", "QuillTextEditor_DebugLevel", "info");
-                _debugLevelSetting = _debugLevel = SettingService.GetSetting(settings, "QuillTextEditor_DebugLevel", "info");
+                _toolbarContent = GetSetting("Component", "QuillTextEditor_ToolbarContent", string.Empty);
-                _toolbarContentSetting = _toolbarContent = SettingService.GetSetting(settings, "QuillTextEditor_ToolbarContent", string.Empty);
 
-                _hasAdminPermission = UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin);
+                // optional static parameter overrides
+                if (AllowFileManagement != null) _allowFileManagement = AllowFileManagement.Value;
+                if (AllowRichText != null) _allowRichText = AllowRichText.Value;
+                if (AllowRawHtml != null) _allowRawHtml = AllowRawHtml.Value;
+                if (!string.IsNullOrEmpty(Theme)) _theme = Theme;
+                if (!string.IsNullOrEmpty(DebugLevel)) _debugLevel = DebugLevel;
+            }
+
+            _allowSettings = PageState.EditMode && UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, PageState.Page.PermissionList);
+            if (_allowSettings)
+            {
+                _allowFileManagementSetting = GetSetting(_scopeSetting, "QuillTextEditor_AllowFileManagement", "True");
+                _allowRawHtmlSetting = GetSetting(_scopeSetting, "QuillTextEditor_AllowRawHtml", "True");
+                _allowRichTextSetting = GetSetting(_scopeSetting, "QuillTextEditor_AllowRichText", "True");
+                _themeSetting = GetSetting(_scopeSetting, "QuillTextEditor_Theme", "snow");
+                _debugLevelSetting = GetSetting(_scopeSetting, "QuillTextEditor_DebugLevel", "info");
+                _toolbarContentSetting = GetSetting(_scopeSetting, "QuillTextEditor_ToolbarContent", string.Empty);
+            }
 
             _settingsLoaded = true;
         }
-        }
         catch (Exception ex)
         {
             AddModuleMessage(ex.Message, MessageType.Error);
         }
     }
 
+    private string GetSetting(string scope, string settingName, string defaultValue)
+    {
+        var settingValue = "";
+        switch (scope)
+        {
+            case "Component":
+                settingValue = SettingService.GetSetting(PageState.Site.Settings, settingName, defaultValue);
+                settingValue = SettingService.GetSetting(ModuleState.Settings, settingName, settingValue);
+                break;
+            case "Site":
+                settingValue = SettingService.GetSetting(PageState.Site.Settings, settingName, defaultValue);
+                break;
+            case "Module":
+                settingValue = SettingService.GetSetting(ModuleState.Settings, settingName, defaultValue);
+                break;
+        }
+        return settingValue;
+    }
+
     private async Task UpdateSettings()
     {
         try
+        {
+            if (_scopeSetting == "Site" && UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin))
             {
                 var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
-            settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowFileManagement", _allowFileManagementSetting.ToString().ToLower());
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowFileManagement", _allowFileManagementSetting);
-            settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRawHtml", _allowRawHtmlSetting.ToString().ToLower());
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRawHtml", _allowRawHtmlSetting);
-            settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRichText", _allowRichTextSetting.ToString().ToLower());
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRichText", _allowRichTextSetting);
                 settings = SettingService.SetSetting(settings, "QuillTextEditor_Theme", _themeSetting);
                 settings = SettingService.SetSetting(settings, "QuillTextEditor_DebugLevel", _debugLevelSetting);
                 settings = SettingService.SetSetting(settings, "QuillTextEditor_ToolbarContent", _toolbarContentSetting);
                 await SettingService.UpdateSiteSettingsAsync(settings, PageState.Site.SiteId);
+            }
+            else if (_scopeSetting == "Module")
+            {
+                var settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId);
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowFileManagement", _allowFileManagementSetting);
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRawHtml", _allowRawHtmlSetting);
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_AllowRichText", _allowRichTextSetting);
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_Theme", _themeSetting);
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_DebugLevel", _debugLevelSetting);
+                settings = SettingService.SetSetting(settings, "QuillTextEditor_ToolbarContent", _toolbarContentSetting);
+                await SettingService.UpdateModuleSettingsAsync(settings,ModuleState.ModuleId);                
+            }
+            LoadSettings(true);
 
             NavigationManager.NavigateTo(NavigationManager.Uri, true);
         }

Oqtane.Client/Resources/Modules/Controls/QuillJSTextEditor.resx

@@ -153,6 +153,9 @@
   <data name="Placeholder" xml:space="preserve">
     <value>Enter Your Content...</value>
   </data>
+  <data name="SaveSettings" xml:space="preserve">
+    <value>Save Settings</value>
+  </data>
   <data name="Settings" xml:space="preserve">
     <value>Settings</value>
   </data>

Oqtane.Client/Resources/SharedResources.resx

@@ -459,4 +459,16 @@
   <data name="Enabled" xml:space="preserve">
     <value>Enabled</value>
   </data>
+  <data name="Module" xml:space="preserve">
+    <value>Module</value>
+  </data>
+  <data name="Page" xml:space="preserve">
+    <value>Page</value>
+  </data>
+  <data name="Site" xml:space="preserve">
+    <value>Site</value>
+  </data>
+  <data name="User" xml:space="preserve">
+    <value>User</value>
+  </data>
 </root>