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

　今年も早くも2月になりましたネ。
　昨年は、コロナ禍の影響で映画館での鑑賞本数が減りましたが、今年も1本でも多く観ていきたいと思います。

今回やること

　と言う事で、本アプリが単年の管理となっている為、複数年の鑑賞記録の管理が行える様に改修したいと思います。
　具体的には、「鑑賞年」のプルダウンリストを追加して、過去の年を選択する事によって一覧表示されている鑑賞記録を切り替えられる様にします。
　変更は次の項目に沿って行いますが、今回は「「鑑賞年」…」までに対応します。

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

「映画鑑賞記録」のファイルIDの管理方法の変更

　データが記録されている「映画鑑賞記録」（スプレッドシート）を1年毎に分けて管理する事とします。
　新しい年になった場合、次の手順で準備を行う事とします。

1. 既存のファイル（「映画鑑賞記録」）をコピーする。
   →コピー（新しく作成）したファイルのファイルIDを、後述の Config.gs のYearSettingsの
   　2021年のfileIdに記述します。
2. コピーしたファイルの［鑑賞履歴］シートのデータをクリアする。

　複数のファイルを管理できる様に、Config.gs での設定を変更します。

Config.gs

　YearSettingsを追加し、年毎の値をオブジェクトの配列で管理します。
　　・ id　　：ID番号。
　　・ year　：表示年。プルダウンリストの表示等に使います。
　　・ fileId：「映画鑑賞記録」のファイルID。

const YearSettings = [
  {id: '2021', year: '2021年', fileId: 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy'},
  {id: '2020', year: '2020年', fileId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'}
]

以前の記述

var ViewingRecordID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';       //「映画鑑賞記録」のファイルID

「鑑賞年」プルダウンリストの追加

Index.html

　〔記録追加〕ボタンの左側にプルダウンリストを追加します。

    <div style="text-align: center;">
      <select v-model="selectedYear">
        <option disabled value="">鑑賞年</option>
        <option v-for="year in optionYear" 
          v-bind:value="year.year" 
          v-bind:key="year.id">
        {{ year.year }}
        </option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-primary" id="show-modal" @click="doShowModal">記録追加</button>
    </div>

css.html

　プルダウンリスト用のスタイルを追加します。

  select {
      height: 35px;
      border: 1;
      border-radius: 5px;
  }

Vuejs.html

　data:に、selectedYearとoptionYearを追加します。
　　・selectedYearは、<select>のv-model="selectedYear"で連携され、プルダウンリストで
　　　選択した項目の値がセットされます。
　　　初期値として今年の表示年（2021年）をセットしておきます。
　　・optionYearは、プルダウンリストのリストデータとして使用します。（配列）
　　　<option>のv-for="year in optionYear"で連携されます。
　　　初期値は指定せず、javascript.html のgetYearSettings()で値が設定されます。
　mounted:に、getYearSettings()の呼出しを追加します。

var app = new Vue({
  el: '#app',
  data: {
    processingType: '記録追加',
       ：
    selectedYear: '2021年',
    optionYear: []
  },
  mounted: function() {
    getYearSettings();
    searchResults();
  },

javascript.html

　getYearSettings()を追加します。本処理でサーバ側（ViewingRecord.gs）のgetYearSettings()を呼出します。
　取得したYearSettingsを、Vuejs.htmlのoptionYearにセットする事により、プルダウンリストの各項目が表示されます。

<script>
  function getYearSettings() {
    google.script.run.withSuccessHandler(
      function(v, element) {
        app.optionYear = v;
      })
      .withFailureHandler(
        function(msg, element) {
          showError(msg);
        })
      .withUserObject(this)
      .getYearSettings();
  }

ViewingRecord.gs

　getYearSettings()を追加します。本処理で Config.gs のYearSettingsを取得します。

function getYearSettings() {
  return YearSettings;
}

　◆参考サイト Vue.js で プルダウンメニューの作り方 (基礎編)

結果

　プルダウンリストが表示される様になりました。

◆前の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑥
◆次の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑧

◆索引 GASでWebアプリ｢映画鑑賞記録｣を作る《索引》