admin/FrontOffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
MeysamMoghaddam
2025-10-13 20:20:07 +03:30
parent 4d6332854e
commit 3f3e1c2a87
4 changed files with 105 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/FrontOffice.Main/Shared/OrganizationChart.razor
View File

@@ -35,77 +35,10 @@
@if (_isExpanded && _currentUser?.Children?.Any() == true) @if (_isExpanded && _currentUser?.Children?.Any() == true)
{ {
<div class="org-level" id="level-1"> <OrganizationChartLevel Nodes="_currentUser.Children" Level="1" />
@foreach (var child in _currentUser.Children)
{
<div class="org-node child-node" data-parent-id="@_currentUser.Id">
<div class="node-connector"></div>
<div class="node-card">
<div class="node-avatar">
<MudAvatar Size="Size.Medium">
<MudImage ObjectFit="ObjectFit.Cover"
ObjectPosition="ObjectPosition.Center"
Src="@(string.IsNullOrEmpty(child.Avatar) ? "images/avatar1.jpg" : child.Avatar)" />
</MudAvatar>
@if (child.Children?.Any() == true)
{
<button class="expand-btn" @onclick="() => ToggleChildExpand(child.Id)" data-user-id="@child.Id">
<MudIcon Icon="@(child.IsExpanded ? Icons.Material.Filled.Remove : Icons.Material.Filled.Add)" Size="Size.Small" />
</button>
}
</div>
<div class="node-info">
<div class="node-name">@child.FirstName @child.LastName</div>
<div class="node-amounts">
<div class="personal-amount">
<span class="label">خرید شخصی:</span>
<span class="amount">@(child.PersonalPurchase?.ToThousands().ToCurrencyUnitIRT() ?? "0 تومان")</span>
</div>
<div class="team-amount">
<span class="label">خرید تیمی:</span>
<span class="amount">@(child.TeamPurchase?.ToThousands().ToCurrencyUnitIRT() ?? "0 تومان")</span>
</div>
</div>
</div>
</div>
@if (child.IsExpanded && child.Children?.Any() == true)
{
<div class="org-sublevel">
@foreach (var grandchild in child.Children)
{
<div class="org-node grandchild-node" data-parent-id="@child.Id">
<div class="node-connector"></div>
<div class="node-card">
<div class="node-avatar">
<MudAvatar Size="Size.Small">
<MudImage ObjectFit="ObjectFit.Cover"
ObjectPosition="ObjectPosition.Center"
Src="@(string.IsNullOrEmpty(grandchild.Avatar) ? "images/avatar1.jpg" : grandchild.Avatar)" />
</MudAvatar>
</div>
<div class="node-info">
<div class="node-name">@grandchild.FirstName @grandchild.LastName</div>
<div class="node-amounts">
<div class="personal-amount">
<span class="label">خرید شخصی:</span>
<span class="amount">@(grandchild.PersonalPurchase?.ToThousands().ToCurrencyUnitIRT() ?? "0 تومان")</span>
</div>
<div class="team-amount">
<span class="label">خرید تیمی:</span>
<span class="amount">@(grandchild.TeamPurchase?.ToThousands().ToCurrencyUnitIRT() ?? "0 تومان")</span>
</div>
</div>
</div>
</div>
</div>
}
</div>
}
</div>
}
</div>
} }
</div> </div>
</div> </div>

41
src/FrontOffice.Main/Shared/OrganizationChart.razor.cs
View File

