Merge pull request #76 from SensitTechnologies/phoebe-product-association-dialog

Phoebe Improvements

Author: EyeBrawler

MESS/MESS.Blazor/Components/Pages/Phoebe/MenuBar/MenuBarPhoebe.razor

@@ -18,13 +18,15 @@
     <div class="menu-left-buttons">
         <button class="btn-small" @onclick="ToggleFileMenu" id="btnOpen1" aria-expanded="@open">File</button>
         <FluentMenu Anchor="btnOpen1" Open="@open" OpenChanged="@(val => open = val)" OnMenuChange="OnMenuChange" VerticalThreshold="170">
-            <FluentMenuItem OnClick="@(() => TriggerAndClose(OnNew))">New</FluentMenuItem>
+            <FluentMenuItem OnClick="@ShowNewInstructionDialog">New</FluentMenuItem>
+            <FluentDivider Style="width: 100%;" Orientation=Orientation.Horizontal></FluentDivider>
             <FluentMenuItem OnClick="@(() => TriggerImport())">Import</FluentMenuItem>
             <FluentMenuItem OnClick="@(() => TriggerExport())" Disabled="@(!HasInstruction)">Export</FluentMenuItem>
+            <FluentDivider Style="width: 100%;" Orientation=Orientation.Horizontal></FluentDivider>
             <FluentMenuItem OnClick="@(() => TriggerAndClose(OnSave))" Disabled="@(!IsDirty)">Save</FluentMenuItem>
-            <FluentMenuItem OnClick="@(() => LogAndClose("Save As"))">Save As</FluentMenuItem>
-            <FluentMenuItem OnClick="@(() => TriggerAndClose(OnRevertChanges))" Disabled="@(!IsDirty)">Revert Changes</FluentMenuItem>
+            <FluentMenuItem OnClick="@ShowSaveAsDialog" Disabled="@(!HasInstruction)">Save As</FluentMenuItem>
             <AuthorizeView Roles="Administrator">
+                <FluentDivider Style="width: 100%;" Orientation=Orientation.Horizontal></FluentDivider>
                 <FluentMenuItem OnClick="@(() => TriggerAndClose(OnDelete))">Delete</FluentMenuItem>
             </AuthorizeView>
         </FluentMenu>
@@ -38,7 +40,7 @@
         </FluentMenu>
     </div>
 
-    <div class="inputs-container">
+    <div class="inputs-container title-version-container">
         <input
             type="text"
             class="menu-input"
@@ -70,24 +72,33 @@
     </div>
 
     <div class="menu-right-content">
-        <button class="btn-small" title="Version History" @onclick="ToggleVersionHistorySidebar">⏲</button>
+        <button class="btn-small" title="Version History" @onclick="ToggleVersionHistorySidebar">
+            <i class="bi bi-clock-history"></i>
+        </button>
         <div class="save-button-container">
             <button class="btn-small" title="Save" @onclick="HandleSave" disabled="@(!IsDirty)">
-                🖫
+                <i class="bi bi-floppy"></i>
                 @if (IsDirty)
                 {
                     <span class="red-dot"></span>
                 }
             </button>
         </div>
-        <button class="btn-small dark-toggle-btn" title="Dark Mode" @onclick="ToggleDarkMode">@darkModeIcon</button>
+
+        <button class="btn-small dark-toggle-btn" title="Dark Mode" @onclick="ToggleDarkMode">
+            @((darkModeIcon == "bi bi-moon-stars") ? 
+                (MarkupString)"<i class=\"bi bi-moon-stars\"></i>" : 
+                (MarkupString)"<i class=\"bi bi-sun\"></i>")
+        </button>
 
         @if (!string.IsNullOrWhiteSpace(ActiveLineOperator))
         {
             <div class="logout-container">
                 <span>@ActiveLineOperator</span>
                 <form method="post" action="/api/auth/logout" class="logout-form">
-                    <button type="submit" class="btn-small" title="Logout">Logout</button>
+                    <button type="submit" class="btn-small" title="Logout">
+                        Logout <i class="bi bi-box-arrow-right ms-1"></i>
+                    </button>
                 </form>
             </div>
         }
@@ -114,6 +125,16 @@
     Visible="@showExportDialog"
     VisibleChanged="@(val => showExportDialog = val)" />
 
