https://pneumotox.com/assets/controllers/pattern_picker_actions_controller-VXrUgo8.js

1import { Controller } from '@hotwired/stimulus';
2
3export default class extends Controller {
4    static targets = ['edit', 'add'];
5
6    static values = {
7        attachedIds: { type: Array, default: [] },
8    };
9
10    connect() {
11        this.onChange = this.sync.bind(this);
12        this.onAutocompleteConnect = this.onAutocompleteConnect.bind(this);
13
14        this.select = this.element.querySelector('select');
15        this.select?.addEventListener('change', this.onChange);
16        this.element.addEventListener('autocomplete:connect', this.onAutocompleteConnect);
17
18        this.sync();
19    }
20
21    disconnect() {
22        this.select?.removeEventListener('change', this.onChange);
23        this.element.removeEventListener('autocomplete:connect', this.onAutocompleteConnect);
24        this.tomSelect?.off('change', this.onChange);
25    }
26
27    attachedIdsValueChanged() {
28        this.sync();
29    }
30
31    onAutocompleteConnect(event) {
32        this.tomSelect = event.detail?.tomSelect;
33        this.tomSelect?.on('change', this.onChange);
34        this.sync();
35    }
36
37    sync() {
38        if (!this.hasEditTarget || !this.hasAddTarget) {
39            return;
40        }
41
42        const raw = this.select?.value ?? '';
43        const id = raw === '' ? null : Number.parseInt(raw, 10);
44        const hasSelection = Number.isInteger(id) && id > 0;
45        const attachedIds = this.attachedIdsValue.map((value) => Number(value));
46        const attached = hasSelection && attachedIds.includes(id);
47
48        this.editTarget.classList.toggle('hidden', !attached);
49        this.addTarget.classList.toggle('hidden', attached);
50    }
51}