-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
396 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,18 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk.Web"> | ||
| <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> | ||
|
|
||
| <PropertyGroup> | ||
| <TargetFramework>netstandard2.1</TargetFramework> | ||
| <TargetFramework>net5.0</TargetFramework> | ||
| <LangVersion>8.0</LangVersion> | ||
| <RazorLangVersion>3.0</RazorLangVersion> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" /> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" /> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.4" /> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" /> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.*" /> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.*" /> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.*" PrivateAssets="all" /> | ||
| </ItemGroup> | ||
|
|
||
| <ItemGroup> | ||
| <ProjectReference Include="..\BlazorSortableJS.DemoCore\DemoCore.csproj" /> | ||
| </ItemGroup> | ||
|
|
||
|
|
||
| </Project> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,137 @@ | ||
| @page "/" | ||
| Sortable List | ||
| <button @onclick="New">Add</button> | ||
| <SortableGroup Class="list-group" TItem="string" @ref="MyGroup"> | ||
| @foreach (var item in @MyGroup.Sortable.GetRaw()) | ||
| { | ||
| <SortableItem Class="list-group-item" Item="item" TItem="string">@item.Data</SortableItem> | ||
| } | ||
| </SortableGroup> | ||
| Same Group | ||
| <SortableGroup Class="list-group" TItem="string" @ref="My2Group"> | ||
| @foreach (var item in @My2Group.Sortable.GetRaw()) | ||
| { | ||
| <SortableItem Class="list-group-item" Item="item" TItem="string">@item.Data</SortableItem> | ||
| } | ||
| </SortableGroup> | ||
| Resulting Data | ||
| @using System.Text.Json | ||
| <button @onclick="Remove">Remove One</button> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-6">Sortable List | ||
| <SortGroup Items="items" Id="@Id1" Class="list-group" TemplateClass="list-group-item" @ref="MyGroup" TItem="Items" GroupName="test" OnAdd="OnAdd" OnSort="OnSort" OnRemove="OnRemove"> | ||
| <Template Context="test"> | ||
| @test.Data.Text - @test.Data.Id | ||
| </Template> | ||
| </SortGroup> | ||
| Same Group | ||
| <SortGroup Items="items2" Id="@Id2" Class="list-group" TemplateClass="list-group-item" OnAdd="OnAdd" OnSort="OnSort" OnRemove="OnRemove" TItem="Items" @ref="My2Group" GroupName="test"> | ||
| <Template Context="test"> | ||
| @test.Data.Text - @test.Data.Id | ||
| </Template> | ||
| </SortGroup> | ||
| </div> | ||
| <div class="col-6"> | ||
|
|
||
| List 1 Raw Contents | ||
| <ul class="list-group"> | ||
| @foreach (var item in items.OrderBy(q => q.Order)) | ||
| { | ||
| <li class="list-group-item">@item.Order - @item.Text - @item.Id</li> | ||
| } | ||
| </ul> | ||
| List 2 Raw Contents | ||
| <ul class="list-group"> | ||
| @foreach (var item in items2.OrderBy(q => q.Order)) | ||
| { | ||
| <li class="list-group-item">@item.Order -@item.Text - @item.Id</li> | ||
| } | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| Resulting For Gorup 2 | ||
| <ul class="list-group"> | ||
| @foreach (var item in resultsList) | ||
| @foreach (var item in ResultsList) | ||
| { | ||
| <li class="list-group-item">@item</li> | ||
| <li class="list-group-item">@item.Text - @item.Order - @item.Id</li> | ||
| } | ||
| </ul> | ||
|
|
||
| @code | ||
| { | ||
| SortableGroup<string> MyGroup; | ||
| SortableGroup<string> My2Group; | ||
| List<string> items { get; set; } = new List<string> { "T1", "T2", "T3" }; | ||
| List<string> items2 { get; set; } = new List<string> { "T4", "T5", "T6" }; | ||
| List<string> resultsList { get; set; } = new List<string>(); | ||
| string Id1 = Guid.NewGuid().ToString(); | ||
| string Id2 = Guid.NewGuid().ToString(); | ||
| int Order = 0; | ||
| SortGroup<Items> MyGroup; | ||
| SortGroup<Items> My2Group; | ||
| List<Items> items { get; set; } = new List<Items> | ||
| { | ||
| new Items("T1"), | ||
| new Items("T2"), | ||
| new Items("T3"), | ||
| }; | ||
| List<Items> items2 { get; set; } = new List<Items> | ||
| { | ||
| new Items("T4"), | ||
| new Items("T5"), | ||
| new Items("T6"), | ||
| }; | ||
| List<Items> ResultsList { get; set; } = new List<Items>(); | ||
|
|
||
| public async Task New() | ||
| public async Task Remove() | ||
| { | ||
| var items = new List<string> { "T1", "T2", "T3", "T4", "T5" }; | ||
| await MyGroup.Sortable.ClearAsync(); | ||
| await MyGroup.Sortable.CreateAsync(MyGroup.Id, new SortableJsOptions | ||
| // This is just a shortcut for the demo | ||
| try | ||
| { | ||
| Group = "test", | ||
| Animation = 100, | ||
| // OnSort = async (e) => { resultsList = await MyGroup.Sortable.GetData(); StateHasChanged(); } | ||
| }); | ||
|
|
||
| MyGroup.Sortable.SetData(items); | ||
| StateHasChanged(); | ||
| items.Remove(items.First()); | ||
| } | ||
| catch{} | ||
| // Inform Group of direct changes. | ||
| await MyGroup.UpdateAsync(); | ||
| ResultsList = await My2Group.GetOrderListAsync("Order"); | ||
| } | ||
| protected override Task OnInitializedAsync() | ||
|
|
||
| public async Task OnSort(SortableEvent<Items> e) | ||
| { | ||
| resultsList = items; | ||
| return base.OnInitializedAsync(); | ||
| ResultsList = await My2Group.GetOrderListAsync("Order"); | ||
| } | ||
| public void Test(SortableJSEvent e) | ||
| public async Task OnAdd(SortableEvent<Items> e) | ||
| { | ||
| Console.WriteLine(e); | ||
| // Changes are already tracked do not use UpdateAsync() | ||
| if (e.Sender.Id == Id1) | ||
| { | ||
| items.Add(e.Data); | ||
| } | ||
| else | ||
| { | ||
| items2.Add(e.Data); | ||
| } | ||
| _= await MyGroup.GetOrderListAsync("Order"); | ||
| ResultsList = await My2Group.GetOrderListAsync("Order"); | ||
| } | ||
| protected async override Task OnAfterRenderAsync(bool firstrun) | ||
| public async Task OnRemove(SortableEvent<Items> e) | ||
| { | ||
| if (firstrun) | ||
| // Changes are already tracked do not use UpdateAsync() | ||
| if (e.Sender.Id == Id1) | ||
| { | ||
| MyGroup.Sortable.SetData(items); | ||
| await MyGroup.Sortable.CreateAsync(MyGroup.Id, new SortableJsOptions | ||
| { | ||
| Group = "test", | ||
| Animation = 100, | ||
| OnClone = Test | ||
| // OnSort = async (e) => { resultsList = await MyGroup.Sortable.GetData(); StateHasChanged(); } | ||
| }); | ||
| var item = items.FirstOrDefault(q => q.Id == e.Data.Id); | ||
| if (item != null) | ||
| items.Remove(item); | ||
| } | ||
| else | ||
| { | ||
| var item = items2.FirstOrDefault(q => q.Id == e.Data.Id); | ||
| if (item != null) | ||
| items2.Remove(item); | ||
| } | ||
| _ = await MyGroup.GetOrderListAsync("Order"); | ||
| ResultsList = await My2Group.GetOrderListAsync("Order"); | ||
| } | ||
|
|
||
| My2Group.Sortable.SetData(items2); | ||
| await My2Group.Sortable.CreateAsync(My2Group.Id, new SortableJsOptions | ||
| { | ||
| Group = "test", | ||
| Animation = 100, | ||
| OnClone = Test, | ||
| OnSort = async (e) => { resultsList = await My2Group.Sortable.GetDataAsync(); StateHasChanged(); } | ||
| }); | ||
| protected override Task OnInitializedAsync() | ||
| { | ||
| return base.OnInitializedAsync(); | ||
| } | ||
|
|
||
|
|
||
| public class Items | ||
| { | ||
| public int Order { get; set; } = 0; | ||
| public string Text { get; set; } | ||
| public string Id { get; set; } = Guid.NewGuid().ToString(); | ||
|
|
||
| StateHasChanged(); | ||
| public Items() | ||
| { | ||
|
|
||
| } | ||
| public Items(string text) | ||
| { | ||
| Text = text; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| @typeparam TItem | ||
| <CascadingValue Value="@Sortable"> | ||
| @if(!ForceReDraw) | ||
| { | ||
| if (IsDiv) | ||
| { | ||
| <div class="@TemplateClass" @onclick="@OnClick" id="@Id" data-refId="@Sortable.RefId"> | ||
| @foreach (var item in Sortable.GetRaw()) | ||
| { | ||
| <div @key="item" @onclick="@TemplateOnClick" data-id="@item.DataId" Id="@(Guid.NewGuid())" class="@TemplateClass"> | ||
| @Template(item) | ||
| </div> | ||
| } | ||
| </div> | ||
| } | ||
| else | ||
| { | ||
| <ul class="@Class" @onclick="@OnClick" id="@Id" data-refId="@Sortable.RefId"> | ||
| @foreach (var item in Sortable.GetRaw()) | ||
| { | ||
| <li @key="item" @onclick="@TemplateOnClick" data-id="@item.DataId" Id="@(Guid.NewGuid())" class="@TemplateClass"> | ||
| @Template(item) | ||
| </li> | ||
| } | ||
| </ul> | ||
| } | ||
| } | ||
| </CascadingValue> |
Oops, something went wrong.