TodoMVC

{
  todoList: [
    {
      id: 1, // タスクの一意の ID
      content: 'XXXX', // タスクの内容
      done: false, // タスクの完了ステータス
    },
  ];
}

export function onRowAdd(e) {
  // Enter キーのみを処理し、Enter でなければそのまま return
  if (e.keyCode !== 13) return;
  const { todoList, newId } = this.state; // グローバル状態から現在のタスクリストデータと newId マーカーを取得
  this.setState({
    todoList: [
      {
        id: newId,
        done: false,
        content: this.$('input').getValue(), // ユーザーが入力ボックスに入力した内容を取得
      },
      ...todoList,
    ], // todoList データを更新し、id が newId、ステータスが未完了、内容がユーザーの入力であるレコードを追加
    newId: newId + 1, // 次のタスク作成のために newId を更新
  });
  this.$('input').setValue(''); // 入力ボックスのユーザー入力をクリア
}

export function onEdit() {
  this.setState({
    editRowId: this.item.id,
  });
}

export function onRowEdit(e) {
  // Enter キーのみを処理し、Enter でなければそのまま return
  if (e.keyCode !== 13) return;
  this.setState({
    todoList: this.state.todoList.map((item) => {
      if (item.id === this.item.id) {
        // todoList 内で現在編集中のタスクを見つけて、その内容を更新
        return {
          ...item,
          content: this.$('rowInput').getValue(),
        };
      }
      return item;
    }),
    editRowId: 0, // editRowId をリセットして、現在のタスクを以前の表示状態に戻す
  });
}

export function onTodoCheck({ value }) {
  this.setState({
    todoList: this.state.todoList.map((item) => {
      if (item.id === this.item.id) {
        // todoList 内で現在編集中のタスクを見つけて、そのステータスを更新
        return {
          ...item,
          done: value === 'done',
        };
      }
      return item;
    }),
    editRowId: 0,
  });
}

export function onDelete() {
  this.setState({
    todoList: this.state.todoList.filter((item) => {
      // 現在のタスクを todoList から削除
      return item.id !== this.item.id;
    }),
  });
}

export function getleftCount() {
  const { todoList } = this.state;
  return todoList.filter((item) => !item.done).length;
}

export function onModeChange({ value }) {
  this.setState({
    mode: value,
  });
}

export function getShowList() {
  const { mode, todoList = [] } = this.state;
  if (mode === 'Active') {
    // フィルターが Active の場合、未完了のすべてのタスクを返す
    return todoList.filter((item) => !item.done);
  } else if (mode === 'Completed') {
    // フィルターが Completed の場合、完了済みのすべてのタスクを返す
    return todoList.filter((item) => item.done);
  }
  return todoList; // デフォルトでは、すべてのタスクを返す
}

export function onClearCompleted() {
  this.setState({
    todoList: this.state.todoList.filter((item) => !item.done), // 完了済みのすべてのタスクをフィルターアウト
  });
}

export function saveTodoData() {
  const { todoList, newId } = this.state;
  // localStorage がサポートされているかチェックし、サポートされていれば現在の state のデータを保存
  if (window.localStorage) {
    // localStorage を介してデータを保存
    window.localStorage.setItem('todoMVC', JSON.stringify({ todoList, newId }));
  }
}

export function getTodoData() {
  if (window.localStorage) {
    // localStorage から保存されたデータを取得
    const data = window.localStorage.getItem('todoMVC');
    // ローカルデータが存在するかチェック
    if (data) {
      return JSON.parse(data);
    }
  }
  return {};
}

function didFetch(content) {
  return (content.data || []).map((item) => {
    return {
      id: item.formInstId, // フォームインスタンス ID、つまり各レコードの一意の識別子
      content: item.formData.textField_kymq5pdi, // タスク内容。textField_kymq5pdi はタスクフォーム内のタスク内容コントロールの一意の識別子
      done: item.formData.radioField_kymq5pdj === '已完成', // タスクステータス。新しいタスクはデフォルトで未完了。radioField_kymq5pdj はタスクフォーム内のタスクステータスコントロールの一意の識別子
    };
  });
}

function willFetch(vars, config) {
  const { content } = vars.data; // 新しいタスクの内容情報を取得
  vars.data.formDataJson = JSON.stringify({
    // フォームインスタンスを作成するには、パラメータを文字列化して formDataJson フィールドに配置する必要がある
    textField_kymq5pdi: content, // タスク内容。textField_kymq5pdi はタスクフォーム内のタスク内容コントロールの一意の識別子
    radioField_kymq5pdj: '未完成', // タスクステータス。新しいタスクはデフォルトで未完了。radioField_kymq5pdj はタスクフォーム内のタスクステータスコントロールの一意の識別子
  });
}

function didFetch(content) {
  this.utils.toast({
    // 成功トーストを表示
    title: 'Add Success!',
  });
  this.reloadDataSource(); // 初期リクエスト（つまり todoList API）を再実行してタスクリストを更新
  return content; // 重要：content を返す
}

function willFetch(vars, config) {
  const { id, content, done } = vars.data;
  vars.data.formInstId = id; // タスク ID、タスクの一意の識別子
  const data = {};
  if (content) {
    // content の修正が必要な場合、このパラメータを含める
    data.textField_kymq5pdi = content;
  }
  if (typeof done === 'boolean') {
    // ステータスの修正が必要な場合、このパラメータを含める
    data.radioField_kymq5pdj = done ? '已完成' : '未完成';
  }
  vars.data.updateFormDataJson = JSON.stringify(data);
}

function didFetch(content) {
  this.utils.toast({
    title: 'Update Success!',
  });
  this.reloadDataSource();
  return content; // 重要：content を返す
}

export function onRowAdd(e) {
  // Enter キーのみを処理
  if (e.keyCode !== 13) return;
  this.dataSourceMap.add.load({
    // リモート API を呼び出す
    content: this.$('input').getValue(),
  });
}

export function onDelete() {
  this.dataSourceMap.del
    .load({
      // リモート API を呼び出す
      formInstId: this.item.id, // 動的パラメータを渡す
    })
    .then((res) => {
      // リモート API コールバック、設定内の didFetch と類似
      this.utils.toast({
        // 成功トースト
        title: 'Delete Success!',
      });
      this.reloadDataSource(); // タスクリストを更新
    });
}

export function onRowEdit(e) {
  // Enter キーのみを処理
  if (e.keyCode !== 13) return;

  this.dataSourceMap.update.load({
    id: this.item.id,
    content: this.$('rowInput').getValue(),
  });
  this.setState({
    editRowId: 0,
  });
}

export function onTodoCheck({ value }) {
  this.dataSourceMap.update.load({
    id: this.item.id,
    done: value === 'done',
  });
  this.setState({
    editRowId: 0,
  });
}

export function onClearCompleted() {
  const deleteItems = this.state.todoList.filter((item) => item.done); // 削除対象タスクのリストをフィルタリング
  Promise.all(
    deleteItems.map((item) =>
      this.dataSourceMap.del.load({
        // Promise.all を介して del リモート API をバッチ呼び出しし、タスクを削除
        formInstId: item.id,
      })
    )
  ).then((res) => {
    // Promise.all コールバック
    this.utils.toast({
      // 成功トースト
      title: 'Clear Success!',
    });
    this.reloadDataSource(); // タスクリストを更新
  });
}