From 47543b316ec1792bcdc8b10a6465b96d75404a1b Mon Sep 17 00:00:00 2001
From: jschick04 <jschick04@gmail.com>
Date: Thu, 4 Jan 2024 11:09:22 -0600
Subject: [PATCH] Refactored modals to use a base class that handles shared
 functionality

---
 .../Models/FilterGroupModel.cs                | 11 +++++++
 .../Store/FilterGroup/FilterGroupAction.cs    |  9 ++++++
 .../Store/FilterGroup/FilterGroupReducers.cs  |  6 ++++
 .../Store/FilterGroup/FilterGroupState.cs     | 14 ++++++++
 .../Store/Settings/SettingsAction.cs          | 22 ++++++-------
 src/EventLogExpert/MainPage.xaml              |  1 +
 src/EventLogExpert/MainPage.xaml.cs           | 10 ++++--
 src/EventLogExpert/Shared/Base/BaseModal.cs   | 19 +++++++++++
 .../Components/Filters/FilterCacheModal.razor |  4 +--
 .../Filters/FilterCacheModal.razor.cs         |  7 ----
 .../Components/Filters/FilterGroupModal.razor | 18 +++++++++++
 .../Filters/FilterGroupModal.razor.cs         | 20 ++++++++++++
 .../Filters/FilterGroupModal.razor.css        | 22 +++++++++++++
 .../Shared/Components/SettingsModal.razor     |  5 ++-
 .../Shared/Components/SettingsModal.razor.cs  | 19 +++--------
 src/EventLogExpert/Shared/MainLayout.razor    |  1 +
 src/EventLogExpert/wwwroot/js/modals.js       | 32 ++++---------------
 17 files changed, 154 insertions(+), 66 deletions(-)
 create mode 100644 src/EventLogExpert.UI/Models/FilterGroupModel.cs
 create mode 100644 src/EventLogExpert.UI/Store/FilterGroup/FilterGroupAction.cs
 create mode 100644 src/EventLogExpert.UI/Store/FilterGroup/FilterGroupReducers.cs
 create mode 100644 src/EventLogExpert.UI/Store/FilterGroup/FilterGroupState.cs
 create mode 100644 src/EventLogExpert/Shared/Base/BaseModal.cs
 create mode 100644 src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor
 create mode 100644 src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.cs
 create mode 100644 src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.css

diff --git a/src/EventLogExpert.UI/Models/FilterGroupModel.cs b/src/EventLogExpert.UI/Models/FilterGroupModel.cs
new file mode 100644
index 00000000..1c0281cc
--- /dev/null
+++ b/src/EventLogExpert.UI/Models/FilterGroupModel.cs
@@ -0,0 +1,11 @@
+// // Copyright (c) Microsoft Corporation.
+// // Licensed under the MIT License.
+
+namespace EventLogExpert.UI.Models;
+
+public sealed record FilterGroupModel
+{
+    public string Name { get; set; } = string.Empty;
+
+    public IEnumerable<string> Filters { get; set; } = [];
+}
diff --git a/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupAction.cs b/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupAction.cs
new file mode 100644
index 00000000..1e064131
--- /dev/null
+++ b/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupAction.cs
@@ -0,0 +1,9 @@
+// // Copyright (c) Microsoft Corporation.
+// // Licensed under the MIT License.
+
+namespace EventLogExpert.UI.Store.FilterGroup;
+
+public sealed record FilterGroupAction
+{
+    public sealed record OpenMenu;
+}
diff --git a/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupReducers.cs b/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupReducers.cs
new file mode 100644
index 00000000..831d04d5
--- /dev/null
+++ b/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupReducers.cs
@@ -0,0 +1,6 @@
+// // Copyright (c) Microsoft Corporation.
+// // Licensed under the MIT License.
+
+namespace EventLogExpert.UI.Store.FilterGroup;
+
+public sealed class FilterGroupReducers { }
diff --git a/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupState.cs b/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupState.cs
new file mode 100644
index 00000000..ce8c3b46
--- /dev/null
+++ b/src/EventLogExpert.UI/Store/FilterGroup/FilterGroupState.cs
@@ -0,0 +1,14 @@
+// // Copyright (c) Microsoft Corporation.
+// // Licensed under the MIT License.
+
+using EventLogExpert.UI.Models;
+using Fluxor;
+using System.Collections.Immutable;
+
+namespace EventLogExpert.UI.Store.FilterGroup;
+
+[FeatureState]
+public sealed record FilterGroupState
+{
+    public ImmutableList<FilterGroupModel> Groups { get; init; } = [];
+}
diff --git a/src/EventLogExpert.UI/Store/Settings/SettingsAction.cs b/src/EventLogExpert.UI/Store/Settings/SettingsAction.cs
index 83a26832..0e7113fa 100644
--- a/src/EventLogExpert.UI/Store/Settings/SettingsAction.cs
+++ b/src/EventLogExpert.UI/Store/Settings/SettingsAction.cs
@@ -5,25 +5,25 @@
 
 namespace EventLogExpert.UI.Store.Settings;
 
