【Vue.js】Vue.jsでマスタメンテナンス画面を作ってみよう！

# 概要
ダイアログ等を使わずに、新規追加・編集・削除の操作が1つの画面でできるマスタメンテナンスを作ってみました。
今回はその機能のロジックを記事にまとめております。

画面の全体像は以下の通りです。
- 「追加」ボタンで空レコードを追加
- レコードの入力欄で編集
- 「削除」ボタンで削除予定のレコードを選択(選択中のボタンを再度押下すると選択解除)
- 「保存」ボタンで、新規追加・編集・削除用のAPIをそれぞれ実行(DBに反映)
![qiita_pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/6a95f541-ef0f-21bf-cbe7-f2698c73ccec.png)
今回は、「まとめて新規追加・編集・削除する」ロジックにフォーカスを当てるので、テーブルの作成方法、スタイルの設定については割愛させていただきます。
# ロジック
まずは、テーブルに表示するデータに、Boolean型で「create」「edit」「delete」を設定します。最終的にこの値を用いて、「保存」ボタン押下時にどのAPIを実行すればよいかを判断させます。
初期値は、flaseで設定します。

```javascript:初期データ
export default {
  name: "TestSetting",
  data() {
    return {
      NameItems: [
          {field1:"test1", field2:"t1", id:0, create:false ,edit:false ,delete:false},
          {field1:"test2", field2:"t2", id:1, create:false ,edit:false ,delete:false},
          {field1:"test3", field2:"t3", id:2, create:false ,edit:false ,delete:false}
      ],
      createdName: [],
      editedName: [],
      deletedName: []
    }
  };
}
```

以下の動作の時に、それぞれのBool値が変化します。
- 「追加」ボタン押下時 .......... createがtrueのレコードをテーブルに追加する
- レコードの入力欄が変化した時 .......... createがfalseならばeditをtrueに変更する
- 「削除」ボタン押下時 .......... deleteがfalseならばtrueに変更、trueならばfalseに変更する

```javascript:「追加」ボタン押下時に発火する関数
    clickAddButton() {
        var lastNameItem = this.NameItems.length;
        this.NameItems.push(
            {field1:"",field2:"",id:lastNameItem, create:true ,edit:false ,delete:false}
        );
    },
```

```javascript:レコードの入力欄が変化した時に発火する関数
    changeTable(changedSelect) {
      // changedSelect：編集したレコードのデータ。テーブルコンポーネントから$emitで渡しています。
      // changedSelect.create == trueならば新規登録のレコードなので、changedSelect.create == falseを条件にします。      
        if(changedSelect.create == false){
            var i = changedSelect.id;
            this.NameItems[i].edit = true;
        }
    },

```

```javascript:「削除」ボタン押下時に発火する関数
    clickDeleteButton(DeletedValue) {
      // DeletedValue：「削除」ボタンを押下したレコードのデータ。テーブルコンポーネントから$emitで渡しています。
        var i = DeletedValue.id;
        if(this.NameItems[i].delete == false){
            this.NameItems[i].delete = true;
        }else{
            this.NameItems[i].delete = false;
        }
    },

```

次に、「保存」ボタンが押下されたときの動きを考えます。

**新規追加APIの実行条件**
`cteate == true`であれば新規追加です。ただし、加えて`delete == true`である場合、「追加したレコードが削除予定」の状態であるため、この場合は新規追加・編集・削除いづれのAPIも実行する必要がありません。
つまり、新規登録APIを実行する条件は`cteate == true && delete == false`と言えます。
![qiita_pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/cd30b1de-5998-ef73-9fe1-d9af0e3c9b71.png)

**編集APIの実行条件**
`edit == true`であれば編集です。ただし、加えて`delete == true`である場合、編集のAPIを実行する必要がありません。
つまり、編集APIを実行する条件は`edit == true && delete == false`と言えます。

**削除APIの実行条件**
`delete == true`であれば削除です。
つまり、削除APIを実行する条件は`cteate == false && delete == true`と言えます。

以上のことを踏まえると、「保存」ボタン押下時に発火する関数は以下の様になります。

```javascript:「保存」ボタン押下時に発火する関数
    pressOkButton() {
          for(var i = 0; i < this.NameItems.length; i++){
            if(this.NameItems[i].create == true &&
               this.NameItems[i].delete == false){
                this.createdName.push(this.NameItems[i]);
            }
            if(this.NameItems[i].edit == true &&
               this.NameItems[i].delete == false){
                this.editedName.push(this.NameItems[i]);
            }
            if(this.NameItems[i].create == false &&
               this.NameItems[i].delete == true){
                this.deletedName.push(this.NameItems[i]);
            }
          }

          if(this.createdName.length != 0){
              // 新規追加API実行コード
          }
          if(this.editedName.length != 0){
              // 編集API実行コード
          }
          if(this.deletedName.length != 0){
              // 削除API実行コード
          }
    },

```
`this.createdName` `this.editedName` `this.deletedName`にそれぞれ新規追加、編集、削除するデータをプッシュし、各リストの要素数分APIを実行します。
# おわりに
今回は、テーブルの新規追加・編集・削除を1つの画面で行う場合の考え方を記事にまとめました。
まだまだ経験も浅く拙い記事ではございますが、似たような画面を作ることがありましたら、ご参考にしていただけますと幸いです。