こんにちは，五十嵐です．ブックマークが登録できるようになりましたので，今度は削除と編集をできるようにしましょう．
まずは削除から．deletebookmark のアクションは非常にシンプルです．
lib/SecureSBM/Controller/Personal.pm:
sub deletebookmark : Path('/deletebookmark') {
my ( $self, $c ) = @_;
my $bookmarkid = $c->req->param('bookmark_id');
my $uid = $c->stash->{user}->user_id;
my $title;
if( my $ubdb = $c->model('SecureSBMDB::UserBookmark')->
find( {user_id => $uid, bookmark_id => $bookmarkid} )
){
$title = $ubdb->bookmark->bookmark_title;
$ubdb->user_bookmark_tags->delete_all;
$ubdb->delete;
}
$c->flash->{resultmessage} = '「' . $title . '」を削除しました．';
$c->res->redirect('/personal');
}
Model スキーマの記述により，user_bookmark_tags を利用して，変数 $ubdb から簡単に SecureSBMDB::UserBookmarkTag へアクセスできます．今回は flash を使用してみました．
これに対応するためにテンプレートも変更します．
root/template/personal/personal_center.tt:
<div id="resultmessage">
[% resultmessage || c.flash.resultmessage -%]
</div> <!-- end of resultmessage -->
削除ボタンを追加します．
<button type="button" id="deletebookmark_button[% bookmark_v.id %]">
削除
</button>
タグやコメントの表示部分を表示／非表示に切り替えるために，固有の id をつけて操作できるようにします．
<div id="bookmark_info[% bookmark_v.id %]">
タグ: [%- FOREACH tag_v IN bookmark_v.tags -%][% tag_v | html %],[% END -%]
<br />
コメント: [% bookmark_v.comment | html %]<br />
タイムスタンプ: [% bookmark_v.timestamp %]
</div> <!-- end of bookmark_info[% bookmark_v.id %] -->
削除の確認表示の部分を登録しておきます．
<div id="deletebookmark_block[% bookmark_v.id %]" class="hiddenblock">
<button type="button" id="deletebookmark[% bookmark_v.id %]">
実行
</button>
「[% bookmark_v.title | html %]」を削除します．
</div> <!-- end of deletebookmark[% bookmark_v.id %] -->
class="hiddenblock" は以前にも使用しましたが， style.css の中で設定されていて，'display: none;' だけが設定されたクラスです．最初に読み込んだ状態では，隠されています．ここを操作して，削除ボタンで確認できるようにします．
var infostyle[% bookmark_v.id %]
= _getElementById('bookmark_info[% bookmark_v.id %]').style;
var deletestyle[% bookmark_v.id %]
= _getElementById('deletebookmark_block[% bookmark_v.id %]').style;
var editstyle[% bookmark_v.id %]
= _getElementById('editbookmark_block[% bookmark_v.id %]').style;
情報表示，削除の確認表示，編集のフレーム表示のそれぞれの部分のスタイルを変更するために変数に格納しておきます．
_getElementById('deletebookmark_button[% bookmark_v.id %]').onclick
= function () {
if( deletestyle[% bookmark_v.id %].display == ''
|| deletestyle[% bookmark_v.id %].display == 'none' ){
infostyle[% bookmark_v.id %].display = 'none';
deletestyle[% bookmark_v.id %].display = 'block';
editstyle[% bookmark_v.id %].display = 'none';
}else{
infostyle[% bookmark_v.id %].display = 'block';
deletestyle[% bookmark_v.id %].display = 'none';
}
}
_getElementById('deletebookmark[% bookmark_v.id %]').onclick
= function () {
location.href
= '/deletebookmark?bookmark_id=[% bookmark_v.id %]';
}
今のままのスタイルでは，上下がつまって見づらいので，eachbookmark クラスで上下にすき間を入れました．
root/static/css/style.css:
/*
* ブックマークリストの設定
*/
.eachbookmark {
margin: 1ex 0px;
}
これで，削除は終了．
続いて，編集にかかります．
lib/SecureSBM/Controller/Personal.pm:
sub editbookmark : Path('/editbookmark') {
my ( $self, $c ) = @_;
my %data;
my $uid = $c->stash->{user}->user_id;
...(省略)
if( my $ubdb = $c->model('SecureSBMDB::UserBookmark')->
find( {user_id => $uid, bookmark_id => $data{bookmark_id}} )
){
@tags = _splitTags( $data{bookmark_tags} );
$title = $ubdb->bookmark->bookmark_title;
my $ubid = $ubdb->user_bookmark_id;
# タグの関連付けを一旦すべて削除
$ubdb->user_bookmark_tags->delete_all;
タグの関連付けは一旦全て削除します．タグそのものは再利用するため，そのまま残します．関連付けを全て削除するのは，タグの増減の比較を行うと処理が複雑になり，かえって時間がかかるためです．
# タグの登録と関連付け
_registTags( $c, $ubid, @tags );
この部分は，registbookmark で使用した部分と同じです．サブルーチン化 (_registTags()) しました．最後にコメントを更新し，/personal へリダイレクトします．
# コメントの更新
$ubdb->update( {user_bookmark_comment => $data{bookmark_comment}} );
...(省略)
コメントの更新が終了したら，メッセージなどを設定し，最後に /personal へリダイレクトして終了します．
対応してテンプレートを更新します．javascript で表示の有無の制御などを行うので，各ブロックに固有の id を付けます．
<div id="editbookmark_block[% bookmark_v.id %]" class="hiddenblock">
<form name="editbookmark_form[% bookmark_v.id %]">
タグ: <input type="text" name="editbookmark_tags"
value="
[%- FOREACH tag_v IN bookmark_v.tags -%]
[% tag_v | html %],
[% END -%]"
size="30">
<br />
コメント: <input type="text" name="editbookmark_comment"
value="[% bookmark_v.comment | html %]" size="40"><br />
タイムスタンプ: [% bookmark_v.timestamp %]
<br />
<button type="button" id="editbookmark[% bookmark_v.id %]">
更新
</button>
<button type="reset">リセット</button>
</form>
</div>
javascript 部分は以下の通り．
_getElementById('editbookmark_button[% bookmark_v.id %]').onclick
= function() {
if( editstyle[% bookmark_v.id %].display == ''
|| editstyle[% bookmark_v.id %].display == 'none' ){
infostyle[% bookmark_v.id %].display = 'none';
deletestyle[% bookmark_v.id %].display = 'none';
editstyle[% bookmark_v.id %].display = 'block';
}else{
infostyle[% bookmark_v.id %].display = 'block';
editstyle[% bookmark_v.id %].display = 'none';
}
}
_getElementById('editbookmark[% bookmark_v.id %]').onclick
= function () {
location.href = '/editbookmark?'
+ 'bookmark_id=[% bookmark_v.id %]'
+ '&bookmark_comment='
+ document.editbookmark_form[% bookmark_v.id %]
.editbookmark_comment.value
+ '&bookmark_tags='
+ document.editbookmark_form[% bookmark_v.id %]
.editbookmark_tags.value;
}
以上で，削除と編集ができるようになりました．タグの入力支援を後日作成します．
2007/03/30 記
参考：
Keyword: Perl Catalyst Secure-SBM SSBM セキュア・ソーシャル・ブックマーク
ikarashiさんのエントリ配信
Rinza
開発日記