Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@pump33(小林 貞春)in株式会社永和システムマネジメント

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

Last updated at Posted at 2022-07-29

今回やること

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

プログラムの修正

　各画面の表示を修正します。

メイン画面の修正

　画面下部の「鑑賞年」プルダウンリスト、〔記録追加〕〔カレンダー登録〕ボタンを修正します。
　プルダウンリストは<el-select>を、ボタンは<el-button>を使用します。

  • 現行の表示
    メイン1.png
  • 修正後の表示
    メイン2.png

Index.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>
  • 修正後のソース
    <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
  • 修正後の画面
    記録追加2.png

modalScript.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>
  • 改修後のソース
          <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

  <script src="https://unpkg.com/element-ui@2.14.0/lib/umd/locale/ja.js"></script>

Vuejs.html

<script>
ELEMENT.locale(ELEMENT.lang.ja)

　《修正前》　　　　　　　　　　　　　　　　　　《修正後》
　文字化け1.png　文字化け2.png
　　◆参考サイト [Vue.js]Element UIをCDN利用環境で日本語化する方法

　【重要】 このままでは、プルダウンリストが正しく表示されませんので、次の修正も必要です。

modalStyle.html

  • 現行のソース
<style>
.modal-mask {
  position: fixed;
  z-index: 9998;
  • 修正後のソース
<style>
.modal-mask {
  position: fixed;
  z-index: 2;

［カレンダー登録］ダイアログボックスの修正

　「鑑賞日」カレンダー、〔閉じる〕〔追　加〕ボタンを修正します。
　カレンダーは<el-date-picker>を、ボタンは<el-button>を使用します。

  • 現行の画面
    カレンダー登録1.png
  • 修正後の画面
    カレンダー登録2.png

calendarScript.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>
  • 修正後のソース
          <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アプリ｢映画鑑賞記録｣を作る⑰

◆索引 GASでWebアプリ｢映画鑑賞記録｣を作る《索引》

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?