Merge pull request #23915 from abpframework/10.0-sweetalert-prompt

Add 'prompt' functionality to `abp.message` object

Author: maliming

docs/en/framework/ui/mvc-razor-pages/javascript-api/message.md

@@ -88,6 +88,58 @@ abp.message.confirm(
   });
 ````
 
+## Prompt Message
+
+`abp.message.prompt(...)` can be used to get a text (or other input) from the user.
+
+Simple usage:
+```js
+abp.message.prompt('Please enter a name:', (value)=> console.log('Entered name:', value));
+```
+
+**Example (then):**
+
+````js
+let options = { title: "Name Change" ,icon: "info", inputValue: "John Doe"};
+abp.message.prompt('Enter a new name to change your name', options)
+  .then(function(value){
+    if (value) {
+      console.log('Entered name:', value);
+    }
+  });
+````
+
+**Example (await):**
+
+````js
+(async function(){
+  let options = { title: "Email Registration" ,icon: "info", input: "email"};
+  const email = await abp.message.prompt('Enter your email:', options);
+  if (email) {
+    console.log('Entered email:', email);
+  }
+})();
+````
+
+![js-message-prompt](../../../../images/js-message-prompt.png)
+
+### The Return Value
+
+The return value of the `abp.message.prompt(...)` function is a promise that resolves to the entered value (`string`) or `null` if the dialog is canceled/dismissed.
+
+### Parameters
+
+`abp.message.prompt(...)` function has the following parameters:
+
+* `message`: A message (`string`) to show to the user.
+* `titleOrOptionsOrCallback` (optional):
+  * a `string` title, or
+  * an `object` containing SweetAlert options (e.g., `input`, `inputAttributes`, `inputPlaceholder`), or
+  * a `function` callback that receives the resulting value (or `null`).
+* `callback` (optional): If you've passed a title as the second parameter, you can pass your callback function as the 3rd parameter.
+
+Passing a callback function is an alternative to using the returned promise.
+
 ## SweetAlert Configuration
 
 The Message API is implemented using the [SweetAlert](https://sweetalert.js.org/) library by default. If you want to change its configuration, you can set the options in the `abp.libs.sweetAlert.config` object. The default configuration object is shown below:
@@ -125,4 +177,3 @@ abp.libs.sweetAlert.config.warn.icon = 'error';
 ````
 
 See the [SweetAlert document](https://sweetalert.js.org/) for all the configuration options.
-

docs/en/images/js-message-prompt.png

@@ -29,6 +29,12 @@ var abp = abp || {};
                 title: 'Are you sure?',
                 showCancelButton: true,
                 reverseButtons: true
+            },
+            prompt: {
+                icon: 'question',
+                input: 'text',
+                showCancelButton: true,
+                reverseButtons: true
             }
         }
     };
@@ -92,13 +98,43 @@ var abp = abp || {};
         );
 
         return $.Deferred(function ($dfd) {
-            Swal.fire(opts).then(result  => {
+            Swal.fire(opts).then(result => {
                 callback && callback(result.value);
                 $dfd.resolve(result.value);
             })
         });
     };
 
+    abp.message.prompt = function (message, titleOrOptionsOrCallback, callback) {
+
+        var userOpts = {
+            html: abp.utils.htmlEscape(message).replace(/\n/g, '<br>')
+        };
+
+        if ($.isFunction(titleOrOptionsOrCallback)) {
+            callback = titleOrOptionsOrCallback;
+        } else if (typeof titleOrOptionsOrCallback === 'string') {
+            userOpts.title = titleOrOptionsOrCallback;
+        } else if ($.isPlainObject(titleOrOptionsOrCallback)) {
+            userOpts = $.extend(userOpts, titleOrOptionsOrCallback);
+        }
+
+        var opts = $.extend(
+            {},
+            abp.libs.sweetAlert.config['default'],
+            abp.libs.sweetAlert.config.prompt,
+            userOpts
+        );
+
+        return $.Deferred(function ($dfd) {
+            Swal.fire(opts).then(function (result) {
+                var value = result && result.isConfirmed ? result.value : null;
+                callback && callback(value);
+                $dfd.resolve(value);
+            });
+        });
+    };
+
     abp.event.on('abp.configurationInitialized', function () {
         var l = abp.localization.getResource('AbpUi');
 

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js

@@ -340,6 +340,17 @@ var abp = abp || {};
         callback && callback(result);
     };
 
+    abp.message.prompt = function (message, titleOrOptionsOrCallback, callback) {
+        abp.log.warn('abp.message.prompt is not properly implemented!');
+
+        if (titleOrOptionsOrCallback && !(typeof titleOrOptionsOrCallback == 'string')) {
+            callback = titleOrOptionsOrCallback;
+        }
+
+        var result = prompt(message);
+        callback && callback(result);
+    };
+
     /* UI *******************************************************/
 
     abp.ui = abp.ui || {};