Merge pull request #10750 from abpframework/auto-merge/rel-5-0/652

Merge branch dev with rel-5.0

docs/en/Tutorials/Todo/Index.md

@@ -412,14 +412,16 @@ Open the `Index.cshtml` file in the `Pages` folder of the *TodoApp.Web* project
         </abp-card-header>
         <abp-card-body>            
             <!-- FORM FOR NEW TODO ITEMS -->
-            <form id="NewItemForm" class="form-inline">
+            <form id="NewItemForm" class="row row-cols-lg-auto g-3 align-items-center">
-                <input id="NewItemText" 
+                <div class="col-12">
-                       type="text" 
+                    <div class="input-group">
-                       class="form-control mr-2" 
+                        <input id="NewItemText" type="text" class="form-control" placeholder="enter text...">
-                       placeholder="enter text...">
+                    </div>
-                <button type="submit" class="btn btn-primary">Submit</button>
+                </div>
+                <div class="col-12">
+                  <button type="submit" class="btn btn-primary">Submit</button>
+                </div>
             </form>
-            
             <!-- TODO ITEMS LIST -->
             <ul id="TodoList">
                 @foreach (var todoItem in Model.TodoItems)
@@ -543,7 +545,7 @@ namespace TodoApp.Blazor.Pages
         private List<TodoItemDto> TodoItems { get; set; } = new List<TodoItemDto>();
         private string NewTodoText { get; set; }
 
-        protected async override Task OnInitializedAsync()
+        protected override async Task OnInitializedAsync()
         {
             TodoItems = await TodoAppService.GetListAsync();
         }
@@ -589,17 +591,16 @@ Open the `Index.razor` file in the `Pages` folder of the *TodoApp.Blazor* projec
         </CardHeader>
         <CardBody>
             <!-- FORM FOR NEW TODO ITEMS -->
-            <form id="NewItemForm" 
+            <form id="NewItemForm" @onsubmit:preventDefault @onsubmit="() => Create()" class="row row-cols-lg-auto g-3 align-items-center">
-                  @onsubmit:preventDefault
+                <div class="col-12">
-                  @onsubmit="() => Create()"
+                  <div class="input-group">
-                  class="form-inline">
+                    <input name="NewTodoText" type="text" @bind-value="@NewTodoText" class="form-control" placeholder="enter text..." />
-                <input type="text" 
+                  </div>
-                       @bind-value="@NewTodoText"
+                </div>
-                       class="form-control mr-2" 
+                <div class="col-12">
-                       placeholder="enter text...">
+                  <button type="submit" class="btn btn-primary">Submit</button>
-                <button type="submit" class="btn btn-primary">Submit</button>
+                </div>
             </form>
-
             <!-- TODO ITEMS LIST -->
             <ul id="TodoList">
                 @foreach (var todoItem in TodoItems)
@@ -682,7 +683,7 @@ You first need to run the `TodoApp.HttpApi.Host` project since the proxy generat
 Once you run the `TodoApp.HttpApi.Host` project, open a command-line terminal in the `angular` folder and type the following command:
 
 ````bash
-abp generate-proxy
+abp generate-proxy -t ng
 ````
 
 If everything goes well, it should generate an output like shown below:
@@ -758,17 +759,16 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten
     </div>
     <div class="card-body">
       <!-- FORM FOR NEW TODO ITEMS -->
-      <form class="form-inline" (ngSubmit)="create()">
+      <form class="row row-cols-lg-auto g-3 align-items-center" (ngSubmit)="create()">
-        <input
+        <div class="col-12">
-          name="NewTodoText"
+          <div class="input-group">
-          type="text"
+            <input name="NewTodoText" type="text" [(ngModel)]="newTodoText" class="form-control" placeholder="enter text..." />
-          [(ngModel)]="newTodoText"
+          </div>
-          class="form-control mr-2"
+        </div>
-          placeholder="enter text..."
+        <div class="col-12">
-        />
+          <button type="submit" class="btn btn-primary">Submit</button>
-        <button type="submit" class="btn btn-primary">Submit</button>
+        </div>
       </form>
-
       <!-- TODO ITEMS LIST -->
       <ul id="TodoList">
         <li *ngFor="let todoItem of todoItems">

docs/en/UI/Angular/List-Service.md

