https://www.artofpkm.com/assets/controllers/bulk_merge_controller-…563d87b207c052886071e4b0ff3f2f44faaa50b3.js

1import { Controller } from "@hotwired/stimulus";
2
3// Connects to data-controller="bulk-merge"
4export default class extends Controller {
5  static targets = ["row", "enableAll"];
6
7  connect() {
8    this.syncEnableAll();
9  }
10
11  toggleAll() {
12    this.rowCheckboxes().forEach((box) => (box.checked = this.enableAllTarget.checked));
13  }
14
15  syncEnableAll() {
16    if (!this.hasEnableAllTarget) return;
17    this.enableAllTarget.checked = this.rowCheckboxes().every((box) => box.checked);
18  }
19
20  reverseAll() {
21    this.rowTargets.forEach((row) => this.flip(row));
22  }
23
24  reverseRow(event) {
25    this.flip(event.currentTarget.closest("[data-bulk-merge-target='row']"));
26  }
27
28  flip(row) {
29    const source = row.querySelector("[data-role='source-id']");
30    const target = row.querySelector("[data-role='target-id']");
31    [source.value, target.value] = [target.value, source.value];
32    row.querySelector("[data-role='arrow']").classList.toggle("rotate-180");
33    row.querySelectorAll("[data-role='badge']").forEach((badge) => badge.classList.toggle("hidden"));
34  }
35
36  rowCheckboxes() {
37    return this.rowTargets.map((row) => row.querySelector("input[type='checkbox']"));
38  }
39};