controller TS: modification de l'ordre, état des boutons

This commit is contained in:
benoitqueyron 2024-12-06 17:02:02 +01:00
parent bc3730a032
commit 9d50034a16
No known key found for this signature in database
GPG key ID: AD3C38C9ACA84135
2 changed files with 65 additions and 3 deletions

View file

@ -0,0 +1,62 @@
import { ApplicationController } from './application_controller';
export class MoveProceduresPositionController extends ApplicationController {
connect() {
this.updateButtonsStates();
}
async moveUp(event: Event) {
event.preventDefault();
const button = event.currentTarget as HTMLButtonElement;
const upCard = button.closest('.fr-card');
await this.switchCards(upCard!, upCard!.previousElementSibling!);
upCard!.parentNode!.insertBefore(upCard!, upCard!.previousElementSibling);
this.updateButtonsStates();
}
async moveDown(event: Event) {
event.preventDefault();
const button = event.currentTarget as HTMLButtonElement;
const downCard = button.closest('.fr-card');
await this.switchCards(downCard!.nextElementSibling!, downCard!);
downCard!.parentNode!.insertBefore(downCard!.nextElementSibling!, downCard);
this.updateButtonsStates();
}
private async switchCards(upCard: Element, downCard: Element): Promise<void> {
const upCardRect = upCard.getBoundingClientRect();
const downCardRect = downCard.getBoundingClientRect();
const upAnimation = upCard.animate(
[
{ transform: `translateY(0)` },
{ transform: `translateY(${downCardRect.top - upCardRect.top}px)` }
],
{ duration: 300, easing: 'ease-in-out' }
);
const downAnimation = downCard.animate(
[
{ transform: `translateY(0)` },
{ transform: `translateY(${upCardRect.top - downCardRect.top}px)` }
],
{ duration: 300, easing: 'ease-in-out' }
);
await Promise.all([upAnimation.finished, downAnimation.finished]);
}
private updateButtonsStates() {
const buttons = [
...this.element.querySelectorAll('button')
] as HTMLButtonElement[];
buttons.forEach(
(button, index) =>
(button.disabled = index == 0 || index == buttons.length - 1)
);
}
}

View file

@ -4,13 +4,13 @@
Personnaliser l'ordre des #{@procedures.size} démarches « en cours » Personnaliser l'ordre des #{@procedures.size} démarches « en cours »
%p Déplacez les démarches dans la liste pour les classer en fonction de vos préférences : %p Déplacez les démarches dans la liste pour les classer en fonction de vos préférences :
%fr-container %fr-container{ data: { controller: 'move-procedures-position' } }
= form_tag update_order_positions_instructeur_procedures_path, method: :patch do = form_tag update_order_positions_instructeur_procedures_path, method: :patch do
- @procedures.each do |procedure| - @procedures.each do |procedure|
.fr-card.fr-mb-1w.fr-py-1w.fr-px-2w .fr-card.fr-mb-1w.fr-py-1w.fr-px-2w
.flex.align-center .flex.align-center
%button.fr-btn.fr-icon-arrow-up-line.fr-btn--secondary.fr-col-1 %button.fr-btn.fr-icon-arrow-up-line.fr-btn--secondary.fr-col-1{ data: { action: "move-procedures-position#moveUp" } }
%button.fr-btn.fr-icon-arrow-down-line.fr-btn--secondary.fr-col-1.fr-mx-2w %button.fr-btn.fr-icon-arrow-down-line.fr-btn--secondary.fr-col-1.fr-mx-2w{ data: { action: "move-procedures-position#moveDown" } }
- if procedure.close? - if procedure.close?
%span.fr-badge.fr-mr-2w Close %span.fr-badge.fr-mr-2w Close
- elsif procedure.depubliee? - elsif procedure.depubliee?