前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
この一覧の行をクリックすると、モーダルダイアログを出して、予約詳細を表示するように作り変えます。
必要な情報はすでに予約一覧で取得しているので、それをダイアログに表示させる、という手法で行きます。
<div id="overlay" v-show="showContent" @click="closeModal">
<div id="content">
<table class="edit">
<tbody>
<tr>
<th>名前</th>
<td>{{ contents.name }}</td>
</tr>
<tr>
<th>住所</th>
<td>{{ contents.address }}</td>
</tr>
<tr>
<th>電話番号</th>
<td>{{ contents.phone }}</td>
</tr>
<tr>
<th>人数</th>
<td>{{ contents.num }}</td>
</tr>
<tr>
<th>宿泊部屋</th>
<td>{{ contents.room }}</td>
</tr>
<tr>
<th>宿泊日数</th>
<td>{{ contents.days }}</td>
</tr>
<tr>
<th>宿泊日</th>
<td>{{ contents.start_day }}</td>
</tr>
<tr>
<th>チェックアウト</th>
<td>{{ contents.checkout }}</td>
</tr>
</tbody>
</table>
<p><button @click="closeModal">close</button></p>
</div>
</div>
#overlay {
z-index:1;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
#content{
z-index:2;
width:50%;
padding: 1em;
background:#fff;
}
}
ダイアログとして表示する部分です。
overlayというのはダイアログのバックに表示するグレー表示のことです。
横と縦にでっかいdiv要素をtop0,left0に表示させる、というイメージですね。
その中にさらにdivを追加して詳細を表示を表示させます。
data() {
return {
// 中略
showContent: false,
contents: {
name: "",
address: "",
phone: "",
num: 0,
room: "",
days: 0,
start_day: "",
checkout: "",
}
contentsは実際に予約詳細のダイアログに表示するデータです。
showContentはoverlayのv-showとバインドさせて、ダイアログの表示・非表示を切り替えるフラグです。
openModal: function(id){
for(var i = 0; i< this.registers.length; i++){
if(this.registers[i].id == id){
this.contents.name = this.registers[i].name;
this.contents.address = this.registers[i].address;
this.contents.phone = this.registers[i].phone;
this.contents.num = this.registers[i].num;
this.contents.room = this.registers[i].room;
this.contents.days = this.registers[i].days;
this.contents.start_day = this.registers[i].start_day;
this.contents.checkout = this.registers[i].checkout;
break;
}
}
this.showContent = true
},
closeModal: function(){
this.showContent = false
}
ダイアログ表示処理とクローズ処理です。
やっていることは、基本的にデータを設定して、フラグをON、閉じるときはフラグをOFFにする、というだけです。
こんな感じに仕上がります。
次回はここから編集・削除を行いたいと思います。
