Orders - Part 2 - Code
POLine.cs
using System;
using System.ComponentModel.DataAnnotations;
// This is the model for one row in the database table.
namespace BlazorPurchaseOrders.Data
{
public class POLine
{
[Required]
public int POLineID { get; set; }
[Required]
public int POLineHeaderID { get; set; }
[Required]
public int POLineProductID { get; set; }
[Required]
[StringLength(50)]
public string POLineProductDescription { get; set; }
[Required]
public decimal POLineProductQuantity { get; set; }
[Required]
public decimal POLineProductUnitPrice { get; set; }
[Required]
public decimal POLineTaxRate { get; set; }
//The folowing are not saved to database - just for the DataGrid
public decimal? POLineNetPrice { get; set; }
public decimal POLineTaxAmount { get; set; }
public decimal POLineGrossPrice { get; set; }
public string POLineProductCode { get; set; }
//POLIneTaxID is not saved to the database, but is needed for the Tax Rate drop-down list
//It would be more usual to save the TaxID to POLine in the database, but because
//tax rate percentages might change in future for a particular 'rate' we don't want
//historic tax amounts to be recalculated if re-displayed in the future.
public int POLineTaxID { get; set; }
}
}
PurchaseOrderPage.razor
@page "/purchaseorder/{POHeaderID:int}"
@using BlazorPurchaseOrders.Data
@inject NavigationManager NavigationManager
@inject ISupplierService SupplierService
@inject IPOHeaderService POHeaderService
@inject IProductService ProductService
@inject ITaxService TaxService
@using Microsoft.AspNetCore.Components.Authorization
@inject AuthenticationStateProvider AuthenticationStateProvider
@using System
@using System.Collections.Generic
<h3>@pagetitle</h3>
<EditForm Model="@orderaddedit" OnValidSubmit="@OrderSave">
<div class="grid-container">
<div class="grid-child left-column">
<SfDropDownList DataSource="@supplier"
TItem="Supplier"
TValue="int"
Text="SupplierID"
@bind-Value="orderaddedit.POHeaderSupplierID"
FloatLabelType="@FloatLabelType.Auto"
Placeholder="Select a Supplier"
Enabled="true">
<DropDownListFieldSettings Text="SupplierName" Value="SupplierID"></DropDownListFieldSettings>
<DropDownListEvents TItem="Supplier" TValue="int" ValueChange="OnChangeSupplier"></DropDownListEvents>
</SfDropDownList>
<SfTextBox Enabled="true" Placeholder="Address"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="orderaddedit.POHeaderSupplierAddress1"></SfTextBox>
<SfTextBox Enabled="true" Placeholder=""
FloatLabelType="@FloatLabelType.Never"
@bind-Value="orderaddedit.POHeaderSupplierAddress2"></SfTextBox>
<SfTextBox Enabled="true" Placeholder=""
FloatLabelType="@FloatLabelType.Never"
@bind-Value="orderaddedit.POHeaderSupplierAddress3"></SfTextBox>
<SfTextBox Enabled="true" Placeholder="Post Code"
FloatLabelType="@FloatLabelType.Never"
@bind-Value="orderaddedit.POHeaderSupplierPostCode"></SfTextBox>
<SfTextBox Enabled="true" Placeholder="Email"
FloatLabelType="@FloatLabelType.Auto"
@bind-Value="orderaddedit.POHeaderSupplierEmail"></SfTextBox>
</div>
<div class="grid-child right-column">
<SfNumericTextBox Enabled="false" Placeholder="Order No"
FloatLabelType="@FloatLabelType.Always"
ShowSpinButton="false"
@bind-Value="orderaddedit.POHeaderOrderNumber"></SfNumericTextBox>
<SfDatePicker TValue="DateTime"
Placeholder='Order Date'
FloatLabelType="@FloatLabelType.Auto"
@bind-Value="orderaddedit.POHeaderOrderDate"></SfDatePicker>
<SfTextBox Enabled="false" Placeholder="Requested by"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="orderaddedit.POHeaderRequestedBy"></SfTextBox>
</div>
</div>
<br />
<SfGrid @ref="OrderLinesGrid"
DataSource="@orderLines"
Toolbar="@Toolbaritems"
AllowResizing="true">
<GridColumns>
<GridColumn Field="@nameof(POLine.POLineProductCode)"
HeaderText="Product"
TextAlign="@TextAlign.Left"
Width="20">
</GridColumn>
<GridColumn Field="@nameof(POLine.POLineProductDescription)"
HeaderText="Description"
TextAlign="@TextAlign.Left"
Width="30">
</GridColumn>
<GridColumn Field="@nameof(POLine.POLineProductQuantity)"
HeaderText="Quantity"
TextAlign="@TextAlign.Right"
Format="n0"
Width="10">
</GridColumn>
<GridColumn Field="@nameof(POLine.POLineProductUnitPrice)"
HeaderText="Unit Price"
TextAlign="@TextAlign.Right"
Format="C2"
Width="10">
</GridColumn>
<GridColumn Field="@nameof(POLine.POLineNetPrice)"
HeaderText="Net Price"
TextAlign="@TextAlign.Right"
Format="C2"
Width="10">
</GridColumn>
<GridColumn Field="@nameof(POLine.POLineTaxRate)"
HeaderText="Tax Rate"
TextAlign="@TextAlign.Right"
Format="p2"
Width="10">
</GridColumn>
<GridColumn Field="@nameof(POLine.POLineTaxAmount)"
HeaderText="Tax"
TextAlign="@TextAlign.Right"
Format="C2"
Width="10">
</GridColumn>
<GridColumn Field="@nameof(POLine.POLineGrossPrice)"
HeaderText="Total"
TextAlign="@TextAlign.Right"
Format="C2"
Width="10">
</GridColumn>
</GridColumns>
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="POLine"></GridEvents>
</SfGrid>
<br />
<div class="e-footer-content">
<div class="button-container">
<button type="submit" class="e-btn e-normal e-primary">Save</button>
<button type="button" class="e-btn e-normal" @onclick="@Cancel">Cancel</button>
</div>
</div>
</EditForm>
<SfDialog @ref="DialogAddEditOrderLine" IsModal="true" Width="600px" ShowCloseIcon="true" Visible="false">
<DialogTemplates>
<Header> Add Order Line </Header>
</DialogTemplates>
<EditForm Model="@addeditOrderLine" OnValidSubmit="@OrderLineSave">
<DataAnnotationsValidator />
<div class=flex-container>
<SfDropDownList DataSource="@product"
TItem="Product"
TValue="int"
Text="ProductID"
@bind-Value="addeditOrderLine.POLineProductID"
FloatLabelType="@FloatLabelType.Always"
Placeholder="Select a Product"
Enabled="true">
<DropDownListFieldSettings Text="ProductCode" Value="ProductID"></DropDownListFieldSettings>
<DropDownListEvents TItem="Product" TValue="int" OnValueSelect="OnChangeProduct"></DropDownListEvents>
</SfDropDownList>
</div>
<div class=flex-container>
<SfTextBox Enabled="true" Placeholder="Product Description"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="addeditOrderLine.POLineProductDescription"></SfTextBox>
</div>
<div class=flex-container>
<SfNumericTextBox Enabled="true" Placeholder="Quantity"
FloatLabelType="@FloatLabelType.Always"
ShowSpinButton="false"
Format="n0"
EnableRtl="true"
@bind-Value="addeditOrderLine.POLineProductQuantity"
@onfocusout='@POLineCalc'>
</SfNumericTextBox>
<SfNumericTextBox Enabled="true" Placeholder="Unit Price"
FloatLabelType="@FloatLabelType.Always"
ShowSpinButton="false"
Format="c2"
EnableRtl="true"
@bind-Value="addeditOrderLine.POLineProductUnitPrice"></SfNumericTextBox>
<SfNumericTextBox Enabled="false" Placeholder="Net Price"
FloatLabelType="@FloatLabelType.Always"
ShowSpinButton="false"
Format="c2"
EnableRtl="true"
@bind-Value="addeditOrderLine.POLineNetPrice">
</SfNumericTextBox>
</div>
<div class=flex-container>
<SfDropDownList DataSource="@tax"
TItem="Tax"
TValue="int"
Text="TaxID"
@bind-Value="addeditOrderLine.POLineTaxID"
FloatLabelType="@FloatLabelType.Always"
Placeholder="Tax Rate"
Enabled="true">
<DropDownListFieldSettings Text="TaxDescription" Value="TaxID"></DropDownListFieldSettings>
<DropDownListEvents TItem="Tax" TValue="int" OnValueSelect="OnChangeTax"></DropDownListEvents>
</SfDropDownList>
<SfNumericTextBox Enabled="false" Placeholder="Tax Rate %"
FloatLabelType="@FloatLabelType.Always"
ShowSpinButton="false"
Format="p2"
EnableRtl="true"
@bind-Value="addeditOrderLine.POLineTaxRate">
</SfNumericTextBox>
<SfNumericTextBox Enabled="false" Placeholder="Tax Amount"
FloatLabelType="@FloatLabelType.Always"
ShowSpinButton="false"
Format="c2"
EnableRtl="true"
@bind-Value="addeditOrderLine.POLineTaxAmount">
</SfNumericTextBox>
</div>
<div class=flex-container>
<SfNumericTextBox Enabled="false" Placeholder="Total Price"
FloatLabelType="@FloatLabelType.Always"
ShowSpinButton="false"
Format="c2"
EnableRtl="true"
@bind-Value="addeditOrderLine.POLineGrossPrice">
</SfNumericTextBox>
</div>
<br />
<div class="e-footer-content">
<div class="button-container">
<button type="button" class="e-btn e-normal" @onclick="@CloseDialog">Cancel</button>
<button type="submit" class="e-btn e-normal e-primary">Save</button>
</div>
</div>
</EditForm>
</SfDialog>
<style>
.grid-container {
display: grid;
max-width: 900px; /* Maximum width of the whole container - in this case both columns */
grid-template-columns: 1fr 1fr; /* Relative width of each column (1fr 1fr is equivalent to, say, 33fr 33fr */
grid-gap: 75px; /* size of the gap between columns */
}
.flex-container {
display: flex;
flex-direction: row; /* Causes tab to move along row and then onto following row */
justify-content: space-evenly; /* Equal space left and right margin and between elements */
margin: 10px; /* This appears to be vertical margin between rows */
column-gap: 10px; /* Tgap betwen columns */
}
</style>
@code {
POHeader orderaddedit = new POHeader();
IEnumerable<Supplier> supplier;
IEnumerable<Product> product;
IEnumerable<Tax> tax;
string pagetitle = "";
private string UserName;
SfGrid<POLine> OrderLinesGrid;
public List<POLine> orderLines = new List<POLine>();
private List<ItemModel> Toolbaritems = new List<ItemModel>();
SfDialog DialogAddEditOrderLine;
public POLine addeditOrderLine = new POLine();
[Parameter]
public int POHeaderID { get; set; }
//Executes on page open, sets headings and gets data in the case of edit
protected override async Task OnInitializedAsync()
{
supplier = await SupplierService.SupplierList();
orderaddedit.POHeaderOrderDate = DateTime.Now;
product = await ProductService.ProductList();
tax = await TaxService.TaxList();
if (POHeaderID == 0)
{
pagetitle = "Add an Order";
}
else
{
pagetitle = "Edit an Order";
}
//Get user if logged in and populate the 'Requested by' column
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
var user = authState.User;
if (user.Identity.IsAuthenticated)
{
UserName = user.Identity.Name;
}
else
{
UserName = "The user is NOT authenticated.";
}
orderaddedit.POHeaderRequestedBy = UserName;
Toolbaritems.Add(new ItemModel() { Text = "Add", TooltipText = "Add a new order line", PrefixIcon = "e-add" });
Toolbaritems.Add(new ItemModel() { Text = "Edit", TooltipText = "Edit selected order line", PrefixIcon = "e-edit" });
Toolbaritems.Add(new ItemModel() { Text = "Delete", TooltipText = "Delete selected order line", PrefixIcon = "e-delete" });
}
private void OnChangeSupplier(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, Supplier> args)
{
this.orderaddedit.POHeaderSupplierAddress1 = args.ItemData.SupplierAddress1;
this.orderaddedit.POHeaderSupplierAddress2 = args.ItemData.SupplierAddress2;
this.orderaddedit.POHeaderSupplierAddress3 = args.ItemData.SupplierAddress3;
this.orderaddedit.POHeaderSupplierPostCode = args.ItemData.SupplierPostCode;
this.orderaddedit.POHeaderSupplierEmail = args.ItemData.SupplierEmail;
}
// Executes OnValidSubmit of EditForm above
protected async Task OrderSave()
{
if (POHeaderID == 0)
{
//Save the record
bool Successs = await POHeaderService.POHeaderInsert(orderaddedit);
NavigationManager.NavigateTo("/");
}
else
{
NavigationManager.NavigateTo("/");
}
}
//Executes if user clicks the Cancel button.
void Cancel()
{
NavigationManager.NavigateTo("/");
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Text == "Add")
{
//Code for adding goes here
addeditOrderLine = new POLine(); // Ensures a blank form when adding
addeditOrderLine.POLineNetPrice = 0;
addeditOrderLine.POLineTaxID = 0;
addeditOrderLine.POLineProductID = 0;
await this.DialogAddEditOrderLine.Show();
}
if (args.Item.Text == "Edit")
{
//Code for adding goes here
}
if (args.Item.Text == "Delete")
{
//Code for adding goes here
}
}
private void OrderLineSave()
{
if (addeditOrderLine.POLineID == 0)
{
//Code to save order line goes here
orderLines.Add(new POLine
{
POLineHeaderID = 0,
POLineProductID = addeditOrderLine.POLineProductID,
POLineProductCode = addeditOrderLine.POLineProductCode,
POLineProductDescription = addeditOrderLine.POLineProductDescription,
POLineProductQuantity = addeditOrderLine.POLineProductQuantity,
POLineProductUnitPrice = addeditOrderLine.POLineProductUnitPrice,
POLineNetPrice = addeditOrderLine.POLineNetPrice,
POLineTaxRate = addeditOrderLine.POLineTaxRate,
POLineTaxAmount = addeditOrderLine.POLineTaxAmount,
POLineGrossPrice = addeditOrderLine.POLineGrossPrice
});
OrderLinesGrid.Refresh();
StateHasChanged(); //<----- THIS IS ABSOLUTELY ESSENTIAL
//addeditOrderLine = new POLine(); //<----- THIS gives errors (nulls)
addeditOrderLine.POLineProductID = 0;
addeditOrderLine.POLineProductCode = "";
addeditOrderLine.POLineProductDescription = "";
addeditOrderLine.POLineProductQuantity = 0;
addeditOrderLine.POLineProductUnitPrice = 0;
addeditOrderLine.POLineNetPrice = 0;
addeditOrderLine.POLineTaxID = 0;
addeditOrderLine.POLineTaxRate = 0;
addeditOrderLine.POLineTaxAmount = 0;
addeditOrderLine.POLineGrossPrice = 0;
}
}
private async Task CloseDialog()
{
await this.DialogAddEditOrderLine.Hide();
}
private void OnChangeProduct(Syncfusion.Blazor.DropDowns.SelectEventArgs<Product> args)
{
this.addeditOrderLine.POLineProductCode = args.ItemData.ProductCode;
this.addeditOrderLine.POLineProductDescription = args.ItemData.ProductDescription;
this.addeditOrderLine.POLineProductUnitPrice = args.ItemData.ProductUnitPrice;
POLineCalc();
}
private void OnChangeTax(Syncfusion.Blazor.DropDowns.SelectEventArgs<Tax> args)
{
// int testTaxId = args.ItemData.TaxID;
this.addeditOrderLine.POLineTaxRate = args.ItemData.TaxRate;
POLineCalc();
}
private void POLineCalc()
{
addeditOrderLine.POLineNetPrice = addeditOrderLine.POLineProductUnitPrice * addeditOrderLine.POLineProductQuantity;
addeditOrderLine.POLineTaxAmount = addeditOrderLine.POLineNetPrice.Value * addeditOrderLine.POLineTaxRate;
addeditOrderLine.POLineGrossPrice = addeditOrderLine.POLineNetPrice.Value * (1 + addeditOrderLine.POLineTaxRate);
}
}