-public record SettingsAction
+public sealed record SettingsAction
 {
-    public record LoadColumns : SettingsAction;
+    public sealed record LoadColumns;
 
-    public record LoadColumnsCompleted(IDictionary<ColumnName, bool> LoadedColumns) : SettingsAction;
+    public sealed record LoadColumnsCompleted(IDictionary<ColumnName, bool> LoadedColumns);
 
-    public record LoadDatabases : SettingsAction;
+    public sealed record LoadDatabases;
 
-    public record LoadDatabasesCompleted(IEnumerable<string> LoadedDatabases) : SettingsAction;
+    public sealed record LoadDatabasesCompleted(IEnumerable<string> LoadedDatabases);
 
-    public record LoadSettings : SettingsAction;
+    public sealed record LoadSettings;
 
-    public record LoadSettingsCompleted(SettingsModel Config) : SettingsAction;
+    public sealed record LoadSettingsCompleted(SettingsModel Config);
 
-    public record OpenMenu : SettingsAction;
+    public sealed record OpenMenu;
 
-    public record Save(SettingsModel Settings) : SettingsAction;
+    public sealed record Save(SettingsModel Settings);
 
-    public record SaveCompleted(SettingsModel Settings) : SettingsAction;
+    public sealed record SaveCompleted(SettingsModel Settings);
 
-    public record ToggleColumn(ColumnName ColumnName) : SettingsAction;
+    public sealed record ToggleColumn(ColumnName ColumnName);
 }
diff --git a/src/EventLogExpert/MainPage.xaml b/src/EventLogExpert/MainPage.xaml
index 96105f2f..093d28ff 100644
--- a/src/EventLogExpert/MainPage.xaml
+++ b/src/EventLogExpert/MainPage.xaml
@@ -40,6 +40,7 @@
             <MenuFlyoutItem Text="Continuously Update" Clicked="ContinuouslyUpdate_Clicked" x:Name="ContinuouslyUpdateMenuItem" />
             <MenuFlyoutItem Text="Show All Events" Clicked="ShowAllEvents_Clicked" x:Name="ShowAllEventsMenuItem" />
             <MenuFlyoutItem Text="Show Cached Filters" Clicked="ViewRecentFilters_Clicked" />
+            <MenuFlyoutItem Text="Show Filter Groups" Clicked="ViewFilterGroups_Clicked" />
         </MenuBarItem>
         <MenuBarItem Text="Tools">
             <MenuFlyoutItem Text="Settings" Clicked="OpenSettingsModal_Clicked" />
diff --git a/src/EventLogExpert/MainPage.xaml.cs b/src/EventLogExpert/MainPage.xaml.cs
index a777e113..6fae2e5e 100644
--- a/src/EventLogExpert/MainPage.xaml.cs
+++ b/src/EventLogExpert/MainPage.xaml.cs
@@ -11,6 +11,7 @@
 using EventLogExpert.UI.Services;
 using EventLogExpert.UI.Store.EventLog;
 using EventLogExpert.UI.Store.FilterCache;
