Refactor BuildTab UI and improve job management functionality

This issue serves as a way to contribute to the project given the fact that I don't have push permissions. If you could give me those (not directly to master, ofc), I'd like to become an active contributor to this project.

## Issues

### 1. Job Reordering Inefficiency
The current implementation of job reordering in the BuildTab can be inefficient when dealing with a large number of jobs. Users need to perform multiple clicks to move jobs up or down, which can be time-consuming. Additionally, there's a risk of misclicks (e.g., pressing "Top" instead of "Up"), which can disrupt the intended order of jobs.

### 2. Unintended Grid Selection Synchronization
There's an issue where selecting an item in the JobsGrid also selects the corresponding item in the QueueGrid based on the index. This unintended behavior can lead to confusion and potential errors in managing the building queue and jobs.

## Solutions

### 1. For Job Reordering
- Moved the job management buttons (Top, Up, Down, Bottom, Delete, Delete All) from the context menu to a fixed position below the JobsGrid for better visibility and ease of access.
- Added null checks in the ViewModel to prevent actions on unselected items, reducing the risk of unintended operations.

### 2. For Grid Selection Issue
- Updated the bindings in BuildTab.xaml.cs to separate the SelectedItem and SelectedIndex bindings for JobsGrid and QueueGrid.
- Modified the BuildViewModel to have separate properties for Jobs and Queue selections.

## Code Changes

