Chapter 10

注文詳細ページ

alivelimb
alivelimb
2022.05.26に更新

本章では注文一覧ページを実装します。完成イメージは以下の通りです(注文一覧と同様です)。

注文詳細画面gif

注文一覧ページで Model, Service は作成しているため、本章では省略します。

No 分類 内容
1 Page PageId を定義し、BasePage を継承したページクラスを作る
2 Application MultiPageApp のpagesにページ ID とページクラスのペアを追加する

Page: PageId を定義し、ページクラスを作る

これまでと同じ手順でページを実装していきましょう。

PageId の定義

まずは PageId の定義です。注文一覧ページと同様にプレフィックスをMEMBERとしておきます。

class PageId(Enum):
    # (中略)
    MEMBER_CART = auto()
    MEMBER_ORDER_LIST = auto()
    MEMBER_ORDER_DETAIL = auto() # 追加

ページクラスの作成

次に注文詳細ページを実装していきます。注文一覧ページと同様MemberPageを継承して実装します。

class OrderDetailPage(MemberPage):
    def render(self) -> None:
        if not self.validate_user():
            return

        order = self.ssm.get_order()

        # タイトル表示
        st.title(self.title)

        # 注文情報表示
        if order is None:
            st.error("商品が選択されていません")
            return

        self._render_order(order)

        # 注文詳細一覧表示
        self._render_order_detail(order)

注文詳細ページは注文情報を表示する部分と注文詳細一覧部分に分かれています。注文情報部分は_render_orderで、_render_order_detailで表示します。

def _render_order(self, order: Order) -> None:
    show_order = {
        "注文ID": order.order_id,
        "合計金額": order.total_price,
        "注文日付": order.ordered_at.strftime("%Y-%m-%d %H:%M:%S"),
    }

    # サブタイトルの表示
    st.subheader("注文情報")

    # 注文テーブルの表示
    col_size = [1, 2]
    for key, value in show_order.items():
        key_col, value_col = st.columns(col_size)
        key_col.write(key)
        value_col.write(value)

def _render_order_detail(self, order: Order) -> None:
    # サブタイトル表示
    st.subheader("注文詳細一覧")

    # 注文詳細テーブル表示
    col_size = [1, 2, 2, 2]
    columns = st.columns(col_size)
    headers = ["No", "商品名", "単価", "数量"]
    for col, field_name in zip(columns, headers):
        col.write(field_name)

    for order_detail in order.details:
        (
            no_col,
            name_col,
            price_col,
            q_col,
        ) = st.columns(col_size)
        no_col.write(order_detail.order_no)
        name_col.write(order_detail.item.name)
        price_col.write(order_detail.item.price)
        q_col.write(order_detail.quantity)

こちらに関しては、これまでに紹介した内容なので特筆すべきことはないでしょう。

Application: ページ ID とページクラスのペアを追加する

最後に作成したページを Application に追加します。

def init_pages(ssm: StreamlitSessionManager) -> list[BasePage]:
    pages = [
        # (中略)
        CartPage(page_id=PageId.MEMBER_CART, title="カート", ssm=ssm),
        OrderListPage(page_id=PageId.MEMBER_ORDER_LIST, title="注文一覧", ssm=ssm),
        OrderDetailPage(page_id=PageId.MEMBER_ORDER_DETAIL, title="注文詳細", ssm=ssm), # 追加
    ]
    return pages

SSM, SessionKey 等も登録する必要がありますが、ここでの紹介は省略するため、ソースコードを確認してください。