Select Cost Centre and Financial Year for Edit Payroll page (#537)

Co-authored-by: Sam Dudley <[email protected]>

forecast/templates/forecast/edit/choose_cost_centre.html

@@ -8,14 +8,15 @@
     {% breadcrumb "Choose cost centre" "choose_cost_centre" %}
 {% endblock %}
 
-{% block title %}Edit Forecast - Choose Cost Centre{% endblock %}
+{% block title %}Edit {{ view.get_page_header }} - Choose Cost Centre{% endblock %}
 
 {% block content %}
     <h3 class="govuk-heading-l">My cost centres</h3>
     <div id="cost-centre-list-app"></div>
 {% endblock %}
 {% block scripts %}
     <script>
+        window.nextPage = "{{ view.next_page }}";
         window.costCentres = {{ view.get_user_cost_centres|safe }};
         window.currentFinancialYear = {{ view.get_financial_year|safe }};
         window.currentFinancialYearDisplay = "{{ view.get_financial_year_display|safe }}";

forecast/views/edit_select_cost_centre.py

@@ -23,6 +23,7 @@ class ChooseCostCentreView(
     template_name = "forecast/edit/choose_cost_centre.html"
     form_class = MyCostCentresForm
     cost_centre = None
+    next_page = "forecast"
 
     def test_func(self):
         can_edit = can_edit_at_least_one_cost_centre(self.request.user)
@@ -80,6 +81,9 @@ def get_user_cost_centres(self):
 
         return json.dumps(cost_centres)
 
+    def get_page_header(self):
+        return self.next_page.capitalize()
+
     def get_form_kwargs(self):
         kwargs = super(ChooseCostCentreView, self).get_form_kwargs()
         kwargs["user"] = self.request.user

front_end/src/Components/CostCentreList/index.jsx

@@ -6,6 +6,7 @@ const CostCentreList = ({rowIndex, cellKey, format}) => {
     const [financialYears, setFinancialYears] = useState([])
     const [forecastFinYearDisplay, setForecastFinYearDisplay] = useState(null)
     const [forecastFinYear, setForecastFinYear] = useState(null)
+    const [nextPage, setNextPage] = useState(null)
 
     useEffect(() => {
         const timer = () => {
@@ -18,6 +19,7 @@ const CostCentreList = ({rowIndex, cellKey, format}) => {
                     if (window.financialYears){
                         setFinancialYears(window.financialYears)
                     }
+                    setNextPage(window.nextPage)
                 } else {
                     timer()
                 }
@@ -68,7 +70,7 @@ const CostCentreList = ({rowIndex, cellKey, format}) => {
             <ul className="cost-centre-list">
               {displayedCentres.map((costCentre, index) => {
                 return <li key={index}>
-                    <a href={ `/forecast/edit/${costCentre.code}/${forecastFinYear}` } className="govuk-link">{costCentre.code} - {costCentre.name}</a>
+                    <a href={ `/${nextPage}/edit/${costCentre.code}/${forecastFinYear}` } className="govuk-link">{costCentre.code} - {costCentre.name}</a>
                 </li>
               })}
             </ul>

payroll/templates/payroll/page/edit_payroll.html

@@ -5,6 +5,7 @@
 
 {% block breadcrumbs %}
     {{ block.super }}
+    {% breadcrumb "Choose cost centre" "payroll:choose_cost_centre" %}
     {% breadcrumb "Edit payroll" "edit_payroll" %}
 {% endblock breadcrumbs %}
 
@@ -14,7 +15,7 @@ <h1 class="govuk-heading-l">Edit payroll</h1>
 
     <h1 class="govuk-heading-l">Forecast</h1>
     <p class="govuk-body-s">
-        This is a temporary table to demostrate the forecast figures. Eventually these
+        This is a temporary table to demonstrate the forecast figures. Eventually these
         figures would end up in the "Edit forecast" table.
     </p>
     <table class="govuk-table">

payroll/urls.py

@@ -1,12 +1,13 @@
 from django.urls import path
 
+from forecast.views.edit_select_cost_centre import ChooseCostCentreView
+
 from . import views
 
 
 app_name = "payroll"
 
 urlpatterns = [
-    # TODO: Add choose financial year and cost centre url.
     path(
         "edit/<str:cost_centre_code>/<int:financial_year>/",
         views.edit_payroll_page,
@@ -17,4 +18,9 @@
         views.PayrollView.as_view(),
         name="api",
     ),
+    path(
+        "edit/choose-cost-centre/",
+        ChooseCostCentreView.as_view(next_page="payroll"),
+        name="choose_cost_centre",
+    ),
 ]