```csharp
diff --git a/MainCore/UI/ViewModels/Tabs/Villages/BuildViewModel.cs b/MainCore/UI/ViewModels/Tabs/Villages/BuildViewModel.cs
index 2cc4b21a..aa90b1d7 100644
--- a/MainCore/UI/ViewModels/Tabs/Villages/BuildViewModel.cs
+++ b/MainCore/UI/ViewModels/Tabs/Villages/BuildViewModel.cs
@@ -197,21 +197,25 @@ namespace MainCore.UI.ViewModels.Tabs.Villages
 
         private async Task UpHandler()
         {
+            if (Jobs.SelectedItem == null) return;
             await new MoveJobCommand().Execute(AccountId, VillageId, Jobs, MoveEnums.Up);
         }
 
         private async Task DownHandler()
         {
+            if (Jobs.SelectedItem == null) return;
             await new MoveJobCommand().Execute(AccountId, VillageId, Jobs, MoveEnums.Down);
         }
 
         private async Task TopHandler()
         {
+            if (Jobs.SelectedItem == null) return;
             await new MoveJobCommand().Execute(AccountId, VillageId, Jobs, MoveEnums.Top);
         }
 
         private async Task BottomHandler()
         {
+            if (Jobs.SelectedItem == null) return;
             await new MoveJobCommand().Execute(AccountId, VillageId, Jobs, MoveEnums.Bottom);
         }
 
@@ -220,10 +224,10 @@ namespace MainCore.UI.ViewModels.Tabs.Villages
             var status = _taskManager.GetStatus(AccountId);
             if (status == StatusEnums.Online)
             {
-                _dialogService.ShowMessageBox("Warning", "Please pause account before modifing building queue");
+                _dialogService.ShowMessageBox("Warning", "Please pause account before modifying building queue");
                 return;
             }
-            if (!Jobs.IsSelected) return;
+            if (Jobs.SelectedItem == null) return;
             var jobId = Jobs.SelectedItemId;
 
             new DeleteJobCommand().ByJobId(new JobId(jobId));
diff --git a/WPFUI/Views/Tabs/Villages/BuildTab.xaml b/WPFUI/Views/Tabs/Villages/BuildTab.xaml
index 8fb0c9dd..789dc806 100644
--- a/WPFUI/Views/Tabs/Villages/BuildTab.xaml
+++ b/WPFUI/Views/Tabs/Villages/BuildTab.xaml
@@ -100,6 +100,7 @@
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
             <Grid Grid.Row="0">
                 <Grid.ColumnDefinitions>
@@ -107,47 +108,38 @@
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
 
-                <Button x:Name="ImportButton"       Grid.Column="0" Content="Import" Margin="5" />
-                <Button x:Name="ExportButton"       Grid.Column="1" Content="Export" Margin="5" />
+                <Button x:Name="ImportButton" Grid.Column="0" Content="Import" Margin="5" />
+                <Button x:Name="ExportButton" Grid.Column="1" Content="Export" Margin="5" />
             </Grid>
             <Border Grid.Row="1" Style="{DynamicResource Box}">
-                <ListBox x:Name="JobsGrid" SelectionMode="Single" ItemTemplate="{DynamicResource ListBoxColorItem}">
-                    <ListBox.ContextMenu>
-                        <ContextMenu>
-                            <MenuItem x:Name="TopButton" Header="Top">
-                                <MenuItem.Icon>
-                                    <materialDesign:PackIcon Width="{DynamicResource IconSize}" Height="{DynamicResource IconSize}" Kind="ArrowUpBold" />
-                                </MenuItem.Icon>
-                            </MenuItem>
-                            <MenuItem x:Name="UpButton" Header="Up">
-                                <MenuItem.Icon>
-                                    <materialDesign:PackIcon Width="{DynamicResource IconSize}" Height="{DynamicResource IconSize}" Kind="ArrowUp" />
-                                </MenuItem.Icon>
-                            </MenuItem>
-                            <MenuItem x:Name="DownButton" Header="Down">
-                                <MenuItem.Icon>
-                                    <materialDesign:PackIcon Width="{DynamicResource IconSize}" Height="{DynamicResource IconSize}" Kind="ArrowDown" />
-                                </MenuItem.Icon>
-                            </MenuItem>
-                            <MenuItem x:Name="BottomButton" Header="Bottom">
-                                <MenuItem.Icon>
-                                    <materialDesign:PackIcon Width="{DynamicResource IconSize}" Height="{DynamicResource IconSize}" Kind="ArrowDownBold" />
-                                </MenuItem.Icon>
-                            </MenuItem>
-                            <MenuItem x:Name="DeleteButton" Header="Delete">
-                                <MenuItem.Icon>
-                                    <materialDesign:PackIcon Width="{DynamicResource IconSize}" Height="{DynamicResource IconSize}" Kind="Delete" />
-                                </MenuItem.Icon>
-                            </MenuItem>
-                            <MenuItem x:Name="DeleteAllButton" Header="Delete all">
-                                <MenuItem.Icon>
-                                    <materialDesign:PackIcon Width="{DynamicResource IconSize}" Height="{DynamicResource IconSize}" Kind="DeleteForever" />
-                                </MenuItem.Icon>
-                            </MenuItem>
-                        </ContextMenu>
-                    </ListBox.ContextMenu>
-                </ListBox>
+                <ListBox x:Name="JobsGrid" SelectionMode="Single" ItemTemplate="{DynamicResource ListBoxColorItem}" />
             </Border>
+            <Grid Grid.Row="2" Margin="0,10,0,0">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+                <Button x:Name="TopButton" Grid.Column="0" Grid.Row="0" Margin="2" ToolTip="Top">
+                    <materialDesign:PackIcon Kind="ArrowUpBold" />
+                </Button>
+                <Button x:Name="UpButton" Grid.Column="1" Grid.Row="0" Margin="2" ToolTip="Up">
+                    <materialDesign:PackIcon Kind="ArrowUp" />
+                </Button>
+                <Button x:Name="DownButton" Grid.Column="2" Grid.Row="0" Margin="2" ToolTip="Down">
+                    <materialDesign:PackIcon Kind="ArrowDown" />
+                </Button>
+                <Button x:Name="BottomButton" Grid.Column="3" Grid.Row="0" Margin="2" ToolTip="Bottom">
+                    <materialDesign:PackIcon Kind="ArrowDownBold" />
+                </Button>
+                <Button x:Name="DeleteButton" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="2" Content="Delete" />
+                <Button x:Name="DeleteAllButton" Grid.Column="2" Grid.Row="1" Grid.ColumnSpan="2" Margin="2" Content="Delete All" />
+            </Grid>
         </Grid>
     </Grid>
-</v:BuildTabBase>
\ No newline at end of file
+</v:BuildTabBase>
diff --git a/WPFUI/Views/Tabs/Villages/BuildTab.xaml.cs b/WPFUI/Views/Tabs/Villages/BuildTab.xaml.cs
index 8fc8b263..eb0949b3 100644
--- a/WPFUI/Views/Tabs/Villages/BuildTab.xaml.cs
+++ b/WPFUI/Views/Tabs/Villages/BuildTab.xaml.cs
@@ -27,8 +27,8 @@ namespace WPFUI.Views.Tabs.Villages
                 this.Bind(ViewModel, vm => vm.Jobs.SelectedIndex, v => v.JobsGrid.SelectedIndex).DisposeWith(d);
 
                 this.OneWayBind(ViewModel, vm => vm.Queue.Items, v => v.QueueGrid.ItemsSource).DisposeWith(d);
-                this.Bind(ViewModel, vm => vm.Jobs.SelectedItem, v => v.QueueGrid.SelectedItem).DisposeWith(d);
-                this.Bind(ViewModel, vm => vm.Jobs.SelectedIndex, v => v.QueueGrid.SelectedIndex).DisposeWith(d);
+                this.Bind(ViewModel, vm => vm.Queue.SelectedItem, v => v.QueueGrid.SelectedItem).DisposeWith(d);
+                this.Bind(ViewModel, vm => vm.Queue.SelectedIndex, v => v.QueueGrid.SelectedIndex).DisposeWith(d);
 
                 this.BindCommand(ViewModel, vm => vm.UpgradeOneLevel, v => v.UpgradeOneLevelButton).DisposeWith(d);
                 this.BindCommand(ViewModel, vm => vm.UpgradeMaxLevel, v => v.UpgradeMaxLevelButton).DisposeWith(d);
@@ -36,9 +36,9 @@ namespace WPFUI.Views.Tabs.Villages
                 this.BindCommand(ViewModel, vm => vm.Import, v => v.ImportButton).DisposeWith(d);
                 this.BindCommand(ViewModel, vm => vm.Export, v => v.ExportButton).DisposeWith(d);
 
+                this.BindCommand(ViewModel, vm => vm.Top, v => v.TopButton).DisposeWith(d);
                 this.BindCommand(ViewModel, vm => vm.Up, v => v.UpButton).DisposeWith(d);
                 this.BindCommand(ViewModel, vm => vm.Down, v => v.DownButton).DisposeWith(d);
-                this.BindCommand(ViewModel, vm => vm.Top, v => v.TopButton).DisposeWith(d);
                 this.BindCommand(ViewModel, vm => vm.Bottom, v => v.BottomButton).DisposeWith(d);
                 this.BindCommand(ViewModel, vm => vm.Delete, v => v.DeleteButton).DisposeWith(d);
                 this.BindCommand(ViewModel, vm => vm.DeleteAll, v => v.DeleteAllButton).DisposeWith(d);
@@ -55,4 +55,4 @@ namespace WPFUI.Views.Tabs.Villages
             });
         }
     }
-}
\ No newline at end of file
+}

```

![image](https://github.com/user-attachments/assets/b3041e85-2418-403f-bd2a-31f32a76f0b4)








Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refactor BuildTab UI and improve job management functionality #104

Issues

1. Job Reordering Inefficiency

2. Unintended Grid Selection Synchronization

Solutions

1. For Job Reordering

2. For Grid Selection Issue

Code Changes

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Uh oh!

Refactor BuildTab UI and improve job management functionality #104

Description

Issues

1. Job Reordering Inefficiency

2. Unintended Grid Selection Synchronization

Solutions

1. For Job Reordering

2. For Grid Selection Issue

Code Changes

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions