selectize replaced with select2 library

VahidFarahmandian · Jun 22, 2024 · a24e71e · a24e71e
1 parent a9d4bcb
commit a24e71e
Show file tree

Hide file tree

Showing 13 changed files with 2,791 additions and 509 deletions.
diff --git a/04-Presentation/Jinget.Blazor/Components/DropDownList/JingetDropDownList.razor b/04-Presentation/Jinget.Blazor/Components/DropDownList/JingetDropDownList.razor
@@ -1,10 +1,15 @@
-@using MudBlazor
+@using Microsoft.AspNetCore.Components.Forms
+@using MudBlazor
 @inherits JingetDropDownListBase;
 @if (IsSearchable)
 {
     @if (connected)
     {
-        <select id="@Id" onchange=@((object e)=>OnSelectedItemChangedAsync(e)) class="@CssClass" disabled="@IsDisabled" required="@IsRequired">
+        @* @onchange= "@((ChangeEventArgs e)=>OnSelectedItemChangedAsync(e?.Value))" *@
+        <select id="@Id"
+                class="@CssClass"
+                disabled="@IsDisabled"
+                required="@IsRequired">
             <option value="">@DefaultText</option>
             @foreach (var item in Items)
             {
@@ -13,7 +18,7 @@
                 {
                     Task.Run(() =>
                     {
-                        JS.InvokeVoidAsync("selectItem", Id, Value).GetAwaiter().GetResult();
+                        JS.InvokeVoidAsync("jinget_blazor_dropdownlist_selectItem", Id, Value).GetAwaiter().GetResult();
                     });
                 }
                 <option value="@item.Value" selected="@selected">@item.Text</option>
@@ -22,7 +27,7 @@
             {
                 Task.Run(() =>
                 {
-                    JS.InvokeVoidAsync("clearSelectItem", Id).GetAwaiter().GetResult();
+                    JS.InvokeVoidAsync("jinget_blazor_dropdownlist_clear", Id).GetAwaiter().GetResult();
                 });
             }
         </select>
@@ -53,6 +58,7 @@ else
     </MudSelect>
 }
 @code {
+
     private DotNetObjectReference<JingetDropDownList>? dotNetObjRef;
     protected override async Task OnInitializedAsync()
     {
@@ -64,11 +70,14 @@ else
     }
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (IsSearchable)
+        if (_initialized)
         {
-            //calling convertToSearchable makes the select input searchable. this functionality is mainly powered by js selectize library.
-            await JS.InvokeVoidAsync("convertToSearchable", dotNetObjRef, Id);
+            if (IsSearchable)
+            {
+                //calling convertToSearchable makes the select input searchable. this functionality is mainly powered by js select2 library.
+                await JS.InvokeVoidAsync("convertToSearchable", dotNetObjRef, Id);
+            }
+            await base.OnAfterRenderAsync(firstRender);
         }
-        await base.OnAfterRenderAsync(firstRender);
     }
 }
diff --git a/04-Presentation/Jinget.Blazor/Components/DropDownList/JingetDropDownListBase.cs b/04-Presentation/Jinget.Blazor/Components/DropDownList/JingetDropDownListBase.cs
@@ -85,8 +85,7 @@ public async Task SetSelectedIndexAsync(int index)
     /// <summary>
     /// This method is being invoked by jinget.custom.js. whenever searchable dropdownlist's selected item changed
     /// </summary>
-    /// <param name="e"></param>
-    [JSInvokable("jinget_blazor_dropdownlist_onchange")]
+    [JSInvokable]
     public void OnJSSelectedItemChanged(object? e) => OnSelectedItemChangedAsync(e);
 
     protected async Task OnSelectedItemChangedAsync(object? e)

diff --git a/04-Presentation/Jinget.Blazor/Jinget.Blazor.csproj b/04-Presentation/Jinget.Blazor/Jinget.Blazor.csproj
@@ -21,6 +21,14 @@
 
 	</PropertyGroup>
 
+	<ItemGroup>
+	  <Content Remove="wwwroot\js\jinget.select2.js" />
+	</ItemGroup>
+
+	<ItemGroup>
+	  <_ContentIncludedByDefault Remove="wwwroot\js\jinget.select2.js" />
+	</ItemGroup>
+
 	<ItemGroup>
 		<FrameworkReference Include="Microsoft.AspNetCore.App" />
 	</ItemGroup>
@@ -40,6 +48,7 @@
 			<PackagePath>\</PackagePath>
 			<Pack>True</Pack>
 		</None>
+		<None Include="wwwroot\js\jinget.select2.js" />
 	</ItemGroup>
 	<ItemGroup>
 	  <ProjectReference Include="..\..\01-Core\Jinget.Core\Jinget.Core.csproj" />

diff --git a/04-Presentation/Jinget.Blazor/wwwroot/css/jinget.core.css b/04-Presentation/Jinget.Blazor/wwwroot/css/jinget.core.css
@@ -8,6 +8,6 @@
 @import url('jinget.jalali.picker.daterange.css');
 @import url('jinget.modal.css');
 @import url('jinget.table.css');
-@import url('jinget.selectize.css');
-
+@import url('jinget.select2.css');
+@import url('jinget.select2.theme.material.css');
 @import url('jinget.custom.css');
diff --git a/04-Presentation/Jinget.Blazor/wwwroot/css/jinget.custom.css b/04-Presentation/Jinget.Blazor/wwwroot/css/jinget.custom.css
@@ -1,4 +1,30 @@
-/*MudBlazor START*/
+/*Select2.js START*/
+.select2-container {
+    width: 100% !important
+}
+
+.select2-container--outlined .select2-selection {
+    font-family: IRANSans !important;
+    border-top: none !important;
+    border-right: none !important;
+    border-left: none !important;
+    border-radius: 0 !important;
+    min-height: 2.5rem !important;
+    line-height: 1.5 !important;
+    padding: 0 !important;
+}
+
+.select2-results__option--selectable {
+    font-family: IRANSans !important;
+}
+
+
+.select2-container .select2-selection--single .select2-selection__arrow {
+    position: absolute !important;
+    left: 0px !important;
+}
+/*Select2.js END*/
+/*MudBlazor START*/
 .mud-typography, .mud-picker {
     font-family: IRANSans;
 }
@@ -27,7 +53,7 @@
 
 /*Selectize START*/
 .selectize-control.single .selectize-input {
-    height: 55px !important;
+/*    height: 55px !important;
     margin-top: 4px !important;
 }
 
@@ -46,7 +72,7 @@
     position: absolute;
     z-index: 2 !important;
     color: rgb(66 66 66,1) !important;
-}
+}*/
 /*Selectize END*/
 
 /*JingetList START*/