【kintone】テーブルの行削除時に確認メッセージを出す

テーブルで値がある行を消そうとしたときに確認メッセージを出す。

添付ファイルはレコードの保存が成功するまで値は存在しないため
querySelector() でファイルの有無を判定している。

(() => {
  'use strict';

  // テーブル内にある全てのフィールドコードを格納する変数
  let tableFields = null;

  kintone.events.on([
    'app.record.create.show', 
    'app.record.edit.show',
    'app.record.create.change.テーブル', 
    'app.record.edit.change.テーブル'
  ], (event) => {
    
    // .showを含むイベントのときはフィールドを取得
    if (event.type.includes('.show') && !tableFields) {
      const appId = kintone.app.getId();
      kintone.api(
        kintone.api.url('/k/v1/app/form/fields', true), 
        'GET', 
        { app: appId }
      ).then((response) => {
        // 取得したフィールドからフィールドコードが「テーブル」のテーブルを検索
        const tableField = Object.values(response.properties).find(field => 
          field.type === 'SUBTABLE' && field.code === 'テーブル'
        );
        
        // 対象テーブルが見つかったら、テーブル内の全てのフィールドコードを取得
        if (tableField && tableField.fields) {
          tableFields = Object.keys(tableField.fields);
        // 対象テーブルが見つからない場合は空配列を設定
        } else {
          tableFields = [];
        }
      });
    }

    // テーブル内にある全ての行削除ボタン要素を取得
    const deleteButtons = document.querySelectorAll('.remove-row-image-gaia');

    // 取得した行削除ボタンに対してループ処理
    deleteButtons.forEach((button) => {
      // 既にイベントリスナー追加済の場合はスキップ
      if (button.dataset.listenerAdded) return;
      button.dataset.listenerAdded = true;
      
      // 行削除ボタンのクリックイベントを定義
      const clickHandler = (event) => {
        // デフォルトのクリックイベントをキャンセル
        event.preventDefault();
        event.stopImmediatePropagation();
        
        // クリックされた削除ボタンがある行要素を取得
        const row = button.closest('tr');

        // テーブル内の全ての行要素を取得
        const currentRows = document.querySelectorAll('.subtable-gaia tbody tr');
        // クリックされた行の行番号を特定
        let currentRowIndex;
        currentRows.forEach((currentRow, index) => {
          if (currentRow === row) {
            currentRowIndex = index;
          }
        });
        
        // 行削除ボタンが押された行の値を取得
        const record = kintone.app.record.get();
        const tableRecords = record.record.テーブル.value[currentRowIndex].value;
        // 行に値が入力されているフィールドがあるかチェック
        const hasValue = tableFields && tableFields.some(field => {
          const value = tableRecords[field]?.value;
          return value && value.toString().trim() !== '';
        }) ||
          // 行に添付ファイルが存在するかチェック
          row.querySelector('.control-file-field-gaia .plupload_file_name');

        // 値または添付ファイルが存在する場合は確認メッセージを表示
        if (hasValue) {
          // ユーザーがキャンセルを選択した場合は行削除を中止
          if (!confirm('この行は値が入力されていますが本当に削除しますか？')) {
            return;
          }
        }
        
        // 確認メッセージにOKを返した場合と、値と添付ファイルが無い場合は行削除を実行
        button.removeEventListener('click', clickHandler, true);
        button.click();
      };

      // 行削除ボタンにイベントリスナーを追加
      button.addEventListener('click', clickHandler, true);
    });

    return event;
  });
})();