+<ProductAssociationDialog 
+    AllProducts="@Products"
+    SelectedProducts="@DialogSelectedProducts"
+    SelectedProductsChanged="OnDialogSelectedProductsChanged"
+    IsVisible="@isAnyDialogVisible"
+    IsVisibleChanged="@(val => isAnyDialogVisible = val)"
+    HeaderText="@dialogHeaderText"
+    ConfirmButtonText="@confirmButtonText"
+    OnConfirmed="@OnDialogConfirmed" />
+
 @code {
     private string? ActiveLineOperator { get; set; }
 
@@ -125,28 +146,29 @@
     public EventCallback OnSidebarToggle { get; set; }
 
     /// <summary>
-    /// Event callback triggered when the user selects "New" to create a new work instruction.
+    /// Event callback triggered when the user selects "New" to create a new work instruction. This passes up a work
+    /// instruction title and list of associated products.
     /// </summary>
-    [Parameter] public EventCallback OnNew { get; set; }
+    [Parameter] public EventCallback<(string Title, List<Product> Products)> OnNewConfirmed { get; set; }
 
     /// <summary>
     /// Event callback triggered when the user selects "Save" to persist current edits to the work instruction either
     /// via versioning or direct edits.
     /// </summary>
     [Parameter]
     public EventCallback OnSave { get; set; }
+    
+    /// <summary>
+    /// Callback invoked when the user confirms the "Save As" action from the dialog.
+    /// The associated products and work instruction title are passed up.
+    /// </summary>
+    [Parameter] public EventCallback<(string Title, List<Product> Products)> OnSaveAsConfirmed { get; set; }
 
     /// <summary>
     /// Event callback triggered when the user selects "Delete" to completely remove a work instruction.
     /// </summary>
     [Parameter]
     public EventCallback OnDelete { get; set; }
-
-    /// <summary>
-    /// Event callback triggered when the user selects "Revert Changes" to discard unsaved edits and restore the last saved state.
-    /// </summary>
-    [Parameter] 
-    public EventCallback OnRevertChanges { get; set; }
 
     /// <summary>
     /// Event callback triggered when the user restores a previous version from the version history sidebar.
@@ -162,7 +184,7 @@
 
     /// <summary>
     /// Indicates whether there are unsaved changes in the current work instruction editor session.
-    /// Used to enable or disable menu actions like Save or Revert Changes.
+    /// Used to enable or disable menu actions like Save.
     /// </summary>
     [Parameter] public bool IsDirty { get; set; }
 
@@ -198,15 +220,21 @@
 
     private bool open = false;
     private bool openOptions = false;
-    private string darkModeIcon = "🌙";
+    private string darkModeIcon = "bi bi-moon-stars";
     private bool HasInstruction => CurrentInstruction != null;
 
     private List<WorkInstruction> _versionHistoryList = new();
     private bool _isLoadingVersions = false;
 
     private bool showImportDialog;
-    
     private bool showExportDialog = false;
+    
+    private bool isAnyDialogVisible;
+    private string dialogHeaderText = "";
+    private string confirmButtonText = "";
+    private EventCallback<(string Title, List<Product> Products)> OnDialogConfirmed;
+    
+    private List<Product> DialogSelectedProducts { get; set; } = new List<Product>();
 
     /// <summary>
     /// The list of products to show in the dropdown.
@@ -282,7 +310,7 @@
     {
         await JS.InvokeVoidAsync("document.body.classList.toggle", "dark-mode");
         var isDark = await JS.InvokeAsync<bool>("document.body.classList.contains", "dark-mode");
-        darkModeIcon = isDark ? "☀️" : "🌙";
+        darkModeIcon = isDark ? "bi bi-sun" : "bi bi-moon-stars";
     }
 
     private async Task ToggleSidebar()
@@ -427,4 +455,43 @@
     {
         showImportDialog = isOpen;
     }
+    
+    private void ShowNewInstructionDialog()
+    {
+        isAnyDialogVisible = true;
+        dialogHeaderText = "Create New Work Instruction";
+        confirmButtonText = "Open New";
+        OnDialogConfirmed = EventCallback.Factory.Create<(string, List<Product>)>(this, HandleNewDialogConfirmed);
+    }
+
+    private void ShowSaveAsDialog()
+    {
+        isAnyDialogVisible = true;
+        DialogSelectedProducts = CurrentInstruction?.Products?.ToList() ?? new();
+        dialogHeaderText = "Save Work Instruction As";
+        confirmButtonText = "Save New";
+        OnDialogConfirmed = EventCallback.Factory.Create<(string, List<Product>)>(this, HandleSaveAsDialogConfirmed);
+    }
+    
+    private async Task HandleNewDialogConfirmed((string Title, List<Product> Products) data)
+    {
+        Log.Information("[MenuBarPhoebe] HandleNewDialogConfirmed called: {DataTitle}, {ProductsCount} products", data.Title, data.Products.Count);
+        isAnyDialogVisible = false;
+        if (OnNewConfirmed.HasDelegate)
+            await OnNewConfirmed.InvokeAsync(data);
+    }
+
+    private async Task HandleSaveAsDialogConfirmed((string Title, List<Product> Products) data)
+    {
+        Log.Information("[MenuBarPhoebe] HandleSaveAsDialogConfirmed called: {DataTitle}, {ProductsCount} products", data.Title, data.Products.Count);
+        isAnyDialogVisible = false;
+        if (OnSaveAsConfirmed.HasDelegate)
+            await OnSaveAsConfirmed.InvokeAsync(data);
+    }
+    
+    private Task OnDialogSelectedProductsChanged(List<Product> products)
+    {
+        DialogSelectedProducts = products;
+        return Task.CompletedTask;
+    }
 }

