はじめに
第3回目は、第1回目と第2回目に引き続き「ページ仮作成」の作業を進めます。今回は、下記のページの仮作成を行います。
- 日報一覧ページ: /admin/reports/
- 日報新規登録ページ: /admin/reports/add
- 日報詳細ページ: /admin/reports/:id/
- 日報修正ページ: /admin/reports/:id/edit/
- 日報削除ページ: /admin/reports/:id/delete/
仮作成前に下記のディレクトリとファイルを追加します。
mkdir app/views/reports/mixins
touch app/views/reports/mixins/detail.jade
touch app/views/reports/mixins/form.jade
ビューの編集
上記5件のページと新規に追加した2点のミックスインについて、編集後の内容を下記に記載します。
app/views/reports/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: 8%') 番号
th(style='width: 23%') 日時
th(style='width: 30%') 案件
th(style='width: 19%') 工程
th(style='width: 20%') 操作
tbody
- for (var i = 1; i <= 20; i += 1)
tr
td #{i}
td 2015年12月4日(金) <br> 13:00 - 14:00 (1時間)
td #{i % 2 === 1 ? 'A社様向けシステム開発' : 'B社様向けホームページ制作'}
td 見積
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/reports/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/reports/admin-detail.jade
extends ../layouts/2-column/admin
include ./mixins/detail
block main
h1.page-header 日報の詳細
.panel.panel-default
.panel-heading 日報
.panel-body
+detail
.row
.col-md-offset-3.col-md-6
a.btn.btn-default.btn-block(href='../') 一覧ページへ戻る
app/views/reports/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/reports/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/reports/mixins/detail.jade
mixin detail
.form-horizontal
.form-group
label.control-label.col-sm-3 日付
.col-sm-9
p.form-control-static 2015年12月5日(土)
.form-group
label.control-label.col-sm-3 開始時刻
.col-sm-9
p.form-control-static 10:00
.form-group
label.control-label.col-sm-3 終了時刻
.col-sm-9
p.form-control-static 11:00
.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
p.form-control-static 見積
.form-group
label.control-label.col-sm-3 タイトル
.col-sm-9
p.form-control-static 提案書を作成した
.form-group
label.control-label.col-sm-3 備考
.col-sm-9
p.form-control-static もう少しで完成です
app/views/reports/mixins/form.jade
mixin form
.form-horizontal
.form-group
label.control-label.col-sm-3(for='date') 日付
.col-sm-9
input.form-control(type='text', date='date', id='date', placeholder='日付をYYYY/MM/DD形式で入力')
.form-group
label.control-label.col-sm-3(for='from') 開始時刻
.col-sm-9
input.form-control(type='text', name='from', id='from', placeholder='開始時刻をHH:MM形式で入力')
.form-group
label.control-label.col-sm-3(for='to') 終了時刻
.col-sm-9
input.form-control(type='text', name='to', id='to', placeholder='開始時刻をHH:MM形式で入力')
.form-group
label.control-label.col-sm-3(for='project-id') 案件
.col-sm-9
select.form-control(name='project-id', id='project-id')
option - クリックして選択 -
.form-group
label.control-label.col-sm-3(for='category') 工程
.col-sm-9
select.form-control(name='category', id='category')
option - クリックして選択 -
.form-group
label.control-label.col-sm-3(for='title') タイトル
.col-sm-9
input.form-control(type='text', name='title', id='title', placeholder='タイトルを簡潔に入力')
.form-group
label.control-label.col-sm-3(for='title') 備考
.col-sm-9
textarea.form-control(rows='5', name='title', id='title', placeholder='備考を必要に応じて入力')
動作確認
動作を確認するには、app と static の両方のサーバを動作させた後、 http://localhost:3000/ にログインします。
cd app
npm start
別のシェルで
cd static
npm start
下記の順序でページ遷移を行い、表示内容を確認します。
- トップページ
- ログインページ
- ダッシュボードページ
- 日報一覧ページ
- 日報新規登録ページ
- 日報案件詳細ページ
- 日報修正ページ
- 日報削除ページ
おわりに
次回はAPIのルーティングを行います！