Commit a81be851 by vindarel

vue baskets: cards in table, add button outside component, more columns

parent 5e627108
......@@ -11,15 +11,44 @@
<div v-for="it in baskets" :key="it.id">
<div> {{ it.name }} </div>
</div>
<div class="btn-group">
<button class="btn btn-default" @click="toggle_images" >
<i class="glyphicon glyphicon-th-list"/>
</button>
<button class="btn btn-default">
<i class="glyphicon glyphicon-pencil"/>
</button>
<button class="btn btn-default">
<i class="glyphicon glyphicon-info-sign"/>
</button>
<button class="btn btn-default">
<i class="glyphicon glyphicon-question-sign"/>
</button>
</div>
<table class="table table-condensed table-striped">
<thead>
<th> Title </th>
<th> Publisher </th>
<th> In stock </th>
<th> Price </th>
<th></th>
</thead>
<tbody>
<tr v-for="it in cards">
<card-item :card="it"
:show_images="show_images"
card_height="150px"/>
<td> {{ it.pubs_repr }} </td>
<td> {{ it.quantity }} </td>
<td> {{ it.price }} </td>
</tr>
</tbody>
</table>
</div>
<table class="table-condensed">
<tbody>
<tr v-for="it in cards">
<card-item :card="it"/>
</tr>
</tbody>
</table>
</div>
</template>
......@@ -49,6 +78,7 @@
/* api_cards: "/api/cards",*/
api_cards: "/api/datasource/search",
cards: [], // list of dicts
show_images: false,
}
},
......@@ -58,6 +88,10 @@
this.cards.push(card);
},
toggle_images: function () {
this.show_images = ! this.show_images;
},
},
mounted: function () {
......
<template>
<div>
<td class="col-md-4">
<td v-if="show_images" >
<img :src="card.img" :height="card_height"/>
</td>
<td class="col-md-8">
<td>
<a :href="card.search_url"> {{ card.title }} </a>
<div> {{ card.authors_repr }} </div>
<button @click="clicked"> Add </button>
<div v-if="show_images" > {{ card.authors_repr }} </div>
</td>
</div>
</template>
......@@ -25,6 +24,10 @@
type: String,
required: false,
},
show_images: {
type: Boolean,
default: false,
},
},
data: function () {
......@@ -33,10 +36,6 @@
},
methods: {
clicked: function (e) {
console.log("--- card item clicked ", this.card);
this.$emit("clicked", this.card);
},
},
mounted: function () {
......
......@@ -10,10 +10,14 @@
<tr v-for="(it, index) in cards" :key="it.id">
<card-item
:card="it"
card_height="100px"
@clicked="addCard">
show_images="true"
card_height="100px">
</card-item>
</tr>
<td class="col-md-1" >
<button @click="addCard(index)" class="btn btn-small">
<i class="glyphicon glyphicon-plus"/>
</button>
</td></tr>
</tbody>
</table>
</div>
......@@ -42,9 +46,9 @@
},
methods: {
addCard: function (card) {
console.log("--- add ", card);
this.$emit("onAddCard", card);
addCard: function (index) {
console.log("--- add ", this.cards[index]);
this.$emit("onAddCard", this.cards[index]);
},
search: function (e) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment