diff --git a/app/javascript/packs/controllers/reorder_controller.js b/app/javascript/packs/controllers/reorder_controller.js index a7024fb2..00c94d6e 100644 --- a/app/javascript/packs/controllers/reorder_controller.js +++ b/app/javascript/packs/controllers/reorder_controller.js @@ -22,7 +22,7 @@ import { Controller } from 'stimulus' * El objetivo es poder mover filas en tablas de miles de elementos. */ export default class extends Controller { - static targets = [ 'row', 'unselect', 'top', 'bottom', 'direction' ] + static targets = [ 'row', 'unselect', 'top', 'bottom', 'direction', 'counter' ] connect () { // Deseleccionar @@ -95,6 +95,8 @@ export default class extends Controller { } else { delete this.selected_rows[row.id] } + + this.counter() }) }) @@ -187,4 +189,8 @@ export default class extends Controller { // Mantenemos el primero a la vista rows[0].row.scrollIntoViewIfNeeded() } + + counter () { + this.counterTarget.innerText = Object.keys(this.selected_rows).length + } } diff --git a/app/views/posts/index.haml b/app/views/posts/index.haml index e4129e8a..31d608bc 100644 --- a/app/views/posts/index.haml +++ b/app/views/posts/index.haml @@ -52,7 +52,9 @@ %tr %th.border-0.background-white.position-sticky{ style: 'top: 0', colspan: '4' } = submit_tag t('posts.reorder.submit'), class: 'btn' - %button.btn{ data: { target: 'reorder.unselect' } }= t('posts.reorder.unselect') + %button.btn{ data: { target: 'reorder.unselect' } } + = t('posts.reorder.unselect') + %span.badge{ data: { target: 'reorder.counter' } } 0 %button.btn{ data: { target: 'reorder.direction', direction: 'up' } }= t('posts.reorder.up') %button.btn{ data: { target: 'reorder.direction', direction: 'down' } }= t('posts.reorder.down') %button.btn{ data: { target: 'reorder.top' } }= t('posts.reorder.top')