https://toolingmetrics.com/assets/controllers/token_result_controller-7773a808.js

1import { Controller } from "@hotwired/stimulus";
2
3// Connects to data-controller="token-result"
4export default class extends Controller {
5  static targets = [
6    "addedTokens",
7    "resultTokens",
8    "addedTokensIds",
9    "submitTokensIds",
10    "submitActionBtn",
11  ];
12
13  connect() {}
14
15  addToken(event) {
16    const selectedToken = document.getElementById(event.params.line);
17    selectedToken.dataset.action = "click->token-result#removeToken";
18    selectedToken.getElementsByClassName("buttonIndicator")[0].innerText = "−";
19    selectedToken.classList.add("rounded-lg", "border", "border-zinc-200", "dark:border-zinc-700");
20    if (event.params.relation === "one" && this.addedTokensTarget.childNodes.length === 1) {
21      const currentToken = this.addedTokensTarget.childNodes[0];
22      currentToken.dataset.action = "click->token-result#addToken";
23      currentToken.getElementsByClassName("buttonIndicator")[0].innerText = "";
24      currentToken.classList.remove(
25        "rounded-lg",
26        "border",
27        "border-zinc-300",
28        "dark:border-zinc-700",
29      );
30      this.resultTokensTarget.appendChild(currentToken);
31      this.addedTokensTarget.appendChild(selectedToken);
32      this.addedTokensIdsTarget.value = `${event.params.line.split("_").pop()} `;
33      this.submitTokensIdsTarget.value = this.addedTokensIdsTarget.value;
34    } else {
35      this.addedTokensTarget.appendChild(selectedToken);
36      this.addedTokensIdsTarget.value += `${event.params.line.split("_").pop()} `;
37      this.submitTokensIdsTarget.value = this.addedTokensIdsTarget.value;
38    }
39    if (this.addedTokensTarget.childNodes.length >= 1 && this.hasSubmitActionBtnTarget) {
40      this.submitActionBtnTarget.disabled = false;
41    }
42  }
43
44  removeToken(event) {
45    const selectedToken = document.getElementById(event.params.line);
46    selectedToken.dataset.action = "click->token-result#addToken";
47    selectedToken.getElementsByClassName("buttonIndicator")[0].innerText = "";
48    selectedToken.classList.remove(
49      "rounded-lg",
50      "border",
51      "border-zinc-300",
52      "dark:border-zinc-700",
53    );
54    if (this.hasResultTokensTarget) {
55      this.resultTokensTarget.appendChild(selectedToken);
56    } else {
57      selectedToken.remove();
58    }
59    let addedIds = this.addedTokensIdsTarget.value.split(" ");
60    addedIds = addedIds.filter((id) => id !== event.params.line.split("_").pop());
61    this.addedTokensIdsTarget.value = addedIds.join(" ");
62    this.submitTokensIdsTarget.value = addedIds.join(" ");
63    if (this.addedTokensTarget.childNodes.length === 0) {
64      this.submitActionBtnTarget.disabled = true;
65    }
66  }
67}