Add dynamic parameters to dynamic widget

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

@@ -1,6 +1,6 @@
-<div class="form-check mb-3">
-    <input class="form-check-input" type="checkbox" id="NewOption" />
-    <label class="form-check-label text-primary d-block" for="NewOption">
-        Show date in the component
-    </label>
-</div>
+@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

@@ -1,7 +1,10 @@
-using System.Threading.Tasks;
+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;
 
@@ -18,6 +21,12 @@ public class DecisionCommentDateViewComponent : AbpViewComponent
 
     public virtual async Task<IViewComponentResult> InvokeAsync()
     {
-        return View("~/ViewComponents/DecisionCommentDate.cshtml");
+        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/BlogPosts/create.js

@@ -329,9 +329,9 @@ $(function () {
         });
     }
 
-    $('#GeneratedWidgetText').on('change', function () {
-        var txt = $('#GeneratedWidgetText').val();
-        editor.insertText(txt);
+    $('#GeneratedWidgetText').on('change', function (text) {
+
+        editor.insertText(text);
     });
 
     function createAddWidgetButton() {

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,47 +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);
-                }
-                else {
-                    
-                    var val = $('#NewOption').is(":checked");
-                    let html = " <input hidden class=\"properties form-control\" value=\"" + val + "\" id=\"IsShow\" 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');
             });
         };