-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add BitzArt.Flux.MudBlazor package (#27)
* Add mudblazor pkg * Sample app to test against * Data Provider * Fixes * Improve reset code readability * Comments for readability * Inline documentation * Align books grid toolbar --------- Co-authored-by: Vladimir Seldemirov <ligowsky.dev@gmail.com>
- Loading branch information
1 parent
d7ae3a7
commit f72f607
Showing
42 changed files
with
1,195 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
104 changes: 104 additions & 0 deletions
104
sample/MudBlazor/MudBlazor.SampleApp.Client/Layout/MainLayout.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /> | ||
| <MudPopoverProvider /> | ||
| <MudDialogProvider /> | ||
| <MudSnackbarProvider /> | ||
| <MudLayout> | ||
| <MudAppBar Elevation="1"> | ||
| <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /> | ||
| <MudText Typo="Typo.h5" Class="ml-3">Application</MudText> | ||
| <MudSpacer /> | ||
| <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" /> | ||
| <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /> | ||
| </MudAppBar> | ||
| <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2"> | ||
| <NavMenu /> | ||
| </MudDrawer> | ||
| <MudMainContent Class="mt-16 pa-4"> | ||
| @Body | ||
| </MudMainContent> | ||
| </MudLayout> | ||
|
|
||
|
|
||
| <div id="blazor-error-ui"> | ||
| An unhandled error has occurred. | ||
| <a href="" class="reload">Reload</a> | ||
| <a class="dismiss">🗙</a> | ||
| </div> | ||
|
|
||
| @code { | ||
| private bool _drawerOpen = true; | ||
| private bool _isDarkMode = true; | ||
| private MudTheme? _theme = null; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| base.OnInitialized(); | ||
|
|
||
| _theme = new() | ||
| { | ||
| PaletteLight = _lightPalette, | ||
| PaletteDark = _darkPalette, | ||
| LayoutProperties = new LayoutProperties() | ||
| }; | ||
| } | ||
|
|
||
|
|
||
| private void DrawerToggle() | ||
| { | ||
| _drawerOpen = !_drawerOpen; | ||
| } | ||
|
|
||
| private void DarkModeToggle() | ||
| { | ||
| _isDarkMode = !_isDarkMode; | ||
| } | ||
|
|
||
| private readonly PaletteLight _lightPalette = new() | ||
| { | ||
| Black = "#110e2d", | ||
| AppbarText = "#424242", | ||
| AppbarBackground = "rgba(255,255,255,0.8)", | ||
| DrawerBackground = "#ffffff", | ||
| GrayLight = "#e8e8e8", | ||
| GrayLighter = "#f9f9f9", | ||
| }; | ||
|
|
||
| private readonly PaletteDark _darkPalette = new() | ||
| { | ||
| Primary = "#7e6fff", | ||
| Surface = "#1e1e2d", | ||
| Background = "#1a1a27", | ||
| BackgroundGray = "#151521", | ||
| AppbarText = "#92929f", | ||
| AppbarBackground = "rgba(26,26,39,0.8)", | ||
| DrawerBackground = "#1a1a27", | ||
| ActionDefault = "#74718e", | ||
| ActionDisabled = "#9999994d", | ||
| ActionDisabledBackground = "#605f6d4d", | ||
| TextPrimary = "#b2b0bf", | ||
| TextSecondary = "#92929f", | ||
| TextDisabled = "#ffffff33", | ||
| DrawerIcon = "#92929f", | ||
| DrawerText = "#92929f", | ||
| GrayLight = "#2a2833", | ||
| GrayLighter = "#1e1e2d", | ||
| Info = "#4a86ff", | ||
| Success = "#3dcb6c", | ||
| Warning = "#ffb545", | ||
| Error = "#ff3f5f", | ||
| LinesDefault = "#33323e", | ||
| TableLines = "#33323e", | ||
| Divider = "#292838", | ||
| OverlayLight = "#1e1e2d80", | ||
| }; | ||
|
|
||
| public string DarkLightModeButtonIcon => _isDarkMode switch | ||
| { | ||
| true => Icons.Material.Rounded.AutoMode, | ||
| false => Icons.Material.Outlined.DarkMode, | ||
| }; | ||
| } | ||
|
|
||
|
|
8 changes: 8 additions & 0 deletions
8
sample/MudBlazor/MudBlazor.SampleApp.Client/Layout/NavMenu.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
|
|
||
| <MudNavMenu> | ||
| <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink> | ||
| <MudNavLink Href="books" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Book">Books</MudNavLink> | ||
|
|
||
| </MudNavMenu> | ||
|
|
||
|
|
22 changes: 22 additions & 0 deletions
22
sample/MudBlazor/MudBlazor.SampleApp.Client/MudBlazor.SampleApp.Client.csproj
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> | ||
|
|
||
| <PropertyGroup> | ||
| <TargetFramework>net8.0</TargetFramework> | ||
| <ImplicitUsings>enable</ImplicitUsings> | ||
| <Nullable>enable</Nullable> | ||
| <NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile> | ||
| <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode> | ||
| <RootNamespace>MudBlazor.SampleApp.Client</RootNamespace> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.*" /> | ||
| <PackageReference Include="MudBlazor" Version="7.4.0" /> | ||
| <PackageReference Include="System.Text.Json" Version="8.0.4" /> | ||
| </ItemGroup> | ||
|
|
||
| <ItemGroup> | ||
| <ProjectReference Include="..\MudBlazor.SampleApp.Shared\MudBlazor.SampleApp.Shared.csproj" /> | ||
| </ItemGroup> | ||
|
|
||
| </Project> |
93 changes: 93 additions & 0 deletions
93
sample/MudBlazor/MudBlazor.SampleApp.Client/Pages/BooksPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| @page "/books" | ||
|
|
||
| @if (_initialized) | ||
| { | ||
| <div class="books-page"> | ||
| <MudBlazor.MudTable | ||
| @ref="BooksDataProvider.Table" | ||
| T="Book" | ||
| ServerData="BooksDataProvider.Data" | ||
| > | ||
| <ToolBarContent> | ||
| <MudGrid Spacing="4" Class="pt-2"> | ||
| <MudItem xs="12" sm="12" md="6" Class="align-content-center"> | ||
| <MudText Typo="Typo.h4">Books</MudText> | ||
| </MudItem> | ||
|
|
||
| <MudItem xs="12" sm="6" md="3" Class="align-content-center"> | ||
| <MudSelect | ||
| T="Author" | ||
| Placeholder="Author" | ||
| Variant="Variant.Outlined" | ||
| Margin="Margin.Dense" | ||
| AnchorOrigin="Origin.BottomCenter" | ||
| ValueChanged="OnAuthorSelectedAsync" | ||
| Class="pt-0"> | ||
|
|
||
| <MudSelectItem Value="(Author)null!">Select Author</MudSelectItem> | ||
| @foreach (var author in _authors) | ||
| { | ||
| <MudSelectItem Value="@author">@author.Name</MudSelectItem> | ||
| } | ||
|
|
||
| </MudSelect> | ||
| </MudItem> | ||
|
|
||
| <MudItem xs="12" sm="6" md="3" Class="align-content-center"> | ||
| <MudTextField | ||
| T="string" | ||
| DebounceInterval="300" | ||
| OnDebounceIntervalElapsed="OnSearchAsync" | ||
| Placeholder="Search" | ||
| Variant="Variant.Outlined" | ||
| Margin="Margin.Dense" | ||
| Adornment="Adornment.Start" | ||
| AdornmentIcon="@Icons.Material.Filled.Search" | ||
| IconSize="Size.Medium"> | ||
| </MudTextField> | ||
| </MudItem> | ||
| </MudGrid> | ||
| </ToolBarContent> | ||
|
|
||
| <HeaderContent> | ||
| <MudTh> | ||
| <MudTableSortLabel T="Book" SortLabel="id"> | ||
| ID | ||
| </MudTableSortLabel> | ||
| </MudTh> | ||
| <MudTh> | ||
| <MudTableSortLabel T="Book" SortLabel="author"> | ||
| Author | ||
| </MudTableSortLabel> | ||
| </MudTh> | ||
| <MudTh> | ||
| <MudTableSortLabel T="Book" SortLabel="title"> | ||
| Title | ||
| </MudTableSortLabel> | ||
| </MudTh> | ||
| <MudTh> | ||
| <MudTableSortLabel T="Book" SortLabel="publish"> | ||
| Publish Year | ||
| </MudTableSortLabel> | ||
| </MudTh> | ||
| </HeaderContent> | ||
| <RowTemplate> | ||
| <MudTd DataLabel="ID"> | ||
| @context.Id | ||
| </MudTd> | ||
| <MudTd DataLabel="Author"> | ||
| @_authors.FirstOrDefault(x => x.Id == context.AuthorId)?.Name | ||
| </MudTd> | ||
| <MudTd DataLabel="Title"> | ||
| @context.Title | ||
| </MudTd> | ||
| <MudTd DataLabel="Publish Year"> | ||
| @context.PublishYearDisplay | ||
| </MudTd> | ||
| </RowTemplate> | ||
| <PagerContent> | ||
| <MudTablePager PageSizeOptions="new int[] { 5 }" HideRowsPerPage="true" /> | ||
| </PagerContent> | ||
| </MudBlazor.MudTable> | ||
| </div> | ||
| } |
56 changes: 56 additions & 0 deletions
56
sample/MudBlazor/MudBlazor.SampleApp.Client/Pages/BooksPage.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| using BitzArt.Flux; | ||
| using BitzArt.Flux.MudBlazor; | ||
| using Microsoft.AspNetCore.Components; | ||
| using System.Web; | ||
|
|
||
| namespace MudBlazor.SampleApp.Client.Pages; | ||
|
|
||
| public partial class BooksPage : ComponentBase | ||
| { | ||
| private IEnumerable<Author> _authors = null!; | ||
| private Author? _selectedAuthor; | ||
|
|
||
| private string? _search; | ||
|
|
||
| [Inject] private IFluxSetContext<Author> Authors { get; set; } = null!; | ||
| [Inject] private IFluxSetDataProvider<Book> BooksDataProvider { get; set; } = null!; | ||
|
|
||
| private bool _initialized = false; | ||
|
|
||
| protected override async Task OnInitializedAsync() | ||
| { | ||
| BooksDataProvider.GetParameters = GetBooksParameters; | ||
|
|
||
| await base.OnInitializedAsync(); | ||
| _authors = await Authors.GetAllAsync(); | ||
| _initialized = true; | ||
|
|
||
| await InvokeAsync(StateHasChanged); | ||
| } | ||
|
|
||
| private object[] GetBooksParameters(TableState state) | ||
| { | ||
| var query = HttpUtility.ParseQueryString(string.Empty); | ||
|
|
||
| if (_selectedAuthor is not null) query["authorId"] = _selectedAuthor.Id.ToString(); | ||
| if (!string.IsNullOrWhiteSpace(state.SortLabel)) query["order"] = state.SortLabel; | ||
| if (state.SortDirection == SortDirection.Descending) query["desc"] = "true"; | ||
| if (!string.IsNullOrWhiteSpace(_search)) query["search"] = _search; | ||
|
|
||
| var queryString = query.Count > 0 ? $"?{query}" : string.Empty; | ||
|
|
||
| return [queryString]; | ||
| } | ||
|
|
||
| private async Task OnAuthorSelectedAsync(Author author) | ||
| { | ||
| _selectedAuthor = author; | ||
| await BooksDataProvider.ResetAndReloadAsync(); | ||
| } | ||
|
|
||
| private async Task OnSearchAsync(string value) | ||
| { | ||
| _search = value; | ||
| await BooksDataProvider.ResetAndReloadAsync(); | ||
| } | ||
| } |
9 changes: 9 additions & 0 deletions
9
sample/MudBlazor/MudBlazor.SampleApp.Client/Pages/BooksPage.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .books-page ::deep .mud-table .mud-table-toolbar { | ||
| height: inherit !important; | ||
| padding-inline-start: 1rem !important; | ||
| padding-inline-end: 1rem !important; | ||
| } | ||
|
|
||
| .books-page ::deep .mud-table .mud-table-smalldevices-sortselect { | ||
| padding-top: 1rem !important; | ||
| } |
10 changes: 10 additions & 0 deletions
10
sample/MudBlazor/MudBlazor.SampleApp.Client/Pages/HomePage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @page "/" | ||
|
|
||
| <PageTitle>Home</PageTitle> | ||
|
|
||
| <MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText> | ||
|
|
||
| <MudText Typo="Typo.body2"> | ||
| This sample application shows how you can use Flux with MudBlazor. <br/> | ||
| Navigate to the <MudLink Href="/books">Books</MudLink> page to see it in action. | ||
| </MudText> |
Oops, something went wrong.