+using EventLogExpert.UI.Store.FilterGroup;
 using EventLogExpert.UI.Store.FilterPane;
 using EventLogExpert.UI.Store.Settings;
 using Fluxor;
@@ -207,9 +208,6 @@ private void CloseAll_Clicked(object? sender, EventArgs e)
         _fluxorDispatcher.Dispatch(new EventLogAction.CloseAll());
     }
 
-    private void ShowAllEvents_Clicked(object sender, EventArgs e) =>
-        _fluxorDispatcher.Dispatch(new FilterPaneAction.ToggleIsEnabled());
-
     private void ContinuouslyUpdate_Clicked(object sender, EventArgs e) =>
         _fluxorDispatcher.Dispatch(((MenuFlyoutItem)sender).Text == "Continuously Update" ?
             new EventLogAction.SetContinouslyUpdate(true) :
@@ -364,6 +362,9 @@ private async void ReleaseNotes_Clicked(object sender, EventArgs e)
         await _updateService.GetReleaseNotes();
     }
 
+    private void ShowAllEvents_Clicked(object sender, EventArgs e) =>
+        _fluxorDispatcher.Dispatch(new FilterPaneAction.ToggleIsEnabled());
+
     private async void SubmitAnIssue_Clicked(object sender, EventArgs e)
     {
         try
@@ -377,6 +378,9 @@ private async void SubmitAnIssue_Clicked(object sender, EventArgs e)
         }
     }
 
+    private void ViewFilterGroups_Clicked(object? sender, EventArgs e) =>
+        _fluxorDispatcher.Dispatch(new FilterGroupAction.OpenMenu());
+
     private void ViewRecentFilters_Clicked(object sender, EventArgs e) =>
         _fluxorDispatcher.Dispatch(new FilterCacheAction.OpenMenu());
 }
diff --git a/src/EventLogExpert/Shared/Base/BaseModal.cs b/src/EventLogExpert/Shared/Base/BaseModal.cs
new file mode 100644
index 00000000..8cbf03e6
--- /dev/null
+++ b/src/EventLogExpert/Shared/Base/BaseModal.cs
@@ -0,0 +1,19 @@
+// // Copyright (c) Microsoft Corporation.
+// // Licensed under the MIT License.
+
+using Fluxor.Blazor.Web.Components;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace EventLogExpert.Shared.Base;
+
+public abstract class BaseModal : FluxorComponent
+{
+    protected ElementReference ElementReference { get; set; }
+
+    [Inject] protected IJSRuntime JSRuntime { get; set; } = null!;
+
+    protected async Task Close() => await JSRuntime.InvokeVoidAsync("closeModal", ElementReference);
+
+    protected async Task Open() => await JSRuntime.InvokeVoidAsync("openModal", ElementReference);
+}
diff --git a/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor b/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor
index e89d4059..abe35d7b 100644
--- a/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor
+++ b/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor
@@ -1,9 +1,9 @@
 @using EventLogExpert.UI.Store.FilterCache
-@inherits FluxorComponent
+@inherits Base.BaseModal
 
 @inject IState<FilterCacheState> FilterCacheState
 
-<dialog id="filterCacheDialog">
+<dialog id="filterCacheDialog" @ref="ElementReference">
     <div class="dialog-group">
         <div class="flex-column-scroll">
             @if (FilterCacheState.Value.FavoriteFilters.Any())
diff --git a/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor.cs b/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor.cs
index 9990137b..fd93dd7d 100644
--- a/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor.cs
+++ b/src/EventLogExpert/Shared/Components/Filters/FilterCacheModal.razor.cs
@@ -6,7 +6,6 @@
 using EventLogExpert.UI.Store.FilterCache;
 using EventLogExpert.UI.Store.FilterPane;
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
 using System.Text.Json;
 using Windows.Storage.Pickers;
 using WinRT.Interop;
@@ -20,8 +19,6 @@ public sealed partial class FilterCacheModal
 
     [Inject] private IDispatcher Dispatcher { get; set; } = null!;
 
-    [Inject] private IJSRuntime JSRuntime { get; set; } = null!;
-
     protected override void OnInitialized()
     {
         SubscribeToAction<FilterCacheAction.OpenMenu>(action => Open().AndForget());
@@ -41,8 +38,6 @@ private void AddFilter(string filter)
         Close().AndForget();
     }
 
