Introduction of the template FilesWithEditor

Seenginx.Components/FileItem.razor

@@ -0,0 +1,3 @@
+@inherits FileItemBase
+
+

Seenginx.Components/FileItem.razor.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Components;
+using Seenginx.Models;
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace Seenginx.Components
+{
+	public class FileItemBase : ComponentBase
+	{
+		[Parameter]
+		public ConfigFile File { get; set; }
+
+
+	}
+}

Seenginx.Components/FilesWithEditor.razor

@@ -0,0 +1,65 @@
+@typeparam CFile
+
+<div class="tile is-ancestor">
+
+	<div class="tile is-parent is-vertical is-3">
+		<div class="content">
+			<p>
+				@foreach (var filter in Filters)
+				{
+					<span class="tag is-light">@filter</span>
+				}
+			</p>
+		</div>
+		<div class="content">
+			<div class="field">
+				<div class="control">
+					<InputText Value="SearchInput" ValueChanged="OnSearchChanged" class="input is-primary" type="text" placeholder="Search..." />
+				</div>
+			</div>
+		</div>
+		<div class="content">
+			<aside class="menu">
+				<ul class="menu-list">
+					@foreach (var file in Files)
+					{
+						<li>
+							<FileItem File="file" @onclick="OnFileClick(file)"></FileItem>
+						</li>
+					}
+					<li><a>Dashboard</a></li>
+					<li><a>Customers</a></li>
+				</ul>
+			</aside>
+		</div>
+		<div class="content">
+			<div class="buttons has-addons">
+				<button class="button is-primary">
+					<span class="icon is-small">
+						<i class="mdi mdi-plus-box-outline"></i>
+					</span>
+					Add
+				</button>
+				<button class="button is-warning">
+					<span class="icon is-small">
+						<i class="mdi mdi-pencil-box-outline"></i>
+					</span>
+					Update
+				</button>
+				<button class="button is-danger">
+					<span class="icon is-small">
+						<i class="mdi mdi-minus-box-outline"></i>
+					</span>
+					Delete
+				</button>
+			</div>
+		</div>
+
+	</div>
+
+	<div class="tile is-parent is-vertical is-9">
+		@Editor
+	</div>
+
+</div>
+

Seenginx.Components/FilesWithEditor.razor.cs

@@ -0,0 +1,87 @@
+using Microsoft.AspNetCore.Components;
+using Seenginx.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Seenginx.Components
+{
+	public partial class FilesWithEditor<CFile> : ComponentBase
+		where CFile : ConfigFile
+	{
+		[Parameter]
+		public List<CFile> Files { get; set; } = new List<CFile>();
+
+		[Parameter]
+		public List<string> Filters { get; set; } = new List<string>();
+		[Parameter]
+		public List<int> FilteredOutFiles { get; set; } = new List<int>();
+		[Parameter]
+		public EventCallback<string> ApplyFilter { get; set; }
+
+		[Parameter]
+		public RenderFragment<CFile> Editor { get; set; }
+
+		[Parameter]
+		public RenderFragment<CFile> CreateDialog { get; set; }
+
+		[Parameter]
+		public RenderFragment<CFile> UpdateDialog { get; set; }
+
+		[Parameter]
+		public RenderFragment<CFile> DeleteDialog { get; set; }
+
+		protected bool IsAnyFileSelected => SelectedFile != default;
+
+		private CFile SelectedFile { get; set; }
+
+		protected string SearchInput { get; set; }
+
+		protected async Task OnDeselectClick()
+		{
+			SelectedFile = null;
+			//Clean on the right
+		}
+
+		protected async Task OnFilterClick(EventArgs e, string filter)
+		{
+			await ApplyFilter.InvokeAsync(filter);
+			for (int index = 0; index < Files.Count; index++)
+				if (FilteredOutFiles.Contains(index))
+					Files[index].Hide();
+				else
+					Files[index].Unhide();
+		}
+
+		protected async Task OnSearchChanged()
+		{
+			if (string.IsNullOrEmpty(SearchInput))
+				Files.ForEach(f => f.Hide());
+			else
+				Files.ForEach(f =>
+				{
+					if (f.Name.ToLower().Contains(SearchInput.ToLower()))
+						f.Unhide();
+					else
+						f.Hide();
+				});
+		}
+
+		protected async Task OnFileClick(CFile file)
+		{
+			SelectedFile = file;
+		}
+
+		protected async Task OnCreateFile()
+		{
+		}
+		protected async Task OnUpdateDialog(CFile file)
+		{
+		}
+		protected async Task OnDeleteDialog(CFile file)
+		{
+		}
+	}
+}

