Merge pull request #566 from alphagov/CM-683-reorder-telephone-numbers-3

(CM-683) Reorderable telephone numbers

Author: graycodes

app/assets/stylesheets/components/_array-component.scss

@@ -45,5 +45,12 @@
       @extend .gem-c-button--secondary-quiet; // stylelint-disable-line scss/at-extend-no-missing-placeholder
     }
   }
+
+  &--sortable {
+    .gem-c-add-another__move-button-wrapper {
+      top: govuk-spacing(6);
+      right: govuk-spacing(3);
+    }
+  }
   // stylelint-enable selector-no-qualifying-type
 }

app/components/edition/details/fields/array/item_component.rb

@@ -24,11 +24,11 @@ def components
     fields = field.nested_fields || [field]
 
     fields.map do |item|
-      helpers.component_for_field(item, context(item))
+      helpers.component_for_field(item, context_for_field(item))
     end
   end
 
-  def context(field)
+  def context_for_field(field)
     Edition::Details::Fields::Context.new(
       edition:,
       field:,

app/components/edition/details/fields/array/sortable_item_component.html.erb

@@ -0,0 +1,3 @@
+<% components.each do |component| %>
+  <%= render component %>
+<% end %>

app/components/edition/details/fields/array/sortable_item_component.rb

@@ -0,0 +1,35 @@
+class Edition::Details::Fields::Array::SortableItemComponent < ViewComponent::Base
+  include ErrorsHelper
+
+  def initialize(field:, edition:, schema:, value:, index:, parent_indexes:)
+    @field = field
+    @edition = edition
+    @schema = schema
+    @value = value
+    @index = index
+    @parent_indexes = parent_indexes
+  end
+
+private
+
+  attr_reader :field, :edition, :schema, :value, :index, :parent_indexes
+
+  def components
+    fields = field.nested_fields || [field]
+
+    fields.map do |item|
+      helpers.component_for_field(item, context_for_field(item))
+    end
+  end
+
+  def context_for_field(field)
+    Edition::Details::Fields::Context.new(
+      edition:,
+      field:,
+      schema:,
+      index:,
+      details: value,
+      parent_indexes:,
+    )
+  end
+end

app/components/edition/details/fields/sortable_array_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.div class: wrapper_classes, data: { ga4_section: label, module: "array-component" } do %>
+  <%= render "govuk_publishing_components/components/add_another", {
+    fieldset_legend: label,
+    add_button_text: I18n.t("buttons.add_another", item: label.downcase),
+    sortable: true,
+    items:,
+    empty: render(empty_component),
+    } %>
+<% end %>

app/components/edition/details/fields/sortable_array_component.rb

@@ -0,0 +1,78 @@
+class Edition::Details::Fields::SortableArrayComponent < ViewComponent::Base
+  def initialize(context)
+    @context = context
+  end
+
+private
+
+  attr_reader :context
+
+  delegate :field, :name, :id, :error_items, :edition, :schema, :subschema, :object_title, :indexes, to: :context
+
+  def subschema_block_type
+    @subschema_block_type ||= subschema&.block_type
+  end
+
+  def label
+    field.title.singularize
+  end
+
+  def value
+    context.value || []
+  end
+
+  def number_of_items
+    if value.count.positive?
+      value.count
+    else
+      field.is_required? ? 1 : 0
+    end
+  end
+
+  def components
+    number_of_items.times.map do |index|
+      component(index)
+    end
+  end
+
+  def empty_component
+    component(number_of_items)
+  end
+
+  def component(index)
+    Edition::Details::Fields::Array::SortableItemComponent.new(
+      field:,
+      edition:,
+      schema:,
+      value: value[index],
+      index: index,
+      parent_indexes: indexes,
+    )
+  end
+
+  def wrapper_classes
+    %W[
+      app-c-content-block-manager-array-component
+      app-c-content-block-manager-array-component--sortable
+      app-c-content-block-manager-array-component--#{field.name}
+    ]
+  end
+
+  def order_input(index)
+    tag.input(
+      class: "gem-c-input govuk-input govuk-input--width-2",
+      id: "sortable_#{field.name}_#{index}_order",
+      name: "#{field.name}[#{index}]order",
+      value: index,
+    )
+  end
+
+  def items
+    components.map.with_index do |component, index|
+      {
+        fields: render(component),
+        order_input: order_input(index),
+      }
+    end
+  end
+end

config/content_block_manager.yml

@@ -144,6 +144,7 @@ schemas:
                 component: textarea
                 govspeak_enabled: true
           telephone_numbers:
+            component: sortable_array
             field_order:
               - type
               - label

features/reorder_array_items.feature

@@ -0,0 +1,37 @@
+@javascript
+Feature: Editor is able to reorder their telephone number fields
+  - As an editor who has spent time inputting telephone number fields
+  - So that I don't have to delete items or start again
+  - I want to be able to reorder my fields into the order I want
+
+  Background:
+    Given I am logged in
+    And the organisation "Ministry of Example" exists
+    And I visit the Content Block Manager home page
+    And I click to create an object
+    And I click on the "contact" schema
+    And I complete the form with the following fields:
+      | title            | description   | organisation        | instructions_to_publishers |
+      | my basic contact | this is basic | Ministry of Example | this is important  |
+
+  Scenario: Creating an edition and changing the order of the telephone numbers
+    When I click on the "telephones" subschema
+    And I fill in the "telephone" form with the following fields:
+      | title              |
+      | Many phone numbers |
+    And I add the following "telephone_numbers" to the form:
+      | label       | telephone_number |
+      | Telephone 1 |                1 |
+      | Telephone 2 |                2 |
+      | Telephone 3 |                3 |
+      | Telephone 4 |                4 |
+    And I reorder the 2nd item up
+    And I reorder the 3rd item down
+    And I save and continue
+    Then I should see the items are in the order:
+      | label       | telephone_number |
+      | Telephone 2 |                2 |
+      | Telephone 1 |                1 |
+      | Telephone 4 |                4 |
+      | Telephone 3 |                3 |
+    And I save and open the page

features/step_definitions/embedded_object_steps.rb

@@ -38,7 +38,7 @@
     field_prefix = "edition[details][#{@object_type.pluralize}][#{item_type}][]"
 
     row.each do |key, value|
-      within all(".app-c-content-block-manager-array-item-component").last do
+      within all(".app-c-content-block-manager-array-component fieldset").last do
         field = page.all(:css, "[name='#{field_prefix}[#{key}]']").last
         if field.tag_name == "select"
           select value, from: field[:id]

features/step_definitions/reorder_steps.rb

@@ -41,3 +41,18 @@
     expect(item).to playwright_matchers.have_text(item_title)
   end
 end
+
+Then(/I reorder the (\d+)(?:st|nd|rd|th) item (up|down)$/) do |cardinality, direction|
+  rows = page.find_all(".js-add-another__fieldset")
+  button = rows[cardinality.to_i - 1].find("button[data-action='move-#{direction}']")
+  button.click
+end
+
+Then("I should see the items are in the order:") do |table|
+  cards = page.find_all(".gem-c-summary__block .govuk-summary-card")
+
+  table.hashes.each_with_index do |expected, index|
+    value_row = cards[index].find_all(".govuk-summary-list__value")[1]
+    expect(value_row).to have_text(expected["telephone_number"])
+  end
+end