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

今回以降は社員の詳細情報を表示する画面を構築していきます。

まずはこちらのエリアを作っていきます。

どのエリアにどのような情報を表示するかを決める方法として、今回はBootstrapのグリッドシステムを利用しています。
グリッドシステムとはこちらに記載されているようにレイアウトを格子状に分解して配置する手法で、横幅を12分割して要素の配置を決めます。

まずは下記の通り、横幅を9（col-9）と3（col-3）と分割して…

[templates/app/item_detail_contents.html]

{% load filter %}

<div class="row">
    <div class="col-9 border border-secondary mb-3">
        {% include "./contents_header.html" %}
    </div>
    <div class="col-3 pt-3 mb-3">
        {% include "./contents_photo.html" %}
    </div>
</div>

contents_header.htmlなど別のhtmlファイルを読み込ませて、コンテンツを表示していきます。

社員コードの表示

[templates/app/contents_header.html]

{% load filter %}

<div class="row">
    
    <div class="col-12">【基本情報】</div>
    
    <div class="col-2">社員コード：</div>
    <div class="col-10">{{ item.code_7 }}</div>

<!-- つづく -->

itemは、社員コードで一意になっているテーブルで、要素として個人ごとのさまざまな属性を保持しています。
item.code_7 の部分で、そのテーブルから「社員コード」にあたるカラム code_7 を取得し表示しています。

氏名の表示

[templates/app/contents_header.html]

<!-- つづき -->

    <div class="col-2">氏名：</div>
    <div class="col-10">
        {{ item.name|add:"（"|add:item.name_kana|add:"）" }}
    </div>

漢字氏名（カナ氏名） という内容を表示するため、テンプレートの構成要素「フィルタ」を利用しています。※あらかじめ組み込まれているフィルタについてはこちらのページをご覧ください。
実運用上は可読性が低いので、以下のような書き方にしたほうがよいかもしれません。

{{ item.name }}（{{ item.name_kana }}）

所属、ライン（部長/課長）の表示

[templates/app/contents_header.html]

<!-- つづき -->

    <div class="col-2">現所属：</div>
    <div class="col-10">
        {{ item.dept }} {{ item.ka }}
        {% if item.line == 1 %}【ライン部長】{% elif item.line == 2 %}【ライン課長】{% endif %}
        {% if item.choketsu %}＜長欠中＞{% endif %}{% if item.kyushoku %}＜休職中＞{% endif %}
    </div>

テンプレートの構成要素「タグ」を利用し、各属性（lineおよびchoketsu, kyushoku）の値により表示する内容を変更しています。※他に利用できるタグについてはこちらをご参照ください。

生年月日や学歴の表示については割愛して…

入社年月の表示

入社日を和暦で表示させるには、ひと工夫必要です。

[templates/app/contents_header.html]

<!-- つづき -->

    <div class="col-2">入社：</div>
    <div class="col-4 mb-2">
        {{ item.ent_date|wareki }}, {{ item.ent_date|date:"Y/n" }}
    </div>

以下のような簡素な自作フィルタを利用しています。
※月・日まで含めて厳密に判定を行っているわけではありません。

[templatetags/filter.py]

from django import template
from django.core.files.storage import default_storage
import os.path
from datetime import datetime, date, time, timedelta

register = template.Library()

@register.filter()
def wareki(date):
    if date is not None:
        year = date.year
        if year <= 1988:
            gengo = "S"
            year_wareki = str(year - 1925)
        elif year <= 2019:
            gengo = "H"
            year_wareki = str(year - 1988)
        else:
            gengo = "R"
            year_wareki = str(year - 2018)
    
        wareki_str = gengo + year_wareki
        
    else:
        wareki_str = ""
    
    return wareki_str

URLの定義

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

[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'),
]

次回は、社員コード単位にn件存在するデータを表示する方法についてまとめていきます。