はじめに
第2回目は、第1回目に引き続き「ページ仮作成」の作業を進めます。今回は、下記のページの仮作成を行います。
- 案件一覧ページ: /admin/projects/
- 案件新規登録ページ: /admin/projects/add
- 案件詳細ページ: /admin/projects/:id/
- 案件修正ページ: /admin/projects/:id/edit/
- 案件削除ページ: /admin/projects/:id/delete/
仮作成前に下記のディレクトリとファイルを追加します。
mkdir app/views/projects/mixins
touch app/views/projects/mixins/detail.jade
touch app/views/projects/mixins/form.jade
ビューの編集
上記5件のページと新規に追加した2点のミックスインについて、編集後の内容を下記に記載します。
app/views/projects/admin-list.jade
extends ../layouts/2-column/admin
block main
h1.page-header 案件一覧
p.well 60件中1件目から20件目までの20件を表示しています
.text-right
a.btn.btn-primary(href='./add/') 新規登録
.text-center
ul.pagination
li.previous
a(href='#') «
li.active
a(href='#') 1
li
a(href='#') 2
li
a(href='#') 3
li.next
a(href='#') »
table.table.table-bordered.table-striped
thead
tr
th(style='width: 10%') 番号
th(style='width: 50%') 案件
th(style='width: 30%') 操作
tbody
- for (var i = 1; i <= 20; i += 1)
tr
td #{i}
td #{i % 2 === 1 ? 'A社様向けシステム開発' : 'B社様向けホームページ制作'}
td
a.btn.btn-info.btn-xs(href='./1/') 詳細
|
a.btn.btn-warning.btn-xs(href='./1/edit/') 修正
|
a.btn.btn-danger.btn-xs(href='./1/delete/') 削除
.text-center
ul.pagination
li.previous
a(href='#') «
li.active
a(href='#') 1
li
a(href='#') 2
li
a(href='#') 3
li.next
a(href='#') »
app/views/projects/admin-add.jade
extends ../layouts/2-column/admin
include ./mixins/form
block main
h1.page-header 案件の新規登録
form
.panel.panel-default
.panel-heading 案件フォーム
.panel-body
+form
a.btn.btn-default(href='../') 一覧ページへ戻る
a.btn.btn-primary.pull-right(href='../') この内容で登録する
app/views/projects/admin-detail.jade
extends ../layouts/2-column/admin
include ./mixins/detail
block main
h1.page-header 案件の詳細
.panel.panel-default
.panel-heading 案件
.panel-body
+detail
.panel.panel-default
.panel-heading 案件
.panel-body
p.text-right 単位: 人日
table.table
thead
tr
th 番号
th 名称
th 予定工数
th 消費工数
th 消費率
th 残存工数
tbody
tr
td 1
td 概要提案書作成
td 3.0
td 0.0
td 0.0%
td 3.0
tr
td 2
td 概要要件定義書作成
td 3.0
td 0.0
td 0.0%
td 3.0
tr
td 3
td 見積
td 2.0
td 0.0
td 0.0%
td 2.0
tr
td 4
td 契約
td 4.0
td 0.0
td 0.0%
td 4.0
tr
td 5
td 詳細提案書作成
td 8.0
td 0.0
td 0.0%
td 8.0
tr
td 6
td 詳細提案書点検補助
td 8.0
td 0.0
td 0.0%
td 8.0
tr
td 7
td 詳細要件定義書作成
td 8.0
td 0.0
td 0.0%
td 8.0
tr
td 8
td 詳細要件定義書点検補助
td 8.0
td 0.0
td 0.0%
td 8.0
tr
td 9
td 計画
td 2.0
td 0.0
td 0.0%
td 2.0
tr
td 10
td 画面作成
td 8.0
td 0.0
td 0.0%
td 8.0
tr
td 11
td 画面点検補助
td 8.0
td 0.0
td 0.0%
td 8.0
tr
td 12
td プロトタイプ作成
td 12.0
td 0.0
td 0.0%
td 2.0
tr
td 13
td プロトタイプ点検補助
td 4.0
td 0.0
td 0.0%
td 4.0
tr
td 14
td 設計仕様書作成
td 14.0
td 0.0
td 0.0%
td 4.0
tr
td 15
td 設計仕様書点検補助
td 2.0
td 0.0
td 0.0%
td 2.0
tr
td 16
td ソースコード作成
td 16.0
td 0.0
td 0.0%
td 6.0
tr
td 17
td テストコード作成
td 16.0
td 0.0
td 0.0%
td 6.0
tr
td 18
td 操作手順書作成
td 4.0
td 0.0
td 0.0%
td 4.0
tr
td 19
td 運用環境構築
td 4.0
td 0.0
td 0.0%
td 4.0
tr
td 20
td 動作確認
td 4.0
td 0.0
td 0.0%
td 4.0
tr
td 21
td 初期設定
td 4.0
td 0.0
td 0.0%
td 4.0
tr
td 22
td 検収補助
td 2.0
td 0.0
td 0.0%
td 2.0
tr
td(colspan='2').text-right 合計
td 144.0
td 0.0
td 0.0%
td 144.0
.row
.col-md-offset-3.col-md-6
a.btn.btn-default.btn-block(href='../') 一覧ページへ戻る
app/views/projects/admin-edit.jade
extends ../layouts/2-column/admin
include ./mixins/form
block main
h1.page-header 案件の修正
form
.panel.panel-default
.panel-heading 案件フォーム
.panel-body
+form
a.btn.btn-default(href='../../') 一覧ページへ戻る
a.btn.btn-primary.pull-right(href='../../') この内容で修正する
app/views/projects/admin-delete.jade
extends ../layouts/2-column/admin
block main
h1.page-header 案件の削除
p 案件を削除するには「削除を実行する」ボタンをクリックしてください
a.btn.btn-default(href='../../') 一覧ページへ戻る
a.btn.btn-danger.pull-right(href='../../') 削除を実行する
app/views/projects/mixins/detail.jade
mixin detail
.form-horizontal
.form-group
label.control-label.col-sm-3 番号
.col-sm-9
p.form-control-static 1
.form-group
label.control-label.col-sm-3 名称
.col-sm-9
p.form-control-static A社様向けシステム開発
.form-group
label.control-label.col-sm-3 カテゴリ
.col-sm-9
ul.form-control-static
li 概要提案書作成(3.0人時)
li 概要要件定義書作成(3.0人時)
li 見積(2.0人時)
li 契約(4.0人時)
li 詳細提案書作成(8.0人時)
li 詳細提案書点検補助(8.0人時)
li 詳細要件定義書作成(8.0人時)
li 詳細要件定義書点検補助(8.0人時)
li 計画(2.0人時)
li 画面作成(8.0人時)
li 画面点検補助(8.0人時)
li プロトタイプ作成(12.0人時)
li プロトタイプ点検補助(4.0人時)
li 設計仕様書作成(14.0人時)
li 設計仕様書点検補助(2.0人時)
li ソースコード作成(16.0人時)
li テストコード作成(16.0人時)
li 操作手順書作成(4.0人時)
li 運用環境構築(4.0人時)
li 動作確認(4.0人時)
li 初期設定(4.0人時)
li 検収補助(2.0人時)
.form-group
label.control-label.col-sm-3 工数
.col-sm-9
p.form-control-static 18.0 人日
app/views/projects/mixins/form.jade
mixin form
.form-horizontal
.form-group
label.control-label.col-sm-3(for='index') 番号
.col-sm-9
input.form-control(type='number', name='index', id='index', placeholder='案件の番号を入力')
.form-group
label.control-label.col-sm-3(for='name') 名称
.col-sm-9
input.form-control(type='text', name='name', id='name', placeholder='案件の名称を入力')
.form-group
label.control-label.col-sm-3(for='categories') カテゴリ
.col-sm-9
textarea.form-control(rows='10', name='categories', id='categories', placeholder='案件のカテゴリをJSON形式で入力')
.form-group
label.control-label.col-sm-3(for='day') 工数
.col-sm-9
input.form-control(type='number', name='day', id='day', placeholder='案件の工数を人日単位で入力')
動作確認
動作を確認するには、app と static の両方のサーバを動作させた後、 http://localhost:3000/ にログインします。
cd app
npm start
別のシェルで
cd static
npm start
下記の順序でページ遷移を行い、表示内容を確認します。
- トップページ
- ログインページ
- ダッシュボードページ
- 案件一覧ページ
- 案件新規登録ページ
- 案件詳細ページ
- 案件修正ページ
- 案件削除ページ
おわりに
次回は日報関連のページ仮作成を行います！