【タレントダッシュボード構築 #8】社員詳細表示画面をつくる③

今回は、タブを利用した表示の切り替えについてまとめていきます。
これにより、例えば以下のように情報を切り替えて表示することが可能となります。

必要なデータの取得

まずはviews.pyで、リクエストに応じたデータを取得するよう定義します。
ここでは、半年ごとの所属、級・号、評価ランクを保持するテーブル"Item_6mo"が存在すると仮定します。

[views.py]

from django.contrib.auth.mixins import LoginRequiredMixin
from .models import *

class ItemDetailView(LoginRequiredMixin, DetailView):

    model = Item

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['item_6mos_long'] = Item_6mo.objects.filter(code_7=self.request.path[8:-1]).order_by("date")
        context['item_6mos_short'] = Item_6mo.objects.filter(code_7=self.request.path[8:-1]).order_by("-date")[:6]

前回と同様、ログイン済みユーザのみに対して応答するよう定義したうえで、コンテキストにitem_6mos_long と item_6mos_short の二種類の要素を渡します。

item_6mos_longには取得したデータを"date"の昇順で全件、
item_6mos_shortには取得したデータを"date"の降順で直近6件分をそれぞれ格納します。

画面への表示

次に、取得したデータを画面に表示します。
まず、タブ要素を定義します。
※どのエリアにどのような情報を表示するかを決める方法として、サイト全体においてBootstrapのグリッドシステムを利用していますが、タブ要素もBootstrapを使って実装します。公式ドキュメントはこちらです。

[templates/app/contents_6mo.html]

{% load filter %}

【半期毎の記録】
 <ul class="nav nav-tabs" role="tablist">
   <li class="nav-6mos-item">
    <a class="nav-link active" id="item-6mos-short-tab" data-toggle="tab" href="#item-6mos-short" role="tab" aria-controls="item-6mos-short" aria-selected="true">直近3年分</a>
  </li>
  <li class="nav-6mos-item">
    <a class="nav-link" id="item-6mos-long-tab" data-toggle="tab" href="#item-6mos-long" role="tab" aria-controls="item-6mos-long" aria-selected="false">全期間（2002/4以降）</a>
  </li>
</ul>

<!-- つづく -->

初期状態となるタブ"item-6mos-short-tab"には直近6件分のデータを保持するitem_6mos_shortを、
隣のタブ"item-6mos-long-tab"には取得したデータ全件を保持するitem_6mos_longをそれぞれ定義します。

中身を以下のように定義して…

[templates/app/contents_6mo.html]

<!-- つづき -->

<div class="tab-content">
  <div class="tab-pane fade show active" id="item-6mos-short" role="tabpanel" aria-labelledby="item-6mos-short-tab">
    <div class="row pt-2 pb-2 pl-2 pr-2">
        {% if item_6mos_short %}
            <div class="container">
            <table class="table table-hover table-sm">
                <thead class="thead-light">
                  <tr>
                    <th>期</th>
                    <th>会社</th>
                    <th>部室</th>
                    <th>課</th>
                    <th>級</th>
                    <th>号</th>
                    <th>評価ランク</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item_6mo in item_6mos_short reversed %}
                    <div>
                      <tr>
                        <th>{{ item_6mo.date|date:"Y/n" }}</th>
                        <th>{{ item_6mo.main_company }}</th>
                        <th>{{ item_6mo.dept }}</th>
                        <th>{{ item_6mo.ka }}</th>
                        <th>{{ item_6mo.kyu }}</th>
                        <th>{{ item_6mo.go }}</th>
                        <th>{{ item_6mo.evsho }}</th>
                      </tr>
                    </div>
                    {% endfor %}
                </tbody>
              </table>
            </div>
        {% else %}
        表示するレコードがありません。
        {% endif %}                
    </div>
  </div>

  <div class="tab-pane fade" id="item-6mos-long" role="tabpanel" aria-labelledby="item-6mos-long-tab">
    <div class="row pt-2 pb-2 pl-2 pr-2">
        {% if item_6mos_long %}
            <div class="container">
            <table class="table table-hover table-sm">
                <thead class="thead-light">
                  <tr>
                    <th>期</th>
                    <th>会社</th>
                    <th>部室</th>
                    <th>課</th>
                    <th>級</th>
                    <th>号</th>
                    <th>評価ランク</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item_6mo in item_6mos_long %}
                    <div>
                      <tr>
                        <th>{{ item_6mo.date|date:"Y/n" }}</th>
                        <th>{{ item_6mo.main_company }}</th>
                        <th>{{ item_6mo.dept }}</th>
                        <th>{{ item_6mo.ka }}</th>
                        <th>{{ item_6mo.kyu }}</th>
                        <th>{{ item_6mo.go }}</th>
                        <th>{{ item_6mo.evsho }}</th>
                      </tr>
                    </div>
                    {% endfor %}
                </tbody>
              </table>
            </div>
        {% else %}
        表示するレコードがありません。
        {% endif %}                
    </div>
  </div>
</div>

ページの横幅を分割しながら、先ほど作成したcontents_6mo.htmlを読み込ませて表示エリアを定義します。

[templates/app/item_detail_contents.html]

{% load filter %}

<div class="row">
    <div class="col-8 border border-secondary mb-3">
        {% include "./contents_6mo.html" %}
    </div>
    <div class="col-4 border border-secondary mb-3">
        {% include "./contents_nintei.html" %}
    </div>
</div>

URLの定義

各ファイルを編集後、以下の通りurls.pyを設定すれば、表示可能となります。※#6と同様です。

[urls.py]

from django.urls import path

from .models import Item, Issue
from .views import *
from . import views

urlpatterns = [
    path('', ItemFilterView.as_view(), name='index'),
    path('detail/<int:pk>/', ItemDetailView.as_view(), name='detail'),
]

おまけ（マウスオーバーによる補足説明の表示）

上記の機能は以下のように実装しています。

[templates/app/contents_6mo.html]

<a data-toggle="tooltip" data-html="true" title="4月レコード：夏賞与の評価ランクを設定、10月レコード：冬賞与の評価ランクを設定。"><font color="#007bff"> ※評価ランクに関する注意事項</font></a>

ここまで社員情報の一覧表示、詳細表示画面のつくり方について説明しました。
次回は、ログインユーザとその権限の管理についてまとめていきます。