refactoring

Salmon.Web/Components/CopyButton.razor

@@ -0,0 +1,29 @@
+@inject IJSRuntime JSRuntime
+
+<button type="button" class="btn" @onclick="CopyTextToClipboard">
+    @if(Clicked)
+    {
+        <i class="bi bi-clipboard-check"></i>
+    }
+    else
+    {
+        <i class="bi bi-clipboard"></i>
+    }
+    
+</button>
+
+@code {
+    [Parameter]
+    public string Value { get; set; }
+
+    bool Clicked { get; set; } = false;
+
+    private async Task CopyTextToClipboard()
+    {
+        if (Value is null)
+            return;
+
+        await JSRuntime.InvokeVoidAsync("clipboardCopy.copyText", Value.ToString());
+        Clicked = true;
+    }
+}

Salmon.Web/Components/EventTable.razor

@@ -0,0 +1,26 @@
+@if (Events is not null)
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Type</th>
+            </tr>
+        </thead>
+        <tbody>
+            @if (Events is not null)
+                @foreach (var e in Events)
+                {
+                    <tr>
+                        <td>@e.When</td>
+                        <td>@e.Type</td>
+                    </tr>
+                }
+        </tbody>
+    </table>
+}
+
+@code {
+    [Parameter]
+    public List<Event>? Events { get; set; } = null;
+}

Salmon.Web/Components/PrettyValueDisplay.razor

@@ -0,0 +1,34 @@
+@using Salmon.Core.Cliff
+
+
+@if(Value is null)
+{
+    <span>(null)</span>
+}
+else
+{
+    if (Predicate is not null && Predicate == "parent")
+    {
+        <a href=@($"Element/{System.Web.HttpUtility.UrlEncode(Value.ToString())}")>@Value.ToString()</a>
+    }
+    else if (Predicate is not null && Predicate == "Uri")
+    {
+        <a href=@Value.ToString()>@Value.ToString()</a>
+    }
+    else
+    {
+        <span>@Value.ToString()</span>
+    }
+
+    <CopyButton Value=@Value.ToString() />
+}
+
+
+
+@code {
+    [Parameter]
+    public object? Value { get; set; }
+
+    [Parameter]
+    public string Predicate { get; set; }
+}

Salmon.Web/Components/TripletTable.razor

@@ -0,0 +1,34 @@
+@if(Triplets is not null)
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Dernier changement</th>
+                <th>Nom</th>
+                <th>Valeur</th>
+            </tr>
+        </thead>
+        <tbody>
+            @if (Triplets is not null)
+                @foreach (var t in Triplets)
+                {
+                    <tr>
+                        <td>@t.LastFlush</td>
+                        <td>@t.predicate</td>
+                        <td>
+                            <PrettyValueDisplay Predicate=@t.predicate Value=@t.value />
+                        </td>
+                    </tr>
+                }
+        </tbody>
+    </table>
+}
+
+
+
+@code {
+    [Parameter]
+    public List<Triplet>? Triplets { get; set; } = null;
+
+
+}

Salmon.Web/Pages/ElementPage.razor

@@ -1,5 +1,4 @@
-
+@page "/Element/{Id}"
-@page "/Element/{Id}"
 
 @inject Salmon.Core.Instance Salmon;
 
@@ -23,46 +22,13 @@ else
     <h3>@ThisElement.LongName</h3>
 
     <h4>Propriétés</h4>
-    <table class="table">
+    <TripletTable Triplets=@Triplets />
-        <thead>
+
-            <tr>
+    <h4>Enfants</h4>
-                <th>Dernier changement</th>
+    <ElementDeck FilterByParent=@Id />
-                <th>Nom</th>
-                <th>Valeur</th>
-            </tr>
-        </thead>
-        <tbody>
-            @if (Triplets is not null)
-            @foreach (var t in Triplets)
-            {
-                <tr>
-                    <td>@t.LastFlush</td>
-                    <td>@t.predicate</td>
-                    <td>@t.value</td>
-                </tr>
-            }
-        </tbody>
-    </table>
 
     <h4>Évènements</h4>
-    <table class="table">
+    <EventTable Events=@Events />
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Type</th>
-            </tr>
-        </thead>
-        <tbody>
-            @if(Events is not null)
-            @foreach (var e in Events)
-            {
-                <tr>
-                    <td>@e.When</td>
-                    <td>@e.Type</td>
-                </tr>
-            }
-        </tbody>
-    </table>
 }
 
 @code {
@@ -71,8 +37,8 @@ else
     string? Error = $"Chargement...";
 
     Salmon.Core.Element? ThisElement = null;
-    List<Triplet>? Triplets = null;
+    List<Triplet>? Triplets { get; set; } = null;
-    List<Event>? Events = null;
+    List<Event>? Events { get; set; } = null;
 
 
 
@@ -108,6 +74,8 @@ else
             events.Add(e);
 
         Events = events;
+
+        StateHasChanged();
     }
 
 

Salmon.Web/Pages/_Host.cshtml

@@ -44,6 +44,17 @@
 
 
 
-
+    <script>
+        window.clipboardCopy = {
+            copyText: function (text) {
+                navigator.clipboard.writeText(text).then(function () {
+                    //alert("Copied to clipboard!");
+                })
+                .catch(function (error) {
+                    alert(error);
+                });
+            }
+        };
+    </script>
 </body>
 </html>

Salmon.Web/Salmon.Web.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
@@ -10,6 +10,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazor.Bootstrap" Version="2.1.0" />
+    <PackageReference Include="FontAwesome" Version="4.7.0" />
     <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.18.1" />
     <PackageReference Include="MongoDB.Driver" Version="2.25.0" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />

Salmon.Web/Shared/NavMenu.razor

@@ -25,16 +25,6 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Event List
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="fetchdata">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
-            </NavLink>
-        </div>
     </nav>
 </div>