Skip to content

Commit

Permalink
⚡ refactor: Improve performance of role edit and global nav (#679)
Browse files Browse the repository at this point in the history
  • Loading branch information
@capdiem
capdiem authored Jan 3, 2024
1 parent 960dccd commit 321cc56
Show file tree
Hide file tree
Showing 27 changed files with 202 additions and 171 deletions.
2 changes: 1 addition & 1 deletion src/Masa.Stack.Components/Masa.Stack.Components.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<ItemGroup>
<PackageReference Include="Humanizer" Version="2.14.1" />
<PackageReference Include="Mapster" Version="7.3.0" />
<PackageReference Include="Masa.Blazor" Version="1.2.1" />
<PackageReference Include="Masa.Blazor" Version="1.3.1" />
<PackageReference Include="Masa.Contrib.SearchEngine.AutoComplete.ElasticSearch" Version="1.0.1-preview.1" />
<PackageReference Include="Masa.Contrib.StackSdks.Caller" Version="1.0.1-preview.1" />
<PackageReference Include="Masa.Contrib.StackSdks.Config" Version="1.0.1-preview.1" />
Expand Down
2 changes: 1 addition & 1 deletion src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<MSimpleCheckbox Color="primary"
Ripple="false"
Value="@(indeterminate || appSelected)"
ValueChanged="() => { OnItemOperClick.InvokeAsync(Value); }"
ValueChanged="@ItemOperClick"
Indeterminate=indeterminate
Class="masa-icon-size-20"
Style="flex: none;margin-right: -4px;" />
Expand Down
11 changes: 8 additions & 3 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionAppWrapper.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,15 @@ public partial class ExpansionAppWrapper
{
[Parameter]
public ExpansionMenu Value { get; set; } = default!;
[Parameter]

[Parameter]
public EventCallback<ExpansionMenu> OnItemClick { get; set; }

[Parameter]
[Parameter]
public EventCallback<ExpansionMenu> OnItemOperClick { get; set; }

private async Task ItemOperClick()
{
await OnItemOperClick.InvokeAsync(Value);
}
}
58 changes: 30 additions & 28 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/ExpansionMenuWrapper.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,37 @@

@if (Value != null)
{
<div class="global-nav-content__main ">
@foreach (var category in Value.Children)
{
<div class="apps" style="@GetIsDisplayStyle(!category.Hidden)">
<div class="category_title_app">
<div class="masa-text-1-2__title title_category py-4" id="@($"{idPrefix}_{category.Id}")">@category.Name</div>
@foreach (var app in category.Children)
<div class="global-nav-content__wrapper">
<div class="global-nav-content__main ">
@foreach (var category in Value.Children)
{
<div class="apps" style="@GetIsDisplayStyle(!category.Hidden)">
<div class="category_title_app">
<div class="masa-text-1-2__title title_category py-4" id="@($"{idPrefix}_{category.Id}")">@category.Name</div>
@foreach (var app in category.Children)
{
<ExpansionAppWrapper Value="app" OnItemClick="ItemClick" OnItemOperClick="ItemOperClick" />
}
</div>
</div>
}
</div>

<div class="global-nav-content__side">
<MNavigationDrawer Value="true" HideOverlay Floating Right Width="256" Class="toc">
<ul>
@foreach (var category in Value.Children)
{
<ExpansionAppWrapper Value="app" OnItemClick="ItemClick" OnItemOperClick="ItemOperClick" />
<li class="masa-text-2-2 pl-3 py-2 category_side" id="@($"{idPrefix}_{category.Id}_side")" style="@GetIsDisplayStyle(!category.Hidden)"
@onclick="@(() => ScrollTo($"{idPrefix}_{category.Id}", ".global-nav-content__main"))">
<MIcon Color="primary" Class="dot" Size="20">mdi-checkbox-blank-circle</MIcon>
<span>
@TranslateProvider.DT(category.Name)
</span>
</li>
}
</div>
</div>
}
</div>

<div class="global-nav-content__side">
<MNavigationDrawer Value="true" HideOverlay Floating Right Width="256" Class="toc">
<ul>
@foreach (var category in Value.Children)
{
<li class="masa-text-2-2 pl-3 py-2 category_side" id="@($"{idPrefix}_{category.Id}_side")" style="@GetIsDisplayStyle(!category.Hidden)"
@onclick="@(() => ScrollTo($"{idPrefix}_{category.Id}", ".global-nav-content__main"))">
<MIcon Color="primary" Class="dot" Size="20">mdi-checkbox-blank-circle</MIcon>
<span>
@TranslateProvider.DT(category.Name)
</span>
</li>
}
</ul>
</MNavigationDrawer>
</ul>
</MNavigationDrawer>
</div>
</div>
}
105 changes: 73 additions & 32 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/GlobalNavigation.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
@inject IWebHostEnvironment WebHostEnvironment
@inject ILogger<GlobalNavigation> Logger

<MDialog Value="_visible" ValueChanged="VisibleChanged"
<MDialog Value="_visible"
ValueChanged="VisibleChanged"
Fullscreen
Transition="dialog-top-transition">
<ActivatorContent>
Expand All @@ -17,40 +18,61 @@
<div class="global-nav">
<div class="global-nav-left">
<div class="global-nav-left__content">
<div class="global-nav-left__title">
@T("Favorites")
</div>
<MListItemGroup Value="@("/users")" Class="full-width mt-3">
@foreach (var item in _favorites)
{
<MListItem Dense Value="item.GetData(MENU_URL_NAME)"
Class="mb-4 full-width rounded-2"
ActiveClass="primary white--text"
OnClick="() => NavigateTo(item.GetData(MENU_URL_NAME))">
<ItemContent>
<div class="global-nav-left__favorite-item full-width masa-text-2-2 @(context.ActiveClass)">
<div class="global-nav-left__group">
<div class="global-nav-left__title">
@T("Favorites")
</div>
<div class="full-width mt-3">
@if (_favorites == null)
{
<MSkeletonLoader Class="transparent" Type="list-item@3" />
}
else
{
@foreach (var item in _favorites)
{
<MListItem Dense
Class="mb-1 full-width rounded-2 masa-text-2-2"
OnClick="@(() => NavigateTo(item.GetData(MENU_URL_NAME)))">
<MListItemContent>
<MListItemTitle>@DT(item.Name)</MListItemTitle>
</MListItemContent>
<MListItemAction Class="ma-0">
<SAutoLoadingButton Icon XSmall Color="#FFB547" OnClick="async () => await FavoriteRemoveAsync(item)" OnClickStopPropagation>
<SAutoLoadingButton Icon Small Color="#FFB547"
OnClick="@(() => FavoriteRemoveAsync(item))"
OnClickStopPropagation>
<SIcon Small Tooltip="@T("CancelFavorite")">mdi-star</SIcon>
</SAutoLoadingButton>
</MListItemAction>
</div>
</ItemContent>
</MListItem>
}
@foreach (var _recommendApp in _recommendApps)
{
<MListItem Dense Class="mb-4 full-width rounded-2"
ActiveClass="primary white--text" OnClick="() => NavigateTo(_recommendApp.Value)">
@DT(_recommendApp.Key)
</MListItem>
}
</MListItemGroup>
<div class="global-nav-left__title">
@T("PlatformTools")
</MListItem>
}
}
</div>
</div>

<div class="global-nav-left__group">
<div class="global-nav-left__title">
@T("PlatformTools")
</div>
<div>
@if (_recommendApps == null)
{
<MSkeletonLoader Class="transparent" Type="list-item@3" />
}
else
{
foreach (var item in _recommendApps)
{
<MListItem Dense
Class="mb-1 full-width rounded-2 masa-text-2-2"
Href="@item.Value">
<MListItemContent>
<MListItemTitle>@DT(item.Key)</MListItemTitle>
</MListItemContent>
</MListItem>
}
}
</div>
</div>
</div>
</div>
Expand All @@ -65,15 +87,34 @@
</MButton>
</div>
<div class="mt-4">
<span class="masa-text-3-1">@T("RecentVisits")</span>
@foreach (var (name, url) in _recentVisits)
<span class="masa-text-3-1 mb-2">@T("RecentVisits")</span>

@if (_recentVisits == null)
{
<MSkeletonLoader Class="d-flex transparent" Type="chip@3" />
}
else
{
<MChip Class="masa-text-2-1 ml-4" Color="#F6F8FD" OnClick="() => NavigateTo(url)">@DT(name)</MChip>
foreach (var (name, url) in _recentVisits)
{
<MChip Class="masa-text-2-1 ml-4" Color="#F6F8FD" OnClick="() => NavigateTo(url)">@DT(name)</MChip>
}
}
</div>
</div>
<div class="global-nav-content">
<ExpansionMenuWrapper Value="_menu" OnItemClick="MenuItemClickAsync" OnItemOperClick="MenuItemOperClickAsync" />
@if (_menu is null)
{
<div class="d-flex" style=" width: calc(100% - 256px);">
<MSkeletonLoader Class="transparent full-width mr-2" Type="list-item@3" />
<MSkeletonLoader Class="transparent full-width mr-2" Type="list-item@3" />
<MSkeletonLoader Class="transparent full-width" Type="list-item@3" />
</div>
}
else
{
<ExpansionMenuWrapper Value="_menu" OnItemClick="MenuItemClickAsync" OnItemOperClick="MenuItemOperClickAsync" />
}
</div>
</div>
</div>
Expand Down
43 changes: 29 additions & 14 deletions src/Masa.Stack.Components/Shared/GlobalNavigations/GlobalNavigation.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,26 @@ public partial class GlobalNavigation : MasaComponentBase
public Func<string, Task>? OnFavoriteRemove { get; set; }

bool _visible;
List<(string name, string url)> _recentVisits = new();
List<KeyValuePair<string, string>> _recommendApps = new();
List<ExpansionMenu> _favorites = new();
private List<(string name, string url)>? _recentVisits;
private List<KeyValuePair<string, string>>? _recommendApps;
private List<ExpansionMenu>? _favorites;
ExpansionMenu? _menu;

async Task IniDataAsync()
private async Task GetMenuAndFavorites()
{
_menu = await GenerateMenuAsync();
_favorites = _menu.GetMenusByStates(ExpansionMenuState.Favorite);
await GetRecommendApps();
await GetRecentVisits();
StateHasChanged();
}

private async Task GetRecommendApps()
{
//TODO pm config
var recommendAppIdentities = new List<string>() { MasaStackConfig.GetWebId(MasaStackProject.PM), MasaStackConfig.GetWebId(MasaStackProject.DCC), MasaStackConfig.GetWebId(MasaStackProject.Auth) };
var recommendAppIdentities = new List<string>()
{
MasaStackConfig.GetWebId(MasaStackProject.PM), MasaStackConfig.GetWebId(MasaStackProject.DCC),
MasaStackConfig.GetWebId(MasaStackProject.Auth)
};
var environment = MultiEnvironmentUserContext.Environment;
if (environment.IsNullOrEmpty())
{
Expand All @@ -40,15 +43,20 @@ private async Task GetRecommendApps()

var projects = await PmClient.ProjectService.GetProjectAppsAsync(environment);
_recommendApps = projects.SelectMany(p => p.Apps).Where(a => recommendAppIdentities.Contains(a.Identity))
.Select(a => new KeyValuePair<string, string>(a.Name, a.Url)).ToList();
.Select(a => new KeyValuePair<string, string>(a.Name, a.Url)).ToList();

StateHasChanged();
}

private async Task VisibleChanged(bool visible)
private void VisibleChanged(bool visible)
{
if (visible)
if (visible && _menu == null)
{
await IniDataAsync();
_ = GetRecommendApps();
_ = GetRecentVisits();
_ = GetMenuAndFavorites();
}

_visible = visible;
}

Expand Down Expand Up @@ -91,16 +99,20 @@ private async Task<ExpansionMenu> GenerateMenuAsync()

foreach (var category in categories)
{
var categoryMenu = new ExpansionMenu(category.Key, category.Key, ExpansionMenuType.Category, ExpansionMenuState.Normal, menu.MetaData, parent: menu);
var categoryMenu = new ExpansionMenu(category.Key, category.Key, ExpansionMenuType.Category, ExpansionMenuState.Normal, menu.MetaData,
parent: menu);
foreach (var app in category.Where(a => a.Navs.Any()))
{
var appMenu = new ExpansionMenu(app.Id.ToString(), app.Name, ExpansionMenuType.App, ExpansionMenuState.Normal, menu.MetaData, parent: categoryMenu);
var appMenu = new ExpansionMenu(app.Id.ToString(), app.Name, ExpansionMenuType.App, ExpansionMenuState.Normal, menu.MetaData,
parent: categoryMenu);
foreach (var nav in app.Navs)
{
appMenu.AddChild(ConvertForNav(nav, appMenu.Deep + 1, appMenu, favorites));
}

categoryMenu.AddChild(appMenu);
}

menu.AddChild(categoryMenu);
}
}
Expand All @@ -120,20 +132,23 @@ private ExpansionMenu ConvertForNav(NavModel navModel, int deep, ExpansionMenu p
{
menu.AddChild(ConvertForNav(childrenNav, deep++, menu, favorites));
}

menu.Disabled = menu.Children.Count > 0;
return menu;
}

private async Task<List<string>> FetchFavorites()
{
return (await AuthClient.PermissionService.GetFavoriteMenuListAsync())
.Select(m => m.Value.ToString()).ToList();
.Select(m => m.Value.ToString()).ToList();
}

private async Task GetRecentVisits()
{
var visitedList = await AuthClient.UserService.GetVisitedListAsync();
_recentVisits = visitedList.Select(v => new ValueTuple<string, string>(v.Name, v.Url)).ToList();

StateHasChanged();
}

private void NavigateTo(string? url)
Expand Down
3 changes: 0 additions & 3 deletions src/Masa.Stack.Components/Shared/IntegrationComponents/Avatars/SEmptyAvatar.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
</MAvatar>

@code {
[Parameter]
public string Class { get; set; }

[Parameter]
public string Value { get; set; }

Expand Down
6 changes: 0 additions & 6 deletions src/Masa.Stack.Components/Shared/IntegrationComponents/DateTime/SDateRangePicker.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@ namespace Masa.Stack.Components;

public partial class SDateRangePicker
{
[Parameter]
public string Class { get; set; } = "";

[Parameter]
public string Style { get; set; } = "";

[Parameter]
public DateOnly? StartTime { get; set; }

Expand Down
6 changes: 0 additions & 6 deletions ...Masa.Stack.Components/Shared/IntegrationComponents/DateTime/SDateTimeRangePicker.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,6 @@ public partial class SDateTimeRangePicker
[Parameter]
public bool Clearable { get; set; } = false;

[Parameter]
public string Class { get; set; } = string.Empty;

[Parameter]
public string Style { get; set; } = string.Empty;

[Inject]
public JsInitVariables JsInitVariables { get; set; } = default!;

Expand Down
3 changes: 0 additions & 3 deletions src/Masa.Stack.Components/Shared/IntegrationComponents/DateTime/SDateTimeRangeToolbar.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,6 @@
[Parameter]
public bool ShowTimeZoneSelector { get; set; } = false;

[Parameter]
public string Class { get; set; } = "";

[Parameter]
public DateTimeOffset? StartDateTime { get; set; }

Expand Down
Loading

0 comments on commit 321cc56

Please sign in to comment.