Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework for Tabstrip regression issue #4871

Merged
merged 2 commits into from
Nov 26, 2024
Merged

Rework for Tabstrip regression issue #4871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d7549d
Reverted TabStrip and Panel
leigh-pointer Nov 26, 2024
a845dd1
Rework for Tabstrip regression issue
leigh-pointer Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion Oqtane.Client/Modules/Admin/Modules/Settings.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,6 @@

private async Task SaveModule()
{

validated = true;
var interop = new Interop(JSRuntime);
if (await interop.FormValid(form))
Expand Down
3 changes: 3 additions & 0 deletions Oqtane.Client/Modules/Admin/Pages/Add.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,18 +469,21 @@
}
else
{
_activetab = "Settings";
AddModuleMessage(Localizer["Message.Required.PageInfo"], MessageType.Warning);
}

}
catch (Exception ex)
{
await logger.LogError(ex, "Error Saving Page {Page} {Error}", page, ex.Message);
_activetab = "Settings";
AddModuleMessage(Localizer["Error.Page.Save"], MessageType.Error);
}
}
else
{
_activetab = "Settings";
AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
}
}
Expand Down
5 changes: 4 additions & 1 deletion Oqtane.Client/Modules/Admin/Pages/Edit.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -523,7 +523,7 @@

private async Task SavePage()
{
_activetab = "Settings";
//_activetab = "Settings";
validated = true;
var interop = new Interop(JSRuntime);
if (await interop.FormValid(form))
Expand Down Expand Up @@ -672,17 +672,20 @@
}
else
{
_activetab = "Settings";
AddModuleMessage(Localizer["Message.Required.PageInfo"], MessageType.Warning);
}
}
catch (Exception ex)
{
await logger.LogError(ex, "Error Saving Page {Page} {Error}", _page, ex.Message);
_activetab = "Settings";
AddModuleMessage(Localizer["Error.Page.Save"], MessageType.Error);
}
}
else
{
_activetab = "Settings";
AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
}
}
Expand Down
8 changes: 6 additions & 2 deletions Oqtane.Client/Modules/Controls/QuillJSTextEditor.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@inject IStringLocalizer<SharedResources> SharedLocalizer

<div class="quill-text-editor">
<TabStrip ActiveTab="@_activetab">
<TabStrip ActiveTab="@_activetab" TabChangeEvent=false>
@if (_allowRichText)
{
<TabPanel Name="Rich" Heading="Rich Text Editor" ResourceKey="RichTextEditor">
Expand Down Expand Up @@ -254,11 +254,11 @@
protected override void OnInitialized()
{
_interop = new QuillEditorInterop(JSRuntime);

if (string.IsNullOrEmpty(Placeholder))
{
Placeholder = Localizer["Placeholder"];
}
// _activetab = "Rich";
}

protected override void OnParametersSet()
Expand All @@ -269,6 +269,10 @@
{
_activetab = "Raw";
}
// else
// {
// _activetab = "Rich";
// }
}

protected override async Task OnAfterRenderAsync(bool firstRender)
Expand Down
11 changes: 8 additions & 3 deletions Oqtane.Client/Modules/Controls/TabPanel.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,20 @@ else
[Parameter]
public SecurityAccessLevel? Security { get; set; } // optional - can be used to specify SecurityAccessLevel

public bool IsActive { get; set; }

protected override void OnParametersSet()
{
base.OnParametersSet();

Parent.AddTabPanel((TabPanel)this);

Heading = string.IsNullOrEmpty(Heading) ? Localize(nameof(Name), Name) : Localize(nameof(Heading), Heading);
if (string.IsNullOrEmpty(Heading))
{
Heading = Localize(nameof(Name), Name);
}
else
{
Heading = Localize(nameof(Heading), Heading);
}
}

public string DisplayHeading()
Expand Down
109 changes: 48 additions & 61 deletions Oqtane.Client/Modules/Controls/TabStrip.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,18 @@
@foreach (TabPanel tabPanel in _tabPanels)
{
<li class="nav-item" @key="tabPanel.Name">
<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>
@if (tabPanel.Name.ToLower() == ActiveTab.ToLower())
{
<a class="nav-link active" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick="() => { if (TabChangeEvent) ChangeTab(tabPanel.Name); }">
@tabPanel.DisplayHeading()
</a>
}
else
{
<a class="nav-link" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick="() => { if (TabChangeEvent) ChangeTab(tabPanel.Name); }">
@tabPanel.DisplayHeading()
</a>
}
</li>
}
</ul>
Expand All @@ -23,91 +32,60 @@
</CascadingValue>

@code {
private List<TabPanel> _tabPanels;
private string _tabpanelid = string.Empty;
private List<TabPanel> _tabPanels;
private string _tabpanelid = string.Empty;

[Parameter]
public RenderFragment ChildContent { get; set; } // contains the TabPanels
[Parameter]
public RenderFragment ChildContent { get; set; } // contains the TabPanels

[Parameter]
public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified. Can also be set using a "tab=" querystring parameter.
[Parameter]
public bool TabChangeEvent { get; set; } = true;

[Parameter]
public bool Refresh { get; set; } // optional - used in scenarios where TabPanels are added/removed dynamically within a parent form. ActiveTab may need to be reset as well when this property is used.
[Parameter]
public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified. Can also be set using a "tab=" querystring parameter.

[Parameter]
public string Id { get; set; } // optional - used to uniquely identify an instance of a tab strip component (will be set automatically if no value provided)
[Parameter]
public bool Refresh { get; set; } // optional - used in scenarios where TabPanels are added/removed dynamically within a parent form. ActiveTab may need to be reset as well when this property is used.

[Parameter]
public string Id { get; set; } // optional - used to uniquely identify an instance of a tab strip component (will be set automatically if no value provided)

[Parameter]
public string TabContentClass { get; set; } // optional - to extend the TabContent div.

protected override void OnInitialized()
{
if (string.IsNullOrEmpty(Id))
{
// create unique id for component
Id = "TabStrip_" + Guid.NewGuid().ToString("N") + "_" ;
}
}

protected override void OnParametersSet()
protected override void OnInitialized()
{
base.OnParametersSet();
if (string.IsNullOrEmpty(Id))
{
// create unique id for component
Id = "TabStrip_" + Guid.NewGuid().ToString("N") + "_";
}
}

protected override void OnParametersSet()
{
if (PageState.QueryString.ContainsKey("tab"))
{
ActiveTab = PageState.QueryString["tab"];
}

if (_tabPanels == null || Refresh)
{
_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);
}
}
StateHasChanged();
}

internal void AddTabPanel(TabPanel tabPanel)
{
if (!_tabPanels.Exists(item => item.Name == tabPanel.Name) && IsAuthorized(tabPanel))
{
_tabPanels.Add(tabPanel);
if (string.IsNullOrEmpty(ActiveTab))
{
ActiveTab = tabPanel.Name;
}
UpdateActiveTab();
StateHasChanged();
}
}

private void SetActiveTab(string tabName)
{
ActiveTab = tabName;
UpdateActiveTab();
StateHasChanged();
if (string.IsNullOrEmpty(ActiveTab))
{
ActiveTab = tabPanel.Name;
}
}

private bool IsAuthorized(TabPanel tabPanel)
Expand Down Expand Up @@ -136,4 +114,13 @@
}
return authorized;
}

private void ChangeTab(string tabName)
{
if (ActiveTab != tabName)
{
ActiveTab = tabName;
StateHasChanged();
}
}
}