-    private async Task Close() => await JSRuntime.InvokeVoidAsync("closeFilterCacheModal");
-
     private async Task ExportFavorites()
     {
         FileSavePicker picker = new()
@@ -114,8 +109,6 @@ await AlertDialogService.ShowAlert("Import Failed",
         }
     }
 
-    private async Task Open() => await JSRuntime.InvokeVoidAsync("openFilterCacheModal");
-
     private void RemoveFavorite(string filter) =>
         Dispatcher.Dispatch(new FilterCacheAction.RemoveFavoriteFilter(filter));
 }
diff --git a/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor b/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor
new file mode 100644
index 00000000..22fcb4ea
--- /dev/null
+++ b/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor
@@ -0,0 +1,18 @@
+@inherits Base.BaseModal
+
+<dialog id="filterGroupDialog" @ref="ElementReference">
+    <div class="dialog-group">
+        <div class="flex-column-scroll">
+            
+        </div>
+
+        <div class="footer-group">
+            <div>
+                <button class="button" @onclick="Import">Import</button>
+                <button class="button" @onclick="Export">Export</button>
+            </div>
+
+            <button class="button" @onclick="Close">Exit</button>
+        </div>
+    </div>
+</dialog>
diff --git a/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.cs b/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.cs
new file mode 100644
index 00000000..b4769a17
--- /dev/null
+++ b/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.cs
@@ -0,0 +1,20 @@
+// // Copyright (c) Microsoft Corporation.
+// // Licensed under the MIT License.
+
+using EventLogExpert.UI.Store.FilterGroup;
+
+namespace EventLogExpert.Shared.Components.Filters;
+
+public partial class FilterGroupModal
+{
+    protected override void OnInitialized()
+    {
+        SubscribeToAction<FilterGroupAction.OpenMenu>(action => Open().AndForget());
+
+        base.OnInitialized();
+    }
+
+    private void Export() { }
+
+    private void Import() { }
+}
diff --git a/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.css b/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.css
new file mode 100644
index 00000000..5096f217
--- /dev/null
+++ b/src/EventLogExpert/Shared/Components/Filters/FilterGroupModal.razor.css
@@ -0,0 +1,22 @@
+dialog {
+    height: 60%;
+    min-width: 50rem;
+
+    color: var(--clr-lightblue);
+    border-color: var(--clr-statusbar);
+    background-color: var(--background-dark);
+}
+
+.dialog-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    
+    height: 100%;
+}
+
+.divider {
+    width: 95%;
+    align-self: center;
+    border-top: 3px solid var(--clr-lightblue);
+}
diff --git a/src/EventLogExpert/Shared/Components/SettingsModal.razor b/src/EventLogExpert/Shared/Components/SettingsModal.razor
index ed93b343..991b93da 100644
--- a/src/EventLogExpert/Shared/Components/SettingsModal.razor
+++ b/src/EventLogExpert/Shared/Components/SettingsModal.razor
@@ -1,10 +1,9 @@
 @using EventLogExpert.UI.Store.Settings
 @using Microsoft.Extensions.Logging
 @using EventLogExpert.UI
+@inherits Base.BaseModal
 
-@inject IState<SettingsState> SettingsState
-
-<dialog id="settingsDialog">
+<dialog id="settingsDialog" @ref="ElementReference">
 
     <EditForm id="settings-form" Model="_request" OnValidSubmit="Save">
         <div class="flex-column-scroll">
diff --git a/src/EventLogExpert/Shared/Components/SettingsModal.razor.cs b/src/EventLogExpert/Shared/Components/SettingsModal.razor.cs
index 99eae7ea..0dd451f7 100644
--- a/src/EventLogExpert/Shared/Components/SettingsModal.razor.cs
+++ b/src/EventLogExpert/Shared/Components/SettingsModal.razor.cs
@@ -8,21 +8,18 @@
 using EventLogExpert.UI.Store.Settings;
 using Fluxor;
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
 using System.IO.Compression;
 using IDispatcher = Fluxor.IDispatcher;
 
 namespace EventLogExpert.Shared.Components;
 
