Add dragger to change stage order (#586)

* Add dragger to change stage order

* Add animation to drag and drop system

---------

Co-authored-by: Yukio Arie <yukioarie@gmail.com>

Author: douglara

app/javascript/controllers/drag_stages_position_controller.js

@@ -6,6 +6,7 @@ export default class extends Controller {
     connect() {
     this.moveFormFieldInputsToNestedFields();
     this.Sortable = Sortable.create(this.element, {
+      animation: 150,
       onEnd: this.end.bind(this)
     });
   }

app/views/accounts/pipelines/_form.html.erb

@@ -21,7 +21,7 @@
   <h2 class= "typography-body-s-lh150 text-dark-gray-palette-p1">
     <%= t('activerecord.models.stage.other') %>
   </h2>
-  <div class="grid gap-5" data-controller="drag-stages-position" <%= "data-drag-stages-position-url= #{account_pipeline_path(pipeline)}" if pipeline.id.present?%>  >
+  <div class="grid gap-3" data-controller="drag-stages-position" <%= "data-drag-stages-position-url= #{account_pipeline_path(pipeline)}" if pipeline.id.present?%>  >
     <%= form.fields_for :stages, @stages do |stage| %>
       <div data-id= "<%= stage.object.id %>">
         <%= render 'stage_fields', :f => stage %>

app/views/accounts/pipelines/_stage_fields.html.erb

@@ -1,7 +1,10 @@
 <div class='nested-fields' data-controller="load-lucid-icons">
   <%= f.label :name, class: "typography-text-m-lh150 text-dark-gray-palette-p1" %>
-  <div class="flex gap-2">
+  <div class="flex gap-2 items-center">
     <%= f.text_field :name, class: "form-input flex-1" %>
+    <div class="cursor-grab active:cursor-grabbing text-dark-gray-palette-p3 hover:text-dark-gray-palette-p1 transition-colors" title="<%= t('views.accounts.pipelines.form.drag_to_reorder') %>">
+      <i data-lucide="grip-vertical" class="w-5 h-5"></i>
+    </div>
     <%= link_to_remove_association f, class: 'btn-secondary !p-2', data: { confirm: t('views.accounts.pipelines.stage_fields.are_you_sure?') } do %>
       <i data-lucide="trash-2"></i>
     <% end %>

config/locales/views/accounts/pipelines/form/en.yml

@@ -4,3 +4,4 @@ en:
       pipelines:
         form:
           pipeline_data: Pipeline data
+          drag_to_reorder: Drag to reorder

config/locales/views/accounts/pipelines/form/es.yml

@@ -4,3 +4,4 @@ es:
       pipelines:
         form:
           pipeline_data: Datos del embudo
+          drag_to_reorder: Arrastrar para reordenar

config/locales/views/accounts/pipelines/form/pt-BR.yml

@@ -4,5 +4,6 @@ pt-BR:
       pipelines:
         form:
           pipeline_data: Dados do funil
+          drag_to_reorder: Arrastar para reordenar