Govuk js style

app/views/case_workers/admin/allocations/_re_allocation.html.haml

@@ -40,7 +40,13 @@
           = govuk_table_thead do
             = govuk_table_row do
               = govuk_table_th do
-                = govuk_link_to t('.select_all'), '#', class: 'select-all', data: { 'all-checked': 'false' }, 'aria-label': t('.select_all_label')
+                .govuk-form-group{ data: { module: 'govuk-select-all', 'select-all-class': 'select-all', 'collection-class': 'select-all-box' } }
+                  .govuk-checkboxes.govuk-checkboxes--small{ data: { module: 'govuk-checkboxes' } }
+                    .govuk-checkboxes__item
+                      %input.govuk-checkboxes__input.select-all{ type: :checkbox, name: 'select-all', id: 'select-all', selected: false }
+                      %label.govuk-label.govuk-checkboxes__label{ for: 'select-all' }
+                        %span.govuk-visually-hidden
+                          Select all
               = govuk_table_th do
                 = t('.case_number')
               = govuk_table_th do
@@ -65,7 +71,7 @@
                     .govuk-form-group.error-message-container
                       .govuk-checkboxes.govuk-checkboxes--small{ 'data-module': 'govuk-checkboxes' }
                         .govuk-checkboxes__item
-                          = b.check_box(class: 'govuk-checkboxes__input')
+                          = b.check_box(class: 'govuk-checkboxes__input select-all-box')
                           = b.label(class: 'govuk-label govuk-checkboxes__label'){ t('.choose_label_html', case_number: claim.case_number) }
 
                       - claim.injection_error do |message|

app/views/layouts/application.html.haml

@@ -25,7 +25,7 @@
         %script
           != ga_outlet
 
-  %body{ class: "govuk-template__body controller-#{controller.controller_name}" }
+  %body{ class: "govuk-template__body controller-#{controller.controller_name} govuk-frontend-supported" }
     :javascript
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
 

app/views/shared/_determinations_form.html.haml

@@ -18,7 +18,7 @@
             %div
               = validation_error_message(@error_presenter, :determinations)
 
-      = govuk_table( id: 'determinations', class: 'js-cw-claim-assessment', data: { apply_vat: "#{claim.apply_vat}", vat_url: vat_path(format: :json), submitted_date: claim.vat_date(:db), scheme: claim.agfs? ? 'agfs' : 'lgfs' }) do
+      = govuk_table( id: 'determinations', class: 'js-cw-claim-assessment', data: { module: 'govuk-determination', apply_vat: "#{claim.apply_vat}", vat_url: vat_path(format: :json), submitted_date: claim.vat_date(:db), scheme: claim.agfs? ? 'agfs' : 'lgfs' }) do
         = govuk_table_caption(class: 'govuk-visually-hidden') do
           %h3.govuk-heading-m
             = t('.assessment_summary')

app/webpack/javascripts/modules/determination.mjs

@@ -0,0 +1,86 @@
+/**
+ * Determination
+ *
+ * Calculate totals for the assessment summary on case_workers/claims/<claim-id>
+ *
+ *
+ * <div data-module="govuk-determination" data-apply-vat="true" data-vat-url="/vat.json" data-submitted-date="2023-06-27" data-scheme="agfs">
+ *   <!-- Calculated values -->
+ *   <span class="js-total-exc-vat-determination">...</span>
+ *   <span class="js-vat-determination"...</span>
+ *   <span class="js-total-determination">...</span>
+ *
+ *   <!-- Fields used for the calculation -->
+ *   <input id="claim_assessment_attributes_fees" />
+ *   <input id="claim_assessment_attributes_expenses" />
+ *   <input id="claim_assessment_attributes_disbursements" />
+ *
+ *   <!-- Field for LGFS claims -->
+ *   <input class="js-lgfs-vat-determination"id=" claim_assessment_attributes_vat_amount">£0.00</span>
+ * </div>
+ */
+
+export class Determination {
+  /**
+   * @param {Element} $module - HTML element to use for component
+   */
+  constructor ($module) {
+    if (($module instanceof window.HTMLElement) && document.body.classList.contains('govuk-frontend-supported')) {
+      this.$module = $module
+    }
+  }
+
+  /**
+   * Initialise component
+   */
+  init () {
+    if (!this.$module) { return }
+
+    const $module = this.$module
+
+    this.$totalExclVat = $module.querySelector('.js-total-exc-vat-determination')
+    this.$totalVat = $module.querySelector('.js-vat-determination')
+    this.$LgfsVat = $module.querySelector('.js-lgfs-vat-determination')
+    this.$totalInclVat = $module.querySelector('.js-total-determination')
+    this.scheme = $module.dataset.scheme
+    // Should this be this.applyVat?
+    this.ajaxVat = $module.dataset.applyVat
+    this.vatUrl = $module.dataset.vatUrl
+    this.vatDate = $module.dataset.submittedDate
+
+    const fieldIds = [
+      'fees',
+      'expenses',
+      'disbursements',
+      'vat_amount'
+    ]
+
+    this.fields = fieldIds.map(id => document.querySelector(`#claim_assessment_attributes_${id}`)).filter(field => field)
+    this.fields.forEach(element => element.addEventListener('change', () => {
+      this.calculateTotalRows()
+      return true
+    }))
+  }
+
+  calculateTotalRows () {
+    const total = this.fields.reduce((n, field) => n + (parseFloat(field?.value) || 0.0), 0).toFixed(2)
+    return this.applyVat(total).then(data => {
+      this.$totalExclVat.innerHTML = data.net_amount
+      if (this.$totalVat) { this.$totalVat.innerHTML = data.vat_amount }
+      this.$totalInclVat.innerHTML = data.total_inc_vat
+    })
+  }
+
+  async applyVat (netAmount) {
+    const params = new URLSearchParams({
+      scheme: this.scheme,
+      lgfs_vat_amount: this.$LgfsVat?.value,
+      date: this.vatDate,
+      apply_vat: this.ajaxVat,
+      net_amount: netAmount
+    })
+    const response = await fetch(this.vatUrl + '?' + params.toString())
+
+    return await response.json()
+  }
+}