올해도 빨리 2월이 되었습니다.
작년은, 코로나연의 영향으로 영화관에서의 감상 갯수가 줄었습니다만, 올해도 1개라도 많이 보고 싶습니다.

이번에 할 일

라고 하는 것으로, 본 어플리가 단년의 관리가 되고 있기 때문에, 복수년의 감상 기록의 관리를 실시할 수 있도록 개수하고 싶습니다.
구체적으로는, 「감상년」의 풀다운 리스트를 추가해, 과거의 해를 선택하는 일에 의해 일람 표시되고 있는 감상 기록을 바꿀 수 있도록 합니다.
변경은 다음의 항목에 따라서 실시합니다만, 이번은 「「감상년」…」까지에 대응합니다.

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

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

데이터 나열 처리 변경

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

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

데이터가 기록되고 있는 「영화 감상 기록」(스프레드 시트)을 1년마다 나누어 관리하는 것으로 합니다.
새해가 되었을 경우, 다음의 순서로 준비를 실시하는 것으로 합니다.

기존 파일(영화 감상 기록)을 복사합니다.
→ 복사(새로 작성)한 파일의 파일 ID를, 후술하는 Config.gs 의 YearSettings2021년의 fileId에 기술합니다.

복사 된 파일의 [감상 이력] 시트의 데이터를 지 웁니다.

여러 파일을 관리할 수 있도록 Config.gs의 설정을 변경합니다.

구성 g. 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();
  }

비에윈 g레코 rd. gs

getYearSettings() 를 추가합니다. 이 프로세스에서 Config.gs YearSettings를 가져옵니다.

function getYearSettings() {
  return YearSettings;
}

◆ 참고 사이트 Vue.js에서 풀다운 메뉴를 만드는 방법 (기본)

결과

풀다운 목록이 표시됩니다.


◆ 이전 기사 GAS로 웹 앱 "영화 감상 기록"을 만드는 ⑥
◆ 다음 기사 GAS로 웹 앱 "영화 감상 기록"을 만드는 ⑧

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