Fix Show/Hide Search deployment UI (OrchardCMS#17289)

gvkries · Dec 31, 2024 · 0397597 · 0397597
1 parent b784d0e
commit 0397597
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 113 deletions.
diff --git a/...rchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Edit.cshtml b/...rchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Edit.cshtml
@@ -14,15 +14,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-reverseToggle=".idxsel" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target=".idxsel" aria-expanded="false" aria-controls="idxsel" />
                     @T["Include all search indexes."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div class="idxsel mb-3 mt-4 mb-5 @(Model.IncludeAll ? "collapse" : "show")">
+<div class="idxsel mb-3 mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The search indexes to add as part of the plan."]</span>
@@ -48,16 +48,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    $(function () {
-        $("[data-reversetoggle]").on("click", function () {
-            var state = this.checked;
-            if (state) {
-                $($(this).attr("data-reversetoggle")).collapse('hide');
-            } else {
-                $($(this).attr("data-reversetoggle")).collapse('show');
-            }
-        });
-    });
-</script>
diff --git a/...ardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Summary.cshtml b/...ardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge badge-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indexNames?.Length > 0)
 {
@@ -23,5 +23,5 @@ else if (indexNames?.Length > 0)
 }
 else
 {
-    <span class="badge badge-warning">@T["No index selected."]</span>
+    <span class="badge text-bg-warning">@T["No index selected."]</span>
 }
diff --git a/...ore.Search.AzureAI/Views/Items/AzureAISearchIndexRebuildDeploymentStep.Fields.Edit.cshtml b/...ore.Search.AzureAI/Views/Items/AzureAISearchIndexRebuildDeploymentStep.Fields.Edit.cshtml
@@ -9,7 +9,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Azure AI Search indices."]
                 </label>
             </div>
@@ -43,11 +43,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/...dCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Edit.cshtml b/...dCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Edit.cshtml
@@ -9,15 +9,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Azure AI Search indices."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Azure AI Search Indices to reset as part of the plan."]</span>
@@ -43,11 +43,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/...re.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Summary.cshtml b/...re.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge bg-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indices?.Length > 0)
 {

diff --git a/...rchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Edit.cshtml b/...rchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Edit.cshtml
@@ -12,15 +12,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-reverseToggle=".idxsel" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target=".idxsel" aria-expanded="false" aria-controls="idxsel" />
                     @T["Include all search indexes."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div class="idxsel mb-3 mt-4 mb-5 @(Model.IncludeAll ? "collapse" : "show")">
+<div class="idxsel mb-3 mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The search indexes to add as part of the plan."]</span>
@@ -31,12 +31,12 @@
             <ul class="list-group">
                 @foreach (var indexName in allIndexNames)
                 {
-                    var checkd = indexNames?.Contains(indexName);
+                    var isChecked = indexNames?.Contains(indexName);
 
                     <li class="list-group-item">
                         <div class="form-check">
                             <label class="form-check-label">
-                                <input class="form-check-input" type="checkbox" name="@Html.NameFor(m => m.IndexNames)" value="@indexName" checked="@checkd">
+                                <input class="form-check-input" type="checkbox" name="@Html.NameFor(m => m.IndexNames)" value="@indexName" checked="@isChecked">
                                 @indexName
                             </label>
                         </div>
@@ -46,16 +46,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    $(function () {
-        $("[data-reversetoggle]").on("click", function () {
-            var state = this.checked;
-            if (state) {
-                $($(this).attr("data-reversetoggle")).collapse('hide');
-            } else {
-                $($(this).attr("data-reversetoggle")).collapse('show');
-            }
-        });
-    });
-</script>
diff --git a/...ardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Summary.cshtml b/...ardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge badge-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indexNames?.Length > 0)
 {
@@ -23,5 +23,5 @@ else if (indexNames?.Length > 0)
 }
 else
 {
-    <span class="badge badge-warning">@T["No index selected."]</span>
+    <span class="badge text-bg-warning">@T["No index selected."]</span>
 }
diff --git a/...ore.Search.Elasticsearch/Views/Items/ElasticIndexRebuildDeploymentStep.Fields.Edit.cshtml b/...ore.Search.Elasticsearch/Views/Items/ElasticIndexRebuildDeploymentStep.Fields.Edit.cshtml
@@ -7,15 +7,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list"/>
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Elasticsearch indices."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Elasticsearch indices to rebuild as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/...dCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Edit.cshtml b/...dCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Edit.cshtml
@@ -7,15 +7,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Elasticsearch indices."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Elasticsearch Indices to reset as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/...re.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Summary.cshtml b/...re.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge bg-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indices?.Length > 0)
 {

diff --git a/...odules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexDeploymentStep.Fields.Edit.cshtml b/...odules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexDeploymentStep.Fields.Edit.cshtml
@@ -12,16 +12,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll"
-                           data-reverseToggle=".idxsel" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target=".idxsel" aria-expanded="false" aria-controls="idxsel" />
                     @T["Include all search indexes."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div class="idxsel mt-4 mb-5 @(Model.IncludeAll ? "collapse" : "show")">
+<div class="idxsel mb-3 mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The search indexes to add as part of the plan."]</span>
@@ -47,16 +46,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    $(function () {
-        $("[data-reversetoggle]").on("click", function () {
-            var state = this.checked;
-            if (state) {
-                $($(this).attr("data-reversetoggle")).collapse('hide');
-            } else {
-                $($(this).attr("data-reversetoggle")).collapse('show');
-            }
-        });
-    });
-</script>
diff --git a/...OrchardCore.Search.Lucene/Views/Items/LuceneIndexRebuildDeploymentStep.Fields.Edit.cshtml b/...OrchardCore.Search.Lucene/Views/Items/LuceneIndexRebuildDeploymentStep.Fields.Edit.cshtml
@@ -7,15 +7,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list"/>
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Lucene search indices."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Lucene search indices to rebuild as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/...s/OrchardCore.Search.Lucene/Views/Items/LuceneIndexResetDeploymentStep.Fields.Edit.cshtml b/...s/OrchardCore.Search.Lucene/Views/Items/LuceneIndexResetDeploymentStep.Fields.Edit.cshtml
@@ -7,15 +7,15 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Lucene search indices."]
                 </label>
             </div>
         </div>
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Lucene Search Indices to reset as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>