feat: Added 'save all' button to School and Trust comparison pages

DFE-Digital · Jan 23, 2025 · 0f6b749 · 0f6b749
1 parent 148c6c6
commit 0f6b749
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/web/src/Web.App/AssetSrc/scss/main.scss b/web/src/Web.App/AssetSrc/scss/main.scss
@@ -393,7 +393,7 @@ hr.govuk-section-break--print {
 
 .app-resources {
   margin-top: govuk-spacing(6);
-  
+
   @include govuk-media-query('tablet') {
     margin-top: 0;
   }
@@ -405,4 +405,8 @@ hr.govuk-section-break--print {
   @include govuk-media-query('tablet') {
     padding-top: govuk-spacing(2);
   }
+}
+
+.save-charts {
+  float: right;
 }
diff --git a/web/src/Web.App/Views/SchoolComparison/Index.cshtml b/web/src/Web.App/Views/SchoolComparison/Index.cshtml
@@ -11,6 +11,11 @@
     @await Html.PartialAsync("_IncompleteFinances")
 }
 
+@if (!hasMissingComparatorSet)
+{
+    @await Html.PartialAsync("_SaveChartsButton")
+}
+
 @await Component.InvokeAsync("EstablishmentHeading", new
 {
     title = ViewData[ViewDataKeys.Title],

diff --git a/web/src/Web.App/Views/Shared/_SaveChartsButton.cshtml b/web/src/Web.App/Views/Shared/_SaveChartsButton.cshtml
@@ -0,0 +1,9 @@
+<div class="save-charts">
+    <div
+        data-share-content-by-element-class-name
+        data-element-class-name="chart-wrapper"
+        data-label="Save all chart images"
+        data-element-title-attr="aria-label"
+        data-show-titles="true"
+        data-show-progress="true"></div>
+</div>
diff --git a/web/src/Web.App/Views/TrustComparison/Index.cshtml b/web/src/Web.App/Views/TrustComparison/Index.cshtml
@@ -1,27 +1,35 @@
-@using Web.App.Extensions
-@using Newtonsoft.Json
+@using Newtonsoft.Json
+@using Web.App.Extensions
 @model Web.App.ViewModels.TrustComparisonViewModel
 @{
     ViewData[ViewDataKeys.Title] = PageTitles.TrustComparison;
 }
 
-@await Component.InvokeAsync("EstablishmentHeading", new { title = ViewData[ViewDataKeys.Title], name = Model.Name, id = Model.CompanyNumber, kind = OrganisationTypes.Trust })
+@await Html.PartialAsync("_SaveChartsButton")
+
+@await Component.InvokeAsync("EstablishmentHeading", new
+{
+    title = ViewData[ViewDataKeys.Title],
+    name = Model.Name,
+    id = Model.CompanyNumber,
+    kind = OrganisationTypes.Trust
+})
 
 @await Component.InvokeAsync("DataSource", new
 {
     organisationType = OrganisationTypes.Trust,
     sourceType = DataSourceTypes.Spending,
-    isPartOfTrust = true, 
+    isPartOfTrust = true,
     additionText = new[] { "View the spending between schools in this trust." }
 })
 
 @if (Model.NumberOfSchools > 0)
 {
-    <div id="compare-your-costs" 
-         data-type="@OrganisationTypes.Trust" 
-         data-id="@Model.CompanyNumber" 
+    <div id="compare-your-costs"
+         data-type="@OrganisationTypes.Trust"
+         data-id="@Model.CompanyNumber"
          data-phases="@Model.Phases.ToJson(Formatting.None)">
-    </div>    
+    </div>
 }
 
 @await Component.InvokeAsync("TrustFinanceTools", new