GASでWebアプリ｢映画鑑賞記録｣を作る⑱ ／ Element UI を使い倒す

# 今回やること
　本連載の⑯から「Element UI」を導入しましたが、既存画面のコントロールはそのままにしていました。
　折角、新しいコンポーネントライブラリを導入しましたので、既存画面のコントロールを「Element UI」のコンポーネントに置き換えたいと思います。

# プログラムの修正
　各画面の表示を修正します。
### メイン画面の修正
　画面下部の「鑑賞年」プルダウンリスト、〔記録追加〕〔カレンダー登録〕ボタンを修正します。
　プルダウンリストは`<el-select>`を、ボタンは`<el-button>`を使用します。
- 現行の表示
![メイン1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/67a6b864-347a-8669-47d0-84cf11649ae1.png)
- 修正後の表示
![メイン2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/1b85a31e-cf4c-6d29-ec00-5414ba198bf0.png)
#### Index.html
- 現行のソース
```html
    <div style="text-align: center;">
      <select v-model="selectedYear" @change="doChangeYear">
        <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>&nbsp;&nbsp;&nbsp;&nbsp;
      <!-- <button type="button" class="btn btn-warning" id="test-test" onClick="getTheaters('2021年')">テスト</button> -->
      <button type="button" class="btn btn-primary" id="show-calendar" @click="doShowCalendar">カレンダー登録</button>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button @click="doShowTheater">映画館メンテナンス</el-button>
    </div>
```
- 修正後のソース
```html
    <div style="text-align: center;">
      <el-select v-model="selectedYear" placeholder="鑑賞年" @change="doChangeYear">
        <el-option v-for="year in optionYear" 
          v-bind:value="year.year" 
          v-bind:key="year.id"
          v-bind:label="year.year">
        </el-option>
      </el-select>
      <el-button type="primary" @click="doShowModal">記録追加</el-button>
      <el-button type="primary" @click="doShowCalendar">カレンダー登録</el-button>
      <el-button @click="doShowTheater">映画館メンテナンス</el-button>
    </div>
```
### ［記録追加］ダイアログボックスの修正
　「鑑賞日」カレンダー、「タイトル」テキストボックス、「初見」ラジオボタン、〔閉じる〕〔追　加〕ボタンを修正します。
　カレンダーは`<el-date-picker>`を、テキストボックスは`<el-input>`を、ラジオボタンは`<el-radio-group>`と`<el-radio>`を、ボタンは`<el-button>`を使用します。
- 現行の画面
![記録追加1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/7887caf2-319e-74e5-ee72-9d5eb7a46eb5.png)
- 修正後の画面
![記録追加2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/cfeb2382-ddd6-3033-fc20-8aa4884baa0f.png)
#### modalScript.html
- 現行のソース
```html
          <div class="modal-body">
            <slot name="body">
              default body {{ message }}
            </slot>
            <form>
              <div class="form-group" id="data-id-group" v-if="cond.id !== 0">
              <div class="input-group">
                <label for="data-id" class="col-form-label">ID：</label>
                <input type="text" class="form-control" id="data-id" v-model="cond.id" readonly>
              </div>
              </div>
              <div class="form-group">
              <div class="input-group">
                <label for="viewing-date" class="col-form-label">鑑賞日：</label>
                <!-- <input type="text" class="form-control" id="viewing-date" v-model="cond.viewingDate"> -->
                <vuejs-datepicker input-class="form-control" id="viewing-date" v-model="cond.viewingDate" :format="datepicker.format"></vuejs-datepicker>
              </div>
              </div>
              <div class="form-group">
                <label for="movie-name" class="col-form-label">タイトル：</label>
                <input type="text" class="form-control" id="movie-name" v-model="cond.movieName">
              </div>
              <div class="form-group">
                <label for="theater-name" class="col-form-label">映画館：</label>
                <!-- <input type="text" class="form-control" id="theater-name" v-model="cond.theaterName"> -->
                <vue-select class="form-control" id="theater-name" :options="vueselect.options" v-model="cond.theaterName" style="border: 0px;"></vue-select>
              </div>
              <div class="form-group">
              <div class="input-group">
                <label for="first-look" class="col-form-label">初見：</label>
                <!-- <input type="text" class="form-control" id="first-look" v-model="cond.firstLook"> -->
                <input type="radio" name="first-look" class="form-control" id="first-look-yes" v-model="cond.firstLook" value="1">
                <label for="first-look-yes" class="form-control" style="border: 0px;">はい</label>
                <input type="radio" name="first-look" class="form-control" id="first-look-no" v-model="cond.firstLook" value="0">
                <label for="first-look-no" class="form-control" style="border: 0px;">いいえ</label>
              </div>
              </div>
              <div class="form-group">
              <div class="input-group">
                <label for="my-rate" class="col-form-label">評価：</label>
                <el-rate class="form-control" id="my-rate" v-model="cond.rate" style="border: 0px;"></el-rate>
                <el-button type="text" class="form-control" @click="clrRate">クリア</el-button>
              </div>
              </div>
            </form>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
              <button type="button" class="modal-default-button btn btn-primary" @click="addData">{{ subject }}</button>
              <button type="button" class="modal-default-button btn btn-secondary" @click="$emit('close-modal')">閉じる</button>
            </slot>
          </div>
```
- 改修後のソース
```html
          <div class="modal-body">
            <slot name="body">
              default body {{ message }}
            </slot>
            <el-form label-position="left" label-width="70px">
              <el-form-item label="ID：" v-if="cond.id !== 0">
                <el-input v-model="cond.id" disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="鑑賞日：">
                <!-- <vuejs-datepicker v-model="cond.viewingDate" :format="datepicker.format"></vuejs-datepicker> -->
                <el-date-picker v-model="cond.viewingDate" type="date" placeholder="日付を選択してください"></el-date-picker>
              </el-form-item>
            </el-form>
            <el-form label-position="top">
              <el-form-item label="タイトル：">
                <el-input v-model="cond.movieName" style="position: relative; top: -10px;"></el-input>
              </el-form-item>
              <el-form-item label="映画館：">
                <vue-select :options="vueselect.options" v-model="cond.theaterName" style="position: relative; top: -10px;"></vue-select>
              </el-form-item>
            </el-form>
            <el-form>
              <el-form-item label="初見：">
                <el-radio-group v-model="cond.firstLook">
                  <el-radio :label="1" border>はい</el-radio>
                  <el-radio :label="0" border>いいえ</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <el-form :inline="true">
              <el-form-item label="評価：">
                <el-rate v-model="cond.rate" style="position: relative; top: 10px;"></el-rate>
              </el-form-item>
              <el-form-item>
                <el-button type="text" class="form-control" @click="clrRate">クリア</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
            </slot>
            <span style="float: right;">
              <el-button type="info" @click="$emit('close-modal')">閉じる</el-button>
              <el-button type="primary" @click="addData">{{ subject }}</el-button>
            </span>
          </div>
```
　**【重要】** 上記の修正だけでは、カレンダーの表示が正しく日本語で表示されません。
　　　　　 日本語化する為に、次の記述を追加する必要があります。
#### Index.html
```html
  <script src="https://unpkg.com/element-ui@2.14.0/lib/umd/locale/ja.js"></script>
```
#### Vuejs.html
```html
<script>
ELEMENT.locale(ELEMENT.lang.ja)
```
　《修正前》　　　　　　　　　　　　　　　　　　《修正後》
　![文字化け1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/0919deb1-516d-a58a-77fa-e96cc8ff3d35.png)　![文字化け2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/504a8c23-3fae-3a66-085d-687c4fe17ef1.png)
　　**◆参考サイト** [[Vue.js]Element UIをCDN利用環境で日本語化する方法](https://keizokuma.com/elementui2jp/)

　**【重要】** このままでは、プルダウンリストが正しく表示されませんので、次の修正も必要です。
#### modalStyle.html
- 現行のソース
```css
<style>
.modal-mask {
  position: fixed;
  z-index: 9998;
```
- 修正後のソース
```css
<style>
.modal-mask {
  position: fixed;
  z-index: 2;
```

### ［カレンダー登録］ダイアログボックスの修正
　「鑑賞日」カレンダー、〔閉じる〕〔追　加〕ボタンを修正します。
　カレンダーは`<el-date-picker>`を、ボタンは`<el-button>`を使用します。
- 現行の画面
![カレンダー登録1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/67b3fcfb-5e74-9f38-c85f-3424895a1567.png)
- 修正後の画面
![カレンダー登録2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/e645d270-394b-9cbd-0455-2487128f20e4.png)
#### calendarScript.html
- 現行のソース
```html
          <div class="modal-body">
            <slot name="body">
              {{ message }}
            </slot>
            <form>
              <div class="form-group">
              <div class="input-group">
                <label for="viewing-date" class="col-form-label">鑑賞日：</label>
                <vuejs-datepicker input-class="form-control" id="viewing-date" v-model="cond.viewingDate" :format="datepicker.format"></vuejs-datepicker>
              </div>
              </div>
            </form>
          </div>
```
- 修正後のソース
```html
          <div class="modal-body">
            <slot name="body">
              {{ message }}
            </slot>
            <el-form>
              <el-form-item label="鑑賞日：">
                <el-date-picker v-model="cond.viewingDate" type="date" placeholder="日付を選択してください"></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
```

**◆前の記事** [GASでWebアプリ｢映画鑑賞記録｣を作る⑰](https://qiita.com/pump33/items/58c237f34a14488ab34d)

**◆索引** [GASでWebアプリ｢映画鑑賞記録｣を作る《索引》](https://qiita.com/pump33/items/8ded0e6fd3c336e705f4)