今回やること
前回の続き。
今まで、本アプリが単年の管理となっている為、複数年の鑑賞記録の管理が行える様に改修したいと思います。
今回は「データの一覧表示処理の変更」から最後まで対応します。
- 「映画鑑賞記録」のファイル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アプリ｢映画鑑賞記録｣を作る⑨