Merge pull request #13311 from abpframework/dynamic-widget-dynamic-parameters

Dynamic widget dynamic parameters

modules/cms-kit/host/Volo.CmsKit.Web.Unified/CmsKitWebUnifiedModule.cs

@@ -46,6 +46,7 @@ using Volo.CmsKit.Comments;
 using Volo.CmsKit.MediaDescriptors;
 using Volo.CmsKit.Reactions;
 using Volo.CmsKit.Ratings;
+using Volo.CmsKit.Contents;
 
 namespace Volo.CmsKit;
 
@@ -152,6 +153,11 @@ public class CmsKitWebUnifiedModule : AbpModule
         {
             options.IsEnabled = MultiTenancyConsts.IsEnabled;
         });
+
+        Configure<CmsKitContentWidgetOptions>(options =>
+        {
+            options.AddWidget("ExComment", "CommentDate", "DecisionCommentDate");
+        });
     }
 
     private void ConfigureCmsKit(ServiceConfigurationContext context)

modules/cms-kit/host/Volo.CmsKit.Web.Unified/ViewComponents/CommentDate.cshtml

@@ -0,0 +1,11 @@
+@model Volo.CmsKit.ViewComponents.CommentDateViewComponent
+
+<p>Welcome Comment Date Component</p>
+@if (Model.IsShow)
+{
+    <p> @DateTime.Today.ToLongDateString()</p>
+}
+else
+{
+    <p>Without date</p>
+}

modules/cms-kit/host/Volo.CmsKit.Web.Unified/ViewComponents/CommentDateViewComponent.cs

@@ -0,0 +1,25 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace Volo.CmsKit.ViewComponents;
+
+[Widget(
+    AutoInitialize = true
+)]
+
+[ViewComponent(Name = "CommentDate")]
+public class CommentDateViewComponent : AbpViewComponent
+{
+    public bool IsShow { get; set; }
+
+    public CommentDateViewComponent()
+    {
+    }
+
+    public virtual async Task<IViewComponentResult> InvokeAsync(string isShow)
+    {
+        return View("~/ViewComponents/CommentDate.cshtml", new CommentDateViewComponent() { IsShow = bool.Parse(isShow) });
+    }
+}

modules/cms-kit/host/Volo.CmsKit.Web.Unified/ViewComponents/DecisionCommentDate.cshtml

@@ -0,0 +1,6 @@
+@using Volo.CmsKit.ViewComponents
+@model DecisionCommentDateViewModel
+
+<div class="form-check mb-3">
+    <abp-input asp-for="IsShow" />
+</div>

modules/cms-kit/host/Volo.CmsKit.Web.Unified/ViewComponents/DecisionCommentDateViewComponent.cs

@@ -0,0 +1,32 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+using Volo.Abp.Localization;
+
+namespace Volo.CmsKit.ViewComponents;
+
+[Widget(
+    AutoInitialize = true
+)]
+
+[ViewComponent(Name = "DecisionCommentDate")]
+public class DecisionCommentDateViewComponent : AbpViewComponent
+{
+    public DecisionCommentDateViewComponent()
+    {
+    }
+
+    public virtual async Task<IViewComponentResult> InvokeAsync()
+    {
+        return View("~/ViewComponents/DecisionCommentDate.cshtml", new DecisionCommentDateViewModel());
+    }
+}
+
+public class DecisionCommentDateViewModel
+{
+    [DisplayName("Show date in the component")]
+    public bool IsShow { get; set; } = true;
+}

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Contents/AddWidgetModal.cshtml

@@ -1,5 +1,6 @@
 @page
 @using Microsoft.AspNetCore.Mvc.Localization
+@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
 @using Volo.CmsKit.Admin.Web.Pages
 @using Volo.CmsKit.Localization
 @using Volo.CmsKit.Admin.Web.Pages.CmsKit.Contents;
@@ -20,15 +21,17 @@
             <div class="container">
                 @if (Model.Widgets.Count() > 1)
             {
+
                 <abp-select asp-for="ViewModel.Widget" />
 
                 foreach (var item in Model.ViewModel.Details)
                 {
-                    <div hidden id="editor-@item.Name">@await Component.InvokeAsync(@item.EditorComponentName)</div>
+                    <div hidden id="editor-@item.Name">
+                        <form data-check-form-on-close="false">
+                            @await Component.InvokeAsync(@item.EditorComponentName)
+                        </form>
+                    </div>
                 }
-                <div class="mb-3" id="PropertySideId">
-                </div>
-                <button class="btn btn-primary float-end" type="submit" id="save-changes">@L["Add"]</button>
             }
             else
             {
@@ -36,4 +39,7 @@
             }
         </div>
     </abp-modal-body>
+    <abp-modal-footer>
+        <button class="btn btn-primary float-end save-changes" type="submit">@L["Add"]</button>
+    </abp-modal-footer>
 </abp-modal>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Contents/addWidgetModal.js

@@ -3,6 +3,8 @@ $(function () {
     abp.modals.addWidgetModal = function () {
 
         var initModal = function () {
+            var activeEditor;
+            var activeForm;
 
             let widgetName, widgetType;
             $("#ViewModel_Widget").change(function () {
@@ -11,41 +13,28 @@ $(function () {
 
                 $('.widget-detail').attr('hidden', 'true');
 
-                $('#editor-' + widgetName).removeAttr('hidden');
-            });
+                activeEditor = $('#editor-' + widgetName);
+                activeEditor.removeAttr('hidden');
 
-            $("#save-changes").click(function () {
-                var widgetKey = $("#WidgetCode").val();
-                if (widgetKey != undefined) {
-                    let html = " <input hidden class=\"properties form-control\" value=\"" + widgetKey + "\" id=\"Code\" type=\"text\" />"
-                    $("#PropertySideId").append(html);
-                }
+                activeForm = $('#editor-' + widgetName + ' form');
+            });
 
-                var keys = [];
-                var values = [];
-                $(".properties").each(function () {
-                    if (($.trim($(this).val()).length > 0)) {
-                        keys.push(this.id);
-                        values.push($(this).val());
-                    }
-                });
+            $(".save-changes").click(function () {
 
-                let updatedText = '';
-                if (widgetType != undefined) {
+                let properties = activeForm.serializeFormToObject();          
 
-                    updatedText = "[Widget Type=\"" + widgetType + "\" ";
+                let widgetText = "[Widget Type=\"" + widgetType + "\" ";
 
-                    for (var i = 0; i < keys.length; i++) {
-                        updatedText += keys[i] + "=\"" + values[i];
-                        updatedText += i == (keys.length - 1) ? "\"" : "\" ";
+                for (var propertyName in properties) {
+                    if (!propertyName.includes(']') && !propertyName.includes('[')) {
+                        widgetText += propertyName + "=\"" + properties[propertyName] + "\" ";
                     }
-
-                    updatedText += "]";
                 }
 
-                $('#GeneratedWidgetText').val(updatedText);
-                $("#GeneratedWidgetText").trigger("change");
+                widgetText = widgetText.trim() + "]";
 
+                $('#GeneratedWidgetText').val(widgetText);
+                $("#GeneratedWidgetText").trigger("change");
                 $('#addWidgetModal').modal('hide');
             });
         };

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml

@@ -40,6 +40,7 @@
             {
                 @await Component.InvokeAsync(contentFragment.GetProperty<string>("Type"), contentFragment.ExtraProperties.ConvertToDynamicObject())
             }
+            
         }
     </abp-card-body>
 </abp-card>