now tabs move between panels

TODO - Document SortableList and download its js file - A todo in tab panel information - Refactors - Unit tests
STARIONGROUP · Jul 22, 2024 · 6509a6d · 6509a6d
1 parent e3d27a0
commit 6509a6d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor
@@ -29,8 +29,12 @@
     {
         <div class="d-flex tabs-row justify-content-between user-select-none">
             <div class="d-flex gap-2">
-
-                <SortableList Group="sharedList" Items="@(this.Panel.OpenTabs.Items.ToList())" OnUpdate="@(indexes => this.SortTabs(indexes.oldIndex, indexes.newIndex))" Context="tab" CssClass="d-flex gap-2">
+                <SortableList Group="tabs-panel" 
+                              Items="@(this.Panel.OpenTabs.Items.ToList())" 
+                              OnUpdate="@(indexes => this.SortTabs(indexes.oldIndex, indexes.newIndex))"
+                              OnRemove="@(indexes => this.OnMovedTab(indexes.oldIndex, indexes.newIndex))"
+                              Context="tab" 
+                              CssClass="d-flex gap-2">
                     <SortableItemTemplate>
                         <TabComponent Text="@(GetTabText(tab))"
                                       Caption="@(this.GetCaptionText(tab.ObjectOfInterest))"

diff --git a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.cs b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.cs
@@ -108,6 +108,27 @@ private void SortTabs(int oldIndex, int newIndex)
             this.Panel.OpenTabs.Move(oldIndex, newIndex);
         }
 
+        /// <summary>
+        /// Handles the logic to organize data when a tab is moved from one panel to another
+        /// </summary>
+        /// <param name="oldIndex">The dragged tab old panel index</param>
+        /// <param name="newIndex">The dragged tab new panel index</param>
+        private void OnMovedTab(int oldIndex, int newIndex)
+        {
+            var tab = this.Panel.OpenTabs.Items.ElementAt(oldIndex);
+
+            if (this.Panel == this.ViewModel.MainPanel)
+            {
+                this.ViewModel.SidePanel.OpenTabs.Insert(newIndex, tab);
+            }
+            else
+            {
+                this.ViewModel.MainPanel.OpenTabs.Insert(newIndex, tab);
+            }
+
+            this.Panel.OpenTabs.Remove(tab);
+        }
+
         /// <summary>
         /// Gets the tab text for the given object of interest
         /// </summary>

diff --git a/COMETwebapp/Pages/Tabs.razor.cs b/COMETwebapp/Pages/Tabs.razor.cs
@@ -93,6 +93,9 @@ protected override void OnInitialized()
                     x => x.ViewModel.MainPanel.CurrentTab,
                     x => x.ViewModel.SidePanel.CurrentTab)
                 .SubscribeAsync(_ => this.InvokeAsync(this.StateHasChanged)));
+
+            this.Disposables.Add(this.ViewModel.MainPanel.OpenTabs.Connect().SubscribeAsync(_ => this.InvokeAsync(this.StateHasChanged)));
+            this.Disposables.Add(this.ViewModel.SidePanel.OpenTabs.Connect().SubscribeAsync(_ => this.InvokeAsync(this.StateHasChanged)));
         }
 
         /// <summary>

diff --git a/COMETwebapp/ViewModels/Pages/TabsViewModel.cs b/COMETwebapp/ViewModels/Pages/TabsViewModel.cs
@@ -147,7 +147,23 @@ private void OnSelectedApplicationChange()
                 return;
             }
 
-            this.MainPanel.CurrentTab = this.MainPanel.OpenTabs.Items.FirstOrDefault(x => x.ComponentType == this.SelectedApplication.ComponentType);
+            var mainPanelTabForCurrentApplication = this.MainPanel.OpenTabs.Items.FirstOrDefault(x => x.ComponentType == this.SelectedApplication.ComponentType);
+            var sidePanelTabForCurrentApplication = this.SidePanel.OpenTabs.Items.FirstOrDefault(x => x.ComponentType == this.SelectedApplication.ComponentType);
+
+            if (mainPanelTabForCurrentApplication != null)
+            {
+                this.MainPanel.CurrentTab = mainPanelTabForCurrentApplication;
+            }
+
+            if (sidePanelTabForCurrentApplication != null)
+            {
+                this.SidePanel.CurrentTab = sidePanelTabForCurrentApplication;
+            }
+
+            if (sidePanelTabForCurrentApplication == null && mainPanelTabForCurrentApplication == null)
+            {
+                this.MainPanel.CurrentTab = null;
+            }
         }
 
         /// <summary>