Task 3: add NewListingView with drop zone, thumbnail strip, and AI analyse flow
This commit is contained in:
115
EbayListingTool/Views/NewListingView.xaml
Normal file
115
EbayListingTool/Views/NewListingView.xaml
Normal file
@@ -0,0 +1,115 @@
|
||||
<UserControl x:Class="EbayListingTool.Views.NewListingView"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
|
||||
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
|
||||
Loaded="UserControl_Loaded">
|
||||
|
||||
<!-- Root grid hosts all three states; Visibility toggled in code-behind -->
|
||||
<Grid>
|
||||
<!-- ══════════════════════════════════════ STATE A: Drop Zone -->
|
||||
<Grid x:Name="StateA" Visibility="Visible">
|
||||
<DockPanel LastChildFill="True">
|
||||
|
||||
<!-- Loading panel — shown while AI runs -->
|
||||
<Border x:Name="LoadingPanel" DockPanel.Dock="Top"
|
||||
Visibility="Collapsed"
|
||||
Margin="60,30,60,0" Padding="30,40"
|
||||
Background="{DynamicResource MahApps.Brushes.Gray9}"
|
||||
CornerRadius="10">
|
||||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
|
||||
<mah:ProgressRing Width="36" Height="36"
|
||||
HorizontalAlignment="Center" Margin="0,0,0,16"/>
|
||||
<TextBlock x:Name="LoadingStepText"
|
||||
Text="Examining the photo…"
|
||||
FontSize="14" FontWeight="SemiBold"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="{DynamicResource MahApps.Brushes.Gray1}"/>
|
||||
<TextBlock Text="This usually takes 10–20 seconds"
|
||||
FontSize="11" HorizontalAlignment="Center"
|
||||
Foreground="{DynamicResource MahApps.Brushes.Gray5}"
|
||||
Margin="0,6,0,0"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- Drop zone -->
|
||||
<Border x:Name="DropZoneBorder" DockPanel.Dock="Top"
|
||||
Margin="60,30,60,0"
|
||||
AllowDrop="True"
|
||||
MouseLeftButtonUp="DropZone_Click"
|
||||
DragOver="DropZone_DragOver"
|
||||
DragEnter="DropZone_DragEnter"
|
||||
DragLeave="DropZone_DragLeave"
|
||||
Drop="DropZone_Drop"
|
||||
Cursor="Hand"
|
||||
MinHeight="180">
|
||||
<Grid>
|
||||
<!-- Dashed border via Rectangle -->
|
||||
<Rectangle x:Name="DropBorderRect"
|
||||
StrokeThickness="2"
|
||||
StrokeDashArray="6,4"
|
||||
RadiusX="10" RadiusY="10"
|
||||
Stroke="{DynamicResource MahApps.Brushes.Gray6}"/>
|
||||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
|
||||
Margin="0,40">
|
||||
<iconPacks:PackIconMaterial Kind="CameraOutline"
|
||||
Width="52" Height="52"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="{DynamicResource MahApps.Brushes.Gray5}"
|
||||
Margin="0,0,0,16"/>
|
||||
<TextBlock Text="Drop photos here"
|
||||
FontSize="18" FontWeight="SemiBold"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="{DynamicResource MahApps.Brushes.Gray2}"/>
|
||||
<TextBlock Text="or click to browse — up to 12 photos"
|
||||
FontSize="12" HorizontalAlignment="Center"
|
||||
Foreground="{DynamicResource MahApps.Brushes.Gray5}"
|
||||
Margin="0,6,0,0"/>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Thumbnail strip -->
|
||||
<ScrollViewer x:Name="ThumbScroller" DockPanel.Dock="Top"
|
||||
HorizontalScrollBarVisibility="Auto"
|
||||
VerticalScrollBarVisibility="Disabled"
|
||||
Margin="60,12,60,0" Visibility="Collapsed">
|
||||
<StackPanel x:Name="ThumbStrip" Orientation="Horizontal"/>
|
||||
</ScrollViewer>
|
||||
|
||||
<!-- Analyse button -->
|
||||
<StackPanel DockPanel.Dock="Top" HorizontalAlignment="Center" Margin="0,20,0,0">
|
||||
<Button x:Name="AnalyseBtn"
|
||||
Click="Analyse_Click"
|
||||
IsEnabled="False"
|
||||
Style="{StaticResource MahApps.Styles.Button.Square.Accent}"
|
||||
Padding="28,12" FontSize="14" FontWeight="SemiBold">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<iconPacks:PackIconMaterial x:Name="AnalyseIcon"
|
||||
Kind="MagnifyScan" Width="18" Height="18"
|
||||
Margin="0,0,8,0" VerticalAlignment="Center"/>
|
||||
<mah:ProgressRing x:Name="AnalyseSpinner"
|
||||
Width="18" Height="18" Margin="0,0,8,0"
|
||||
Visibility="Collapsed"/>
|
||||
<TextBlock x:Name="AnalyseBtnText"
|
||||
Text="Identify & Price with AI"
|
||||
VerticalAlignment="Center"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<TextBlock x:Name="PhotoCountLabel"
|
||||
HorizontalAlignment="Center" Margin="0,8,0,0"
|
||||
FontSize="11" Visibility="Collapsed"
|
||||
Foreground="{DynamicResource MahApps.Brushes.Gray5}"/>
|
||||
</StackPanel>
|
||||
|
||||
<Grid/> <!-- fill remaining space -->
|
||||
</DockPanel>
|
||||
</Grid>
|
||||
|
||||
<!-- ══════════════════════════════════════ STATE B: Review & Edit (stub for now) -->
|
||||
<Grid x:Name="StateB" Visibility="Collapsed"/>
|
||||
|
||||
<!-- ══════════════════════════════════════ STATE C: Success (stub for now) -->
|
||||
<Grid x:Name="StateC" Visibility="Collapsed"/>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
235
EbayListingTool/Views/NewListingView.xaml.cs
Normal file
235
EbayListingTool/Views/NewListingView.xaml.cs
Normal file
@@ -0,0 +1,235 @@
|
||||
using System.Windows;
|
||||
using System.Windows.Controls;
|
||||
using System.Windows.Input;
|
||||
using System.Windows.Media.Imaging;
|
||||
using System.Windows.Threading;
|
||||
using EbayListingTool.Models;
|
||||
using EbayListingTool.Services;
|
||||
using Microsoft.Win32;
|
||||
|
||||
namespace EbayListingTool.Views;
|
||||
|
||||
public partial class NewListingView : UserControl
|
||||
{
|
||||
// Services (injected via Initialise)
|
||||
private EbayListingService? _listingService;
|
||||
private EbayCategoryService? _categoryService;
|
||||
private AiAssistantService? _aiService;
|
||||
private EbayAuthService? _auth;
|
||||
private SavedListingsService? _savedService;
|
||||
private string _defaultPostcode = "";
|
||||
|
||||
// State A — photos
|
||||
private readonly List<string> _photoPaths = new();
|
||||
private const int MaxPhotos = 12;
|
||||
|
||||
// State B — draft being edited (stub, populated in Task 4)
|
||||
private ListingDraft _draft = new();
|
||||
private PhotoAnalysisResult? _lastAnalysis;
|
||||
private bool _suppressCategoryLookup;
|
||||
private System.Threading.CancellationTokenSource? _categoryCts;
|
||||
private string _suggestedPriceValue = "";
|
||||
|
||||
// Loading step cycling
|
||||
private readonly DispatcherTimer _loadingTimer;
|
||||
private int _loadingStep;
|
||||
private static readonly string[] LoadingSteps =
|
||||
[
|
||||
"Examining the photo\u2026",
|
||||
"Identifying the item\u2026",
|
||||
"Researching eBay prices\u2026",
|
||||
"Writing description\u2026"
|
||||
];
|
||||
|
||||
public NewListingView()
|
||||
{
|
||||
InitializeComponent();
|
||||
_loadingTimer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(2.5) };
|
||||
_loadingTimer.Tick += (_, _) =>
|
||||
{
|
||||
_loadingStep = (_loadingStep + 1) % LoadingSteps.Length;
|
||||
LoadingStepText.Text = LoadingSteps[_loadingStep];
|
||||
};
|
||||
}
|
||||
|
||||
private void UserControl_Loaded(object sender, RoutedEventArgs e) { }
|
||||
|
||||
public void Initialise(EbayListingService listingService, EbayCategoryService categoryService,
|
||||
AiAssistantService aiService, EbayAuthService auth,
|
||||
SavedListingsService savedService, string defaultPostcode)
|
||||
{
|
||||
_listingService = listingService;
|
||||
_categoryService = categoryService;
|
||||
_aiService = aiService;
|
||||
_auth = auth;
|
||||
_savedService = savedService;
|
||||
_defaultPostcode = defaultPostcode;
|
||||
}
|
||||
|
||||
// ---- State machine ----
|
||||
|
||||
private enum ListingState { DropZone, ReviewEdit, Success }
|
||||
|
||||
private void SetState(ListingState state)
|
||||
{
|
||||
StateA.Visibility = state == ListingState.DropZone ? Visibility.Visible : Visibility.Collapsed;
|
||||
StateB.Visibility = state == ListingState.ReviewEdit ? Visibility.Visible : Visibility.Collapsed;
|
||||
StateC.Visibility = state == ListingState.Success ? Visibility.Visible : Visibility.Collapsed;
|
||||
}
|
||||
|
||||
// ---- State A: Drop zone ----
|
||||
|
||||
private void DropZone_DragOver(object sender, DragEventArgs e)
|
||||
{
|
||||
e.Effects = e.Data.GetDataPresent(DataFormats.FileDrop)
|
||||
? DragDropEffects.Copy : DragDropEffects.None;
|
||||
e.Handled = true;
|
||||
}
|
||||
|
||||
private void DropZone_DragEnter(object sender, DragEventArgs e)
|
||||
{
|
||||
DropBorderRect.Stroke = (System.Windows.Media.Brush)FindResource("MahApps.Brushes.Accent");
|
||||
e.Handled = true;
|
||||
}
|
||||
|
||||
private void DropZone_DragLeave(object sender, DragEventArgs e)
|
||||
{
|
||||
DropBorderRect.Stroke = (System.Windows.Media.Brush)FindResource("MahApps.Brushes.Gray6");
|
||||
}
|
||||
|
||||
private void DropZone_Drop(object sender, DragEventArgs e)
|
||||
{
|
||||
DropZone_DragLeave(sender, e);
|
||||
if (!e.Data.GetDataPresent(DataFormats.FileDrop)) return;
|
||||
var files = (string[])e.Data.GetData(DataFormats.FileDrop);
|
||||
AddPhotos(files.Where(IsImageFile).ToArray());
|
||||
}
|
||||
|
||||
private void DropZone_Click(object sender, MouseButtonEventArgs e)
|
||||
{
|
||||
var dlg = new OpenFileDialog
|
||||
{
|
||||
Title = "Select photos of the item",
|
||||
Filter = "Images|*.jpg;*.jpeg;*.png;*.gif;*.webp;*.bmp|All files|*.*",
|
||||
Multiselect = true
|
||||
};
|
||||
if (dlg.ShowDialog() == true)
|
||||
AddPhotos(dlg.FileNames);
|
||||
}
|
||||
|
||||
private void AddPhotos(string[] paths)
|
||||
{
|
||||
foreach (var path in paths)
|
||||
{
|
||||
if (_photoPaths.Count >= MaxPhotos) break;
|
||||
if (_photoPaths.Contains(path)) continue;
|
||||
if (!IsImageFile(path)) continue;
|
||||
_photoPaths.Add(path);
|
||||
}
|
||||
UpdateThumbStrip();
|
||||
UpdateAnalyseButton();
|
||||
}
|
||||
|
||||
private void UpdateThumbStrip()
|
||||
{
|
||||
ThumbStrip.Children.Clear();
|
||||
ThumbScroller.Visibility = _photoPaths.Count > 0 ? Visibility.Visible : Visibility.Collapsed;
|
||||
|
||||
foreach (var path in _photoPaths)
|
||||
{
|
||||
try
|
||||
{
|
||||
var bmp = new BitmapImage();
|
||||
bmp.BeginInit();
|
||||
bmp.UriSource = new Uri(path, UriKind.Absolute);
|
||||
bmp.DecodePixelWidth = 80;
|
||||
bmp.CacheOption = BitmapCacheOption.OnLoad;
|
||||
bmp.EndInit();
|
||||
bmp.Freeze();
|
||||
|
||||
var img = new Image
|
||||
{
|
||||
Source = bmp, Width = 60, Height = 60,
|
||||
Stretch = System.Windows.Media.Stretch.UniformToFill,
|
||||
Margin = new Thickness(3)
|
||||
};
|
||||
img.Clip = new System.Windows.Media.RectangleGeometry(
|
||||
new Rect(0, 0, 60, 60), 4, 4);
|
||||
ThumbStrip.Children.Add(img);
|
||||
}
|
||||
catch { /* skip bad files */ }
|
||||
}
|
||||
|
||||
PhotoCountLabel.Text = $"{_photoPaths.Count} / {MaxPhotos} photos";
|
||||
PhotoCountLabel.Visibility = _photoPaths.Count > 0 ? Visibility.Visible : Visibility.Collapsed;
|
||||
}
|
||||
|
||||
private void UpdateAnalyseButton()
|
||||
{
|
||||
AnalyseBtn.IsEnabled = _photoPaths.Count > 0;
|
||||
}
|
||||
|
||||
private async void Analyse_Click(object sender, RoutedEventArgs e)
|
||||
{
|
||||
if (_aiService == null || _photoPaths.Count == 0) return;
|
||||
SetAnalysing(true);
|
||||
try
|
||||
{
|
||||
var result = await _aiService.AnalyseItemFromPhotosAsync(_photoPaths);
|
||||
_lastAnalysis = result;
|
||||
await PopulateStateBAsync(result);
|
||||
SetState(ListingState.ReviewEdit);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
MessageBox.Show($"Analysis failed:\n\n{ex.Message}", "AI Error",
|
||||
MessageBoxButton.OK, MessageBoxImage.Warning);
|
||||
}
|
||||
finally
|
||||
{
|
||||
SetAnalysing(false);
|
||||
}
|
||||
}
|
||||
|
||||
private void SetAnalysing(bool busy)
|
||||
{
|
||||
AnalyseBtn.IsEnabled = !busy;
|
||||
AnalyseSpinner.Visibility = busy ? Visibility.Visible : Visibility.Collapsed;
|
||||
AnalyseIcon.Visibility = busy ? Visibility.Collapsed : Visibility.Visible;
|
||||
AnalyseBtnText.Text = busy ? "Analysing\u2026" : "Identify & Price with AI";
|
||||
LoadingPanel.Visibility = busy ? Visibility.Visible : Visibility.Collapsed;
|
||||
DropZoneBorder.Visibility = busy ? Visibility.Collapsed : Visibility.Visible;
|
||||
if (busy)
|
||||
{
|
||||
_loadingStep = 0;
|
||||
LoadingStepText.Text = LoadingSteps[0];
|
||||
_loadingTimer.Start();
|
||||
}
|
||||
else
|
||||
{
|
||||
_loadingTimer.Stop();
|
||||
}
|
||||
}
|
||||
|
||||
// Stub for State B — implemented in Task 4
|
||||
private Task PopulateStateBAsync(PhotoAnalysisResult result) => Task.CompletedTask;
|
||||
|
||||
// Stub for ResetToStateA — implemented in Task 4
|
||||
public void ResetToStateA()
|
||||
{
|
||||
_photoPaths.Clear();
|
||||
_draft = new ListingDraft { Postcode = _defaultPostcode };
|
||||
_lastAnalysis = null;
|
||||
UpdateThumbStrip();
|
||||
UpdateAnalyseButton();
|
||||
SetState(ListingState.DropZone);
|
||||
}
|
||||
|
||||
private static bool IsImageFile(string path)
|
||||
{
|
||||
var ext = System.IO.Path.GetExtension(path).ToLowerInvariant();
|
||||
return ext is ".jpg" or ".jpeg" or ".png" or ".gif" or ".webp" or ".bmp";
|
||||
}
|
||||
|
||||
private MainWindow? GetWindow() => Window.GetWindow(this) as MainWindow;
|
||||
}
|
||||
Reference in New Issue
Block a user