이번에 할 일

　전회의 계속.
지금까지, 본 어플리케이션이 단년의 관리가 되고 있기 때문에, 복수년의 감상 기록의 관리를 실시할 수 있도록 개수하고 싶습니다.

이번은 「데이터의 일람 표시 처리의 변경」으로부터 마지막까지 대응합니다.

"영화 감상 기록"의 파일 ID 관리 방법 변경

"감상 연도"풀다운 목록 추가

데이터 나열 처리 변경

데이터 업데이트 프로세스 변경

데이터 나열 처리 변경

비에윈 g레코 rd. 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>

데이터 업데이트 처리 변경

비에윈 g레코 rd. 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로 웹 앱 "영화 감상 기록"을 만드는 ⑦
◆다음 기사 GAS로 웹 앱 "영화 감상 기록"을 만드는 ⑨

◆색인 GAS로 웹 앱 "영화 감상 기록"을 만드는 "색인"