feat: add context menu to configuration setting table

Author: tnc1997

src/AzureAppConfigurationEmulator/Components/ConfigurationSettingTable.razor

@@ -7,6 +7,7 @@
         <AzureTableHeaderCell>Label</AzureTableHeaderCell>
         <AzureTableHeaderCell>Last modified</AzureTableHeaderCell>
         <AzureTableHeaderCell>Content type</AzureTableHeaderCell>
+        <AzureTableHeaderCell class="w-[24px]"></AzureTableHeaderCell>
     </HeaderContent>
 
     <RowTemplate>
@@ -15,15 +16,41 @@
         <AzureTableDataCell>@(!string.IsNullOrEmpty(context.Label) ? context.Label : "(No label)")</AzureTableDataCell>
         <AzureTableDataCell>@context.LastModified.ToString("G")</AzureTableDataCell>
         <AzureTableDataCell>@context.ContentType</AzureTableDataCell>
+        <AzureTableDataCell>
+            @{ var id = Guid.NewGuid().ToString(); }
+
+            <AzureIcon id="@id" Value="@(new AzureIcon.Icons.Regular.Size16.EllipsisHorizontal())"/>
+
+            <AzureMenu Anchor="@id" Anchored="@false" Trigger="AzureMenu.MouseButton.Left">
+                <AzureMenuItem OnClick="@(() => HandleEditClick(context))">Edit</AzureMenuItem>
+                <AzureMenuItem OnClick="@(() => HandleDeleteClick(context))">Delete</AzureMenuItem>
+            </AzureMenu>
+        </AzureTableDataCell>
     </RowTemplate>
 </AzureTable>
 
 @code {
+
     [Parameter] public IEnumerable<ConfigurationSetting> ConfigurationSettings { get; set; } = [];
 
     [Parameter] public bool IsValuesHidden { get; set; }
 
+    [Parameter] public EventCallback<ConfigurationSetting> OnDeleteClick { get; set; }
+
+    [Parameter] public EventCallback<ConfigurationSetting> OnEditClick { get; set; }
+
     [Parameter] public ICollection<ConfigurationSetting> SelectedConfigurationSettings { get; set; } = [];
 
     [Parameter] public EventCallback<ICollection<ConfigurationSetting>> SelectedConfigurationSettingsChanged { get; set; }
+
+    private async Task HandleDeleteClick(ConfigurationSetting setting)
+    {
+        await OnDeleteClick.InvokeAsync(setting);
+    }
+
+    private async Task HandleEditClick(ConfigurationSetting setting)
+    {
+        await OnEditClick.InvokeAsync(setting);
+    }
+
 }

src/AzureAppConfigurationEmulator/Components/Pages/ConfigurationExplorer.razor

@@ -21,8 +21,8 @@
 
         <AzureToolbarDivider/>
 
-        <AzureToolbarButton IsDisabled="@(SelectedConfigurationSettings is not { Count: 1 })" Label="Edit" OnClick="@HandleEditClick"/>
-        <AzureToolbarButton IsDisabled="@(SelectedConfigurationSettings is { Count: 0 })" Label="Delete" OnClick="@HandleDeleteClick"/>
+        <AzureToolbarButton IsDisabled="@(SelectedConfigurationSettings is not { Count: 1 })" Label="Edit" OnClick="@(() => HandleEditClick(SelectedConfigurationSettings.Single()))"/>
+        <AzureToolbarButton IsDisabled="@(SelectedConfigurationSettings is { Count: 0 })" Label="Delete" OnClick="@(() => HandleDeleteClick(SelectedConfigurationSettings.ToArray()))"/>
     </AzureToolbar>
 
     <div class="p-5">
@@ -42,7 +42,7 @@
     </div>
 
     <div class="mx-5">
-        <ConfigurationSettingTable @bind-SelectedConfigurationSettings="@SelectedConfigurationSettings" ConfigurationSettings="@FilteredConfigurationSettings" IsValuesHidden="@IsValuesHidden"/>
+        <ConfigurationSettingTable @bind-SelectedConfigurationSettings="@SelectedConfigurationSettings" ConfigurationSettings="@FilteredConfigurationSettings" IsValuesHidden="@IsValuesHidden" OnDeleteClick="@(setting => HandleDeleteClick(setting))" OnEditClick="@(setting => HandleEditClick(setting))"/>
     </div>
 </div>
 
@@ -69,7 +69,7 @@
         }
     }
 
-    private async Task HandleCreateClick(MouseEventArgs args)
+    private async Task HandleCreateClick()
     {
         var reference = await DialogService.Show<ConfigurationSettingCreateDialog>();
         var result = await reference.Result;
@@ -82,37 +82,34 @@
         }
     }
 
-    private async Task HandleEditClick(MouseEventArgs args)
+    private async Task HandleEditClick(ConfigurationSetting setting)
     {
         var parameters = new Dictionary<string, object?>
         {
             {
                 nameof(ConfigurationSettingEditDialog.ConfigurationSetting),
-                SelectedConfigurationSettings.Single()
+                setting
             }
         };
 
         var reference = await DialogService.Show<ConfigurationSettingEditDialog>(parameters);
         var result = await reference.Result;
-        if (result is { Data: ConfigurationSetting setting })
+        if (result is { Data: ConfigurationSetting data })
         {
-            await ConfigurationSettingRepository.Update(setting);
+            await ConfigurationSettingRepository.Update(data);
 
-            if (ConfigurationSettings.IndexOf(SelectedConfigurationSettings.Single()) is var index and not -1)
+            if (ConfigurationSettings.IndexOf(setting) is var index and not -1)
             {
                 ConfigurationSettings.RemoveAt(index);
-                ConfigurationSettings.Insert(index, setting);
+                ConfigurationSettings.Insert(index, data);
                 StateHasChanged();
             }
-
-            SelectedConfigurationSettings.Clear();
-            StateHasChanged();
         }
     }
 
-    private async Task HandleDeleteClick(MouseEventArgs args)
+    private async Task HandleDeleteClick(params ConfigurationSetting[] settings)
     {
-        foreach (var setting in SelectedConfigurationSettings.ToList())
+        foreach (var setting in settings)
         {
             await ConfigurationSettingRepository.Remove(setting);
 
@@ -123,7 +120,7 @@
         }
     }
 
-    private async Task HandleRefreshClick(MouseEventArgs args)
+    private async Task HandleRefreshClick()
     {
         ConfigurationSettings.Clear();
         StateHasChanged();
@@ -138,7 +135,7 @@
         }
     }
 
-    private void HandleValuesClick(MouseEventArgs args)
+    private void HandleValuesClick()
     {
         IsValuesHidden = !IsValuesHidden;
         StateHasChanged();