Split onClick callback code configurations

common.props

@@ -1,7 +1,7 @@
 <Project>
   <PropertyGroup>
     <LangVersion>latest</LangVersion>
-    <Version>1.0.0-preview.8</Version>
+    <Version>1.0.0-preview.9</Version>
     <NoWarn>$(NoWarn);CS1591;CS0436</NoWarn>
     <AbpProjectType>module</AbpProjectType>
     <GeneratePackageOnBuild>true</GeneratePackageOnBuild>

host/EasyAbp.ProcessManagement.Web.Unified/ProcessManagementWebUnifiedModule.cs

@@ -139,12 +139,14 @@ public override void ConfigureServices(ServiceConfigurationContext context)
         {
             options.Actions.Add(new ProcessStateActionDefinition("FakeExport", "ExportFailed",
                 new LocalizableString("Action:Retry"),
-                "abp.message.confirm(l('SureToRetry')).then(function(confirmed){if(confirmed){abp.notify.success(l('SuccessToRetry'),l('Success'));if(alertNode){var alert=new bootstrap.Alert(alertNode);alert.close();}}})",
+                "var l = abp.localization.getResource();abp.message.confirm(l('SureToRetry')).then(function(confirmed){if(confirmed){abp.notify.success(l('SuccessToRetry'),l('Success'));}});",
+                "var l = abp.localization.getResource();abp.message.confirm(l('SureToRetry')).then(function(confirmed){if(confirmed){abp.notify.success(l('SuccessToRetry'),l('Success'));var alert=new bootstrap.Alert(alertNode);alert.close();}})",
                 "abp.auth.isGranted('Demo.Exporting.Retry')"));
 
             options.Actions.Add(new ProcessStateActionDefinition("FakeExport", "ExportFailed",
                 new LocalizableString("Action:Ping"),
                 "alert('Pong')",
+                "alert('Pong')",
                 null));
         });
 

src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.cshtml

@@ -10,7 +10,7 @@
 
 @{
     var customActions = "[" + Options.Value.Actions.Select(x =>
-            $"{{text:'{x.DisplayName.Localize(StringLocalizerFactory)}',action:function(data){{{x.OnClickCallbackCode}}},visible:function(data){{return data.processName==='{x.ProcessName}'&&data.stateName==='{x.StateName}'&&({x.VisibleCheckCode ?? "true"})}}}}")
+            $"{{text:'{x.DisplayName.Localize(StringLocalizerFactory)}',action:function(data){{{x.OffcanvasOnClickCallbackCode}}},visible:function(data){{return data.processName==='{x.ProcessName}'&&data.stateName==='{x.StateName}'&&({x.VisibleCheckCode ?? "true"})}}}}")
         .JoinAsString(",") + "]";
 }
 <script>

src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.js

@@ -72,7 +72,7 @@
             for (var i in notificationOffcanvasAlertActions) {
                 var action = notificationOffcanvasAlertActions[i];
                 if (!action.visible(item)) continue;
-                var actionBtn = `<button type="button" id="action-btn-${i}-${item.id}" class="process-action-btn btn btn-link btn-sm">${action.text}</button><script>var actionBtn = document.getElementById('action-btn-${i}-${item.id}');actionBtn.addEventListener('click', function () {var l = abp.localization.getResource();var alertNode = document.getElementById('${item.id}');return ${action.action}(${JSON.stringify(item)});});</script>`
+                var actionBtn = `<button type="button" id="action-btn-${i}-${item.id}" class="process-action-btn btn btn-link btn-sm">${action.text}</button><script>var actionBtn = document.getElementById('action-btn-${i}-${item.id}');actionBtn.addEventListener('click', function () {var alertNode = document.getElementById('${item.id}');return ${action.action}(${JSON.stringify(item)});});</script>`
                 actionBtns += actionBtn;
             }
             return $(`

src/EasyAbp.ProcessManagement.Web/Options/ProcessStateActionDefinition.cs

@@ -20,24 +20,31 @@ public class ProcessStateActionDefinition
     public ILocalizableString DisplayName { get; set; } = null!;
 
     /// <summary>
-    /// JS code that is executed when the action button is clicked.
+    /// JS code that is executed when the table action button is clicked.
     /// </summary>
     /// <example>detailsModal.open({id: data.record.id});</example>
-    public string OnClickCallbackCode { get; set; } = null!;
+    public string TableOnClickCallbackCode { get; set; } = null!;
+
+    /// <summary>
+    /// JS code that is executed when the offcanvas action button is clicked.
+    /// </summary>
+    /// <example>detailsModal.open({id: data.id});</example>
+    public string OffcanvasOnClickCallbackCode { get; set; } = null!;
 
     /// <summary>
     /// JS code for the action visible check. Skip checking if null.
     /// </summary>
-    /// <example>abp.auth.isGranted('MyPermissionName')</example>
+    /// <example>abp.auth.isGranted('MyPermissionName') && data.available</example>
     public string? VisibleCheckCode { get; set; }
 
     public ProcessStateActionDefinition(string processName, string stateName, ILocalizableString displayName,
-        string onClickCallbackCode, string? visibleCheckCode)
+        string tableOnClickCallbackCode, string offcanvasOnClickCallbackCode, string? visibleCheckCode)
     {
         ProcessName = processName;
         StateName = stateName;
         DisplayName = displayName;
-        OnClickCallbackCode = onClickCallbackCode;
+        TableOnClickCallbackCode = tableOnClickCallbackCode;
+        OffcanvasOnClickCallbackCode = offcanvasOnClickCallbackCode;
         VisibleCheckCode = visibleCheckCode;
     }
 }

src/EasyAbp.ProcessManagement.Web/Pages/ProcessManagement/Processes/Process/Index.cshtml.cs

@@ -26,7 +26,7 @@ public virtual async Task OnGetAsync()
         }
 
         CustomActions = "[" + Options.Actions.Select(x =>
-                $"{{text:'{x.DisplayName.Localize(StringLocalizerFactory)}',action:function(data){{{x.OnClickCallbackCode}}},visible:function(data){{return data.processName==='{x.ProcessName}'&&data.stateName==='{x.StateName}'&&({x.VisibleCheckCode ?? "true"})}}}}")
+                $"{{text:'{x.DisplayName.Localize(StringLocalizerFactory)}',action:function(data){{{x.TableOnClickCallbackCode}}},visible:function(data){{return data.processName==='{x.ProcessName}'&&data.stateName==='{x.StateName}'&&({x.VisibleCheckCode ?? "true"})}}}}")
             .JoinAsString(",") + "]";
 
         await Task.CompletedTask;

src/EasyAbp.ProcessManagement.Web/Pages/ProcessManagement/Processes/Process/index.js

@@ -23,7 +23,7 @@ $(function () {
 
     var service = easyAbp.processManagement.processes.process;
     var detailsModal = new abp.ModalManager(abp.appPath + 'ProcessManagement/Processes/Process/DetailsModal');
-console.log(customActions)
+
     var dataTable = $('#ProcessTable').DataTable(abp.libs.datatables.normalizeConfiguration({
         processing: true,
         serverSide: true,