MESS/MESS.Blazor/Components/Pages/Phoebe/MenuBar/MenuBarPhoebe.razor.css

@@ -7,6 +7,8 @@
     --menu-border: #ffd502;
     --menu-item-color: #212529;
     --menu-item-hover-bg: #fff8cc; /* unused on hover now */
+    --input-disabled-bg: rgba(240, 240, 240, 0.85); /* Light neutral gray */
+    --input-disabled-color: #555;
 }
 
 body.dark-mode {
@@ -15,9 +17,9 @@ body.dark-mode {
     --btn-hover-bg: #ffdf33;
 
     --menu-bg: #1a1a1a;
-    --menu-border: #4a4300;
     --menu-item-color: #ffffff;
-    --menu-item-hover-bg: #333300; /* unused on hover now */
+    --input-disabled-bg: rgba(50, 50, 50, 0.8); /* Darker gray */
+    --input-disabled-color: #aaa;
 }
 
 /* === Menu Bar Layout === */
@@ -121,7 +123,6 @@ body.dark-mode .menu-bar-card {
     font-size: 0.9rem;
     border: none;
     border-radius: 0.25rem;
-    background-color: rgba(255, 255, 255, 0.8);
     min-width: 120px;
     transition: background-color 0.2s ease, box-shadow 0.2s ease;
     color: black;
@@ -138,18 +139,43 @@ body.dark-mode .menu-bar-card {
 .menu-input:focus,
 .menu-input-secondary:focus {
     outline: none;
-    box-shadow: 0 0 0 0.1rem rgba(255, 215, 0, 0.5);
 }
 
-body.dark-mode .menu-input,
-body.dark-mode .menu-input-secondary {
-    background-color: rgba(44, 44, 44, 0.7);
-    color: white;
+/* Default: only apply a neutral gray when disabled */
+.menu-input:disabled,
+.menu-input-secondary:disabled {
+    background-color: var(--input-disabled-bg) !important;
+    color: var(--input-disabled-color) !important;
 }
 
-body.dark-mode .menu-input::placeholder,
-body.dark-mode .menu-input-secondary::placeholder {
-    color: #aaa;
+/* Enabled inputs: almost white, with hover/focus transition */
+.menu-input:enabled,
+.menu-input-secondary:enabled {
+    background-color: #e8e8e8; /* light gray */
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    color: black;
+}
+
+.menu-input:enabled:hover,
+.menu-input:enabled:focus,
+.menu-input-secondary:enabled:hover,
+.menu-input-secondary:enabled:focus {
+    background-color: #f0f0f0; /* slightly lighter gray on hover/focus */
+    outline: none;
+}
+
+/* Dark mode support */
+body.dark-mode .menu-input:enabled,
+body.dark-mode .menu-input-secondary:enabled {
+    background-color: #2c2c2c;
+    color: #fff;
+}
+
+body.dark-mode .menu-input:enabled:hover,
+body.dark-mode .menu-input:enabled:focus,
+body.dark-mode .menu-input-secondary:enabled:hover,
+body.dark-mode .menu-input-secondary:enabled:focus {
+    background-color: #3a3a3a;
 }
 
 /* === Fluent Menu === */
@@ -178,28 +204,40 @@ fluent-menu-item:hover::part(control) {
     color: var(--menu-item-color) !important;
 }
 
+/* Dark mode fluent menu overrides */
 body.dark-mode fluent-menu::part(control),
 body.dark-mode fluent-menu-item::part(control) {
     background-color: var(--menu-bg) !important;
-    color: #fff !important;
+    color: var(--menu-item-color) !important;
 }
 
 body.dark-mode fluent-menu-item:hover::part(control) {
     background-color: #ffdf33 !important;
-    color: #fff !important;
+    color: black !important;
 }
 
 .save-button-container {
     position: relative;
     display: inline-block;
 }
 
+.save-button-container button {
+    position: relative; /* so the icon is the positioning context */
+}
+
 .red-dot {
     position: absolute;
-    top: 2px;
-    right: 2px;
-    height: 8px;
-    width: 8px;
+    bottom: 6px;
+    right: 11px;
+    height: 6px;
+    width: 6px;
     background-color: red;
     border-radius: 50%;
+    border: 1px solid transparent;
+    z-index: 100;
+    pointer-events: none;
 }
+
+
+
+