Merge pull request #262 from chlupac/HtmlText

Html text

Oqtane.Client/Modules/Controls/RichTextEditor.razor

@@ -16,11 +16,14 @@
         <button type="button" class="btn btn-secondary" @onclick="CloseFileManager">Close</button>
     }
 </div>
-<br />
+<div class="row">
-<div @ref="@ToolBar">
+    <div class ="col">
-    @ToolbarContent
+        <div @ref="@ToolBar">
-</div>
+            @ToolbarContent
-<div @ref="@EditorElement">
+        </div>
+        <div @ref="@EditorElement">
+        </div>
+    </div>
 </div>
 
 @code {
@@ -128,4 +131,4 @@
         StateHasChanged();
     }
 
-}
+}

Oqtane.Client/Modules/HtmlText/Edit.razor

@@ -7,71 +7,102 @@
 @inject HttpClient http
 @inject SiteState sitestate
 
-<table class="table table-borderless">
+<div class="row" style="margin-bottom: 50px;">
-    <tr>
+    <div class="col @_visibleText">
-        <td>
+        <textarea class="form-control" @bind="@content" rows="10"></textarea>
-            <label for="Name" class="control-label">Content: </label>
+    </div>
-        </td>
+
-        <td>
+    <div class="col @_visibleRich">
-            @if (!RichTextEditorMode)
+        <RichTextEditor @ref="@RichTextEditorHtml">
+            <ToolbarContent>
+                <select class="ql-header">
+                    <option selected=""></option>
+                    <option value="1"></option>
+                    <option value="2"></option>
+                    <option value="3"></option>
+                    <option value="4"></option>
+                    <option value="5"></option>
+                </select>
+                <span class="ql-formats">
+                    <button class="ql-bold"></button>
+                    <button class="ql-italic"></button>
+                    <button class="ql-underline"></button>
+                    <button class="ql-strike"></button>
+                </span>
+                <span class="ql-formats">
+                    <select class="ql-color"></select>
+                    <select class="ql-background"></select>
+                </span>
+                <span class="ql-formats">
+                    <button class="ql-list" value="ordered"></button>
+                    <button class="ql-list" value="bullet"></button>
+                </span>
+                <span class="ql-formats">
+                    <button class="ql-link"></button>
+                </span>
+            </ToolbarContent>
+        </RichTextEditor>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col">
+        @if (!RichTextEditorMode)
+        {
+            <button type="button" class="btn btn-secondary" @onclick="RichTextEditor">Rich Text Editor</button>
+        }
+        else
+        {
+            <button type="button" class="btn btn-secondary" @onclick="RawHtmlEditor">Raw HTML Editor</button>
+        }
+        <button type="button" class="btn btn-success" @onclick="SaveContent">Save</button>        
+        <NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col">
+        <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
+    </div>
+</div>
+
+@code {
+
+    public override SecurityAccessLevel SecurityAccessLevel
+    {
+        get { return SecurityAccessLevel.Edit; }
+    }
+
+    public override string Title
+    {
+        get { return "Edit Html/Text"; }
+    }
+
+    public bool RichTextEditorMode
+    {
+        get => _richTextEditorMode;
+        set
+        {
+            _richTextEditorMode = value;
+            
+            if (_richTextEditorMode)
             {
-                <textarea class="form-control" @bind="@content" rows="5" />
+                _visibleText = "d-none";
+                _visibleRich = "";
             }
             else
             {
-                <RichTextEditor @ref="@RichTextEditorHtml">
+                _visibleText = "";
-                    <ToolbarContent>
+                _visibleRich = "d-none";
-                        <select class="ql-header">
-                            <option selected=""></option>
-                            <option value="1"></option>
-                            <option value="2"></option>
-                            <option value="3"></option>
-                            <option value="4"></option>
-                            <option value="5"></option>
-                        </select>
-                        <span class="ql-formats">
-                            <button class="ql-bold"></button>
-                            <button class="ql-italic"></button>
-                            <button class="ql-underline"></button>
-                            <button class="ql-strike"></button>
-                        </span>
-                        <span class="ql-formats">
-                            <select class="ql-color"></select>
-                            <select class="ql-background"></select>
-                        </span>
-                        <span class="ql-formats">
-                            <button class="ql-list" value="ordered"></button>
-                            <button class="ql-list" value="bullet"></button>
-                        </span>
-                        <span class="ql-formats">
-                            <button class="ql-link"></button>
-                        </span>
-                    </ToolbarContent>
-                </RichTextEditor>
             }
-        </td>
+        }
-    </tr>
+    }
-</table>
-@if (!RichTextEditorMode)
-{
-    <button type="button" class="btn btn-secondary" @onclick="RichTextEditor">Rich Text Editor</button>
-}
-else
-{
-    <button type="button" class="btn btn-secondary" @onclick="RawHTMLEditor">Raw HTML Editor</button>
-}
-<button type="button" class="btn btn-success" @onclick="SaveContent">Save</button>
-<NavLink class="btn btn-secondary" href="@NavigateUrl()">Cancel</NavLink>
-<br />
-<br />
-<AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
 
-@code {
+    string _visibleText;
-    public override SecurityAccessLevel SecurityAccessLevel { get { return SecurityAccessLevel.Edit; } }
+    string _visibleRich;
-    public override string Title { get { return "Edit Html/Text"; } }
+    bool _richTextEditorMode;
 
     RichTextEditor RichTextEditorHtml;
-    bool RichTextEditorMode = true;
     string content;
     string createdby;
     DateTime createdon;
@@ -80,18 +111,22 @@ else
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender)
+        try
         {
-            try
+            if (firstRender)
             {
-                await LoadText();
+                if (content == null)
-            }
+                {
-            catch (Exception ex)
+                    RichTextEditorMode = true;
-            {
+                    await LoadText();
-                await logger.LogError(ex, "An Error Occurred Loading Html/Text Content. " + ex.Message);
+                }
-                AddModuleMessage(ex.Message, MessageType.Error);
             }
         }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "An Error Occurred Loading Html/Text Content. " + ex.Message);
