FFT-204 Edit payroll UX tweaks (#627)

forecast/templates/forecast/edit/edit.html

@@ -18,7 +18,7 @@
     {% can_access_edit_payroll user as user_can_access_edit_payroll %}
     {% switch 'payroll' %}
         {% if user_can_access_edit_payroll %}
-            <a class="govuk-link" href="{% url 'payroll:edit' view.cost_centre_details.cost_centre_code view.financial_year %}">Go to Payroll</a>
+            <a class="govuk-link govuk-link--no-visited-state" href="{% url 'payroll:edit' view.cost_centre_details.cost_centre_code view.financial_year %}">Go to Payroll</a>
         {% endif %}
     {% endswitch %}
 </div>

front_end/src/Apps/Payroll.jsx

@@ -16,6 +16,7 @@ import ErrorSummary from "../Components/Common/ErrorSummary";
 import SuccessBanner from "../Components/Common/SuccessBanner";
 import ForecastTable from "../Components/EditPayroll/ForecastTable";
 import { makeFinancialCodeKey } from "../Util";
+import Loading from "../Components/Common/Loading";
 
 const initialPayrollState = {
   employees: [],
@@ -37,6 +38,10 @@ export default function Payroll() {
   const initialShowPreviousMonths = localStorage.getItem(
     "editPayroll.showPreviousMonths",
   );
+
+  // State
+
+  const [isLoading, setIsLoading] = useState(true);
   const [showPreviousMonths, setShowPreviousMonths] = useState(
     initialShowPreviousMonths === "true",
   );
@@ -47,6 +52,8 @@ export default function Payroll() {
     return savedTab ? parseInt(savedTab) : 0;
   });
 
+  // Fetches
+
   async function getAllPayroll() {
     try {
       const data = await api.getPayrollData();
@@ -59,6 +66,8 @@ export default function Payroll() {
         },
       ]);
     }
+    // finally
+    setIsLoading(false);
   }
 
   // Use Effects
@@ -150,9 +159,13 @@ export default function Payroll() {
     );
   }
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <>
-      {saveSuccess && <SuccessBanner />}
+      {saveSuccess && <SuccessBanner>Success - forecast updated</SuccessBanner>}
       {errors && <ErrorSummary errors={errors} />}
       <ToggleCheckbox
         toggle={showPreviousMonths}
@@ -212,7 +225,7 @@ export default function Payroll() {
         </Tab>
       </Tabs>
       <button className="govuk-button" onClick={handleSavePayroll}>
-        Save payroll
+        Save payroll and update forecast
       </button>
       <ForecastTable
         forecast={forecastAndActuals}

front_end/src/Components/Common/Loading.jsx

@@ -0,0 +1,7 @@
+export default function Loading({ children = "Loading..." }) {
+  return (
+    <p className="govuk-body" style={{ textAlign: "center", fontSize: "2rem" }}>
+      {children}
+    </p>
+  );
+}

front_end/src/Components/Common/SuccessBanner/index.jsx

@@ -1,12 +1,12 @@
-export default function SuccessBanner() {
+export default function SuccessBanner({ children }) {
   return (
     <div className="govuk-notification-banner govuk-notification-banner--success">
       <div className="govuk-notification-banner__header">
         <h2
           className="govuk-notification-banner__title"
           id="govuk-notification-banner-title"
         >
-          Success
+          {children}
         </h2>
       </div>
     </div>

front_end/src/Components/EditPayroll/ForecastTable/index.jsx

@@ -5,6 +5,8 @@ export default function ForecastTable({ forecast, months }) {
     <>
       <h2 className="govuk-heading-m">Payroll forecast</h2>
 
+      <p className="govuk-body">Save payroll changes to update this table.</p>
+
       <div className="scrollable">
         <table className="govuk-table">
           <thead className="govuk-table__head">

payroll/templates/payroll/page/edit_payroll.html

@@ -15,18 +15,22 @@ <h1 class="govuk-heading-l">Edit payroll</h1>
 
         {# Here we assume that a user with access to payroll also has access to forecast #}
         {% switch 'payroll' %}
-            <a class="govuk-link" href="{% url 'edit_forecast' cost_centre_code financial_year %}">Go to Forecast</a>
+            <a class="govuk-link govuk-link--no-visited-state" href="{% url 'edit_forecast' cost_centre.cost_centre_code financial_year.financial_year %}">Go to Forecast</a>
         {% endswitch %}
     </div>
 
+    <h2 class="govuk-heading-m">
+        <a class="govuk-link govuk-link--no-visited-state" href="{% url 'forecast_cost_centre' cost_centre.cost_centre_code financial_year.financial_year %}" target="_blank">{{ cost_centre }}</a>
+    </h2>
+
     <div id="payroll-app"></div>
 {% endblock content %}
 
 {% block scripts %}
     <script>
-        window.costCentreCode = "{{ cost_centre_code|escapejs }}";
-        window.financialYear = new Number("{{ financial_year }}");
-        window.addVacancyUrl = "{% url 'payroll:add_vacancy' cost_centre_code financial_year %}"
+        window.costCentreCode = "{{ cost_centre.cost_centre_code|escapejs }}";
+        window.financialYear = new Number("{{ financial_year.financial_year }}");
+        window.addVacancyUrl = "{% url 'payroll:add_vacancy' cost_centre.cost_centre_code financial_year.financial_year %}"
     </script>
     {% vite_dev_client %}
     {% vite_js 'src/index.jsx' %}

payroll/views.py

@@ -6,6 +6,7 @@
 from django.urls import reverse
 from django.views import View
 from django.views.generic import CreateView, DeleteView, UpdateView
+from django.views.generic.base import ContextMixin, TemplateView
 
 from core.models import FinancialYear
 from costcentre.models import CostCentre
@@ -16,7 +17,7 @@
 from .services.ingest import import_payroll
 
 
-class EditPayrollBaseView(UserPassesTestMixin, View):
+class EditPayrollBaseView(UserPassesTestMixin, ContextMixin, View):
     def test_func(self) -> bool | None:
         return payroll_service.can_edit_payroll(
             self.request.user,
@@ -36,15 +37,16 @@ def setup(self, request, *args, **kwargs) -> None:
             pk=self.kwargs["financial_year"],
         )
 
-
-class EditPayrollPage(EditPayrollBaseView):
-    def get(self, *args, **kwargs) -> HttpResponse:
+    def get_context_data(self, **kwargs):
         context = {
-            "cost_centre_code": self.cost_centre.cost_centre_code,
-            "financial_year": self.financial_year.financial_year,
+            "cost_centre": self.cost_centre,
+            "financial_year": self.financial_year,
         }
+        return super().get_context_data(**kwargs) | context
+
 
-        return TemplateResponse(self.request, "payroll/page/edit_payroll.html", context)
+class EditPayrollPage(TemplateView, EditPayrollBaseView):
+    template_name = "payroll/page/edit_payroll.html"
 
 
 class VacancyViewMixin(PermissionRequiredMixin):