From 68e9d3513d27856a472e7e088547ed8cdd1b24ec Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 12 Jan 2024 10:04:18 +0100 Subject: [PATCH] tech(clean): drop drag and drop champs in editor, ux not ok --- .../types_de_champ_editor/block_component.rb | 8 --- .../block_component/block_component.html.haml | 2 +- .../types_de_champ_editor/champ_component.rb | 1 - .../champ_component/champ_component.html.haml | 1 - .../types_de_champ_controller.rb | 4 -- .../controllers/sortable_controller.ts | 68 ------------------- .../type_de_champ_editor_controller.ts | 14 ---- .../types_de_champ/_insert.turbo_stream.haml | 2 - config/routes.rb | 1 - package.json | 1 - yarn.lock | 5 -- 11 files changed, 1 insertion(+), 106 deletions(-) delete mode 100644 app/javascript/controllers/sortable_controller.ts diff --git a/app/components/types_de_champ_editor/block_component.rb b/app/components/types_de_champ_editor/block_component.rb index e0010ee48..79b6de8d2 100644 --- a/app/components/types_de_champ_editor/block_component.rb +++ b/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 diff --git a/app/components/types_de_champ_editor/block_component/block_component.html.haml b/app/components/types_de_champ_editor/block_component/block_component.html.haml index 109234df4..908631bd7 100644 --- a/app/components/types_de_champ_editor/block_component/block_component.html.haml +++ b/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 diff --git a/app/components/types_de_champ_editor/champ_component.rb b/app/components/types_de_champ_editor/champ_component.rb index 3b8eca491..fe6de38b7 100644 --- a/app/components/types_de_champ_editor/champ_component.rb +++ b/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) } diff --git a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml b/app/components/types_de_champ_editor/champ_component/champ_component.html.haml index 5ae868896..486ebce18 100644 --- a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml +++ b/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) } diff --git a/app/controllers/administrateurs/types_de_champ_controller.rb b/app/controllers/administrateurs/types_de_champ_controller.rb index 45b0eed79..4052fd02a 100644 --- a/app/controllers/administrateurs/types_de_champ_controller.rb +++ b/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]) diff --git a/app/javascript/controllers/sortable_controller.ts b/app/javascript/controllers/sortable_controller.ts deleted file mode 100644 index d2db295cc..000000000 --- a/app/javascript/controllers/sortable_controller.ts +++ /dev/null @@ -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 - }; - } -} diff --git a/app/javascript/controllers/type_de_champ_editor_controller.ts b/app/javascript/controllers/type_de_champ_editor_controller.ts index a813b1de0..873d712db 100644 --- a/app/javascript/controllers/type_de_champ_editor_controller.ts +++ b/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); diff --git a/app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml b/app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml index 19dd15f0d..5b1a42d56 100644 --- a/app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml +++ b/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? diff --git a/config/routes.rb b/config/routes.rb index 6aa165174..b5662b1bd 100644 --- a/config/routes.rb +++ b/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 diff --git a/package.json b/package.json index 56052c1fb..e5ec0f4e6 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 137028fcb..b59862799 100644 --- a/yarn.lock +++ b/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"