tech(clean): drop drag and drop champs in editor, ux not ok

app/components/types_de_champ_editor/block_component.rb

@@ -7,14 +7,6 @@ class TypesDeChampEditor::BlockComponent < ApplicationComponent
 
   private
 
-  def sortable_options
-    {
-      controller: 'sortable',
-      sortable_handle_value: '.handle',
-      sortable_group_value: block_id
-    }
-  end
-
   def block_id
     dom_id(@block, :types_de_champ_editor_block)
   end

app/components/types_de_champ_editor/block_component/block_component.html.haml

@@ -1,5 +1,5 @@
 - c = TypesDeChampEditor::SelectChampTemplatePositionComponent.new(block: @block, coordinates: @coordinates)
-%ul.types-de-champ-block{ id: block_id, data: sortable_options.merge(controller: 'select-champ-position-template', 'select-champ-position-template-template-id-value': c.block_id ) }
+%ul.types-de-champ-block{ id: block_id, data: { controller: 'select-champ-position-template', 'select-champ-position-template-template-id-value': c.block_id } }
   - @coordinates.each do |coordinate|
     = render TypesDeChampEditor::ChampComponent.new(coordinate:, upper_coordinates: coordinate.upper_coordinates)
   %li.hidden= render c

app/components/types_de_champ_editor/champ_component.rb

@@ -28,7 +28,6 @@ class TypesDeChampEditor::ChampComponent < ApplicationComponent
         last: coordinate.last?),
       data: {
         controller: 'type-de-champ-editor',
-        type_de_champ_editor_move_url_value: move_admin_procedure_type_de_champ_path(procedure, type_de_champ.stable_id),
         type_de_champ_editor_move_up_url_value: move_up_admin_procedure_type_de_champ_path(procedure, type_de_champ.stable_id),
         type_de_champ_editor_move_down_url_value: move_down_admin_procedure_type_de_champ_path(procedure, type_de_champ.stable_id)
       }

app/components/types_de_champ_editor/champ_component/champ_component.html.haml

@@ -2,7 +2,6 @@
   .type-de-champ-container
     .flex.justify-between.section.head
       .position.flex.align-center= @coordinate.position.to_s
-      .fr-btn.fr-btn--tertiary-no-outline.handle.fr-icon-drag-move-2-line{ title: "Déplacer le champ vers le haut ou vers le bas" }
       %button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-up-line.move-up{ move_button_options(:up) }
       %button.fr-btn.fr-btn--tertiary-no-outline.fr-icon-arrow-down-line.move-down{ move_button_options(:down) }
 

app/controllers/administrateurs/types_de_champ_controller.rb

@@ -57,10 +57,6 @@ module Administrateurs
       end
     end
 
-    def move
-      draft.move_type_de_champ(params[:stable_id], params[:position].to_i)
-    end
-
     def move_and_morph
       source_type_de_champ = draft.find_and_ensure_exclusive_use(params[:stable_id])
       target_type_de_champ = draft.find_and_ensure_exclusive_use(params[:target_stable_id])

app/javascript/controllers/sortable_controller.ts

@@ -1,68 +0,0 @@
-import Sortable from 'sortablejs';
-
-import { ApplicationController } from './application_controller';
-
-export class SortableController extends ApplicationController {
-  declare readonly animationValue: number;
-  declare readonly handleValue: string;
-  declare readonly groupValue: string;
-
-  #sortable?: Sortable;
-
-  static values = {
-    animation: Number,
-    handle: String,
-    group: String
-  };
-
-  connect() {
-    this.#sortable = new Sortable(this.element as HTMLElement, {
-      ...this.defaultOptions,
-      ...this.options
-    });
-    this.onGlobal('sortable:sort', () => this.setEdgeClassNames());
-  }
-
-  disconnect() {
-    this.#sortable?.destroy();
-  }
-
-  private onEnd({ item, newIndex }: { item: HTMLElement; newIndex?: number }) {
-    if (newIndex == null) return;
-
-    this.dispatch('end', {
-      target: item,
-      detail: { position: newIndex }
-    });
-    this.setEdgeClassNames();
-  }
-
-  setEdgeClassNames() {
-    const items = this.element.children;
-    for (const item of items) {
-      item.classList.remove('first', 'last');
-    }
-    if (items.length > 1) {
-      const first = items[0];
-      const last = items[items.length - 1];
-      first?.classList.add('first');
-      last?.classList.add('last');
-    }
-  }
-
-  get options(): Sortable.Options {
-    return {
-      animation: this.animationValue || this.defaultOptions.animation || 150,
-      handle: this.handleValue || this.defaultOptions.handle || undefined,
-      group: this.groupValue || this.defaultOptions.group || undefined,
-      onEnd: (event) => this.onEnd(event)
-    };
-  }
-
-  get defaultOptions(): Sortable.Options {
-    return {
-      fallbackOnBody: true,
-      swapThreshold: 0.65
-    };
-  }
-}

app/javascript/controllers/type_de_champ_editor_controller.ts

@@ -15,12 +15,10 @@ const AUTOSAVE_DEBOUNCE_DELAY = debounce_delay;
 export class TypeDeChampEditorController extends ApplicationController {
   static values = {
     typeDeChampStableId: String,
-    moveUrl: String,
     moveUpUrl: String,
     moveDownUrl: String
   };
 
-  declare readonly moveUrlValue: string;
   declare readonly moveUpUrlValue: string;
   declare readonly moveDownUrlValue: string;
   declare readonly isVisible: boolean;
@@ -33,9 +31,6 @@ export class TypeDeChampEditorController extends ApplicationController {
     this.#latestPromise = Promise.resolve();
     this.on('change', (event) => this.onChange(event));
     this.on('input', (event) => this.onInput(event));
-    this.on('sortable:end', (event) =>
-      this.onSortableEnd(event as CustomEvent)
-    );
   }
 
   disconnect() {
@@ -77,15 +72,6 @@ export class TypeDeChampEditorController extends ApplicationController {
     });
   }
 
-  private onSortableEnd(event: CustomEvent<{ position: number }>) {
-    const position = event.detail.position;
-    if (event.target == this.element) {
-      const form = createForm(this.moveUrlValue, 'patch');
-      createHiddenInput(form, 'position', position);
-      this.requestSubmitForm(form);
-    }
-  }
-
   private save(form?: HTMLFormElement | null): void {
     if (form) {
       createHiddenInput(form, 'should_render', true);

app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml

@@ -43,8 +43,6 @@
   = turbo_stream.replace dom_id(@coordinate.revision, :estimated_fill_duration) do
     - render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @coordinate.revision, is_annotation: @coordinate.private?)
 
-= turbo_stream.dispatch 'sortable:sort'
-
 - if @created&.coordinate&.child?
   = turbo_stream.hide dom_id(@created.coordinate.parent, :type_de_champ_add_button)
 - elsif @destroyed&.child? && @destroyed.parent.empty?

config/routes.rb

@@ -622,7 +622,6 @@ Rails.application.routes.draw do
 
       resources :types_de_champ, only: [:create, :update, :destroy], param: :stable_id do
         member do
-          patch :move
           patch :move_and_morph
           patch :move_up
           patch :move_down

package.json

@@ -61,7 +61,6 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-query": "^3.39.3",
-    "sortablejs": "^1.15.0",
     "spectaql": "^2.3.0",
     "stimulus-use": "^0.52.0",
     "terser": "^5.18.2",

yarn.lock

@@ -7777,11 +7777,6 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-sortablejs@^1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
-  integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==
-
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"