GASでWebアプリ｢映画鑑賞記録｣を作る⑧ ／ スプレッドシートの参照をプルダウンリストで切り替える（後編）

# 今回やること
　前回の続き。
　今まで、本アプリが単年の管理となっている為、複数年の鑑賞記録の管理が行える様に改修したいと思います。

　今回は「データの一覧表示処理の変更」から最後まで対応します。

- 「映画鑑賞記録」のファイルIDの管理方法の変更
- 「鑑賞年」プルダウンリストの追加
- **データの一覧表示処理の変更**
- **データの更新処理の変更**

# データの一覧表示処理の変更
#### ViewingRecord.gs
　従来、「ファイルID」を`ViewingRecordID`（固定文字列）から取得していましたが、画面からの入力（「鑑賞年」）を元に「ファイルID」を取得する処理（`getFileIdFromYearSettings()`※後述を参照）に変更します。
　`getReportListBy()`に、`var fileId = getFileIdFromYearSettings(cond.year);`を追加します。
　本処理は、「映画鑑賞記録」から鑑賞記録のデータを取得する処理です。

```javascript
function getReportListBy(cond) {
  cond.type = 'viewingRecord';
  Logger.log(cond);

  var fileId = getFileIdFromYearSettings(cond.year);
  var sheet = SpreadsheetApp.openById(fileId).getSheetByName('鑑賞履歴');
  var lastRow = sheet.getLastRow();
  var results = sheet.getRange(3, 2, (lastRow - 2), 6).getValues();
  //Logger.log(results);

  return JSON.stringify(results);
}
```

```:以前の記述
function getReportListBy(cond) {
  cond.type = "viewingRecord";
  Logger.log(cond);

  var sheet = SpreadsheetApp.openById(ViewingRecordID).getSheetByName('鑑賞履歴');
  var lastRow = sheet.getLastRow();
  var results = sheet.getRange(3, 2, (lastRow - 2), 6).getValues();
  //Logger.log(results);

  return JSON.stringify(results);
}
```
　`getFileIdFromYearSettings()`を追加します。
　本処理では、引数（`year`）を元に、**Config.gs** の`YearSettings`（※前回を参照）から「ファイルID」を取得します。

```javascript
function getFileIdFromYearSettings(year) {
  for(const object of YearSettings) {
    if(object.year == year) {
      return object.fileId;
    }
  }
  return '';
}
```
#### javascript.html
　`searchResults()`に、引数（`cond`）を追加します。
　この引数を、**ViewingRecord.gs** の`getReportListBy()`を呼び出す際に引数として渡します。

```javascript
  function searchResults(cond) {
    google.script.run.withSuccessHandler(
      ：
      .getReportListBy(cond);
  }
```

```:以前の記述
  function searchResults() {
    var cond = {}; // 条件があれば...
    google.script.run.withSuccessHandler(
      ：
      .getReportListBy(cond);
  }
```
#### Vuejs.html
　`mounted:`に、`this.cond.year = this.selectedYear;`と`let cond = {}; cond.year = this.selectedYear;`を追加します。
　`methods:`に、`doChangeYear`を追加します。本処理は、上記の`searchResults()`を呼び出します。
　`searchResults()`を呼び出す際に、同ファイルの`data:`の`selectedYear`（画面の「鑑賞年」の選択値）を引数として渡します。

```javascript
var app = new Vue({
  el: '#app',
    ：
  },
  mounted: function() {
    this.cond.year = this.selectedYear;
    getYearSettings();
    let cond = {};
    cond.year = this.selectedYear;
    searchResults(cond);
  },
    ：
  },
  methods: {
      ：
    },
    doChangeYear: function() {
      let cond = {};
      cond.year = this.selectedYear;
      searchResults(cond);
    }
  }
})
```

#### Index.html

　前回追加したプルダウンリスト（`<select>`）に、`@change="doChangeYear"`を追加します。
　これにより、プルダウンリストの選択項目が変更されると上記の`doChangeYear`が実行されます。

```html
      <select v-model="selectedYear" @change="doChangeYear">
        <option disabled value="">鑑賞年</option>
            ：
      </select>
```

# データの更新処理の変更
#### ViewingRecord.gs

　一覧表示処理と同様に、従来、`ViewingRecordID`（固定文字列）から取得していた「ファイルID」を、画面からの入力（「鑑賞年」）を元に動的に取得する処理（`getFileIdFromYearSettings()`※前述を参照）に変更します。

```javascript
function addData(cond) {
  Logger.log(cond);

  var fileId = getFileIdFromYearSettings(cond.year);
  var sheet = SpreadsheetApp.openById(fileId).getSheetByName('鑑賞履歴');
    ：
```
```:以前の記述
function addData(cond) {
  var sheet = SpreadsheetApp.openById(ViewingRecordID).getSheetByName('鑑賞履歴');
    ：
```
#### javascript.html
　画面の「鑑賞年」から、鑑賞年を取得する様に変更します。
　`addData()`に、`let cond = {};`と`cond.year = app.selectedYear;`を追加します。

```javascript
  function addData(cond) {
    google.script.run.withSuccessHandler(
      function(v, element) {
        let cond = {};
        cond.year = app.selectedYear;
        searchResults(cond);
      })
      .withFailureHandler(
        function(msg, element) {
          showError(msg);
        })
      .withUserObject(this)
      .addData(cond);
  }
```
#### Vuejs.html
　データの更新処理では、ダイアログボックス側から当該処理（**javascript.html** の`addData()`→ **ViewingRecord.gs** の`addData()`）が呼び出されるので、ダイアログボックス側でも「鑑賞年」が保持できる様に変更します。
　メイン画面側の変数の変更。
　`data:`の`cond`に、`year`を追加します。

```javascript
var app = new Vue({
  el: '#app',
  data: {
      ：
    cond: {
      id: 0,
        ：
      year: ''
    },
    ：
  },
  ：
}
```
　ダイアログボックス側の変数の変更。
　`props:`の`cond`に、`year`を追加します。

```javascript
Vue.component("modal", {
  template: "#modal-template",
  props: {
    message: String,
    subject: String,
    cond: {
      id: Number,
        ：
      year: String
    }
  },
    ：
});
```

# 結果
　先ず、一覧表示を確認します。
![一覧_2021年.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/1e312398-4165-ea90-3c62-e6a97ba69fa0.png)
　「鑑賞年」を変更（`2021年`→`2020年`）する事により、一覧表示の内容が変更されました。
![一覧_2020年.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/089c4296-9b2e-78ae-660b-2c96b2de8283.png)
　次に、データの更新処理（データの追加）を確認します。
![データ追加1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/dd7610f3-8e12-535c-c01d-1a8fd0e9a194.png)
　〔記録追加〕ボタンをクリックして、ダイアログボックスにデータを入力します。
![データ追加2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/17c4f868-1e9f-7dbd-b7a9-7addc1d8624a.png)
　〔　追　加　〕ボタンをクリック。一覧表示にデータが追加されました。
![データ追加3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/4bfb89a4-444a-40c6-2eaa-1cc35fe44480.png)

**◆前の記事** [GASでWebアプリ｢映画鑑賞記録｣を作る⑦](https://qiita.com/pump33/items/0b24ecaf3d2de73ec699)
**◆次の記事** [GASでWebアプリ｢映画鑑賞記録｣を作る⑨](https://qiita.com/pump33/items/d46bad65f3a234152866)

**◆索引** [GASでWebアプリ｢映画鑑賞記録｣を作る《索引》](https://qiita.com/pump33/items/8ded0e6fd3c336e705f4)