diff --git a/BlazingCoffee/Client/BlazingCoffee.Client.csproj b/BlazingCoffee/Client/BlazingCoffee.Client.csproj index e5eb186..cc5107c 100644 --- a/BlazingCoffee/Client/BlazingCoffee.Client.csproj +++ b/BlazingCoffee/Client/BlazingCoffee.Client.csproj @@ -15,6 +15,7 @@ + diff --git a/BlazingCoffee/Client/Pages/SalesReports/Sales.razor b/BlazingCoffee/Client/Pages/SalesReports/Sales.razor index f888eb9..156890b 100644 --- a/BlazingCoffee/Client/Pages/SalesReports/Sales.razor +++ b/BlazingCoffee/Client/Pages/SalesReports/Sales.razor @@ -1,15 +1,16 @@ @page "/sales" - @using System.Globalization @attribute [Authorize] @inject HttpClient Http @inject ITelerikStringLocalizer L +@inject ILocalStorageService LocalStorage @@ -47,9 +48,12 @@ @code { #region Data Processing + string storageKey = "BlazingCoffeeSales"; + DataEnvelope Model { get; set; } = new DataEnvelope(); SalesByDateViewModel[] chartData; + async Task ReadItems(GridReadEventArgs args) { var response = await Http.PostAsJsonAsync("api/sales", args.Request); @@ -61,7 +65,30 @@ protected override async Task OnInitializedAsync() { + try + { + var state = await LocalStorage.GetItemAsync>(storageKey); + + if (state != null) + { + var startFilter = state.TransactionDateFilters(f => f.Operator == FilterOperator.IsGreaterThan); + var endFilter = state.TransactionDateFilters(f => f.Operator == FilterOperator.IsLessThan); + + StartValue = (DateTime?)startFilter.Value; + EndValue = (DateTime?)endFilter.Value; + } + + // .StartDate != null ? state.StartDate : StartValue = DateTime.Now.AddYears(-2); + //EndValue = state?.EndDate != null ? state.EndDate : StartValue = DateTime.Now; + } + catch (InvalidOperationException e) + { + // the JS Interop for the local storage cannot be used during pre-rendering + // so the code above will throw. Once the app initializes, it will work fine + } + await GetChartData(); + } async Task GetChartData() @@ -78,19 +105,12 @@ FilterDescriptor StartFilter() => new FilterDescriptor("TransactionDate", FilterOperator.IsGreaterThan, StartValue); FilterDescriptor EndFilter() => new FilterDescriptor("TransactionDate", FilterOperator.IsLessThan, EndValue); - void OnStateInit(GridStateEventArgs args) - { - args.GridState.FilterDescriptors.Add(StartFilter()); - args.GridState.FilterDescriptors.Add(EndFilter()); - } - void StartValueChangedHandler(DateTime? currStart) { //you have to update the model manually because handling the Changed event does not let you use @bind- //not updating the model will effectively cancel the event StartValue = currStart; - //Console.WriteLine($"start changed to: {currStart}"); } async Task EndValueChangedHandler(DateTime? currEnd) @@ -111,7 +131,38 @@ state.FilterDescriptors.Add(EndFilter()); await Grid.SetState(state); await GetChartData(); + await LocalStorage.SetItemAsync>(storageKey, state); + } } #endregion + + #region State Management + + async Task OnStateInit(GridStateEventArgs args) + { + try + { + var state = await LocalStorage.GetItemAsync>(storageKey); + if (state != null) + { + args.GridState = state; + } + + } + catch (InvalidOperationException e) + { + // the JS Interop for the local storage cannot be used during pre-rendering + // so the code above will throw. Once the app initializes, it will work fine + } + args.GridState.FilterDescriptors.Add(StartFilter()); + args.GridState.FilterDescriptors.Add(EndFilter()); + } + + async Task OnStateChanged(GridStateEventArgs args) + { + await LocalStorage.SetItemAsync(storageKey, args.GridState); + } + + #endregion } \ No newline at end of file diff --git a/BlazingCoffee/Client/Pages/SalesReports/SalesExtensions.cs b/BlazingCoffee/Client/Pages/SalesReports/SalesExtensions.cs new file mode 100644 index 0000000..4d59c91 --- /dev/null +++ b/BlazingCoffee/Client/Pages/SalesReports/SalesExtensions.cs @@ -0,0 +1,18 @@ +using System; +using System.Linq; +using BlazingCoffee.Shared.Models; +using Telerik.Blazor.Components; +using Telerik.DataSource; + +namespace BlazingCoffee.Client.Pages.SalesReports +{ + public static class SalesExtensions + { + public static FilterDescriptor TransactionDateFilters(this GridState gridState, + Func predicate) => + gridState.FilterDescriptors + .OfType() + .Where(f=> f.Member == "TransactionDate") + .First(predicate); + } +} \ No newline at end of file diff --git a/BlazingCoffee/Client/Program.cs b/BlazingCoffee/Client/Program.cs index 53969b7..bc79298 100644 --- a/BlazingCoffee/Client/Program.cs +++ b/BlazingCoffee/Client/Program.cs @@ -1,9 +1,9 @@ using BlazingCoffee.Services; using BlazingCoffee.Shared.Localization; +using Blazored.LocalStorage; using Microsoft.AspNetCore.Components.WebAssembly.Authentication; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Microsoft.Extensions.DependencyInjection; -using Microsoft.JSInterop; using System; using System.Globalization; using System.Net.Http; @@ -22,8 +22,8 @@ public static async Task Main(string[] args) ConfigureServices(builder); var host = builder.Build(); - var jsInterop = host.Services.GetRequiredService(); - var result = await jsInterop.InvokeAsync("blazorCulture.get"); + var localStorage = host.Services.GetRequiredService(); + var result = await localStorage.GetItemAsStringAsync("BlazorCulture"); if (result != null) { var culture = new CultureInfo(result); @@ -38,6 +38,7 @@ private static void ConfigureServices(WebAssemblyHostBuilder builder) { builder.Services.AddTelerikBlazor(); + builder.Services.AddBlazoredLocalStorage(); builder.Services.AddHttpClient(client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)); builder.Services.AddHttpClient("BlazingCoffee.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)) .AddHttpMessageHandler(); diff --git a/BlazingCoffee/Client/Shared/CultureChooser.razor b/BlazingCoffee/Client/Shared/CultureChooser.razor index 7dbf84c..87b195a 100644 --- a/BlazingCoffee/Client/Shared/CultureChooser.razor +++ b/BlazingCoffee/Client/Shared/CultureChooser.razor @@ -1,12 +1,12 @@ @using System.Globalization -@inject IJSRuntime js @inject NavigationManager NavigationManager +@inject ILocalStorageService LocalStorage
@@ -29,18 +29,18 @@ public string SelectedCulture { get; set; } - public void OnValueChanged(string eventArgs) + public async Task OnValueChanged(string eventArgs) { SelectedCulture = eventArgs; - SetCulture(eventArgs); + await SetCulture(eventArgs); } - public void SetCulture(string culture) + public async Task SetCulture(string culture) { if (CultureInfo.CurrentCulture.Name != culture) { - js.InvokeVoidAsync("blazorCulture.set", culture); + await LocalStorage.SetItemAsync("BlazorCulture", culture); NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true); } @@ -48,7 +48,7 @@ public async Task GetCulture() { - var value = await js.InvokeAsync("blazorCulture.get"); + var value = await LocalStorage.GetItemAsStringAsync("BlazorCulture"); if (string.IsNullOrEmpty(value)) { value = "en-US"; diff --git a/BlazingCoffee/Client/Shared/Layouts/MainLayout.razor b/BlazingCoffee/Client/Shared/Layouts/MainLayout.razor index 3f891d8..a5fba62 100644 --- a/BlazingCoffee/Client/Shared/Layouts/MainLayout.razor +++ b/BlazingCoffee/Client/Shared/Layouts/MainLayout.razor @@ -3,10 +3,13 @@ @inherits LayoutComponentBase @inject ITelerikStringLocalizer L - +@inject ILocalStorageService LocalStorage - + @@ -14,7 +17,7 @@
- +
@@ -42,7 +45,7 @@ @L["SelectTheme"]
- +
@@ -59,7 +62,10 @@ @code { - bool Expanded { get; set; } = true; + + TelerikDrawer MenuDrawer { get; set; } + + bool Expanded { get; set; } bool SettingsExpanded { get; set; } IEnumerable Data => @@ -73,9 +79,38 @@ new DrawerItem{ Text = "Telerik", Icon = IconName.HyperlinkGlobe, Url="https://telerik.com", Group = "ext"}, new DrawerItem{ Text = L["Documentation"], Icon = IconName.Html, Url="https://docs.telerik.com/blazor-ui/introduction", Group = "ext"}, new DrawerItem{ Text = L["Support"], Icon = IconName.Question, Url="https://www.telerik.com/account/support-tickets", Group = "ext"} - }; + }; + + async Task ToggleMenuDrawer() + { + if (Expanded) + { + await MenuDrawer.CollapseAsync(); + } + else + { + await MenuDrawer.ExpandAsync(); + } + } - string SelectedTheme = "auto"; - IEnumerable Themes => new List { "auto" }; // TODO add manual settings, "light", "dark" }; + async Task ExpandedChangedHandler(bool value) + { + Expanded = value; + + await LocalStorage.SetItemAsync("drawerState", value); + } + + protected override async Task OnInitializedAsync() + { + var hasKey = await LocalStorage.ContainKeyAsync("drawerState"); + if (hasKey) + { + Expanded = await LocalStorage.GetItemAsync("drawerState"); + } + else + { + Expanded = true; + } + } -} +} \ No newline at end of file diff --git a/BlazingCoffee/Client/Shared/Themes/ThemeChooser.razor b/BlazingCoffee/Client/Shared/Themes/ThemeChooser.razor new file mode 100644 index 0000000..79950ee --- /dev/null +++ b/BlazingCoffee/Client/Shared/Themes/ThemeChooser.razor @@ -0,0 +1,32 @@ +@namespace BlazingCoffee.Client.Shared +@inject IJSRuntime js + + + +@code { + + string SelectedTheme; + + IEnumerable Themes => new List { + new ThemeSetting { ThemeText = "Auto (default)", ThemeValue = "auto" }, + new ThemeSetting { ThemeText = "Light", ThemeValue = "main" }, + new ThemeSetting { ThemeText = "Dark", ThemeValue = "main-dark" } + }; + + async Task HandleThemeSelected(string value) + { + await js.InvokeVoidAsync("themeChooser.setTheme", value); + SelectedTheme = value; + } + + protected override async Task OnInitializedAsync() + { + var theme = await js.InvokeAsync("themeChooser.getTheme"); + SelectedTheme = string.IsNullOrEmpty(theme) ? "auto" : theme; + } +} \ No newline at end of file diff --git a/BlazingCoffee/Client/Shared/Themes/ThemeSetting.cs b/BlazingCoffee/Client/Shared/Themes/ThemeSetting.cs new file mode 100644 index 0000000..4602493 --- /dev/null +++ b/BlazingCoffee/Client/Shared/Themes/ThemeSetting.cs @@ -0,0 +1,13 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace BlazingCoffee.Client.Shared +{ + public class ThemeSetting + { + public string ThemeText { get; set; } + public string ThemeValue { get; set; } + } +} diff --git a/BlazingCoffee/Client/_Imports.razor b/BlazingCoffee/Client/_Imports.razor index 481e59f..93ecd28 100644 --- a/BlazingCoffee/Client/_Imports.razor +++ b/BlazingCoffee/Client/_Imports.razor @@ -17,4 +17,5 @@ @using BlazingCoffee.Client @using BlazingCoffee.Client.Shared @using BlazingCoffee.Shared -@using BlazingCoffee.Shared.Models \ No newline at end of file +@using BlazingCoffee.Shared.Models +@using Blazored.LocalStorage \ No newline at end of file diff --git a/BlazingCoffee/Client/wwwroot/index.html b/BlazingCoffee/Client/wwwroot/index.html index 959e31e..3e34bb5 100644 --- a/BlazingCoffee/Client/wwwroot/index.html +++ b/BlazingCoffee/Client/wwwroot/index.html @@ -8,8 +8,7 @@ - - + @@ -26,7 +25,10 @@
- + + diff --git a/BlazingCoffee/Client/wwwroot/js/blazorCulture.js b/BlazingCoffee/Client/wwwroot/js/blazorCulture.js deleted file mode 100644 index 74c28da..0000000 --- a/BlazingCoffee/Client/wwwroot/js/blazorCulture.js +++ /dev/null @@ -1,9 +0,0 @@ -window.blazorCulture = { - get: () => { - return window.localStorage['BlazorCulture']; - }, - - set: (value) => { - window.localStorage['BlazorCulture'] = value; - } -}; \ No newline at end of file diff --git a/BlazingCoffee/Client/wwwroot/js/themeChooser.js b/BlazingCoffee/Client/wwwroot/js/themeChooser.js new file mode 100644 index 0000000..0b80792 --- /dev/null +++ b/BlazingCoffee/Client/wwwroot/js/themeChooser.js @@ -0,0 +1,47 @@ +window.themeChooser = { + getTheme: function () { + return window.localStorage['ThemeSetting']; + }, + setTheme: function (themeName) { + if (themeName === "auto") { + window.localStorage.removeItem('ThemeSetting'); + this.autoDetectTheme(); + } else { + window.localStorage['ThemeSetting'] = themeName; + this.changeTheme(themeName); + } + }, + changeTheme: function (themeName) { + // Build the new css link + let newLink = document.createElement("link"); + newLink.setAttribute("id", "theme"); + newLink.setAttribute("rel", "stylesheet"); + newLink.setAttribute("type", "text/css"); + newLink.setAttribute("href", `css/${themeName}.css`); + + // Remove and replace the theme + let head = document.getElementsByTagName("head")[0]; + head.querySelector("#theme").remove(); + head.appendChild(newLink); + }, + autoDetectTheme() { + let isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + + if (isDark) { + this.changeTheme("main-dark"); + } else { + this.changeTheme("main"); + } + }, + init: function () { + let themeSetting = this.getTheme(); + let isThemeSet = !themeSetting; + + if (isThemeSet) { + this.autoDetectTheme(); + } + else { + this.changeTheme(themeSetting); + } + } +} \ No newline at end of file