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

今回は、社員コード単位にn件存在するデータを表示する方法についてまとめていきます。
これにより、例えば以下のような情報を表示することが可能となります。

必要なデータの取得

まずはviews.pyで、リクエストに応じたデータを取得するよう定義します。

[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['familys'] = Family.objects.filter(code_7_family=self.request.path[8:-1]).order_by("-dokyo", "birth_date")

ログイン済みユーザのみに対して応答するために、クラスの引数にLoginRequiredMixinを渡しています。そのうえで、コンテキストに要素familysを追加し、家族情報を取得します。
※models.pyで家族情報を"Family"というクラスで定義しています。
※可読性の観点から、'families'ではなく-sの形で命名しています。

オブジェクトを取得するためのメソッドは何種類かあり、例えば

Model.objects.all()

上記のように記載すれば、Modelに存在するオブジェクトすべてを取得することになります。

Model.objects.filter()

今回の例では、社員コードに該当する項目「code_7_family」がリクエストと一致するオブジェクトすべてを取得するよう定義しています。
そのうえで、order_byメソッドを利用して、並べ替えを行って応答しています。

.order_by("-dokyo", "birth_date")

項目名の前に付与したハイフン("-")は、降順で応答することを示します。
よって上記は、「同居区分」降順＞「生年月日」昇順で並べ替えを行って応答するよう定義していることになります。

なお、取得したオブジェクトはdjango.db.models.query.QuerySet型で返されます。スライスを行うことができますので、例えば取得したデータの10件目までを応答したい場合、以下のように定義することができます。

context['kensyus_short'] = Kensyu.objects.filter(code_7=self.request.path[8:-1]).order_by("-date")[:10]

QuerySetには他にもさまざまなメソッドがあります。
詳細はこちらをご確認ください。

画面への表示

次に、取得したデータを画面に表示します。
ヘッダを定義したあと、取得した家族情報をテーブルの中身にセットしていきます。

[templates/app/contents_family.html]

{% load filter %}

【家族情報等】
<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>
            <th>住所</th>
          </tr>
        </thead>
        <tbody>
          {% for family in familys %}
            <div>
              <tr>
                <th>{{ family.name_sei }}</th>
                <th>{{ family.name_mei }}</th>
                <th>{{ family.birth_date|date:"Y/n/j" }}</th>
                <th>{{ family.birth_date|DateDifY }}</th>
                <th>{{ family.relation }}</th>
                <th>{{ family.occupation }}</th>
                <th>{{ family.dokyo }}</th>
                <th>{{ family.address }}</th>
              </tr>
            </div>
            {% endfor %}
        </tbody>
  </table>
</div>

[templates/app/item_detail_contents.html]

{% load filter %}

<div class="row">
    <div class="col-9 border border-secondary mb-3">
        {% include "./contents_family.html" %}
    </div>
    <div class="col-3 border border-secondary mb-3">
        {% include "./contents_address.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'),
]

次回は、タブを利用した表示の切り替えについてまとめていきます。