Skip to content

Better loading indicator #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
A-Guldborg wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Better loading indicator #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8450441
Adds loading indicator to non-query data pages
A-Guldborg Apr 23, 2024
6472390
Adds loading indicator to UnusedTickets component
A-Guldborg Apr 23, 2024
d020cfa
First attempt at loading indicator to UserTable component
A-Guldborg Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 67 additions & 64 deletions Shifty.App/Components/MenuItems.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,77 +10,80 @@
@using Shifty.App.DomainModels
@using LanguageExt.UnsafeValueAccess
@using Shifty.App.Repositories
@using MudExtensions
@inject ISnackbar Snackbar
@inject IJSRuntime JSRuntime
@inject IMenuItemService MenuItemService
@inject IDialogService DialogService

<MudPaper Elevation="15" Style="margin: 2em; border-radius: 5px;">
@if (_loading)
{
<MudContainer Style="width: 100%; display: flex;">
<LoadingIndicator Height="400px" />
</MudContainer>
}
else
{
<MudDataGrid
@ref="_dataGrid"
T="MenuItem"
Items="@_menuItems"
ReadOnly="false"
EditTrigger="DataGridEditTrigger.Manual"
CommittedItemChanges="@CommittedItemChanges"
StartedEditingItem="@((item) => _editingItem = new MenuItem { Id = item.Id, Name = item.Name, Active = item.Active })"
FixedHeader="true"
Height="calc(100vh - 250px)"
RowStyleFunc="@RowStyleFunc"
Dense="true"
SortMode="MudBlazor.SortMode.None">
<Columns>
<TemplateColumn Title="Edit">
<CellTemplate>
<MudIconButton
Size="@Size.Medium"
Icon="@Icons.Material.Outlined.Edit"
Color="Color.Primary"
OnClick="@context.Actions.StartEditingItemAsync" />
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false" />
<PropertyColumn Property="x => x.Name" Title="Name" IsEditable="true" />
<PropertyColumn Property="x => x.Active" Title="Active" IsEditable="true" InitialDirection="SortDirection.Descending">
<CellTemplate>
@{
if (context.Item.Active)
{
<MudIconButton Size="@Size.Small" Color="Color.Dark" OnClick="@(() => ConfirmActiveToggle(context.Item))"
Icon="@Icons.Material.Filled.Visibility" />
}
else
{
<MudIconButton Size="@Size.Small" Style="@($"color:{Colors.Grey.Default};")"
Icon="@Icons.Material.Filled.VisibilityOff" OnClick="@(() => ConfirmActiveToggle(context.Item))" />
}
}
</CellTemplate>
<EditTemplate>
<MudSwitch Label="Active" Color="Color.Primary" @bind-Checked="context.Item.Active" />
</EditTemplate>
</PropertyColumn>
</Columns>
</MudDataGrid>
<MudLoading @bind-Loading="_loading">
<LoaderContent>
<MudContainer Style="width: 100%; display: flex;">
<LoadingIndicator Height="400px" />
</MudContainer>
</LoaderContent>
<ChildContent>
<MudDataGrid
@ref="_dataGrid"
T="MenuItem"
Items="@_menuItems"
ReadOnly="false"
EditTrigger="DataGridEditTrigger.Manual"
CommittedItemChanges="@CommittedItemChanges"
StartedEditingItem="@((item) => _editingItem = new MenuItem { Id = item.Id, Name = item.Name, Active = item.Active })"
FixedHeader="true"
Height="calc(100vh - 250px)"
RowStyleFunc="@RowStyleFunc"
Dense="true"
SortMode="MudBlazor.SortMode.None">
<Columns>
<TemplateColumn Title="Edit">
<CellTemplate>
<MudIconButton
Size="@Size.Medium"
Icon="@Icons.Material.Outlined.Edit"
Color="Color.Primary"
OnClick="@context.Actions.StartEditingItemAsync" />
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false" />
<PropertyColumn Property="x => x.Name" Title="Name" IsEditable="true" />
<PropertyColumn Property="x => x.Active" Title="Active" IsEditable="true" InitialDirection="SortDirection.Descending">
<CellTemplate>
@{
if (context.Item.Active)
{
<MudIconButton Size="@Size.Small" Color="Color.Dark" OnClick="@(() => ConfirmActiveToggle(context.Item))"
Icon="@Icons.Material.Filled.Visibility" />
}
else
{
<MudIconButton Size="@Size.Small" Style="@($"color:{Colors.Grey.Default};")"
Icon="@Icons.Material.Filled.VisibilityOff" OnClick="@(() => ConfirmActiveToggle(context.Item))" />
}
}
</CellTemplate>
<EditTemplate>
<MudSwitch Label="Active" Color="Color.Primary" @bind-Checked="context.Item.Active" />
</EditTemplate>
</PropertyColumn>
</Columns>
</MudDataGrid>

<MudToolBar>
<MudSpacer />
<MudButton
Color="Color.Primary"
Variant="Variant.Filled"
EndIcon="@Icons.Material.Outlined.Add"
OnClick="@AddItemToDataGrid">
Add Product
</MudButton>
</MudToolBar>
</ChildContent>
</MudLoading>

<MudToolBar>
<MudSpacer />
<MudButton
Color="Color.Primary"
Variant="Variant.Filled"
EndIcon="@Icons.Material.Outlined.Add"
OnClick="@AddItemToDataGrid">
Add Product
</MudButton>
</MudToolBar>
}
</MudPaper>

