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

fix #2526 - support multiple TabStrip components on a page

Browse Source
This commit is contained in:
Shaun Walker 2022-12-19 15:58:04 -05:00
parent 0965db5d57
commit 467e88ef55
4 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Oqtane.Client/Modules/Controls/FileManager.razor
View File

@ -87,7 +87,6 @@
} }
@code { @code {
private string _id;
private List<Folder> _folders; private List<Folder> _folders;
private List<File> _files = new List<File>(); private List<File> _files = new List<File>();
private string _fileinputid = string.Empty; private string _fileinputid = string.Empty;
@ -145,11 +144,6 @@
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
if (!string.IsNullOrEmpty(Id))
{
_id = Id;
}
// packages folder is a framework folder for uploading installable nuget packages // packages folder is a framework folder for uploading installable nuget packages
if (Folder == Constants.PackagesFolder) if (Folder == Constants.PackagesFolder)
{ {
@ -208,9 +202,9 @@
// create unique id for component // create unique id for component
_guid = Guid.NewGuid().ToString("N"); _guid = Guid.NewGuid().ToString("N");
_fileinputid = _guid + "FileInput"; _fileinputid = "FileInput_" + _guid;
_progressinfoid = _guid + "ProgressInfo"; _progressinfoid = "ProgressInfo_" + _guid;
_progressbarid = _guid + "ProgressBar"; _progressbarid = "ProgressBar_" + _guid;
} }
private async Task GetFiles() private async Task GetFiles()

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

@ -3,13 +3,13 @@
@if (Name == Parent.ActiveTab) @if (Name == Parent.ActiveTab)
{ {
<div id="@Name" class="tab-pane fade show active" role="tabpanel"> <div id="@(Parent.Id + Name)" class="tab-pane fade show active" role="tabpanel">
@ChildContent @ChildContent
</div> </div>
} }
else else
{ {
<div id="@Name" class="tab-pane fade" role="tabpanel"> <div id="@(Parent.Id + Name)" class="tab-pane fade" role="tabpanel">
@ChildContent @ChildContent
</div> </div>
} }

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

@ -10,13 +10,13 @@
<li class="nav-item" @key="tabPanel.Name"> <li class="nav-item" @key="tabPanel.Name">
@if (tabPanel.Name == ActiveTab) @if (tabPanel.Name == ActiveTab)
{ {
<a class="nav-link active" data-bs-toggle="tab" href="#@tabPanel.Name" role="tab" @onclick:preventDefault="true"> <a class="nav-link active" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true">
@tabPanel.DisplayHeading() @tabPanel.DisplayHeading()
</a> </a>
} }
else else
{ {
<a class="nav-link" data-bs-toggle="tab" href="#@tabPanel.Name" role="tab" @onclick:preventDefault="true"> <a class="nav-link" data-bs-toggle="tab" href="#@(Id + tabPanel.Name)" role="tab" @onclick:preventDefault="true">
@tabPanel.DisplayHeading() @tabPanel.DisplayHeading()
</a> </a>
} }
@ -32,18 +32,31 @@
</CascadingValue> </CascadingValue>
@code { @code {
private List<TabPanel> _tabPanels; private List<TabPanel> _tabPanels;
private string _tabpanelid = string.Empty;
[Parameter] [Parameter]
public RenderFragment ChildContent { get; set; } // contains the TabPanels public RenderFragment ChildContent { get; set; } // contains the TabPanels
[Parameter] [Parameter]
public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified. Can also be set using a "tab=" querystring parameter. public string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified. Can also be set using a "tab=" querystring parameter.
[Parameter] [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. 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.
protected override void OnParametersSet() [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)
protected override void OnInitialized()
{
if (string.IsNullOrEmpty(Id))
{
// create unique id for component
Id = "TabStrip_" + Guid.NewGuid().ToString("N") + "_" ;
}
}
protected override void OnParametersSet()
{ {
if (PageState.QueryString.ContainsKey("tab")) if (PageState.QueryString.ContainsKey("tab"))
{ {

6
Oqtane.Server/wwwroot/js/interop.js
View File

@ -295,10 +295,10 @@ Oqtane.Interop = {
return files; return files;
}, },
uploadFiles: function (posturl, folder, id, antiforgerytoken) { uploadFiles: function (posturl, folder, id, antiforgerytoken) {
var fileinput = document.getElementById(id + 'FileInput'); var fileinput = document.getElementById('FileInput_' + id);
var files = fileinput.files; var files = fileinput.files;
var progressinfo = document.getElementById(id + 'ProgressInfo'); var progressinfo = document.getElementById('ProgressInfo_' + id);
var progressbar = document.getElementById(id + 'ProgressBar'); var progressbar = document.getElementById('ProgressBar_' + id);
progressinfo.setAttribute("style", "display: inline;"); progressinfo.setAttribute("style", "display: inline;");
progressbar.setAttribute("style", "width: 200px; display: inline;"); progressbar.setAttribute("style", "width: 200px; display: inline;");