https://repero.me/assets/controllers/select2_status_controller-5ca7f03f.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="select2-status"
4export default class extends Controller {
5  connect() {
6    //console.log('hallo')
7    $(this.element).select2({
8      'width': '100%',
9      // use color from data-color as background color and data-text_color as text color
10      templateResult: this.templateSelection,
11      templateSelection: this.templateSelection
12    })
13
14    // after an item has been selected, bubble up the event, so that the form will be submitted
15    $(this.element).on('select2:select', (e) => {
16      //console.log('select2:select')
17      this.element.dispatchEvent(new Event('change', { bubbles: true }))
18    })
19  }
20
21  templateSelection(data) {
22    if (!data.id) { return data.text; }
23    //console.log(data.element)
24    var $color = $(data.element).data('color') || '#fff';
25    var $text_color = $(data.element).data('text-color') || '#000';
26    var $result = $(
27      `<span class="badge rounded-pill fw-medium" style="background-color: ${$color}; color: ${$text_color}">${data.text}</span>`
28    );
29    return $result;
30  }
31
32  disconnect() {
33    $(this.element).select2('destroy')
34  }
35}