Expand Down
219 changes: 111 additions & 108 deletions Shifty.App/Components/ProductManager.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,115 +20,118 @@
}
</style>
<MudPaper Elevation="15" Style="margin: 2em; border-radius: 5px;">
@if (_loading)
{
<MudContainer Style="width: 100%; display: flex;">
<LoadingIndicator Height="400px" />
</MudContainer>
}
<MudDataGrid
@ref="_dataGrid"
T="Product"
Items="@_products"
EditMode="DataGridEditMode.Form"
ReadOnly="false"
StartedEditingItem="@StartedEditingItem"
CanceledEditingItem="@CanceledEditingItem"
CommittedItemChanges="@CommittedItemChanges"
EditTrigger="DataGridEditTrigger.Manual"
QuickFilter="e => _showNonvisible || e.Visible"
RowStyleFunc="@RowStyleFunc"
FixedHeader="true"
Height="calc(100vh - 250px)"
Dense="true"
SortMode="MudBlazor.SortMode.None">
<Columns>
<TemplateColumn Title="Edit">
<CellTemplate>
<MudIconButton
Size="@Size.Medium"
Icon="@Icons.Material.Outlined.Edit"
Color="Color.Primary"
OnClick="@context.Actions.StartEditingItemAsync" />
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Visible" Title="" InitialDirection="SortDirection.Descending">
<CellTemplate>
@{
if (context.Item.Visible)
{
<MudIcon Size="@Size.Small" Color="Color.Dark"
Icon="@Icons.Material.Filled.Visibility" />
}
else
{
<MudIcon Size="@Size.Small" Style="@($"color:{Colors.Grey.Default};")"
Icon="@Icons.Material.Filled.VisibilityOff" />
}
}
</CellTemplate>
<EditTemplate>
<MudSwitch id="first-edit-element" Label="Visible" Color="Color.Primary" @bind-Checked="context.Item.Visible" />
</EditTemplate>
</PropertyColumn>
<PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false" />
<PropertyColumn Property="x => x.Name" Title="Name" IsEditable="true" />
<PropertyColumn Property="x => x.NumberOfTickets" Title="Tickets" IsEditable="true" />
<PropertyColumn Property="x => x.Price" Title="Price" IsEditable="true" />
<PropertyColumn Property='x => string.Join(", ", x.AllowedUserGroups.Select(e => e.ToString()))'
Title="User groups" IsEditable="true">
<EditTemplate>
<MudText Typo="Typo.subtitle1">Visible to:</MudText>
@foreach (var group in Enum.GetValues<UserGroup>())
{
<MudCheckBox Dense="true" Color="Color.Primary" @bind-Checked="UserGroupDict[group]" Value="@group">
@group</MudCheckBox>
}
</EditTemplate>
</PropertyColumn>
<PropertyColumn Property="x => x.IsPerk" Title="Perk?" IsEditable="false">
<CellTemplate>
@{
if (context.Item.IsPerk)
{
<MudIcon Style="color:gold;" Icon="@Icons.Material.Filled.Star" Title="IsPerk" />
}
else
{
<MudIcon Icon="@Icons.Material.Filled.StarOutline" Title="IsPerk" />
}
}
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="x => x.Description" Title="Description" IsEditable="true" />
<PropertyColumn Property="x => x.EligibleMenuItems" Title="Eligible menu items" IsEditable="true" Hidden>
<EditTemplate>
<MudComboBox
T="MenuItem"
Label="Eligible menu items"
MultiSelection="true"
Editable="true"
@bind-SelectedValues="context.Item.EligibleMenuItems">
@foreach (var mi in _allMenuItems)
{
<MudComboBoxItem Text="@mi.Name" Value="@mi">@mi.Name</MudComboBoxItem>
}
</MudComboBox>
</EditTemplate>
</PropertyColumn>
</Columns>
</MudDataGrid>
<MudLoading @bind-Loading="_loading">
<LoaderContent>
<MudContainer Style="width: 100%; display: flex;">
<LoadingIndicator Height="400px" />
</MudContainer>
</LoaderContent>
<ChildContent>
<MudDataGrid
@ref="_dataGrid"
T="Product"
Items="@_products"
EditMode="DataGridEditMode.Form"
ReadOnly="false"
StartedEditingItem="@StartedEditingItem"
CanceledEditingItem="@CanceledEditingItem"
CommittedItemChanges="@CommittedItemChanges"
EditTrigger="DataGridEditTrigger.Manual"
QuickFilter="e => _showNonvisible || e.Visible"
RowStyleFunc="@RowStyleFunc"
FixedHeader="true"
Height="calc(100vh - 250px)"
Dense="true"
SortMode="MudBlazor.SortMode.None">
<Columns>
<TemplateColumn Title="Edit">
<CellTemplate>
<MudIconButton
Size="@Size.Medium"
Icon="@Icons.Material.Outlined.Edit"
Color="Color.Primary"
OnClick="@context.Actions.StartEditingItemAsync" />
</CellTemplate>
</TemplateColumn>
<PropertyColumn Property="x => x.Visible" Title="" InitialDirection="SortDirection.Descending">
<CellTemplate>
@{
if (context.Item.Visible)
{
<MudIcon Size="@Size.Small" Color="Color.Dark"
Icon="@Icons.Material.Filled.Visibility" />
}
else
{
<MudIcon Size="@Size.Small" Style="@($"color:{Colors.Grey.Default};")"
Icon="@Icons.Material.Filled.VisibilityOff" />
}
}
</CellTemplate>
<EditTemplate>
<MudSwitch id="first-edit-element" Label="Visible" Color="Color.Primary" @bind-Checked="context.Item.Visible" />
</EditTemplate>
</PropertyColumn>
<PropertyColumn Property="x => x.Id" Title="Id" IsEditable="false" />
<PropertyColumn Property="x => x.Name" Title="Name" IsEditable="true" />
<PropertyColumn Property="x => x.NumberOfTickets" Title="Tickets" IsEditable="true" />
<PropertyColumn Property="x => x.Price" Title="Price" IsEditable="true" />
<PropertyColumn Property='x => string.Join(", ", x.AllowedUserGroups.Select(e => e.ToString()))'
Title="User groups" IsEditable="true">
<EditTemplate>
<MudText Typo="Typo.subtitle1">Visible to:</MudText>
@foreach (var group in Enum.GetValues<UserGroup>())
{
<MudCheckBox Dense="true" Color="Color.Primary" @bind-Checked="UserGroupDict[group]" Value="@group">
@group</MudCheckBox>
}
</EditTemplate>
</PropertyColumn>
<PropertyColumn Property="x => x.IsPerk" Title="Perk?" IsEditable="false">
<CellTemplate>
@{
if (context.Item.IsPerk)
{
<MudIcon Style="color:gold;" Icon="@Icons.Material.Filled.Star" Title="IsPerk" />
}
else
{
<MudIcon Icon="@Icons.Material.Filled.StarOutline" Title="IsPerk" />
}
}
</CellTemplate>
</PropertyColumn>
<PropertyColumn Property="x => x.Description" Title="Description" IsEditable="true" />
<PropertyColumn Property="x => x.EligibleMenuItems" Title="Eligible menu items" IsEditable="true" Hidden>
<EditTemplate>
<MudComboBox
T="MenuItem"
Label="Eligible menu items"
MultiSelection="true"
Editable="true"
@bind-SelectedValues="context.Item.EligibleMenuItems">
@foreach (var mi in _allMenuItems)
{
<MudComboBoxItem Text="@mi.Name" Value="@mi">@mi.Name</MudComboBoxItem>
}
</MudComboBox>
</EditTemplate>
</PropertyColumn>
</Columns>
</MudDataGrid>

<MudToolBar>
<MudSpacer />
<MudButton
Color="Color.Primary"
Variant="Variant.Filled"
EndIcon="@Icons.Material.Outlined.Add"
OnClick="@AddItemToDataGrid">
Add Product
</MudButton>
</MudToolBar>
<MudToolBar>
<MudSpacer />
<MudButton
Color="Color.Primary"
Variant="Variant.Filled"
EndIcon="@Icons.Material.Outlined.Add"
OnClick="@AddItemToDataGrid">
Add Product
</MudButton>
</MudToolBar>
</ChildContent>
</MudLoading>
</MudPaper>
@code
{
Expand Down
Loading