スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版 その２～～からの続きです。
今回は更新処理を行います。
とはいっても難しいことはありません。
まずは、以下の更新ボタンをクリックします。
<button v-on:click="upd_item" class='btn-radius-orange'> 更新 </button>
「v-on:click」で指定されている「upd_item」が呼ばれます。
Vue側の以下の「upd_item」が呼ばれます。
methods:{ //の中の・・・
// 更新画面（モーダル）でのデータ更新後、モーダルOFF
upd_item: function(){
google.script.run.withSuccessHandler(this.refitem)
.withFailureHandler(function(arg){
alert("データの更新に失敗しました。");
}).setUpdData(this.refitem);
// モーダル画面を閉じる
this.dispDetails = false;
this.showContent = false;
},
データ更新も「google.script.run.」を使い、「コード.gs」の「setUpdData」を「this.refitem」をパラメータに呼び出します。
更新失敗時にはアラートを出すようにしています。
成功時にも一応「this.refitem」を入れてはいますが、画面遷移上、モーダルは消えて、次の詳細を表示しようとする際には新しいデータが入ってくるので特に問題なしです。
「コード.gs」の「setUpdData」は以下のようになっており、更新と新規登録の両方に対応させました。新規登録のモーダルは説明していませんが、更新とほぼ同じです。データがないのでプロパティに「未設定」としたり、データを空にしたり、空の配列を作ったりしたものを表示しているだけです。
「setUpdData」では、更新時はスプレッドシートの行番号をそのままつかますが、新規登録時はmaxにプラス１して行番号を指定しています。違いはそれだけですね。
スプレッドシートなのでお決まりの、どのシートかを設定します。
そして、更新データだけの配列を用意します。
指定した「this.refitem」の中には余計なものがたくさん入っていますからね。
//データ更新(新規も対応）
function setUpdData(ary) {
var spread = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spread.getSheetByName('database');
var arrayUpd = [ary.length];
var typeIdx = 2; // inputなどのタイプの要素番号
var dataIdx = 4; // データの要素番号
if (ary[0][dataIdx] == "未設定") {
// 新規用
arrayUpd[0] = sheet.getLastRow()+1;
} else {
arrayUpd[0] = ary[0][dataIdx]; // 行番号を格納
}
arrayUpd[1] = getDateOfTokyo(); // タイムスタンプをセット
// 更新データだけの配列を作成しながら、checkboxのデータは配列から文字列に変換する
for (i=2; i < ary.length; i++) {
if (ary[i][typeIdx] == "checkbox") {
arrayUpd[i] = ary[i][dataIdx].join(',');
} else {
arrayUpd[i] = ary[i][dataIdx];
}
}
var tmp = [];
tmp.push(arrayUpd);
dataSave(sheet,arrayUpd[0], 1, 1, arrayUpd.length,tmp);
return true;
}
更新データの１つ目はスプレッドシートの行番号、２つ目はタイムスタンプ。この２つは、このシリーズではお決まり（固定）とさせていただいてます。
「// 更新データだけの配列を作成しながら、checkboxのデータは配列から文字列に変換する」以降でデータを取得し、配列に入れています。
そして「checkbox」の時だけ、もう１処理しています。
それは、例えば、「駐車場」と「駐輪場」にチェックが入っていた場合、
プロパティデータ上は、[駐車場,駐輪場]という配列になっていますので、
文字列として、、、、「駐車場,駐輪場」の形にして保存することにしています。
（そのため、データを表示する際は、「駐車場,駐輪場」の文字列から[駐車場,駐輪場]の配列に（変換しています。）
そして、「var tmp = [];」で更にpushしていますが、これは、
スプレッドシートにデータを反映するには（１行しか更新しなくても）表形式的な感じで更新するので、２次元配列にする必要があります。そのため「tmp」を用意し、pushしています。
ここから更に「dataSave」に飛ばしています。
ここではバッティングしないように見よう見まねで実装しています。
全ソース公開時に見ていただければと思います。
あとは、モーダルを閉じて、一覧画面に戻ります。
一覧画面に戻った時にリフレッシュしたかったのですが、できず・・・
検索ボックスに何もいれずに「検索」ボタンを押せばリフレッシュされます。
次は、ソースを公開していったん終了ですね。
ではまた。
追記：：
完結させましたぁ～
スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版 その４[完結編]～～