Seenginx.Components/Seenginx.Components.csproj

@@ -14,7 +14,7 @@
 
 
   <ItemGroup>
-    <Folder Include="wwwroot\" />
+    <ProjectReference Include="..\Seenginx.Models\Seenginx.Models.csproj" />
   </ItemGroup>
 
 </Project>

Seenginx.Components/_Imports.razor

@@ -1,3 +1,2 @@
 @using Microsoft.AspNetCore.Components.Web
-@*@using Radzen*@
-@*@using Radzen.Blazor*@
+@using Microsoft.AspNetCore.Components.Forms

Seenginx.Models/ConfigFile.cs

@@ -16,5 +16,9 @@ namespace Seenginx.Models
 		public string[] Owners { get; set; }
 		public string Permissions { get; set; }
 		public bool CanBeDeleted { get; set; } = true;
+		public string IsVisible { get; set; } = string.Empty;
+
+		public void Hide() { IsVisible = "hide"; }
+		public void Unhide() { IsVisible = string.Empty; }
 	}
 }

Seenginx.sln

@@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Seenginx", "Seenginx\Seengi
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Seenginx.Models", "Seenginx.Models\Seenginx.Models.csproj", "{DF2CB075-2A33-4EAE-BB1C-7DEDA0D84A9D}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Seenginx.Components", "Seenginx.Components\Seenginx.Components.csproj", "{EB02BCC6-1B40-44FB-9493-ACAD2E0AB963}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Seenginx.Components", "Seenginx.Components\Seenginx.Components.csproj", "{EB02BCC6-1B40-44FB-9493-ACAD2E0AB963}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

Seenginx/Pages/Nginx.razor

@@ -2,33 +2,17 @@
 @page "/nginx"
 
 
-<RadzenTabs>
-	<Tabs>
-		<RadzenTabsItem Text="Configuration">
 
-			<div class="pure-g">
-				<div class="pure-u-1-5">
-					<p>Configuration Files</p>
-					<RadzenListBox AllowFiltering="true"
-												 FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
-												 @bind-Value="InputSearch"
-												 Data="@ConfigFiles"
-												 TextProperty="Name"
-												 ValueProperty="Name"
-												 Change="@(args => Change(args, "ListBox with filtering"))"
-												 Style="margin-bottom: 20px; height:200px;" />
-				</div>
+<div class="pure-g">
+	<div class="pure-u-1-5">
+		<p>Configuration Files</p>
+		heh
+	</div>
 
-				<div class="pure-u-4-5">
-					<h1>
-						Hello
-					</h1>
-				</div>
-			</div>
+	<div class="pure-u-4-5">
+		<h1>
+			Hello
+		</h1>
+	</div>
+</div>
 
-		</RadzenTabsItem>
-		<RadzenTabsItem Text="Logs">
-
-		</RadzenTabsItem>
-	</Tabs>
-</RadzenTabs>

Seenginx/Pages/NginxLogs.razor

@@ -0,0 +1,18 @@
+@inherits NginxLogsBase
+@page "/nginx/logs"
+
+
+
+<div class="pure-g">
+	<div class="pure-u-1-5">
+		<p>Configuration Files</p>
+		heh
+	</div>
+
+	<div class="pure-u-4-5">
+		<h1>
+			Hello
+		</h1>
+	</div>
+</div>
+

Seenginx/Pages/NginxLogs.razor.cs

@@ -0,0 +1,37 @@
+using Microsoft.AspNetCore.Components;
+using Radzen;
+using Radzen.Blazor;
+using Seenginx.Models;
+using Seenginx.Services;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.InteropServices;
+using System.Threading.Tasks;
+
+namespace Seenginx.Pages
+{
+	public class NginxLogsBase : ComponentBase
+	{
+		[Inject]
+		public INginxService NginxService { get; set; }
+
+		public string InputSearch { get; set; }
+
+		public List<ConfigFile> ConfigFiles { get; set; } = new List<ConfigFile>();
+
+		protected override async Task OnInitializedAsync()
+		{
+			ConfigFiles.AddRange(await NginxService.GetFilesAsync());
+			await base.OnInitializedAsync();
+		}
+
+		protected void Change(object value, string name)
+		{
+			var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;
+
+			StateHasChanged();
+		}
+
+	}
+}

