Fix custom fields reordering

app/controllers/custom_fields_controller.rb

@@ -34,7 +34,7 @@ class CustomFieldsController < ApplicationController
   helper_method :gon
 
   before_action :require_admin
-  before_action :find_custom_field, only: %i(edit update destroy move delete_option)
+  before_action :find_custom_field, only: %i(edit update destroy delete_option reorder_alphabetical)
   before_action :prepare_custom_option_position, only: %i(update create)
   before_action :find_custom_option, only: :delete_option
 
@@ -73,17 +73,19 @@ class CustomFieldsController < ApplicationController
   def edit; end
 
   def update
-    call = ::CustomFields::UpdateService
-      .new(user: current_user, model: @custom_field)
-      .call(get_custom_field_params)
+    perform_update(get_custom_field_params)
+  end
 
-    if call.success?
-      flash[:notice] = t(:notice_successful_update)
-      call_hook(:controller_custom_fields_edit_after_save, custom_field: @custom_field)
-      redirect_back_or_default edit_custom_field_path(id: @custom_field.id)
-    else
-      render action: 'edit'
+  def reorder_alphabetical
+    reordered_options = @custom_field
+      .custom_options
+      .sort_by(&:value)
+      .each_with_index
+      .map do |custom_option, index|
+      { id: custom_option.id, position: index + 1 }
     end
+
+    perform_update(custom_options_attributes: reordered_options)
   end
 
   def destroy
@@ -111,6 +113,20 @@ class CustomFieldsController < ApplicationController
 
   private
 
+  def perform_update(custom_field_params)
+    call = ::CustomFields::UpdateService
+      .new(user: current_user, model: @custom_field)
+      .call(custom_field_params)
+
+    if call.success?
+      flash[:notice] = t(:notice_successful_update)
+      call_hook(:controller_custom_fields_edit_after_save, custom_field: @custom_field)
+      redirect_back_or_default edit_custom_field_path(id: @custom_field.id)
+    else
+      render action: 'edit'
+    end
+  end
+
   def new_custom_field
     ::CustomFields::CreateService.careful_new_custom_field(permitted_params.custom_field_type)
   end

app/views/custom_fields/_form.html.erb

@@ -77,6 +77,16 @@ See docs/COPYRIGHT.rdoc for more details.
 
     <fieldset class="form--fieldset" id="custom_field_possible_values_attributes">
       <legend class="form--fieldset-legend"><%= I18n.t("activerecord.attributes.custom_field.possible_values") %></legend>
+      <% if @custom_field.persisted? %>
+        <div class="form--toolbar">
+          <span class="form--toolbar-item">
+            <%= link_to t('custom_fields.reorder_alphabetical'),
+                        { action: :reorder_alphabetical },
+                        method: :post,
+                        data: { confirm: t('custom_fields.reorder_confirmation') } %>
+          </span>
+        </div>
+      <% end %>
       <div class="form--field">
         <%= render partial: "custom_fields/custom_options", locals: { custom_field: @custom_field, f: f } %>
         <a id="add-custom-option" href="#" class="icon icon-add"><%= t(:button_add) %></a>

config/locales/en.yml

@@ -191,6 +191,8 @@ en:
     enabled_in_project: 'Enabled in project'
     contained_in_type: 'Contained in type'
     confirm_destroy_option: "Deleting an option will delete all of its occurrences (e.g. in work packages). Are you sure you want to delete it?"
+    reorder_alphabetical: "Reorder values alphabetically"
+    reorder_confirmation: "Warning: The current order of available values will be lost. Continue?"
     tab:
       no_results_title_text: There are currently no custom fields.
       no_results_content_text: Create a new custom field

config/routes.rb

@@ -149,6 +149,8 @@ OpenProject::Application.routes.draw do
             to: "custom_fields#delete_option",
             via: :delete,
             as: :delete_option_of
+
+      post :reorder_alphabetical
     end
   end
 

frontend/src/app/core/augmenting/dynamic-scripts/custom_fields.js

@@ -263,8 +263,9 @@
     $('#custom_field_multi_value').change(checkOnlyOne);
 
     // Make custom fields draggable
-    var container = document.getElementById('custom-field-dragula-container');
-    dragula([container], {
+    const container = document.getElementById('custom-field-dragula-container');
+    // eslint-disable-next-line no-undef
+    const drake = dragula([container], {
       isContainer: function (el) {
         return false;
       },
@@ -285,5 +286,21 @@
       mirrorContainer: container,
       ignoreInputTextSelection: true
     });
+
+    // Setup autoscroll
+    window.OpenProject.getPluginContext().then((pluginContext) => {
+      new pluginContext.classes.DomAutoscrollService(
+        [
+          document.getElementById('content-wrapper'),
+        ],
+        {
+          margin: 25,
+          maxSpeed: 10,
+          scrollWhenOutside: true,
+          autoScroll: function () {
+            return drake.dragging;
+          }
+        });
+    });
   });
 }(window, jQuery));

frontend/src/app/features/plugins/plugin-context.ts

@@ -24,6 +24,7 @@ import { PathHelperService } from '../../core/path-helper/path-helper.service';
 import { HTMLSanitizeService } from '../../core/html-sanitize/html-sanitize.service';
 import { DynamicContentModalComponent } from '../../shared/components/modals/modal-wrapper/dynamic-content.modal';
 import { PasswordConfirmationModalComponent } from '../../shared/components/modals/request-for-confirmation/password-confirmation.modal';
+import { DomAutoscrollService } from 'core-app/shared/helpers/drag-and-drop/dom-autoscroll.service';
 
 /**
  * Plugin context bridge for plugins outside the CLI compiler context
@@ -70,6 +71,7 @@ export class OpenProjectPluginContext {
     },
     HalResource,
     DisplayField,
+    DomAutoscrollService,
   };
 
   // Hooks

spec/features/custom_fields/reorder_options_spec.rb

@@ -0,0 +1,33 @@
+require 'spec_helper'
+require 'support/pages/custom_fields'
+
+describe 'Reordering custom options of a list custom field', js: true do
+  let(:user) { FactoryBot.create :admin }
+  let(:cf_page) { Pages::CustomFields.new }
+
+  let!(:custom_field) do
+    FactoryBot.create(
+      :list_wp_custom_field,
+      name: "Platform",
+      possible_values: %w[Playstation Xbox Nintendo PC Switch Mobile Dreamcast]
+    )
+  end
+
+  before do
+    login_as(user)
+  end
+
+  it 'reorders the items alphabetically when pressed' do
+    expect(custom_field.custom_options.order(:position).pluck(:value))
+      .to eq %w[Playstation Xbox Nintendo PC Switch Mobile Dreamcast]
+
+    cf_page.visit!
+    click_link custom_field.name
+
+    click_link 'Reorder values alphabetically'
+    cf_page.accept_alert_dialog!
+    expect(page).to have_selector('.flash.notice', text: I18n.t(:notice_successful_update))
+    expect(custom_field.custom_options.order(:position).pluck(:value))
+      .to eq %w[Dreamcast Mobile Nintendo PC Playstation Switch Xbox]
+  end
+end