From c9cf14b0b5c996a5e21cddba305f109a06ea1311 Mon Sep 17 00:00:00 2001 From: Sam Dudley Date: Tue, 25 Feb 2025 13:16:29 +0000 Subject: [PATCH] FFT-204 Edit payroll UX tweaks (#627) --- forecast/templates/forecast/edit/edit.html | 2 +- front_end/src/Apps/Payroll.jsx | 17 +++++++++++++++-- front_end/src/Components/Common/Loading.jsx | 7 +++++++ .../Components/Common/SuccessBanner/index.jsx | 4 ++-- .../EditPayroll/ForecastTable/index.jsx | 2 ++ .../templates/payroll/page/edit_payroll.html | 12 ++++++++---- payroll/views.py | 16 +++++++++------- 7 files changed, 44 insertions(+), 16 deletions(-) create mode 100644 front_end/src/Components/Common/Loading.jsx diff --git a/forecast/templates/forecast/edit/edit.html b/forecast/templates/forecast/edit/edit.html index aa21462e..93832332 100644 --- a/forecast/templates/forecast/edit/edit.html +++ b/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 %} - Go to Payroll + Go to Payroll {% endif %} {% endswitch %} diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx index 5d74f5f7..e60388ad 100644 --- a/front_end/src/Apps/Payroll.jsx +++ b/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 ; + } + return ( <> - {saveSuccess && } + {saveSuccess && Success - forecast updated} {errors && } + {children} +

+ ); +} diff --git a/front_end/src/Components/Common/SuccessBanner/index.jsx b/front_end/src/Components/Common/SuccessBanner/index.jsx index 104e79f5..d9d91819 100644 --- a/front_end/src/Components/Common/SuccessBanner/index.jsx +++ b/front_end/src/Components/Common/SuccessBanner/index.jsx @@ -1,4 +1,4 @@ -export default function SuccessBanner() { +export default function SuccessBanner({ children }) { return (
@@ -6,7 +6,7 @@ export default function SuccessBanner() { className="govuk-notification-banner__title" id="govuk-notification-banner-title" > - Success + {children}
diff --git a/front_end/src/Components/EditPayroll/ForecastTable/index.jsx b/front_end/src/Components/EditPayroll/ForecastTable/index.jsx index 7ea4ea69..8c253ebc 100644 --- a/front_end/src/Components/EditPayroll/ForecastTable/index.jsx +++ b/front_end/src/Components/EditPayroll/ForecastTable/index.jsx @@ -5,6 +5,8 @@ export default function ForecastTable({ forecast, months }) { <>

Payroll forecast

+

Save payroll changes to update this table.

+
diff --git a/payroll/templates/payroll/page/edit_payroll.html b/payroll/templates/payroll/page/edit_payroll.html index 91a73c89..63c7e168 100644 --- a/payroll/templates/payroll/page/edit_payroll.html +++ b/payroll/templates/payroll/page/edit_payroll.html @@ -15,18 +15,22 @@

Edit payroll

{# Here we assume that a user with access to payroll also has access to forecast #} {% switch 'payroll' %} - Go to Forecast + Go to Forecast {% endswitch %} +

+ {{ cost_centre }} +

+
{% endblock content %} {% block scripts %} {% vite_dev_client %} {% vite_js 'src/index.jsx' %} diff --git a/payroll/views.py b/payroll/views.py index 5e931584..80fb1f1b 100644 --- a/payroll/views.py +++ b/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):