Seenginx/Shared/NavMenu.razor

@@ -8,12 +8,13 @@
 		</NavLink>
 	</p>
 	<p class="menu-label flexCenter">
-		<span class="mdi mdi-18px"><img src="https://img.icons8.com/color/18/000000/nginx.png"></span>
+		<span class="mdi mdi-18px"><img src="https://img.icons8.com/color/20/000000/nginx.png"></span>
 		<span class="petiteCaps">&nbsp; NginX</span>
 	</p>
 	<ul class="menu-list">
 		<li>
 			<NavLink href="/nginx" class="petiteCaps"
+							 @key="@ActiveNav.Keys.ElementAt(0)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("nginx")"
 							 @onclick="@(e => SelectMenuItem("nginx"))">
 				<span class="mdi mdi-file-cog-outline"></span>
@@ -22,6 +23,7 @@
 		</li>
 		<li>
 			<NavLink href="/nginx/logs" class="petiteCaps"
+							 @key="@ActiveNav.Keys.ElementAt(1)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("nginx/logs")"
 							 @onclick="@(e => SelectMenuItem("nginx/logs"))">
 				<span class="mdi mdi-information-outline"></span>
@@ -30,12 +32,13 @@
 		</li>
 	</ul>
 	<p class="menu-label flexCenter">
-		<span class="mdi mdi-18px"><img src="https://img.icons8.com/color/18/000000/service.png"></span>
+		<span class="mdi mdi-18px"><img src="https://img.icons8.com/color/20/000000/service.png"></span>
 		<span class="petiteCaps">&nbsp; SystemD</span>
 	</p>
 	<ul class="menu-list">
 		<li>
 			<NavLink href="/systemd" class="petiteCaps"
+							 @key="@ActiveNav.Keys.ElementAt(2)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("systemd")"
 							 @onclick="@(e => SelectMenuItem("systemd"))">
 				<span class="mdi mdi-file-cog-outline"></span>
@@ -44,6 +47,7 @@
 		</li>
 		<li>
 			<NavLink href="/systemd/logs" class="petiteCaps"
+							 @key="@ActiveNav.Keys.ElementAt(3)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("systemd/logs")"
 							 @onclick="@(e => SelectMenuItem("systemd/logs"))">
 				<span class="mdi mdi-information-outline"></span>
@@ -52,12 +56,13 @@
 		</li>
 	</ul>
 	<p class="menu-label flexCenter">
-		<span class="mdi mdi-18px"><img src="https://img.icons8.com/color/18/000000/event-log.png"></span>
+		<span class="mdi mdi-18px"><img src="https://img.icons8.com/color/20/000000/event-log.png"></span>
 		<span class="petiteCaps">&nbsp; Dmesg</span>
 	</p>
 	<ul class="menu-list">
 		<li>
 			<NavLink href="/dmesg" class="petiteCaps"
+							 @key="@ActiveNav.Keys.ElementAt(4)"
 							 ActiveClass="@ActiveNav.GetValueOrDefault("dmesg")"
 							 @onclick="@(e => SelectMenuItem("dmesg"))">
 				<span class="mdi mdi-information-outline"></span>

Seenginx/Shared/NavMenu.razor.cs

@@ -10,11 +10,6 @@ namespace Seenginx.Shared
 	{
 		protected Dictionary<string, string> ActiveNav { get; set; }
 		public bool CollapsePanel { get; set; } = false;
-		[Parameter]
-		public string MenuActiveClass { get; set; }
-
-		[Parameter]
-		public EventCallback<string> MenuActiveClassChanged { get; set; }
 
 		protected async override Task OnInitializedAsync()
 		{
@@ -36,14 +31,5 @@ namespace Seenginx.Shared
 
 			ActiveNav[menuItem] = "is-active";
 		}
-
-		protected async Task ToggleMenu()
-		{
-			CollapsePanel = !CollapsePanel;
-			MenuActiveClass = CollapsePanel ? "active" : null;
-
-			await MenuActiveClassChanged.InvokeAsync(MenuActiveClass);
-			StateHasChanged();
-		}
 	}
 }