Skip to content

Commit 290d6dc

Browse files
jperson2000Jon Personmckaragoz
authored
MudJsonTreeView: Uses a MudTreeView to View JSON Text (#378)
* MudJsonTreeView: Uses a MudTreeView to view JSON * MudJsonTreeView: Added example, can't get page to not 404 * MudJsonTreeView: Fixed example * Docs Implement --------- Co-authored-by: Jon Person <[email protected]> Co-authored-by: Mehmet Can Karagöz <[email protected]>
1 parent 55d4184 commit 290d6dc

File tree

8 files changed

+224
-11
lines changed

8 files changed

+224
-11
lines changed

‎CodeBeam.MudBlazor.Extensions.Docs/CodeBeam.MudBlazor.Extensions.Docs.csproj‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

3-
<PropertyGroup>
4-
<TargetFramework>net8.0</TargetFramework>
5-
<Nullable>enable</Nullable>
6-
<ImplicitUsings>enable</ImplicitUsings>
7-
<RootNamespace>MudExtensions.Docs</RootNamespace>
8-
</PropertyGroup>
3+
<PropertyGroup>
4+
<TargetFramework>net8.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
<RootNamespace>MudExtensions.Docs</RootNamespace>
8+
</PropertyGroup>
99

10-
11-
<ItemGroup>
12-
<SupportedPlatform Include="browser" />
13-
</ItemGroup>
10+
11+
<ItemGroup>
12+
<SupportedPlatform Include="browser" />
13+
</ItemGroup>
1414

1515
<ItemGroup>
1616
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.*" />
@@ -33,5 +33,5 @@
3333
<ItemGroup>
3434
<EmbeddedResource Include="Pages/Components/**" />
3535
</ItemGroup>
36-
36+
3737
</Project>

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/JsonTreeView/Examples/JsonTreeViewExample1.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@using MudBlazor.Utilities
3+
4+
<MudGrid>
5+
<MudItem lg="6" sm="12" Class="d-flex align-center flex-wrap">
6+
<MudJsonTreeView Json="@_json" Dense="@_dense" />
7+
</MudItem>
8+
<MudItem lg="6" sm="12" Class="d-flex align-center flex-wrap">
9+
<MudGrid>
10+
<MudItem xs="12">
11+
<MudSwitchM3 @bind-Value="@_dense" Label="Dense" Color="Color.Secondary" />
12+
</MudItem>
13+
<MudItem xs="12">
14+
<MudTextField @bind-Value="@_json" Lines="20" Label="Json Data" Variant="Variant.Outlined" />
15+
</MudItem>
16+
</MudGrid>
17+
</MudItem>
18+
</MudGrid>
19+
20+
@code
21+
{
22+
bool _dense = true;
23+
string? _json = @"
24+
{
25+
'PatientRecordType': 'v4.0.8',
26+
'DoctorId': '8F704CD5-3CCE-4CC0-957C-2BC98DC06E42',
27+
'PatientId': '0000-0002-6',
28+
'Birthdate': '1980-02-15T00:00:00Z',
29+
'UpdateDate': '2023-02-14T07:12:27.2502767-05:00',
30+
'Races': [
31+
'Vietnamese',
32+
'Caucasian'
33+
],
34+
'Status': 'AV',
35+
'Gender': 'M',
36+
'Active': true,
37+
'Type': 'Normal'
38+
}".Replace("'", "\"");
39+
}

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/JsonTreeView/JsonTreeViewPage.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@page "/mudjsontreeview"
2+
@namespace MudExtensions.Docs.Pages
3+
4+
<ExamplePage Title="MudJsonTreeView" Component="typeof(MudJsonTreeView)">
5+
<ExampleCard ComponentName="JsonTreeView" ExampleName="JsonTreeViewExample1" Title="Usage">
6+
<JsonTreeViewExample1 />
7+
</ExampleCard>
8+
</ExamplePage>

‎CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ public class MudExtensionsDocsService
1717
new MudExtensionComponentInfo() {Title = "MudDateWheelPicker", Component = typeof(MudDateWheelPicker), Usage = ComponentUsage.Input, IsUnique = true, Description = "A date time picker with MudWheels."},
1818
new MudExtensionComponentInfo() {Title = "MudGallery", Component = typeof(MudGallery), Usage = ComponentUsage.Display, IsUnique = true, Description = "Mobile friendly image gallery component."},
1919
new MudExtensionComponentInfo() {Title = "MudInputStyler", Component = typeof(MudInputStyler), Usage = ComponentUsage.Utility, IsUnique = true, Description = "Applies colors or other CSS styles easily for mud inputs like MudTextField and MudSelect."},
20+
new MudExtensionComponentInfo() {Title = "MudJsonTreeView", Component = typeof(MudJsonTreeView), Usage = ComponentUsage.Display, RelatedComponents = new List<Type>() {typeof(MudJsonTreeViewNode)}, IsUnique = true, Description = "A treeview for display json data."},
2021
new MudExtensionComponentInfo() {Title = "MudListExtended", Component = typeof(MudListExtended<string>), Usage = ComponentUsage.Input, RelatedComponents = new List<Type>() {typeof(MudListItemExtended<string>)}, IsUnique = false, Description = "The extended MudList component with richer features."},
2122
new MudExtensionComponentInfo() {Title = "MudLoading", Component = typeof(MudLoading), Usage = ComponentUsage.Display, IsUnique = true, Description = "Loading container for a whole page or a specific section."},
2223
new MudExtensionComponentInfo() {Title = "MudLoadingButton", Component = typeof(MudLoadingButton), Usage = ComponentUsage.Button, IsUnique = true, Description = "A classic MudButton with loading improvements."},

‎CodeBeam.MudBlazor.Extensions/Components/JsonTreeView/MudJsonTreeView.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
<MudTreeView T="string" Class="@Class" Style="@Style" Dense="@Dense" Hover="@Hover" UserAttributes="@UserAttributes">
5+
<MudJsonTreeViewNode Node="Root" Sorted="@Sorted" />
6+
</MudTreeView>

‎CodeBeam.MudBlazor.Extensions/Components/JsonTreeView/MudJsonTreeView.razor.cs‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
using Microsoft.AspNetCore.Components;
2+
using MudBlazor;
3+
using System.Text.Json.Nodes;
4+
5+
namespace MudExtensions;
6+
7+
#nullable enable
8+
9+
/// <summary>
10+
/// Represents a tree view which displays a snippet of JSON.
11+
/// </summary>
12+
public partial class MudJsonTreeView : MudComponentBase
13+
{
14+
private string? _json;
15+
16+
/// <summary>
17+
/// Gets or sets the JSON to be displayed.
18+
/// </summary>
19+
[Parameter]
20+
[EditorRequired]
21+
public string? Json
22+
{
23+
get => _json;
24+
set => SetJson(value);
25+
}
26+
27+
/// <summary>
28+
/// Sets the <see cref="Json"/> property and raises the <see cref="OnJsonChanged"/> event.
29+
/// </summary>
30+
/// <param name="json">The new JSON to use.</param>
31+
protected void SetJson(string? json)
32+
{
33+
_json = json;
34+
Root = string.IsNullOrEmpty(_json) ? null : JsonNode.Parse(_json);
35+
OnJsonChanged.InvokeAsync(_json);
36+
StateHasChanged();
37+
}
38+
39+
/// <summary>
40+
/// Occurs when the JSON has changed.
41+
/// </summary>
42+
public EventCallback<string> OnJsonChanged { get; set; }
43+
44+
/// <summary>
45+
/// Gets or sets the root node of the JSON to display.
46+
/// </summary>
47+
public JsonNode? Root { get; set; }
48+
49+
/// <summary>
50+
/// Gets or sets a value indicating whether the tree contents are compacted.
51+
/// </summary>
52+
[Parameter]
53+
public bool Dense { get; set; }
54+
55+
/// <summary>
56+
/// Gets or sets a value indicating whether the current row is highlighted.
57+
/// </summary>
58+
[Parameter]
59+
public bool Hover { get; set; }
60+
61+
/// <summary>
62+
/// Gets or sets a value indicating whether items are sorted by key.
63+
/// </summary>
64+
[Parameter]
65+
public bool Sorted { get; set; }
66+
}

‎CodeBeam.MudBlazor.Extensions/Components/JsonTreeView/MudJsonTreeViewNode.razor‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@namespace MudExtensions
2+
@using System.Text.Json;
3+
@using System.Text.Json.Nodes
4+
5+
@if (Node is JsonObject)
6+
{
7+
@* If sorting is enabled, sort by key *@
8+
var nodes = Sorted ? Node.AsObject().OrderBy(x => x.Key).ToDictionary(x => x.Key, x => x.Value) : Node.AsObject().ToDictionary(x => x.Key, x => x.Value);
9+
@* Go through each item *@
10+
foreach (var child in nodes)
11+
{
12+
if (child.Value is JsonValue)
13+
{
14+
@* Get the type of value in this node *@
15+
var valueKind = child.Value.AsValue().GetValue<JsonElement>().ValueKind;
16+
switch (valueKind)
17+
{
18+
case JsonValueKind.String:
19+
var str = child.Value.AsValue().GetValue<string>();
20+
@* Could be a date *@
21+
if (DateTime.TryParse(str, out DateTime date))
22+
{
23+
<MudTreeViewItem T="string" Text="@child.Key" Icon="@Icons.Material.Filled.DateRange" EndText="@date.ToString()"></MudTreeViewItem>
24+
}
25+
@* Could be a GUID *@
26+
else if (Guid.TryParse(str, out Guid guid))
27+
{
28+
<MudTreeViewItem T="string" Text="@child.Key" Icon="@Icons.Material.Filled.Key" EndText="@str.ToUpperInvariant()"></MudTreeViewItem>
29+
}
30+
@* Fall back to string *@
31+
else
32+
{
33+
<MudTreeViewItem T="string" Text="@child.Key" Icon="@Icons.Material.Filled.TextSnippet" EndText="@str"></MudTreeViewItem>
34+
}
35+
break;
36+
case JsonValueKind.Number:
37+
var number = child.Value.AsValue().GetValue<int>();
38+
<MudTreeViewItem T="string" Text="@child.Key" Icon="@Icons.Material.Filled.Numbers" EndText="@number.ToString()"></MudTreeViewItem>
39+
break;
40+
case JsonValueKind.True:
41+
<MudTreeViewItem T="string" Text="@child.Key" Icon="@Icons.Material.Filled.CheckBox" EndText="true"></MudTreeViewItem>
42+
break;
43+
case JsonValueKind.False:
44+
<MudTreeViewItem T="string" Text="@child.Key" Icon="@Icons.Material.Filled.CheckBoxOutlineBlank" EndText="false"></MudTreeViewItem>
45+
break;
46+
}
47+
}
48+
else if (child.Value is JsonArray)
49+
{
50+
<MudTreeViewItem T="string" IconColor="Color.Primary" Icon="@Icons.Material.Filled.Folder" Text="@child.Key" EndTextClass="mud-primary-text" EndText="(Array)">
51+
@* Iterate each array element *@
52+
<MudJsonTreeViewNode Node="@child.Value" Sorted="@Sorted" />
53+
</MudTreeViewItem>
54+
}
55+
}
56+
}
57+
else if (Node is JsonArray)
58+
{
59+
var count = 0;
60+
@* Iterate each array element *@
61+
foreach (var child in Node.AsArray())
62+
{
63+
count++;
64+
<MudTreeViewItem T="string" IconColor="Color.Primary" Icon="@Icons.Material.Filled.Folder" EndTextClass="mud-primary-text" EndText="@($"(Item {count})")">
65+
<MudJsonTreeViewNode Node="@child" Sorted="@Sorted" />
66+
</MudTreeViewItem>
67+
}
68+
}

‎CodeBeam.MudBlazor.Extensions/Components/JsonTreeView/MudJsonTreeViewNode.razor.cs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
using Microsoft.AspNetCore.Components;
2+
using System.Text.Json.Nodes;
3+
4+
namespace MudExtensions;
5+
6+
#nullable enable
7+
8+
/// <summary>
9+
/// Represents the child leaf of a JSON tree view.
10+
/// </summary>
11+
public partial class MudJsonTreeViewNode : ComponentBase
12+
{
13+
/// <summary>
14+
/// Gets or sets the node to display (including children).
15+
/// </summary>
16+
[Parameter]
17+
[EditorRequired]
18+
public JsonNode? Node { get; set; }
19+
20+
/// <summary>
21+
/// Gets or sets a value indicating whether items are sorted by key.
22+
/// </summary>
23+
[Parameter]
24+
public bool Sorted { get; set; }
25+
}

0 commit comments

Comments
 (0)