Make drag and drop available

linkdotnet · linkdotnet · commit e48767c7b66d · 2021-07-28T22:18:49.000+02:00
diff --git a/LinkDotNet.Blog.IntegrationTests/Infrastructure/Persistence/Sql/ProfileRepositoryTests.cs b/LinkDotNet.Blog.IntegrationTests/Infrastructure/Persistence/Sql/ProfileRepositoryTests.cs
@@ -12,8 +12,8 @@ public async Task ShouldSaveAndRetrieveAllEntries()
         {
             var item1 = new ProfileInformationEntryBuilder().WithContent("key1").Build();
             var item2 = new ProfileInformationEntryBuilder().WithContent("key2").Build();
-            await ProfileRepository.AddAsync(item1);
-            await ProfileRepository.AddAsync(item2);
+            await ProfileRepository.StoreAsync(item1);
+            await ProfileRepository.StoreAsync(item2);
 
             var items = await ProfileRepository.GetAllAsync();
 
@@ -26,8 +26,8 @@ public async Task ShouldDelete()
         {
             var item1 = new ProfileInformationEntryBuilder().WithContent("key1").Build();
             var item2 = new ProfileInformationEntryBuilder().WithContent("key2").Build();
-            await ProfileRepository.AddAsync(item1);
-            await ProfileRepository.AddAsync(item2);
+            await ProfileRepository.StoreAsync(item1);
+            await ProfileRepository.StoreAsync(item2);
 
             await ProfileRepository.DeleteAsync(item1.Id);
 
@@ -40,7 +40,7 @@ public async Task ShouldDelete()
         public async Task NoopOnDeleteWhenEntryNotFound()
         {
             var item = new ProfileInformationEntryBuilder().WithContent("key1").Build();
-            await ProfileRepository.AddAsync(item);
+            await ProfileRepository.StoreAsync(item);
 
             await ProfileRepository.DeleteAsync("SomeIdWhichHopefullyDoesNotExist");
 
diff --git a/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs b/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs
@@ -51,7 +51,7 @@ public void ShouldAddEntry()
         {
             var repo = RegisterServices();
             ProfileInformationEntry entryToDb = null;
-            repo.Setup(p => p.AddAsync(It.IsAny<ProfileInformationEntry>()))
+            repo.Setup(p => p.StoreAsync(It.IsAny<ProfileInformationEntry>()))
                 .Callback<ProfileInformationEntry>(p => entryToDb = p);
             var cut = RenderComponent<Profile>(p => p.Add(s => s.IsAuthenticated, true));
             var addShortItemComponent = cut.FindComponent<AddProfileShortItem>();
@@ -61,7 +61,7 @@ public void ShouldAddEntry()
 
             entryToDb.Should().NotBeNull();
             entryToDb.Content.Should().Be("key");
-            entryToDb.SortOrder.Should().Be(0);
+            entryToDb.SortOrder.Should().Be(1000);
         }
 
         [Fact]
@@ -101,7 +101,7 @@ public void ShouldAddEntryWithCorrectSortOrder()
             var entry = new ProfileInformationEntryBuilder().WithSortOrder(1).Build();
             repo.Setup(p => p.GetAllAsync()).ReturnsAsync(new[] { entry });
             ProfileInformationEntry entryToDb = null;
-            repo.Setup(p => p.AddAsync(It.IsAny<ProfileInformationEntry>()))
+            repo.Setup(p => p.StoreAsync(It.IsAny<ProfileInformationEntry>()))
                 .Callback<ProfileInformationEntry>(p => entryToDb = p);
             var cut = RenderComponent<Profile>(p => p.Add(s => s.IsAuthenticated, true));
             var addShortItemComponent = cut.FindComponent<AddProfileShortItem>();
diff --git a/LinkDotNet.Blog.UnitTests/Infrastructure/Persistence/InMemory/ProfileRepositoryTests.cs b/LinkDotNet.Blog.UnitTests/Infrastructure/Persistence/InMemory/ProfileRepositoryTests.cs
@@ -20,8 +20,8 @@ public async Task ShouldSaveAndRetrieveAllEntries()
         {
             var item1 = new ProfileInformationEntryBuilder().WithContent("key1").Build();
             var item2 = new ProfileInformationEntryBuilder().WithContent("key2").Build();
-            await profileRepository.AddAsync(item1);
-            await profileRepository.AddAsync(item2);
+            await profileRepository.StoreAsync(item1);
+            await profileRepository.StoreAsync(item2);
 
             var items = await profileRepository.GetAllAsync();
 
@@ -34,8 +34,8 @@ public async Task ShouldDelete()
         {
             var item1 = new ProfileInformationEntryBuilder().WithContent("key1").Build();
             var item2 = new ProfileInformationEntryBuilder().WithContent("key2").Build();
-            await profileRepository.AddAsync(item1);
-            await profileRepository.AddAsync(item2);
+            await profileRepository.StoreAsync(item1);
+            await profileRepository.StoreAsync(item2);
 
             await profileRepository.DeleteAsync(item1.Id);
 
@@ -48,7 +48,7 @@ public async Task ShouldDelete()
         public async Task NoopOnDeleteWhenEntryNotFound()
         {
             var item = new ProfileInformationEntryBuilder().WithContent("key1").Build();
-            await profileRepository.AddAsync(item);
+            await profileRepository.StoreAsync(item);
 
             await profileRepository.DeleteAsync("SomeIdWhichHopefullyDoesNotExist");
 
diff --git a/LinkDotNet.Blog.UnitTests/Web/Shared/SortOrderCalculatorTests.cs b/LinkDotNet.Blog.UnitTests/Web/Shared/SortOrderCalculatorTests.cs
@@ -0,0 +1,41 @@
+﻿using FluentAssertions;
+using LinkDotNet.Blog.TestUtilities;
+using LinkDotNet.Blog.Web.Shared;
+using Xunit;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Shared
+{
+    public class SortOrderCalculatorTests
+    {
+        private SortOrderCalculator sut;
+
+        public SortOrderCalculatorTests()
+        {
+            sut = new SortOrderCalculator();
+        }
+
+        [Fact]
+        public void ShouldProperlyCalculateNewSortOrder()
+        {
+            var target = new ProfileInformationEntryBuilder().WithSortOrder(1000).Build();
+            var next = new ProfileInformationEntryBuilder().WithSortOrder(2000).Build();
+            var all = new[] { target, next };
+
+            var newSortOrder = sut.GetSortOrder(target, all);
+
+            newSortOrder.Should().Be(1500);
+        }
+
+        [Fact]
+        public void ShouldProperlyCalculateNewSortOrderWhenLastItem()
+        {
+            var target = new ProfileInformationEntryBuilder().WithSortOrder(2000).Build();
+            var previous = new ProfileInformationEntryBuilder().WithSortOrder(1000).Build();
+            var all = new[] { previous, target };
+
+            var newSortOrder = sut.GetSortOrder(target, all);
+
+            newSortOrder.Should().Be(1500);
+        }
+    }
+}
diff --git a/LinkDotNet.Blog.Web/Shared/ISortOrderCalculator.cs b/LinkDotNet.Blog.Web/Shared/ISortOrderCalculator.cs
@@ -0,0 +1,10 @@
+﻿using System.Collections.Generic;
+using LinkDotNet.Domain;
+
+namespace LinkDotNet.Blog.Web.Shared
+{
+    public interface ISortOrderCalculator
+    {
+        int GetSortOrder(ProfileInformationEntry target, IEnumerable<ProfileInformationEntry> all);
+    }
+}
diff --git a/LinkDotNet.Blog.Web/Shared/Profile.razor b/LinkDotNet.Blog.Web/Shared/Profile.razor
@@ -4,6 +4,7 @@
 
 @inject AppConfiguration appConfiguration
 @inject IProfileRepository repository
+@inject ISortOrderCalculator sortOrderCalculator
 <div class="profile">
     <div class="profile-name">
         <span>@appConfiguration.ProfileInformation.Name</span>
@@ -13,19 +14,27 @@
     <div class="profile-image">
         <img src="@appConfiguration.ProfileInformation.ProfilePictureUrl" alt="Profile Picture" /> 
     </div>
-    <ul class="profile-keypoints inverted-colors">
+    <ul class="profile-keypoints inverted-colors" ondragover="event.preventDefault();">
         @foreach (var entry in profileInformationEntries)
         {
-            <li>
-                @if (IsAuthenticated)
-                {
-                    <button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() =>
-                    ShowDeleteDialog(entry.Content)">
+            @if (IsAuthenticated)
+            {
+                <li
+                    style="cursor: move"
+                    draggable="true"
+                    @ondrag="@(() => currentDragItem = entry)"
+                    @ondrop="@(() => HandleDrop(entry))">
+
+                    <button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
                         <i class="fas fa-trash-alt" aria-hidden="true"></i>
                     </button>
-                }
-                @RenderMarkupString(entry.Content)
-            </li>
+                    @RenderMarkupString(entry.Content)
+                </li>
+            }
+            else
+            {
+                <li>@RenderMarkupString(entry.Content)</li>
+            }
         }
         @if (IsAuthenticated)
         {
@@ -41,9 +50,10 @@ OnYesPressed="DeleteItem"></ConfirmDialog>
     [Parameter]
     public bool IsAuthenticated { get; set; }
 
-    private IList<ProfileInformationEntry> profileInformationEntries = new List<ProfileInformationEntry>(); 
+    private List<ProfileInformationEntry> profileInformationEntries = new();
     private ConfirmDialog Dialog { get; set; }
     private string currentDeleteKey;
+    private ProfileInformationEntry currentDragItem;
 
     protected override async Task OnInitializedAsync()
     {
@@ -69,7 +79,7 @@ OnYesPressed="DeleteItem"></ConfirmDialog>
         var newEntry = ProfileInformationEntry.Create(toAdd, sortOrder);
 
         profileInformationEntries.Add(newEntry);
-        await repository.AddAsync(newEntry);
+        await repository.StoreAsync(newEntry);
     }
 
     private int GetSortOrder()
@@ -79,6 +89,22 @@ OnYesPressed="DeleteItem"></ConfirmDialog>
             return profileInformationEntries.Max(p => p.SortOrder) + 1000;
         }
 
-        return 0;
+        return 1000;
+    }
+
+    private async Task HandleDrop(ProfileInformationEntry dropTarget)
+    {
+        if (currentDragItem == null || dropTarget  == currentDragItem)
+        {
+            return;
+        }
+
+        var newSortOrder = sortOrderCalculator.GetSortOrder(dropTarget, profileInformationEntries);
+        currentDragItem.SortOrder = newSortOrder;
+        await repository.StoreAsync(currentDragItem);
+        currentDragItem = null;
+        profileInformationEntries.Sort((a, b) => a.SortOrder.CompareTo(b.SortOrder));
+        StateHasChanged();
     }
+
 }
diff --git a/LinkDotNet.Blog.Web/Shared/SortOrderCalculator.cs b/LinkDotNet.Blog.Web/Shared/SortOrderCalculator.cs
@@ -0,0 +1,23 @@
+﻿using System.Collections.Generic;
+using LinkDotNet.Domain;
+
+namespace LinkDotNet.Blog.Web.Shared
+{
+    public class SortOrderCalculator : ISortOrderCalculator
+    {
+        public int GetSortOrder(ProfileInformationEntry target, IEnumerable<ProfileInformationEntry> all)
+        {
+            var linkedEntries = new LinkedList<ProfileInformationEntry>(all);
+            var targetNode = linkedEntries.Find(target);
+            var next = targetNode!.Next;
+
+            if (next == null)
+            {
+                var prev = targetNode.Previous;
+                return (target.SortOrder + prev!.Value.SortOrder) / 2;
+            }
+
+            return (target.SortOrder + next.Value.SortOrder) / 2;
+        }
+    }
+}
diff --git a/LinkDotNet.Blog.Web/Startup.cs b/LinkDotNet.Blog.Web/Startup.cs
@@ -3,6 +3,7 @@
 using LinkDotNet.Blog.Web.Authentication.Auth0;
 using LinkDotNet.Blog.Web.Authentication.Dummy;
 using LinkDotNet.Blog.Web.RegistrationExtensions;
+using LinkDotNet.Blog.Web.Shared;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.Extensions.Configuration;
@@ -60,6 +61,7 @@ public void ConfigureServices(IServiceCollection services)
             services.AddBlazoredToast();
             services.AddBlazoredLocalStorage();
             services.AddHeadElementHelper();
+            services.AddSingleton<ISortOrderCalculator, SortOrderCalculator>();
         }
 
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
diff --git a/LinkDotNet.Domain/ProfileInformationEntry.cs b/LinkDotNet.Domain/ProfileInformationEntry.cs
@@ -1,7 +1,9 @@
 ﻿using System;
+using System.Diagnostics;
 
 namespace LinkDotNet.Domain
 {
+    [DebuggerDisplay("{Content}")]
     public class ProfileInformationEntry
     {
         private ProfileInformationEntry()
diff --git a/LinkDotNet.Infrastructure/Persistence/IProfileRepository.cs b/LinkDotNet.Infrastructure/Persistence/IProfileRepository.cs
@@ -8,7 +8,7 @@ public interface IProfileRepository
     {
         Task<IList<ProfileInformationEntry>> GetAllAsync();
 
-        Task AddAsync(ProfileInformationEntry entry);
+        Task StoreAsync(ProfileInformationEntry entry);
 
         Task DeleteAsync(string id);
     }
diff --git a/LinkDotNet.Infrastructure/Persistence/InMemory/ProfileRepository.cs b/LinkDotNet.Infrastructure/Persistence/InMemory/ProfileRepository.cs
@@ -14,7 +14,7 @@ public Task<IList<ProfileInformationEntry>> GetAllAsync()
             return Task.FromResult((IList<ProfileInformationEntry>)profileInformation.ToList());
         }
 
-        public Task AddAsync(ProfileInformationEntry entry)
+        public Task StoreAsync(ProfileInformationEntry entry)
         {
             if (string.IsNullOrEmpty(entry.Id))
             {
diff --git a/LinkDotNet.Infrastructure/Persistence/RavenDb/ProfileRepository.cs b/LinkDotNet.Infrastructure/Persistence/RavenDb/ProfileRepository.cs
@@ -20,7 +20,7 @@ public async Task<IList<ProfileInformationEntry>> GetAllAsync()
             return await session.Query<ProfileInformationEntry>().ToListAsync();
         }
 
-        public async Task AddAsync(ProfileInformationEntry entry)
+        public async Task StoreAsync(ProfileInformationEntry entry)
         {
             using var session = documentStore.OpenAsyncSession();
             await session.StoreAsync(entry);
diff --git a/LinkDotNet.Infrastructure/Persistence/Sql/ProfileRepository.cs b/LinkDotNet.Infrastructure/Persistence/Sql/ProfileRepository.cs
@@ -19,9 +19,17 @@ public async Task<IList<ProfileInformationEntry>> GetAllAsync()
             return await dbContext.ProfileInformationEntries.ToListAsync();
         }
 
-        public async Task AddAsync(ProfileInformationEntry entry)
+        public async Task StoreAsync(ProfileInformationEntry entry)
         {
-            await dbContext.ProfileInformationEntries.AddAsync(entry);
+            if (string.IsNullOrEmpty(entry.Id))
+            {
+                await dbContext.ProfileInformationEntries.AddAsync(entry);
+            }
+            else
+            {
+                dbContext.Entry(entry).State = EntityState.Modified;
+            }
+
             await dbContext.SaveChangesAsync();
         }
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,9 @@`
`1`	`1`	`using System;`
	`2`	`+using System.Diagnostics;`
`2`	`3`
`3`	`4`	`namespace LinkDotNet.Domain`
`4`	`5`	`{`
	`6`	`+ [DebuggerDisplay("{Content}")]`
`5`	`7`	`public class ProfileInformationEntry`
`6`	`8`	`{`
`7`	`9`	`private ProfileInformationEntry()`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ public interface IProfileRepository`
`8`	`8`	`{`
`9`	`9`	`Task<IList<ProfileInformationEntry>> GetAllAsync();`
`10`	`10`
`11`		`- Task AddAsync(ProfileInformationEntry entry);`
	`11`	`+ Task StoreAsync(ProfileInformationEntry entry);`
`12`	`12`
`13`	`13`	`Task DeleteAsync(string id);`
`14`	`14`	`}`