-public sealed partial class SettingsModal : IDisposable
+public sealed partial class SettingsModal
 {
     private readonly Dictionary<string, bool> _databases = [];
 
     private bool _hasDatabasesChanged = false;
     private SettingsModel _request = new();
 
-    [Inject] private IActionSubscriber ActionSubscriber { get; init; } = null!;
-
     [Inject] private IAlertDialogService AlertDialogService { get; init; } = null!;
 
     [Inject] private IDispatcher Dispatcher { get; init; } = null!;
@@ -31,19 +28,15 @@ public sealed partial class SettingsModal : IDisposable
 
     [Inject] private FileLocationOptions FileLocationOptions { get; init; } = null!;
 
-    [Inject] private IJSRuntime JSRuntime { get; init; } = null!;
-
-    public void Dispose() => ActionSubscriber.UnsubscribeFromAllActions(this);
+    [Inject] private IState<SettingsState> SettingsState { get; init; } = null!;
 
     protected override void OnInitialized()
     {
-        ActionSubscriber.SubscribeToAction<SettingsAction.OpenMenu>(this, action => Open().AndForget());
+        SubscribeToAction<SettingsAction.OpenMenu>(action => Load().AndForget());
 
         base.OnInitialized();
     }
 
-    private async Task Close() => await JSRuntime.InvokeVoidAsync("closeSettingsModal");
-
     private async void ImportDatabase()
     {
         PickOptions options = new()
@@ -99,7 +92,7 @@ await AlertDialogService.ShowAlert("Import Failed",
         await ReloadOpenLogs();
     }
 
-    private async Task Open()
+    private async Task Load()
     {
         _request = SettingsState.Value.Config with
         {
@@ -120,11 +113,9 @@ private async Task Open()
 
         await InvokeAsync(StateHasChanged);
 
-        await OpenModal();
+        await Open();
     }
 
-    private async Task OpenModal() => await JSRuntime.InvokeVoidAsync("openSettingsModal");
-
     private async Task ReloadOpenLogs()
     {
         if (EventLogState.Value.ActiveLogs.IsEmpty) { return; }
diff --git a/src/EventLogExpert/Shared/MainLayout.razor b/src/EventLogExpert/Shared/MainLayout.razor
index fb927621..382f18f5 100644
--- a/src/EventLogExpert/Shared/MainLayout.razor
+++ b/src/EventLogExpert/Shared/MainLayout.razor
@@ -8,6 +8,7 @@
 
 <SettingsModal />
 <FilterCacheModal />
+<FilterGroupModal />
 
 <TableColumnMenu />
 <ContextMenu />
diff --git a/src/EventLogExpert/wwwroot/js/modals.js b/src/EventLogExpert/wwwroot/js/modals.js
index d796e197..9c8dc14e 100644
--- a/src/EventLogExpert/wwwroot/js/modals.js
+++ b/src/EventLogExpert/wwwroot/js/modals.js
@@ -1,31 +1,11 @@
-window.openSettingsModal = () => {
-    const settingsModal = document.getElementById("settingsDialog");
-
-    if (settingsModal != null) {
-        settingsModal.showModal();
+window.openModal = (ref) => {
+    if (ref != null) {
+        ref.showModal();
     }
 };
 
-window.closeSettingsModal = () => {
-    const settingsModal = document.getElementById("settingsDialog");
-
-    if (settingsModal != null) {
-        settingsModal.close();
+window.closeModal = (ref) => {
+    if (ref != null) {
+        ref.close();
     }
 };
-
-window.openFilterCacheModal = () => {
-    const filterCacheModal = document.getElementById("filterCacheDialog");
-
-    if (filterCacheModal != null) {
-        filterCacheModal.showModal();
-    }
-};
-
-window.closeFilterCacheModal = () => {
-    const filterCacheModal = document.getElementById("filterCacheDialog");
-
-    if (filterCacheModal != null) {
-        filterCacheModal.close();
-    }
-};
\ No newline at end of file