@@ -1,4 +1,6 @@
namespace FrontOffice.Main.Shared; using static FrontOffice.Main.Shared.OrganizationChartLevel;
namespace FrontOffice.Main.Shared;
public partial class OrganizationChart public partial class OrganizationChart
{ {
private UserNode? _currentUser; private UserNode? _currentUser;
@@ -38,7 +40,18 @@ public partial class OrganizationChart
FirstName = "سارا", FirstName = "سارا",
LastName = "کریمی", LastName = "کریمی",
PersonalPurchase = 1200000, PersonalPurchase = 1200000,
TeamPurchase = 3200000 TeamPurchase = 3200000,
Children = new List<UserNode>
{
new UserNode
{
Id = 8,
FirstName = "نازنین",
LastName = "رضایی",
PersonalPurchase = 950000,
TeamPurchase = 2100000
}
}
}, },
new UserNode new UserNode
{ {
@@ -89,17 +102,17 @@ public partial class OrganizationChart
StateHasChanged(); StateHasChanged();
} }
private void ToggleChildExpand(long userId) public void ToggleNodeExpand(long userId)
{ {
var child = FindChild(_currentUser, userId); var node = FindNode(_currentUser, userId);
if (child != null) if (node != null)
{ {
child.IsExpanded = !child.IsExpanded; node.IsExpanded = !node.IsExpanded;
StateHasChanged(); StateHasChanged();
} }
} }
private UserNode? FindChild(UserNode? node, long userId) private UserNode? FindNode(UserNode? node, long userId)
{ {
if (node == null) return null; if (node == null) return null;
if (node.Id == userId) return node; if (node.Id == userId) return node;
@@ -108,23 +121,11 @@ public partial class OrganizationChart
{ {
foreach (var child in node.Children) foreach (var child in node.Children)
{ {
var found = FindChild(child, userId); var found = FindNode(child, userId);
if (found != null) return found; if (found != null) return found;
} }
} }
return null; return null;
} }
public class UserNode
{
public long Id { get; set; }
public string? FirstName { get; set; }
public string? LastName { get; set; }
public string? Avatar { get; set; }
public long? PersonalPurchase { get; set; }
public long? TeamPurchase { get; set; }
public List<UserNode>? Children { get; set; }
public bool IsExpanded { get; set; }
}
} }

43
src/FrontOffice.Main/Shared/OrganizationChartLevel.razor Normal file
View File

@@ -0,0 +1,43 @@
<div class="org-level" id="level-@Level">
@foreach (var node in Nodes)
{
<div class="org-node child-node" data-parent-id="@node.Id">
<div class="node-connector"></div>
<div class="node-card">
<div class="node-avatar">
<MudAvatar Size="@GetAvatarSize(Level)">
<MudImage ObjectFit="ObjectFit.Cover"
ObjectPosition="ObjectPosition.Center"
Src="@(string.IsNullOrEmpty(node.Avatar) ? "images/avatar1.jpg" : node.Avatar)" />
</MudAvatar>
@if (node.Children?.Any() == true)
{
<button class="expand-btn" @onclick="() => ToggleNodeExpand(node.Id)" data-user-id="@node.Id">
<MudIcon Icon="@(node.IsExpanded ? Icons.Material.Filled.Remove : Icons.Material.Filled.Add)" Size="Size.Small" />
</button>
}
</div>
<div class="node-info">
<div class="node-name">@node.FirstName @node.LastName</div>
<div class="node-amounts">
<div class="personal-amount">
<span class="label">خرید شخصی:</span>
<span class="amount">@(node.PersonalPurchase?.ToThousands().ToCurrencyUnitIRT() ?? "0 تومان")</span>
</div>
<div class="team-amount">
<span class="label">خرید تیمی:</span>
<span class="amount">@(node.TeamPurchase?.ToThousands().ToCurrencyUnitIRT() ?? "0 تومان")</span>
</div>
</div>
</div>
</div>
@if (node.IsExpanded && node.Children?.Any() == true)
{
<OrganizationChartLevel Nodes="node.Children" Level="@(Level + 1)" />
}
</div>
}
</div>

38
src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.cs Normal file
View File

@@ -0,0 +1,38 @@
using Microsoft.AspNetCore.Components;
using MudBlazor;
namespace FrontOffice.Main.Shared;
public partial class OrganizationChartLevel
{
[Parameter] public List<UserNode>? Nodes { get; set; }
[Parameter] public int Level { get; set; } = 1;
[CascadingParameter] private OrganizationChart ParentChart { get; set; } = default!;
private Size GetAvatarSize(int level)
{
return level switch
{
1 => Size.Large,
2 => Size.Medium,
_ => Size.Small
};
}
private void ToggleNodeExpand(long userId)
{
ParentChart.ToggleNodeExpand(userId);
}
public class UserNode
{
public long Id { get; set; }
public string? FirstName { get; set; }
public string? LastName { get; set; }
public string? Avatar { get; set; }
public long? PersonalPurchase { get; set; }
public long? TeamPurchase { get; set; }
public List<UserNode>? Children { get; set; }
public bool IsExpanded { get; set; }
}
}