@@ -201,26 +201,3 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide
 
 <input type="text" name="search" [(ngModel)]="list.filter">
 ```
-
-## Breaking Change with ABP v3.0
-
-We had to modify the `ListService` to make it work with `ngx-datatable`. Previously, the minimum value for `page` property was `1` and you could use it like this:
-
-```html
-<!-- other bindings are hidden in favor of brevity -->
-<abp-table
-  [(page)]="list.page"
-></abp-table>
-```
-
-As of v3.0, with ngx-datatable, the `page` property has to be set as `0` for the initial page. Therefore, if you used `ListService` on your tables before and are going to keep `abp-table`, you need to make the following change:
-
-```html
-<!-- other bindings are hidden in favor of brevity -->
-<abp-table
-  [page]="list.page + 1"
-  (pageChange)="list.page = $event - 1"
-></abp-table>
-```
-
-**Important Note:** The `abp-table` is not removed, but is deprecated and will be removed in the future. Please consider switching to ngx-datatable.

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

@@ -81,6 +81,7 @@
                 var itemsPropertyName = $(this).data("autocompleteItemsProperty");
                 var filterParamName = $(this).data("autocompleteFilterParamName");
                 var selectedText = $(this).data("autocompleteSelectedItemName");
+                var parentSelector = $(this).data("autocompleteParentSelector");
                 var name = $(this).attr("name");
                 var selectedTextInputName = name.substring(0, name.length - 1) + "_Text]";
                 var selectedTextInput = $('<input>', {
@@ -119,7 +120,8 @@
                             };
                         }
                     },
-                    width: '100%'
+                    width: '100%',
+                    dropdownParent: parentSelector ? $(parentSelector) : $('body'),
                 });
                 $select.on('select2:select', function (e) {
                     selectedTextInput.val(e.params.data.text);

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Bundling/BasicThemeGlobalStyleContributor.cs

@@ -1,4 +1,4 @@
-using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling;
 
@@ -7,6 +7,5 @@ public class BasicThemeGlobalStyleContributor : BundleContributor
     public override void ConfigureBundle(BundleConfigurationContext context)
     {
         context.Files.Add("/themes/basic/layout.css");
-        context.Files.Add("/themes/basic/custom/select2-bs5-fix.css");
     }
 }

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/wwwroot/themes/basic/custom/select2-bs5-fix.css

@@ -1,4 +0,0 @@
-/*TODO: Remove after BS5 Modal support of select2 */
-span.select2-container.select2-container--default.select2-container--open {
-    z-index: 1056; /*Just for BS5 Modals*/
-}

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml

@@ -13,7 +13,7 @@
 }
 
 <form asp-page="/CmsKit/Menus/MenuItems/CreateModal">
-    <abp-modal>
+    <abp-modal id="menu-create-modal">
         <abp-modal-header title="@L["New"].Value"></abp-modal-header>
         <abp-modal-body>
 

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml

@@ -13,7 +13,7 @@
 }
 
 <form asp-page="/CmsKit/Menus/MenuItems/UpdateModal">
-    <abp-modal>
+    <abp-modal id="menu-update-modal">
         <abp-modal-header title="@L["New"].Value"></abp-modal-header>
         <abp-modal-body>
             <abp-input asp-for="Id"/>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js

@@ -33,6 +33,7 @@ $(function () {
                 $pageId.data('autocompleteValueProperty', 'id');
                 $pageId.data('autocompleteItemsProperty', 'items');
                 $pageId.data('autocompleteFilterParamName', 'filter');
+                $pageId.data('autocompleteParentSelector', '#menu-create-modal');
 
                 abp.dom.initializers.initializeAutocompleteSelects($pageId);
             }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js

@@ -34,6 +34,7 @@ $(function () {
                 $pageId.data('autocompleteValueProperty', 'id');
                 $pageId.data('autocompleteItemsProperty', 'items');
                 $pageId.data('autocompleteFilterParamName', 'filter');
+                $pageId.data('autocompleteParentSelector', '#menu-update-modal');
 
                 abp.dom.initializers.initializeAutocompleteSelects($pageId);
             }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml

@@ -57,7 +57,16 @@
     Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) =>
     @<div class="cms-comment-content-area" data-id="@id.ToString()">
         <p class="m-0">
-            @text
+            @{
+                var lines = text.SplitToLines();
+                if (lines.Any())
+                {
+                    foreach (var line in lines)
+                    {
+                        @line <br />
+                    }
+                }
+            }
         </p>
     </div>;
 }