From 467e88ef552fc5176b14e4be00e3a80f9d627f8d Mon Sep 17 00:00:00 2001
From: Shaun Walker <shaun.walker@siliqon.com>
Date: Mon, 19 Dec 2022 15:58:04 -0500
Subject: [PATCH] fix #2526 - support multiple TabStrip components on a page

---
 .../Modules/Controls/FileManager.razor        | 12 ++-----
 Oqtane.Client/Modules/Controls/TabPanel.razor |  4 +--
 Oqtane.Client/Modules/Controls/TabStrip.razor | 33 +++++++++++++------
 Oqtane.Server/wwwroot/js/interop.js           |  6 ++--
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/Oqtane.Client/Modules/Controls/FileManager.razor b/Oqtane.Client/Modules/Controls/FileManager.razor
index de6da65f..8ce2e9a5 100644
--- a/Oqtane.Client/Modules/Controls/FileManager.razor
+++ b/Oqtane.Client/Modules/Controls/FileManager.razor
@@ -87,7 +87,6 @@
 }
 
 @code {
-	private string _id;
 	private List<Folder> _folders;
 	private List<File> _files = new List<File>();
 	private string _fileinputid = string.Empty;
@@ -145,11 +144,6 @@
 
 	protected override async Task OnInitializedAsync()
 	{
-		if (!string.IsNullOrEmpty(Id))
-		{
-			_id = Id;
-		}
-
 		// packages folder is a framework folder for uploading installable nuget packages
 		if (Folder == Constants.PackagesFolder)
 		{
@@ -208,9 +202,9 @@
 
 		// create unique id for component
 		_guid = Guid.NewGuid().ToString("N");
-		_fileinputid = _guid + "FileInput";
-		_progressinfoid = _guid + "ProgressInfo";
-		_progressbarid = _guid + "ProgressBar";
+		_fileinputid = "FileInput_" + _guid;
+		_progressinfoid = "ProgressInfo_" + _guid;
+		_progressbarid = "ProgressBar_" + _guid;
 	}
 
 	private async Task GetFiles()
diff --git a/Oqtane.Client/Modules/Controls/TabPanel.razor b/Oqtane.Client/Modules/Controls/TabPanel.razor
index de41b392..0944df4a 100644
--- a/Oqtane.Client/Modules/Controls/TabPanel.razor
+++ b/Oqtane.Client/Modules/Controls/TabPanel.razor
@@ -3,13 +3,13 @@
 
 @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
     </div>
 }
 else
 {
-    <div id="@Name" class="tab-pane fade" role="tabpanel">
+	<div id="@(Parent.Id + Name)" class="tab-pane fade" role="tabpanel">
         @ChildContent
     </div>
 }
diff --git a/Oqtane.Client/Modules/Controls/TabStrip.razor b/Oqtane.Client/Modules/Controls/TabStrip.razor
index b9f24956..bf5fffb9 100644
--- a/Oqtane.Client/Modules/Controls/TabStrip.razor
+++ b/Oqtane.Client/Modules/Controls/TabStrip.razor
@@ -10,13 +10,13 @@
                     <li class="nav-item" @key="tabPanel.Name">
                         @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()
                             </a>
                         }
                         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()
                             </a>
                         }
@@ -32,18 +32,31 @@
 </CascadingValue>
 
 @code {
-    private List<TabPanel> _tabPanels;
+	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 string ActiveTab { get; set; } // optional - defaults to first TabPanel if not specified. Can also be set using a "tab=" querystring 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.
+	[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.
 
-    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"))
         {
diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js
index 5fc84ec2..226fe27b 100644
--- a/Oqtane.Server/wwwroot/js/interop.js
+++ b/Oqtane.Server/wwwroot/js/interop.js
@@ -295,10 +295,10 @@ Oqtane.Interop = {
         return files;
     },
     uploadFiles: function (posturl, folder, id, antiforgerytoken) {
-        var fileinput = document.getElementById(id + 'FileInput');
+        var fileinput = document.getElementById('FileInput_' + id);
         var files = fileinput.files;
-        var progressinfo = document.getElementById(id + 'ProgressInfo');
-        var progressbar = document.getElementById(id + 'ProgressBar');
+        var progressinfo = document.getElementById('ProgressInfo_' + id);
+        var progressbar = document.getElementById('ProgressBar_' + id);
 
         progressinfo.setAttribute("style", "display: inline;");
         progressbar.setAttribute("style", "width: 200px; display: inline;");