https://tripto.jp/assets/controllers/postal_code_to_address_contro…4b5f1c4912c6aae802ebdf263a3d84ac86a9350a.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = [
5    'postalCode',
6    'search',
7    'prefecture',
8    'city',
9    'streetAddress',
10    'buildingName'
11  ];
12  static values = { path: String }
13
14  connect() {
15    this.checkSearchEnable();
16  }
17
18  // 検索ボタン有効化チェック
19  checkSearchEnable() {
20    const postalCode = this.postalCodeTarget.value;
21    const searchButton = this.searchTarget;
22    if (postalCode.length === 7 && /^\d{7}$/.test(postalCode)) {
23      searchButton.removeAttribute('disabled');
24    } else {
25      searchButton.setAttribute('disabled', 'disabled');
26    }
27  }
28
29  // 検索
30  async search(event) {
31    const url = new URL(this.pathValue, document.location.origin);
32    const params = url.searchParams;
33    params.set('postal_code', this.postalCodeTarget.value);
34    params.set('format', 'turbo_stream');
35    url.search = params.toString();
36    // ボタンにスピナー表示する
37    const searchButton = this.searchTarget;
38    const searchButtonOriginalText = searchButton.innerHTML;
39    searchButton.disabled = true;
40    searchButton.innerHTML = '<i class="fa-solid fa-spinner fa-spin" role="status" aria-hidden="true"></i> 検索中...';
41    await this.#fetch(url);
42    // 検索後、元に戻す
43    searchButton.innerHTML = searchButtonOriginalText;
44    this.checkSearchEnable();
45  }
46
47  // 住所選択
48  select(event) {
49    event.preventDefault();
50
51    // 住所フィールドにセットする
52    // 都道府県はoptionのtextと一致するものを選択する
53    const prefName = event.currentTarget.dataset.prefName;
54    const prefectureOptions = this.prefectureTarget.options;
55    for (let i = 0; i < prefectureOptions.length; i++) {
56      if (prefectureOptions[i].text === prefName) {
57        this.prefectureTarget.selectedIndex = i;
58        break;
59      }
60    }
61    this.cityTarget.value = event.currentTarget.dataset.cityName;
62    this.streetAddressTarget.value = [event.currentTarget.dataset.townName, event.currentTarget.dataset.blockName].filter(part => part).join(' ');
63    // 建物名フィールドは空にする
64    this.buildingNameTarget.value = '';
65
66    // 住所選択結果をクリアする
67    const resultContainer = document.getElementById('postal_code_to_address_select');
68    if (resultContainer) {
69      resultContainer.innerHTML = '';
70    }
71  }
72
73  // fetch
74  async #fetch(url) {
75    const responce = await Turbo.fetch(url);
76    if (!responce.ok) {
77      console.log(responce.statusText);
78      return;
79    }
80    const text = await responce.text();
81    Turbo.renderStreamMessage(text);
82  }
83};