created generic confirmation dialog control and implemented in File Management module

Oqtane.Client/Modules/Admin/Files/Index.razor

@@ -9,18 +9,16 @@
 }
 else
 {
-    <ActionLink Action="Add" Text="Add Files" Style="float: right; margin: 10px;" />
+    <ActionLink Action="Add" Text="Add Files" />
 
     <Pager Items="@Files">
         <Header>
-            <th>Name</th>
             <th>&nbsp;</th>
+            <th>Name</th>
         </Header>
         <Row>
+            <td><ConfirmationDialog Header="Delete File" Message="@("Are You Sure You Wish To Delete " + context + "?")" Action="Delete" Class="btn btn-danger" OnClick="@(async () => await DeleteFile(context))" /></td>
             <td><a href="@(uri.Scheme + "://" + uri.Authority + "/" + PageState.Site.SiteRootPath + context)" target="_new">@context</a></td>
-            <td>
-                <button type="button" class="btn btn-danger" @onclick=@(async () => await DeleteFile(context))>Delete</button>
-            </td>
         </Row>
     </Pager>
 }
@@ -40,7 +38,7 @@ else
         }
         catch (Exception ex)
         {
-            await logger.LogError("Error Loading Files {Error}", ex.Message);
+            await logger.LogError(ex, "Error Loading Files {Error}", ex.Message);
             AddModuleMessage("Error Loading Files", MessageType.Error);
         }
     }
@@ -51,13 +49,13 @@ else
         {
             await FileService.DeleteFileAsync(PageState.Site.SiteRootPath, filename);
             Files = await FileService.GetFilesAsync(PageState.Site.SiteRootPath);
-            await logger.LogInformation("File Deleted");
-            AddModuleMessage("File Deleted", MessageType.Success);
+            await logger.LogInformation("File Deleted {File}", filename);
+            AddModuleMessage("File " + filename + " Deleted", MessageType.Success);
         }
         catch (Exception ex)
         {
-            await logger.LogError("Error Deleting File {Error}", ex.Message);
-            AddModuleMessage("Error Deleting File", MessageType.Error);
+            await logger.LogError(ex, "Error Deleting File {File} {Error}", filename, ex.Message);
+            AddModuleMessage("Error Deleting File " + filename, MessageType.Error);
         }
     }
 }

Oqtane.Client/Modules/Controls/ConfirmationDialog.razor

@@ -0,0 +1,69 @@
+@namespace Oqtane.Modules.Controls
+@inherits ModuleBase
+
+@if (visible)
+{
+    <div class="app-admin-modal">
+        <div class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">@Header</h5>
+                        <button type="button" class="close" @onclick="DisplayModal" aria-label="Close">&times;</button>
+                    </div>
+                    <div class="modal-body">
+                        <p>@Message</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="@Class" @onclick="Confirm">@Action</button>
+                        <button type="button" class="btn btn-secondary" @onclick="DisplayModal">Cancel</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+<button class="@Class" @onclick="DisplayModal">@Action</button>
+
+@code {
+    [Parameter]
+    public string Header { get; set; }
+
+    [Parameter]
+    public string Message { get; set; }
+
+    [Parameter]
+    public string Action { get; set; }
+
+    [Parameter]
+    public string Class { get; set; }
+
+    [Parameter]
+    public Action OnClick { get; set; }
+
+    bool visible = false;
+
+    protected override void OnParametersSet()
+    {
+        if (string.IsNullOrEmpty(Action))
+        {
+            Action = "Ok";
+        }
+        if (string.IsNullOrEmpty(Class))
+        {
+            Class = "btn btn-success";
+        }
+    }
+
+    private void DisplayModal()
+    {
+        visible = !visible;
+        StateHasChanged();
+    }
+
+    private void Confirm()
+    {
+        DisplayModal();
+        OnClick();
+    }
+}

Oqtane.Client/Themes/AdminContainer.razor

@@ -3,14 +3,12 @@
 @inject NavigationManager NavigationManager
 
 <div class="app-admin-modal">
-    <div class="modal" style="display: block">
-        <div class="modal-dialog" role="document">
+    <div class="modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title"><ModuleTitle /></h5>
-                    <button type="button" class="close" @onclick="CloseModal" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="close" @onclick="CloseModal" aria-label="Close">&times;</button>
                 </div>
                 <div class="modal-body">
                     <ModuleInstance />

Oqtane.Client/wwwroot/css/app.css

@@ -44,6 +44,7 @@ app {
     z-index: 9999; /* Sit on top */
     left: 0;
     top: 0;
+    display: block;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */

Oqtane.Server/wwwroot/css/app.css

@@ -44,6 +44,7 @@ app {
     z-index: 9999; /* Sit on top */
     left: 0;
     top: 0;
+    display: block;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */