Implement user based settings -> start with DarkMode

b-straub · May 6, 2024 · cf3fdbc · cf3fdbc
1 parent ca2d2b2
commit cf3fdbc
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/DexieNETCloudSample/Dexie/Services/DexieCloudService.cs b/DexieNETCloudSample/Dexie/Services/DexieCloudService.cs
@@ -80,6 +80,21 @@ public static ListOpenClose Create(string listID)
         }
     }
 
+    [Schema(CloudSync = true)]
+    public partial record Settings
+    (
+        bool DarkMode,
+        [property: Index(IsPrimary = true)] string ID
+    ) : IToDoDBItem
+    {
+        public const string Key = "#userSettings";
+
+        public static Settings Create(bool darkMode)
+        {
+            return new(darkMode, Key);
+        }
+    }
+
     public enum DBState
     {
         Closed,
@@ -98,12 +113,13 @@ public sealed class DexieCloudService : RxBLService
         public IState<UIInteraction?> UIInteraction { get; }
         public IState<IEnumerable<Invite>?> Invites { get; }
         public IState<Dictionary<string, Role>?> Roles { get; }
+        public IState<bool> DarkMode { get; }
 
         public string? CloudURL { get; private set; }
 
         private readonly IDexieNETFactory<ToDoDB> _dexieFactory;
         private readonly CompositeDisposable _DBServicesDisposeBag = [];
-
+  
         public DexieCloudService(IServiceProvider serviceProvider)
         {
             var dexieService = serviceProvider.GetRequiredService<IDexieNETService<ToDoDB>>();
@@ -115,6 +131,7 @@ public DexieCloudService(IServiceProvider serviceProvider)
             UIInteraction = this.CreateState((UIInteraction?)null);
             Invites = this.CreateState((IEnumerable<Invite>?)null);
             Roles = this.CreateState((Dictionary<string, Role>?)null);
+            DarkMode = this.CreateState(false);
         }
 
         public async ValueTask OpenDB()
@@ -126,7 +143,7 @@ public async ValueTask OpenDB()
 #endif
                 await _dexieFactory.Delete();
                 DB = await _dexieFactory.Create();
-                DB.Version(1).Stores();
+                DB.Version(2).Stores();
 
                 ArgumentNullException.ThrowIfNull(DB);
                 State.Value = DBState.Opened;
@@ -183,6 +200,31 @@ public void ConfigureCloud(string cloudURL)
                 Console.WriteLine("SyncComplete");
             }));
 
+            var settingsQuery = DB.LiveQuery(async () => await DB.Settings.Where(s => s.ID, Settings.Key).ToArray());
+
+            _DBServicesDisposeBag.Add(settingsQuery.Subscribe(s =>
+            {
+                if (s.Any())
+                {
+                    if (DarkMode.Value != s.First().DarkMode)
+                    {
+                        DarkMode.Value = s.First().DarkMode;
+                    }
+                }
+                else if (DarkMode.Value)
+                {
+                    DarkMode.Value = false;
+                }
+            }));
+
+            _DBServicesDisposeBag.Add(this.AsChangedObservable(DarkMode)
+                .Select(async dm =>
+                { 
+                    var settings = Settings.Create(dm);
+                    await DB.Settings.Put(settings);
+                })
+                .Subscribe());
+
             _DBServicesDisposeBag.Add(DB.UserLoginObservable().Subscribe(ul =>
             {
                 UserLogin.Value = ul;

diff --git a/DexieNETCloudSample/DexieNETCloudSample.csproj b/DexieNETCloudSample/DexieNETCloudSample.csproj
@@ -15,7 +15,7 @@
 	<ItemGroup>
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.4" />
 		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.4" PrivateAssets="all" />
-		<PackageReference Include="RxMudBlazorLight" Version="0.8.7" />
+		<PackageReference Include="RxMudBlazorLight" Version="0.8.9" />
 		<PackageReference Include="DexieCloudNET" Version="1.2.8-pre" Condition="'$(Configuration)' == 'Release'" />
 	</ItemGroup>
 

diff --git a/DexieNETCloudSample/Shared/MainLayout.razor b/DexieNETCloudSample/Shared/MainLayout.razor
@@ -1,5 +1,6 @@
-@inherits LayoutComponentBase
-<MudThemeProvider />
+@inherits RxBLLayoutSubscriber<DexieCloudService>
+
+<MudThemeProvider @bind-IsDarkMode=@(Service.DarkMode.Value) Theme="_theme" />
 <MudDialogProvider />
 <MudSnackbarProvider />
 
@@ -8,6 +9,8 @@
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
         <MudSpacer />
         <DBContainer />
+        <MudToggleIconButtonRx State=@Service.DarkMode Icon="@Icons.Material.Filled.LightMode" Color="@Color.Warning" Title="Light Mode"
+              ToggledIcon="@Icons.Material.Filled.DarkMode" ToggledTitle="Dark Mode" />
         <MudIconButton Icon="@Icons.Material.Outlined.Info" Color="Color.Inherit" OnClick="@OpenAboutDialog" />
     </MudAppBar>
     <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
@@ -25,9 +28,10 @@
 
 @code {
     [Inject]
-    IDialogService? DialogService { get; set; }
+    public IDialogService? DialogService { get; set; }
 
-    bool _drawerOpen = true;
+    private bool _drawerOpen = true;
+    private MudTheme _theme = new();
 
     void DrawerToggle()
     {

diff --git a/DexieNETCloudSample/_Imports.razor b/DexieNETCloudSample/_Imports.razor
@@ -28,4 +28,5 @@
 @using RxMudBlazorLight.IconButtons
 @using RxMudBlazorLight.FabButtons
 @using RxMudBlazorLight.Inputs
-@using RxMudBlazorLight.Inputs.Select
+@using RxMudBlazorLight.Inputs.Select
+@using RxMudBlazorLight.ToggleIconButtons