Index Page - Dynamic Dialog - Code
Index.razor
@page "/"
@using BlazorWallAreaCalculator.Data
@inject IProjectService ProjectService
@inject IRoomService RoomService
@inject IWallService WallService
@inject SfDialogService DialogService
<PageTitle>Wall Area Calculator</PageTitle>
<div class="control_wrapper">
<SfDropDownList TItem="Project"
TValue="string"
DataSource="@projects"
Placeholder="Select a Project"
PopupHeight="200px"
PopupWidth="250px">
<DropDownListFieldSettings Text="ProjectName" Value="ProjectID"></DropDownListFieldSettings>
<DropDownListEvents TItem="Project" TValue="string" ValueChange="@OnChangeProject"></DropDownListEvents>
</SfDropDownList>
</div>
<hr />
<h6><b>Rooms</b></h6>
<SfGrid @ref="RoomGrid"
DataSource="@rooms"
AllowSorting="true"
AllowResizing="true"
Height="70"
Toolbar="@RoomToolbaritems">
<GridColumns>
<GridColumn Field="@nameof(Room.RoomName)"
HeaderText="Room Name"
TextAlign="@TextAlign.Left"
Width="50">
</GridColumn>
</GridColumns>
<GridEvents OnToolbarClick="RoomToolbarClickHandler" TValue="Room" RowSelected="RoomRowSelectHandler"></GridEvents>
</SfGrid>
<hr />
<h6><b>Walls</b></h6>
<SfGrid @ref="WallGrid"
DataSource="@walls"
AllowSorting="true"
AllowResizing="true"
Height="70"
Toolbar="@WallToolbaritems">
<GridColumns>
<GridColumn Field="@nameof(Wall.WallName)"
HeaderText="Wall Name"
TextAlign="@TextAlign.Left"
Width="50">
</GridColumn>
<GridColumn Field="@nameof(Wall.WallSqM)"
HeaderText="Area"
Format="n3"
TextAlign="@TextAlign.Right"
Width="50">
</GridColumn>
</GridColumns>
<GridAggregates>
<GridAggregate>
<GridAggregateColumns>
<GridAggregateColumn Field=@nameof(Wall.WallSqM) Type="AggregateType.Sum" Format="n3">
<FooterTemplate>
@{
var aggregate = (context as AggregateTemplateContext);
<div>
<p>Total Net Area (SqM): @aggregate.Sum</p>
</div>
}
</FooterTemplate>
</GridAggregateColumn>
</GridAggregateColumns>
</GridAggregate>
</GridAggregates>
<GridEvents OnToolbarClick="WallToolbarClickHandler" TValue="Wall" RowSelected="WallRowSelectHandler"></GridEvents>
</SfGrid>
<hr />
<SfDialog @ref="DialogRoom" IsModal="true" Width="420px" ShowCloseIcon="false" Visible="false" AllowDragging="true">
<DialogTemplates>
<Header> @dialogTitle</Header>
<Content>
<EditForm Model="@roomAddEdit" OnValidSubmit="@RoomSave">
<div>
<SfTextBox Enabled="true" Placeholder="Room Name"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="roomAddEdit.RoomName">
</SfTextBox>
</div>
<br /><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="@CancelRoom">Cancel</button>
</div>
</div>
</EditForm>
</Content>
</DialogTemplates>
</SfDialog>
<SfDialog @ref="DialogWall" IsModal="true" Width="420px" ShowCloseIcon="false" Visible="false" AllowDragging="true">
<DialogTemplates>
<Header> @dialogTitle</Header>
<Content>
<EditForm Model="@wallAddEdit" OnValidSubmit="@WallSave">
<div>
<SfTextBox Enabled="true" Placeholder="Wall Name"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="wallAddEdit.WallName">
</SfTextBox>
<div>
<br />
</div>
<hr />
@if (IsAdd)
{
<SfDropDownList TItem="WallType"
TValue="string"
FloatLabelType="@FloatLabelType.Always"
DataSource="@LocalData"
Placeholder="Select a Wall Type"
PopupHeight="200px"
PopupWidth="250px">
<DropDownListFieldSettings Text="WallTypeName" Value="WallTypeID"></DropDownListFieldSettings>
<DropDownListEvents TItem="WallType" TValue="string" ValueChange="@OnChangeWallType"></DropDownListEvents>
</SfDropDownList>
}
else
{
<SfTextBox Enabled="false" Placeholder="Wall Type"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="wallAddEdit.WallTypeName">
</SfTextBox>
}
@switch (wallAddEdit.WallTypeName)
{
case "Simple":
<div>
<br />
<img src=".\\media\\simple.jpg" />
<br />
</div>
<div class="grid-container">
<div class="grid-child left-column">
<SfNumericTextBox Enabled="true"
Placeholder="Wall Length (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="wallAddEdit.WallLengthMax"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
</div>
<div class="grid-child right-column">
<SfNumericTextBox Enabled="true"
Placeholder="Wall Height (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
@bind-Value="wallAddEdit.WallHeightMax"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
</div>
</div>
break;
case "Complex - Left":
<div>
<br />
<img src=".\\media\\complex-left.jpg" />
<br />
</div>
<div class="grid-container">
<div class="grid-child left-column">
<SfNumericTextBox Enabled="true"
Placeholder="Max Wall Length (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallLengthMax"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
<SfNumericTextBox Enabled="true"
Placeholder="Min Wall Length (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallLengthMin"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
</div>
<div class="grid-child right-column">
<SfNumericTextBox Enabled="true"
Placeholder="Max Wall Height (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallHeightMax"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
<SfNumericTextBox Enabled="true"
Placeholder="Min Wall Height (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallHeightMin"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
</div>
</div>
break;
case "Complex - Right":
<div>
<br />
<img src=".\\media\\complex-right.jpg" />
<br />
</div>
<div class="grid-container">
<div class="grid-child left-column">
<SfNumericTextBox Enabled="true"
Placeholder="Max Wall Length (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallLengthMax"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
<SfNumericTextBox Enabled="true"
Placeholder="Min Wall Length (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallLengthMin"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
</div>
<div class="grid-child right-column">
<SfNumericTextBox Enabled="true"
Placeholder="Max Wall Height (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallHeightMax"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
<SfNumericTextBox Enabled="true"
Placeholder="Min Wall Height (mm)"
Format="n0"
FloatLabelType="@FloatLabelType.Always"
Width="50"
@bind-Value="wallAddEdit.WallHeightMin"
ShowSpinButton=false
CssClass="e-style">
</SfNumericTextBox>
</div>
</div>
break;
}
</div>
<br /><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="@CancelWall">Cancel</button>
</div>
</div>
</EditForm>
</Content>
</DialogTemplates>
</SfDialog>
<style>
.control_wrapper {
width: 250px;
}
.e-numeric.e-style .e-control.e-numerictextbox {
text-align: right;
padding: 0px 5px 0px 0px;
}
.grid-container {
display: grid;
max-width: 400px; /* 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: 100px; /* size of the gap between columns */
}
</style>
@code{
public IEnumerable<Project>? projects;
public IEnumerable<Room>? rooms;
public IEnumerable<Wall>? walls;
[Parameter]
public int SelectedProjectID { get; set; } = 0;
public int SelectedRoomID { get; set; } = 0;
public int SelectedWallID { get; set; } = 0;
public string SelectedWallName { get; set; } = string.Empty;
public decimal SelectedWallSqM { get; set; } = decimal.Zero;
SfGrid<Room>? RoomGrid;
SfGrid<Wall>? WallGrid;
SfDialog? DialogRoom;
Room roomAddEdit = new Room();
SfDialog? DialogWall;
Wall wallAddEdit = new Wall();
public string SelectedWallTypeName { get; set; } = string.Empty;
public bool IsAdd { get; set; }
public string dialogTitle = "";
public string SelectedRoomName { get; set; } = string.Empty;
private List<ItemModel> RoomToolbaritems = new List<ItemModel>();
private List<ItemModel> WallToolbaritems = new List<ItemModel>();
public int SelectedWallLengthMax { get; set; } = 0;
public int SelectedWallLengthMin { get; set; } = 0;
public int SelectedWallHeightMax { get; set; } = 0;
public int SelectedWallHeightMin { get; set; } = 0;
public decimal decWallSqM = decimal.Zero;
public decimal decWallLengthMax = decimal.Zero;
public decimal decWallLengthMin = decimal.Zero;
public decimal decWallHeightMax = decimal.Zero;
public decimal decWallHeightMin = decimal.Zero;
protected override async Task OnInitializedAsync()
{
//Populate the list of projects objects from the Project table.
projects = await ProjectService.ProjectReadAll();
RoomToolbaritems.Add(new ItemModel() { Text = "Add", TooltipText = "Add a new room", PrefixIcon = "e-add" });
RoomToolbaritems.Add(new ItemModel() { Text = "Edit", TooltipText = "Edit selected room", PrefixIcon = "e-edit" });
RoomToolbaritems.Add(new ItemModel() { Text = "Delete", TooltipText = "Delete selected room", PrefixIcon = "e-delete" });
WallToolbaritems.Add(new ItemModel() { Text = "Add", TooltipText = "Add a new wall", PrefixIcon = "e-add" });
WallToolbaritems.Add(new ItemModel() { Text = "Edit", TooltipText = "Edit selected wall", PrefixIcon = "e-edit" });
WallToolbaritems.Add(new ItemModel() { Text = "Delete", TooltipText = "Delete selected wall", PrefixIcon = "e-delete" });
}
public class WallType
{
public int WallTypeID { get; set; } = 0;
public string WallTypeName { get; set; } = string.Empty;
}
List<WallType> LocalData = new List<WallType>
{
new WallType() {WallTypeID =1, WallTypeName= "Simple" },
new WallType() {WallTypeID =2, WallTypeName= "Complex - Left" },
new WallType() {WallTypeID =3, WallTypeName= "Complex - Right" },
};
public async Task RoomToolbarClickHandler(ClickEventArgs args)
{
if (args.Item.Text == "Add")
{
//Code for adding goes here
//Check that a Project has been selected:
if(SelectedProjectID == 0)
{
await DialogService.AlertAsync("Please select a project.", "No Project Selected");
return;
}
dialogTitle = "Add a Room";
roomAddEdit = new();
await DialogRoom.ShowAsync(false);
}
if (args.Item.Text == "Edit")
{
//Code for editing
dialogTitle = "Edit a Room";
//Check that a Room has been selected
if (SelectedRoomID == 0)
{
await DialogService.AlertAsync("Please select a room.", "No Room Selected");
return;
}
else
{
//populate roomAddEdit (temporary data set used for the editing process)
roomAddEdit = new();
roomAddEdit.RoomID = SelectedRoomID;
roomAddEdit.RoomName = SelectedRoomName;
await DialogRoom.ShowAsync(false);
}
}
if (args.Item.Text == "Delete")
{
//Code for deleting
if (SelectedRoomID == 0)
{
await DialogService.AlertAsync("Please select a room.", "No Room Selected");
return;
}
else
{
bool isConfirm = await DialogService.ConfirmAsync(
"Are you sure you want to delete " + SelectedRoomName + "?",
"Delete " + SelectedRoomName);
if (isConfirm == true)
{
await RoomService.RoomDelete(SelectedRoomID);
//Refresh datagrid
rooms = await RoomService.RoomsReadByProject(SelectedProjectID);
walls = Enumerable.Empty<Wall>();
SelectedRoomID = 0;
StateHasChanged();
SelectedRoomID = 0;
}
}
}
}
public async Task RoomRowSelectHandler(RowSelectEventArgs<Room> args)
{
//{args.Data} returns the current selected records.
SelectedRoomID = args.Data.RoomID;
SelectedRoomName = args.Data.RoomName;
walls = await WallService.WallsReadByRoom(SelectedRoomID);
}
public async Task OnChangeProject(ChangeEventArgs<string, Project> args)
{
SelectedProjectID = args.ItemData.ProjectID;
rooms = await RoomService.RoomsReadByProject(SelectedProjectID);
SelectedRoomID = 0;
walls = Enumerable.Empty<Wall>();
}
protected async Task RoomSave()
{
if (roomAddEdit.RoomID == 0)
{
// Insert if RoomID is zero.
//Check for duplicates
int duplicates = await RoomService.CountRoomsByNameAndProject(roomAddEdit.RoomName, SelectedProjectID);
if (duplicates == 0)
{
roomAddEdit.ProjectID = SelectedProjectID;
try
{
await RoomService.RoomCreate(roomAddEdit);
//Refresh datagrid
rooms = await RoomService.RoomsReadByProject(SelectedProjectID);
walls = Enumerable.Empty<Wall>();
SelectedRoomID = 0;
StateHasChanged();
await DialogRoom.HideAsync();
}
catch
{
// Display warning message
await DialogService.AlertAsync("An unexpected error has occured.", "Unknown Error");
return;
}
}
else
{
//Room already exists - warn the user
await DialogService.AlertAsync("This Room already exists; it cannot be added again.", "Warning!");
return;
}
}
else
{
// Record is being edited
// Check for duplicates
int duplicates = await RoomService.CountRoomsByNameAndProjectAndId(roomAddEdit.RoomName, roomAddEdit.RoomID, SelectedProjectID);
if (duplicates == 0)
{
try
{
await RoomService.RoomUpdate(roomAddEdit);
//Refresh datagrid
rooms = await RoomService.RoomsReadByProject(SelectedProjectID);
StateHasChanged();
await DialogRoom.HideAsync();
}
catch
{
// Display warning message
await DialogService.AlertAsync("An unexpected error has occured.", "Unknown Error");
return;
}
}
else
{
//Project already exists - warn the user
await DialogService.AlertAsync("This room already exists", "Room already Exists");
return;
}
}
}
void CancelRoom()
{
DialogRoom.HideAsync();
}
#region Walls
public void OnChangeWallType(ChangeEventArgs<string, WallType> args)
{
wallAddEdit.WallTypeID = args.ItemData.WallTypeID;
wallAddEdit.WallTypeName = args.ItemData.WallTypeName;
}
public async Task WallToolbarClickHandler(ClickEventArgs args)
{
//Check that a room has been selected
if (SelectedRoomID == 0)
{
await DialogService.AlertAsync("Please select a room.", "No Room Selected");
return;
}
if (args.Item.Text == "Add")
{
//Code for adding goes here
IsAdd = true;
SelectedWallID = 0;
SelectedWallTypeName = string.Empty;
dialogTitle = "Add a Wall";
wallAddEdit = new();
await DialogWall.ShowAsync(false);
}
if (args.Item.Text == "Edit")
{
//Code for editing
IsAdd = false;
dialogTitle = "Edit a Wall";
//Check that a wall has been selected
if (SelectedWallID == 0)
{
await DialogService.AlertAsync("Please select a wall.", "No Wall Selected");
return;
}
else
{
//populate wallAddEdit (temporary data set used for the editing process)
wallAddEdit.WallID = SelectedWallID;
wallAddEdit.RoomID = SelectedRoomID;
wallAddEdit.WallName = SelectedWallName;
SelectedWallTypeName = SelectedWallTypeName;
// wallAddEdit.WallSqM = SelectedWallSqM;
wallAddEdit.WallLengthMax = SelectedWallLengthMax;
wallAddEdit.WallLengthMin = SelectedWallLengthMin;
wallAddEdit.WallHeightMax = SelectedWallHeightMax;
wallAddEdit.WallHeightMin = SelectedWallHeightMin;
await DialogWall.ShowAsync(false);
StateHasChanged();
}
}
if (args.Item.Text == "Delete")
{
//Code for deleting
if (SelectedWallID == 0)
{
await DialogService.AlertAsync("Please select a wall.", "No Wall Selected");
return;
}
else
{
bool isConfirm = await DialogService.ConfirmAsync(
"Are you sure you want to delete " + SelectedWallName + "?",
"Delete " + SelectedWallName);
if (isConfirm == true)
{
await WallService.WallDelete(SelectedWallID);
//Refresh datagrid
walls = await WallService.WallsReadByRoom(SelectedRoomID);
StateHasChanged();
SelectedWallID = 0;
}
}
}
}
public async Task WallRowSelectHandler(RowSelectEventArgs<Wall> args) //Note <Wall>
{
//{args.Data} returns the current selected records.
SelectedWallID = args.Data.WallID;
SelectedWallName = args.Data.WallName;
SelectedWallTypeName = args.Data.WallTypeName;
// SelectedWallSqM = args.Data.WallSqM;
SelectedWallLengthMax = args.Data.WallLengthMax;
SelectedWallLengthMin = args.Data.WallLengthMin;
SelectedWallHeightMax = args.Data.WallHeightMax;
SelectedWallHeightMin = args.Data.WallHeightMin;
}
protected async Task WallSave()
{
//Always do area calculation
await CalculateArea(wallAddEdit);
if (wallAddEdit.WallID == 0) //It's an insert
{
//Check for duplicates
int duplicates = await WallService.CountWallsByNameAndRoom(wallAddEdit.WallName, SelectedRoomID);
if (duplicates == 0)
{
wallAddEdit.RoomID = SelectedRoomID;
// Temporarily assign values to these:
// wallAddEdit.WallTypeID = 0;
// wallAddEdit.WallTypeName = "";
// wallAddEdit.WallLengthMax = 0;
// wallAddEdit.WallLengthMin = 0;
// wallAddEdit.WallHeightMax = 0;
// wallAddEdit.WallHeightMin = 0;
try
{
await WallService.WallCreate(wallAddEdit);
//Refresh datagrid
walls = await WallService.WallsReadByRoom(SelectedRoomID);
StateHasChanged();
await DialogWall.HideAsync();
}
catch
{
// Display warning message
await DialogService.AlertAsync("An unexpected error has occured.", "Unknown Error");
return;
}
}
else
{
//Room already exists - warn the user
await DialogService.AlertAsync("This wall already exists for this room; it cannot be added again.", "Warning!");
return;
}
}
else //It's an edit
{
//It's an edit
// Check for duplicates
int duplicates = await WallService.CountWallsByNameAndRoomAndId(wallAddEdit.WallName, wallAddEdit.WallID, SelectedRoomID);
if (duplicates == 0)
{
try
{
await WallService.WallUpdate(wallAddEdit);
//Refresh datagrid
walls = await WallService.WallsReadByRoom(SelectedRoomID);
StateHasChanged();
await DialogWall.HideAsync();
}
catch
{
// Display warning message
await DialogService.AlertAsync("An unexpected error has occured.", "Unknown Error");
return;
}
}
else
{
//Wall already exists - warn the user
await DialogService.AlertAsync("This wall already exists for this room", "Wall Already Exists");
return;
}
}
}
void CancelWall()
{
DialogWall.HideAsync();
}
#endregion
#region Area Calculation
public async Task CalculateArea(Wall wallAddEdit)
{
switch (wallAddEdit.WallTypeName)
{
case "Simple":
decWallLengthMax = Convert.ToDecimal(wallAddEdit.WallLengthMax);
decWallHeightMax = Convert.ToDecimal(wallAddEdit.WallHeightMax);
decimal area = decimal.Round((decWallLengthMax * decWallHeightMax) / 1000000, 3, MidpointRounding.AwayFromZero);
wallAddEdit.WallSqM = area;
break;
case "Complex - Left":
case "Complex - Right":
decWallLengthMax = Convert.ToDecimal(wallAddEdit.WallLengthMax);
decWallHeightMax = Convert.ToDecimal(wallAddEdit.WallHeightMax);
decWallLengthMin = Convert.ToDecimal(wallAddEdit.WallLengthMin);
decWallHeightMin = Convert.ToDecimal(wallAddEdit.WallHeightMin);
decimal area1 = (decWallHeightMax * decWallLengthMin);
decimal area2 = ((decWallLengthMax - decWallLengthMin) * decWallHeightMin);
decimal area3 = decimal.Round((((decWallLengthMax - decWallLengthMin) * (decWallHeightMax - decWallHeightMin)) / 2), 3, MidpointRounding.AwayFromZero);
wallAddEdit.WallSqM = decimal.Round(((area1 + area2 + area3) / 1000000), 3, MidpointRounding.AwayFromZero);
break;
}
}
#endregion
}