playlist: basic reorder; todo: track reorder

FNZCM/FNZCM.BlazorWasm/Helpers/PlaylistHelper.cs

@@ -4,7 +4,7 @@ namespace FNZCM.BlazorWasm.Helpers
 {
     public class PlaylistHelper
     {
-        public event Action Changed ;
+        public event Action Changed;
 
         private readonly LocalStorageHelper localStorage;
 
@@ -51,7 +51,7 @@ namespace FNZCM.BlazorWasm.Helpers
             Changed?.Invoke();
         }
 
-        public void UpdatePlaylistName(Guid playlistId,string name)
+        public void UpdatePlaylistName(Guid playlistId, string name)
         {
             var pls = PlayListLoadSave;
             pls[playlistId] = name;
@@ -61,5 +61,71 @@ namespace FNZCM.BlazorWasm.Helpers
 
         //TODO: Move order track in playlist
 
+        public void ListMoveUp(int index)
+        {
+            if (index < 1) return;
+
+            // let's say index = 3
+
+            var pls = PlayListLoadSave;
+
+            var re = new Dictionary<Guid, string>();
+
+            foreach (var item in pls.Take(index - 1)) // take2  0 1
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            foreach (var item in pls.Skip(index).Take(1)) // skip3t1 3→2
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            foreach (var item in pls.Skip(index - 1).Take(1)) // skip2t1 2→3
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            foreach (var item in pls.Skip(index + 1)) // skip4 4 5
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            PlayListLoadSave = re;
+            Changed?.Invoke();
+        }
+
+        public void ListMoveDown(int index)
+        {
+            var pls = PlayListLoadSave;
+            if (index >= pls.Count - 1) return;
+
+            // let's say index = 3 and count = 6
+
+            var re = new Dictionary<Guid, string>();
+
+            foreach (var item in pls.Take(index)) // take3 012→012
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            foreach (var item in pls.Skip(index+1).Take(1)) // skip4t1 4→3
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            foreach (var item in pls.Skip(index).Take(1)) // skip3t1 3→4
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            foreach (var item in pls.Skip(index + 2)) // skip5 5→5
+            {
+                re.Add(item.Key, item.Value);
+            }
+
+            PlayListLoadSave = re;
+            Changed?.Invoke();
+        }
     }
 }

FNZCM/FNZCM.BlazorWasm/Properties/launchSettings.json

@@ -13,7 +13,7 @@
       "dotnetRunMessages": true,
       "launchBrowser": false,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "http://localhost:57625",
+      "applicationUrl": "http://localhost:57627",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistTableItem.razor

@@ -2,6 +2,9 @@
 
 @code {
     [Parameter, Required] public KeyValuePair<Guid, string>? Playlist { get; set; }
+    [Parameter, Required] public int ListItemIndex { get; set; }
+    [Parameter, Required] public int ListItemCount { get; set; }
+
     [Parameter] public EventCallback<Guid> EditPlaylist { get; set; } = EventCallback<Guid>.Empty;
     [Parameter] public EventCallback<Guid> DeletePlaylist { get; set; } = EventCallback<Guid>.Empty;
 
@@ -38,6 +41,29 @@
                         </div>
                     </td>
                     <td>
+                        @if (ListItemCount > 1)
+                        {
+                            var isFirst = ListItemIndex == 0;
+                            var isLast = ListItemIndex == ListItemCount - 1;
+
+                            <div class="dropstart">
+                                <button type="button" class="btn btn-primary p-2" data-bs-toggle="dropdown">
+                                    <i class="bi bi-arrow-down-up"></i>
+                                </button>
+                                <div class="dropdown-menu text-end p-1 text-nowrap" style="width: initial;min-width: initial;transform: translateY(-10);">
+                                    <button class="btn btn-primary p-2" disabled="@isFirst" @onclick="()=>PlaylistHelper.ListMoveUp(ListItemIndex)">
+                                        <i class="bi bi-arrow-bar-up"></i>
+                                        Up
+                                    </button>
+                                    <button class="btn btn-primary p-2" disabled="@isLast" @onclick="()=>PlaylistHelper.ListMoveDown(ListItemIndex)">
+                                        <i class="bi bi-arrow-bar-down"></i>
+                                        Down
+                                    </button>
+                                </div>
+                            </div>
+                        }
+                    </td>
+                    <td>
                         <button type="button" class="btn btn-primary p-2" @onclick="()=>DownloadPlaylist(Playlist.Value.Key)">
                             <i class="bi bi-download"></i>
                         </button>
@@ -47,8 +73,7 @@
                             <i class="bi bi-pencil-square"></i>
                         </button>
                     </td>
-                    <td class="align-middle text-nowrap">
-
+                    <td>
                         <button type="button" class="btn btn-danger p-2" @onclick="()=>DeletePlaylist.InvokeAsync(Playlist.Value.Key)">
                             <i class="bi bi-trash"></i>
                         </button>
@@ -70,9 +95,10 @@
                             {
                                 var uri = new Uri(item.item);
                                 var paths = uri.AbsolutePath.Split('/').Skip(2).ToArray();
+
                                 <tr>
                                     <td><img src="blazor-192.png" style="height:50px" /></td>
-                                    <td colspan="5" class="align-middle w-100">
+                                    <td colspan="6" class="align-middle w-100">
                                         <div class="text-nowrap">- broken reference -</div>
                                         @foreach (var p in paths)
                                         {
@@ -96,7 +122,7 @@
                         {
                             <tr>
                                 <td></td>
-                                <td colspan="6" class="align-middle w-100">
+                                <td colspan="7" class="align-middle w-100">
                                     <div class="text-nowrap">- empty -</div>
                                 </td>
                             </tr>

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistTableItemTrack.razor

@@ -18,7 +18,7 @@
         <div class="text-nowrap">@Track.GetTitleOrFilename()</div>
         <div class="text-nowrap text-muted"> @Track.Tag?.Artist</div>
     </td>
-    <td class="text-center" colspan="2">
+    <td class="text-center" colspan="3">
         <div class="text-nowrap">@Track.Tag?.Duration.SecondToDur()</div>
         <div class="text-nowrap text-muted"> @Track.Tag?.Length.BytesToFileSize()</div>
     </td>

FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Playlist/PlaylistView.razor

@@ -23,11 +23,11 @@
 }
 
 <div class="container mt-3">
-    @foreach (var item in PlaylistHelper.PlayListLoadSave.KeepNoEmpty())
+    @foreach (var item in PlaylistHelper.PlayListLoadSave.KeepNoEmpty().WithIndex())
     {
-        if (item.Value != null)
+        if (item.item.Value != null)
         {
-            <PlaylistTableItem Playlist="@item" EditPlaylist="ShowPlaylistEdit" DeletePlaylist="ShowPlaylistDelete"></PlaylistTableItem>
+            <PlaylistTableItem Playlist="@item.item" ListItemIndex="@item.index" ListItemCount="@PlaylistHelper.PlayListLoadSave.Count" EditPlaylist="ShowPlaylistEdit" DeletePlaylist="ShowPlaylistDelete"></PlaylistTableItem>
         }
         else
         {

FNZCM/FNZCM.BlazorWasm/wwwroot/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-cn">
 
 <head>
     <meta charset="utf-8" />