kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix for TabPanel is not updating the UI. #4778

Browse Source 
Modified that TabStrip and TabPane, now when the ActiveTab is changed the TabPanel is selected
This commit is contained in:
Leigh Pointer 2024-11-14 10:35:15 +01:00
parent 702eb9e466
commit db6dd5abee
4 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Oqtane.Client/Modules/Admin/Pages/Add.razor
View File

@ -10,7 +10,7 @@
@if (_initialized) @if (_initialized)
{ {
<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate> <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
<TabStrip Refresh="@_refresh"> <TabStrip Refresh="@_refresh" ActiveTab="@_activetab">
<TabPanel Name="Settings" ResourceKey="Settings" Heading="Settings"> <TabPanel Name="Settings" ResourceKey="Settings" Heading="Settings">
<div class="container"> <div class="container">
<div class="row mb-1 align-items-center"> <div class="row mb-1 align-items-center">
@ -246,6 +246,7 @@
private string _iconresources = ""; private string _iconresources = "";
private DateTime? _effectivedate = null; private DateTime? _effectivedate = null;
private DateTime? _expirydate = null; private DateTime? _expirydate = null;
private string _activetab = "";
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
@ -335,6 +336,7 @@
private async Task SavePage() private async Task SavePage()
{ {
_activetab = "Settings";
validated = true; validated = true;
var interop = new Interop(JSRuntime); var interop = new Interop(JSRuntime);
if (await interop.FormValid(form)) if (await interop.FormValid(form))

30
Oqtane.Client/Modules/Admin/Pages/Edit.razor
View File

@ -16,7 +16,7 @@
<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate> <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
@if (_page.UserId == null) @if (_page.UserId == null)
{ {
<TabStrip Refresh="@_refresh"> <TabStrip Refresh="@_refresh" ActiveTab="@_activetab">
<TabPanel Name="Settings" ResourceKey="Settings" Heading="Settings"> <TabPanel Name="Settings" ResourceKey="Settings" Heading="Settings">
<div class="container"> <div class="container">
<div class="row mb-1 align-items-center"> <div class="row mb-1 align-items-center">
@ -30,16 +30,16 @@
<div class="row mb-1 align-items-center"> <div class="row mb-1 align-items-center">
<Label Class="col-sm-3" For="parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label> <Label Class="col-sm-3" For="parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label>
<div class="col-sm-9"> <div class="col-sm-9">
<select id="parent" class="form-select" value="@_parentid" @onchange="(e => ParentChanged(e))" required> <select id="parent" class="form-select" value="@_parentid" @onchange="(e => ParentChanged(e))" required>
<option value="-1">&lt;@Localizer["SiteRoot"]&gt;</option> <option value="-1">&lt;@Localizer["SiteRoot"]&gt;</option>
@foreach (Page page in _pages) @foreach (Page page in _pages)
{
if (UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, page.PermissionList) && page.PageId != _pageId)
{ {
if (UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, page.PermissionList) && page.PageId != _pageId) <option value="@(page.PageId)">@(new string('-', page.Level * 2))@(page.Name)</option>
{
<option value="@(page.PageId)">@(new string('-', page.Level * 2))@(page.Name)</option>
}
} }
</select> }
</select>
</div> </div>
</div> </div>
<div class="row mb-1 align-items-center"> <div class="row mb-1 align-items-center">
@ -230,10 +230,10 @@
<TabPanel Name="PageModules" Heading="Modules" ResourceKey="PageModules"> <TabPanel Name="PageModules" Heading="Modules" ResourceKey="PageModules">
<Pager Items="_pageModules"> <Pager Items="_pageModules">
<Header> <Header>
<th style="width: 1px;">&nbsp;</th> <th style="width: 1px;">&nbsp;</th>
<th style="width: 1px;">&nbsp;</th> <th style="width: 1px;">&nbsp;</th>
<th>@Localizer["ModuleTitle"]</th> <th>@Localizer["ModuleTitle"]</th>
<th>@Localizer["ModuleDefinition"]</th> <th>@Localizer["ModuleDefinition"]</th>
</Header> </Header>
<Row> <Row>
<td><ActionLink Action="Settings" Text="Edit" Path="@_actualpath" ModuleId="@context.ModuleId" Security="SecurityAccessLevel.Edit" PermissionList="@context.PermissionList" ResourceKey="ModuleSettings" /></td> <td><ActionLink Action="Settings" Text="Edit" Path="@_actualpath" ModuleId="@context.ModuleId" Security="SecurityAccessLevel.Edit" PermissionList="@context.PermissionList" ResourceKey="ModuleSettings" /></td>
@ -356,6 +356,7 @@
private string _iconresources = ""; private string _iconresources = "";
private DateTime? _effectivedate = null; private DateTime? _effectivedate = null;
private DateTime? _expirydate = null; private DateTime? _expirydate = null;
private string _activetab = "";
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
@ -466,7 +467,7 @@
_parentid = (string)e.Value; _parentid = (string)e.Value;
_children = new List<Page>(); _children = new List<Page>();
foreach (Page p in _pages.Where(item => (_parentid == "-1" && item.ParentId == null) || (item.ParentId == int.Parse(_parentid)))) foreach (Page p in _pages.Where(item => (_parentid == "-1" && item.ParentId == null) || (item.ParentId == int.Parse(_parentid))))
{ {
if (p.PageId != _pageId && UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, p.PermissionList)) if (p.PageId != _pageId && UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, p.PermissionList))
{ {
_children.Add(p); _children.Add(p);
@ -522,6 +523,7 @@
private async Task SavePage() private async Task SavePage()
{ {
_activetab = "Settings";
validated = true; validated = true;
var interop = new Interop(JSRuntime); var interop = new Interop(JSRuntime);
if (await interop.FormValid(form)) if (await interop.FormValid(form))

2
Oqtane.Client/Modules/Controls/TabPanel.razor
View File

@ -30,6 +30,8 @@ else
[Parameter] [Parameter]
public SecurityAccessLevel? Security { get; set; } // optional - can be used to specify SecurityAccessLevel public SecurityAccessLevel? Security { get; set; } // optional - can be used to specify SecurityAccessLevel
public bool IsActive { get; set; }
protected override void OnParametersSet() protected override void OnParametersSet()
{ {
base.OnParametersSet(); base.OnParametersSet();

60
Oqtane.Client/Modules/Controls/TabStrip.razor
View File

@ -8,18 +8,9 @@
@foreach (TabPanel tabPanel in _tabPanels) @foreach (TabPanel tabPanel in _tabPanels)
{ {
<li class="nav-item" @key="tabPanel.Name"> <li class="nav-item" @key="tabPanel.Name">
@if (tabPanel.Name.ToLower() == ActiveTab.ToLower()) <a class="nav-link @(tabPanel.IsActive ? "active" : "")" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true" @onclick="() => SetActiveTab(tabPanel.Name)">
{ @tabPanel.DisplayHeading()
<a class="nav-link active" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true"> </a>
@tabPanel.DisplayHeading()
</a>
}
else
{
<a class="nav-link" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true">
@tabPanel.DisplayHeading()
</a>
}
</li> </li>
} }
</ul> </ul>
@ -59,16 +50,43 @@
} }
} }
protected override void OnParametersSet() protected override void OnParametersSet()
{ {
base.OnParametersSet();
if (PageState.QueryString.ContainsKey("tab")) if (PageState.QueryString.ContainsKey("tab"))
{ {
ActiveTab = PageState.QueryString["tab"]; ActiveTab = PageState.QueryString["tab"];
} }
if (_tabPanels == null || Refresh) if (_tabPanels == null || Refresh)
{ {
_tabPanels = new List<TabPanel>(); _tabPanels = new List<TabPanel>();
} }
// Ensure the active tab is valid and exists
if (!string.IsNullOrEmpty(ActiveTab) && _tabPanels.Any())
{
var activeTabExists = _tabPanels.Any(tp => tp.Name.Equals(ActiveTab, StringComparison.OrdinalIgnoreCase));
if (!activeTabExists)
{
ActiveTab = _tabPanels[0].Name;
}
}
// Update the active tab in the UI
UpdateActiveTab();
}
private void UpdateActiveTab()
{
if (!string.IsNullOrEmpty(ActiveTab) && _tabPanels != null)
{
foreach (var tabPanel in _tabPanels)
{
tabPanel.IsActive = tabPanel.Name.Equals(ActiveTab, StringComparison.OrdinalIgnoreCase);
}
}
} }
internal void AddTabPanel(TabPanel tabPanel) internal void AddTabPanel(TabPanel tabPanel)
@ -76,12 +94,20 @@
if (!_tabPanels.Exists(item => item.Name == tabPanel.Name) && IsAuthorized(tabPanel)) if (!_tabPanels.Exists(item => item.Name == tabPanel.Name) && IsAuthorized(tabPanel))
{ {
_tabPanels.Add(tabPanel); _tabPanels.Add(tabPanel);
if (string.IsNullOrEmpty(ActiveTab))
{
ActiveTab = tabPanel.Name;
}
UpdateActiveTab();
StateHasChanged(); StateHasChanged();
} }
if (string.IsNullOrEmpty(ActiveTab)) }
{
ActiveTab = tabPanel.Name; private void SetActiveTab(string tabName)
} {
ActiveTab = tabName;
UpdateActiveTab();
StateHasChanged();
} }
private bool IsAuthorized(TabPanel tabPanel) private bool IsAuthorized(TabPanel tabPanel)