# 【画面基本設計書】日報一覧画面
###### tags: `gizlog-仕様書`

## 1. 概要

ログインユーザーの日報情報を一覧で表示し、また検索も行う。

画面ID:D001
画面名:日報一覧画面
URL: /report

## 2. 画面レイアウト図

ページネーション

## 3. 画面項目定義
| 項番 | 区分 | 項目名 | 形式 | 半角/全角 | I/O | テーブル名 | カラム名 | 備考 |
| ------------- | --------------- | ------------- | ------------- | ------------- | ------------- | ------------- | ------------- | ------------- |
| 1 | 検索フォーム | 日付入力欄 | テキストボックス | 半角 | I/O | N/A | N/A | 年月を入力 <br> 日付を検索した後は日報一覧画面の検索フォームに検索値が残ること（textで入力するタイプではなく、カレンダー選択式にしてください） |
| 2 | 検索フォーム | 日付検索決定ボタン | ボタン | N/A | O | N/A | N/A | N/A |
| 3 | 画面遷移 | 日報作成ボタン | ボタン | N/A | O | N/A | N/A | N/A |
| 4 | 日報一覧表示 | 日報一覧エリア | N/A | N/A | N/A | N/A | N/A | |
| 5 | 日報一覧表示 | 日報作成日 | ラベル | 半角 | O | daily_reports | reporting_time | 例 ) 12/31 (Wed) 月/日 (曜日)のフォーマットで表示 |
| 6 | 日報一覧表示 | 日報タイトル | ラベル | 半角<br>全角 | O | daily_reports | title | 30文字以上は「...」で丸め込んで表示 半角のみの丸め込み (全角は考慮せず) |
| 7 | 日報一覧表示 | 日報内容 | ラベル | 半角<br>全角 | O | daily_reports | content | 50文字以上は「...」で丸め込んで表示 半角のみの丸め込み (全角は考慮せず) |
| 8 | 日報一覧表示 | 日報詳細ボタン | ボタン | N/A | O | N/A | N/A | N/A |
| 9 | 日報一覧表示 | ページネーションボタン | ボタン | N/A | O | N/A | N/A | |

### その他備考

- 1ページあたり最大10件のページネーション
- 日報の新着順(daily_reportsテーブルreporting_timeカラムの降順)

## 4. イベント定義
| No. | 項目名 | イベント | 処理内容 | 備考 |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| 1 | 日付検索フォーム | クリック | カレンダーの表示、クリックで年月を選択可能 | |
| 2 | 日付検索決定ボタン | クリック | 検索内容とヒットした日報を表示 | reporting_timeのフォーム入力値での部分一致検索<br>詳しくは[入力パラメータ定義](#loom-header-7)を参照 |
| 3 | 日報作成ボタン | クリック | 日報作成画面に遷移 | |
| 4 | 日報詳細ボタン | クリック | 日報詳細画面に遷移 | |
| 5 | ページネーションボタン | クリック | クリックしたページ番号に遷移 | 日付検索後前後のページ番号を押下した場合は、日付検索内容と一致する前後の日報を表示 |

## 5. 入力パラメータ定義
| No. | 項目名 | パラメータ名 | 必須 | 初期値 | 属性 | 下限 | 上限 | エラーメッセージ | 備考 |
| ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
| 1 | 検索日付 | reporting_time | N/A | N/A | month | N/A | N/A | N/A | reporting_timeの部分一致検索 |
| 1 | ページ番号 | page | N/A | N/A | month | N/A | N/A | N/A | ページネーションに使用 |