+            AddModuleMessage(ex.Message, MessageType.Error);
+        }
     }
 
     private async Task LoadText()
@@ -117,13 +152,15 @@ else
     private async Task RichTextEditor()
     {
         RichTextEditorMode = true;
-        await LoadText();
+        await RichTextEditorHtml.LoadContent(content);
+        StateHasChanged();
     }
 
-    private async Task RawHTMLEditor()
+    private async Task RawHtmlEditor()
     {
+        content = await this.RichTextEditorHtml.GetHTML();
         RichTextEditorMode = false;
-        await LoadText();
+        StateHasChanged();
     }
 
     private async Task SaveContent()
@@ -160,4 +197,5 @@ else
             AddModuleMessage("Error Saving Content", MessageType.Error);
         }
     }
+
 }

Oqtane.Client/Modules/HtmlText/Services/HtmlTextService.cs

@@ -1,3 +1,5 @@
+using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using System.Net.Http;
 using Microsoft.AspNetCore.Components;
@@ -31,8 +33,10 @@ namespace Oqtane.Modules.HtmlText.Services
             HtmlTextInfo htmltext;
             try
             {
-                // exception handling is required because GetJsonAsync() returns an error if no content exists for the ModuleId ( https://github.com/aspnet/AspNetCore/issues/14041 )
+                //because GetJsonAsync() returns an error if no content exists for the ModuleId ( https://github.com/aspnet/AspNetCore/issues/14041 )
-                htmltext = await _http.GetJsonAsync<HtmlTextInfo>(apiurl + "/" + ModuleId.ToString() + "?entityid=" + ModuleId.ToString());
+                //null value is transfered as empty list
+                var htmltextList = await _http.GetJsonAsync<List<HtmlTextInfo>>(apiurl + "/" + ModuleId.ToString() + "?entityid=" + ModuleId.ToString());
+                htmltext = htmltextList.FirstOrDefault();
             }
             catch
             {

Oqtane.Client/Themes/Controls/ControlPanel.razor

@@ -317,7 +317,7 @@
                 }
 
                 PageModule pagemodule = new PageModule();
-                pagemodule.PageId = (pageid != "-") ? PageState.Page.PageId : int.Parse(pageid);
+                pagemodule.PageId = (pageid == "-") ? PageState.Page.PageId : int.Parse(pageid);
                 pagemodule.ModuleId = int.Parse(moduleid);
                 pagemodule.Title = title;
                 if (pagemodule.Title == "")

Oqtane.Server/Modules/HtmlText/Controllers/HtmlTextController.cs

@@ -6,6 +6,7 @@ using Microsoft.AspNetCore.Http;
 using Oqtane.Infrastructure;
 using Oqtane.Shared;
 using System;
+using System.Collections.Generic;
 
 namespace Oqtane.Modules.HtmlText.Controllers
 {
@@ -29,22 +30,24 @@ namespace Oqtane.Modules.HtmlText.Controllers
         // GET api/<controller>/5
         [HttpGet("{id}")]
         [Authorize(Policy = "ViewModule")]
-        public HtmlTextInfo Get(int id)
+        public List<HtmlTextInfo> Get(int id)
         {
+            var list = new List<HtmlTextInfo>();
             try
             {
                 HtmlTextInfo HtmlText = null;
                 if (_entityId == id)
                 {
                     HtmlText = _htmlText.GetHtmlText(id);
+                    list.Add(HtmlText);
                 }
-                return HtmlText;
             }
             catch (Exception ex)
             {
                 _logger.Log(LogLevel.Error, this, LogFunction.Read, ex, "Get Error {Error}", ex.Message);
                 throw;
             }
+            return list;
         }
 
         // POST api/<controller>