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

17864 ワード
Vue.js Web gas gas テキストリンク

今回やること

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

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

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

データの一覧表示処理の変更

ViewingRecord.gs

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

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」を取得します。

function getFileIdFromYearSettings(year) {
  for(const object of YearSettings) {
    if(object.year == year) {
      return object.fileId;
    }
  }
  return '';
}

javascript.html

　searchResults()に、引数（cond）を追加します。
　この引数を、ViewingRecord.gs のgetReportListBy()を呼び出す際に引数として渡します。

  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（画面の「鑑賞年」の選択値）を引数として渡します。

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が実行されます。

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

データの更新処理の変更

ViewingRecord.gs

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

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;を追加します。

  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を追加します。

var app = new Vue({
  el: '#app',
  data: {
      ：
    cond: {
      id: 0,
        ：
      year: ''
    },
    ：
  },
  ：
}

　ダイアログボックス側の変数の変更。
　props:のcondに、yearを追加します。

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

結果

　先ず、一覧表示を確認します。

　「鑑賞年」を変更（2021年→2020年）する事により、一覧表示の内容が変更されました。

　次に、データの更新処理（データの追加）を確認します。

　〔記録追加〕ボタンをクリックして、ダイアログボックスにデータを入力します。

　〔　追　加　〕ボタンをクリック。一覧表示にデータが追加されました。

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

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