Building OpenPOS: Part 5 – SalesModule (Part 2)

So, what’s next?

In part 1, we looked at the bottom half of the screen where we can find and filter products! But what happens if I actually want to buy a product?

Let's start by defining a transaction:

public class Transaction : INotifyPropertyChanged
{
    public Product Product { get; set; }
    public int Units { get; set; }

    public double Value
    {
        get
        {
            return Product.SellPrice * Units;
        }
    }
}

This basically wraps a Product. Now we need to “enhance” our SalesViewModel!

public class SalesViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Transaction> Transactions { get; set; }
    public Transaction SelectedTransaction { get; set; }

    public double TransactionSubtotal
    {
        get
        {
            double total = 0;
            foreach (var t in transactions)
                total += t.Value;
            return total;
        }
    }

    public double TransactionTotal
    {
        get
        {
            double total = 0;
            foreach (var t in transactions)
                total += t.Value;
            return total;
        }
    }
}

In the ViewModel, we now have a collection of transactions. We also need to track the currently selected transaction. Finally, I also have 2 helper properties to calculate the sub-total and total. Our “basket” showing all the items we are buying is just a ListView bound to the collection of transactions

<ListView ItemsSource="{Binding Transactions}" 
 SelectedValue="{Binding SelectedTransaction, Mode=TwoWay}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Item" 
            Width="250" DisplayMemberBinding="{Binding Product.Name}" />
            <GridViewColumn Header="Price" Width="75" 
             DisplayMemberBinding="{Binding Product.SellPrice}" />
            <GridViewColumn Header="Units" 
            Width="50" DisplayMemberBinding="{Binding Units}"/>
            <GridViewColumn Header="Value" 
            Width="75" DisplayMemberBinding="{Binding Value}"/>
        </GridView>
    </ListView.View>
</ListView>

Now we have the basic infrastructure to support adding items to a list of transactions! The only missing piece? How do we add the product to our transactions?

Here is our DelegateCommand<> to add products:

private DelegateCommand<object> addTransactionCommand;
public DelegateCommand<object> AddTransactionCommand
{
    get
    {
        if (addTransactionCommand == null)
        {
            addTransactionCommand = new DelegateCommand<object>((p) => 
                {
                    Transactions.Add(new Transaction() { Product = (Product)p, Units = 1 });

                    NotifyPropertyChanged("TransactionTotal");
                    NotifyPropertyChanged("TransactionSubtotal");
                });
        }
        return addTransactionCommand;
    }
}

And that’s it!

1. Building OpenPOS- Part 1 - Introduction
2. Building OpenPOS- Part 2 - Rapid prototype using SketchFlow
3. Building OpenPOS- Part 3 – Scaffolding and Navigation
4. Building OpenPOS- Part 4 – SalesModule (Part 1)

CodeProject