https://agrihub-app.herokuapp.com/assets/controllers/time-lines/fo…401f4c08acade2117d22fcf5360812e571e2771f.js

1import { Controller } from "@hotwired/stimulus";
2
3export default class extends Controller {
4  static targets = ["taskCheckbox", "taskContainer", "noTaskLabel"];
5  static values = { newRecord: Boolean };
6
7  connect() {
8    this.toggleNoTaskLabel();
9    const workField = document.querySelector('.time-line-work-input');
10    if (workField) {
11      this.boundToggleTaskCheckboxes = this.toggleTaskCheckboxes.bind(this);
12      workField.addEventListener('change', this.boundToggleTaskCheckboxes);
13    }
14
15    // 新規レコードの場合のみ初回の自動選択を実行
16    if (this.newRecordValue) {
17      this.toggleTaskCheckboxes();
18    }
19  }
20
21  disconnect() {
22    const workField = document.querySelector('.time-line-work-input');
23    if (workField && this.boundToggleTaskCheckboxes) {
24      workField.removeEventListener('change', this.boundToggleTaskCheckboxes);
25    }
26  }
27
28  workChanged() {
29    this.toggleTaskCheckboxes();
30  }
31
32  toggleTaskCheckboxes() {
33    const workValue = document.querySelector('.time-line-work-input').value;
34
35    this.taskCheckboxTargets.forEach((checkbox) => {
36      const taskName = checkbox.dataset.taskName;
37      const shouldDisplay = taskName == workValue;
38      const formCheck = checkbox.closest('.form-check');
39      if (shouldDisplay) {
40        formCheck.classList.remove('d-none');
41      } else {
42        formCheck.classList.add('d-none');
43        checkbox.checked = false;
44      }
45
46      // 新規レコードの場合のみチェックを外す
47      if (this.newRecordValue) {
48        checkbox.checked = false;
49      }
50    });
51
52    // 新規レコードの場合のみ自動選択を実行
53    if (this.newRecordValue) {
54      this.taskContainerTargets.forEach((container) => {
55        const firstVisibleCheckbox = Array.from(
56          container.querySelectorAll('input[type="checkbox"][data-time-lines--form-task-target="taskCheckbox"]')
57        ).find(checkbox => !checkbox.closest('.form-check').classList.contains('d-none'));
58
59        if (firstVisibleCheckbox) {
60          firstVisibleCheckbox.checked = true;
61        }
62      });
63    }
64
65    this.toggleNoTaskLabel();
66  }
67
68  toggleNoTaskLabel() {
69    this.taskContainerTargets.forEach((container) => {
70      const visibleCheckbox = Array.from(container.querySelectorAll('input[type="checkbox"][data-time-lines--form-task-target="taskCheckbox"]')).some((checkbox) => {
71        return !checkbox.closest('.form-check').classList.contains('d-none');
72      });
73
74      const noTaskLabel = container.querySelector('[data-time-lines--form-task-target="noTaskLabel"]');
75      if (visibleCheckbox) {
76        noTaskLabel.classList.add('d-none');
77      } else {
78        noTaskLabel.classList.remove('d-none');
79      }
80    });
81  }
82
83  taskCheckboxClicked(event) {
84    const clickedCheckbox = event.target;
85    const container = clickedCheckbox.closest('.product-schedule-task-container');
86    const checkboxes = container.querySelectorAll('input[type="checkbox"][data-time-lines--form-task-target="taskCheckbox"]');
87    if (clickedCheckbox.checked) {
88      checkboxes.forEach(checkbox => {
89        if (checkbox !== clickedCheckbox) checkbox.checked = false;
90      });
91    }
92  }
93};