103 lines
2.5 KiB
Vue
103 lines
2.5 KiB
Vue
<template>
|
|
<byjove-model-crud model-name="Product"
|
|
:label-renderer="renderLabel"
|
|
:allow-edit="allowEdit"
|
|
:mode="mode"
|
|
@refresh="record => { product = record }">
|
|
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
|
|
|
<div style="display: flex; flex-direction: column;">
|
|
|
|
<b-field label="Brand">
|
|
{{ product.brand_name }}
|
|
</b-field>
|
|
|
|
<b-field label="Description">
|
|
{{ product.description }}
|
|
</b-field>
|
|
|
|
<b-field label="Size">
|
|
{{ product.size }}
|
|
</b-field>
|
|
</div>
|
|
|
|
<img :src="product.image_url" />
|
|
</div>
|
|
|
|
<b-collapse class="card"
|
|
animation="slide"
|
|
:open="false"
|
|
aria-id="contentIdForVendors">
|
|
|
|
<template #trigger="props">
|
|
<div class="card-header"
|
|
role="button"
|
|
aria-controls="contentIdForVendors"
|
|
:aria-expanded="props.open">
|
|
<p class="card-header-title">
|
|
Vendors
|
|
</p>
|
|
<a class="card-header-icon">
|
|
<b-icon pack="fas"
|
|
:icon="props.open ? 'angle-down' : 'angle-up'">
|
|
</b-icon>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="card-content">
|
|
<div class="content">
|
|
|
|
<b-field label="Preferred">
|
|
{{ product.vendor_name }} @ {{ product.default_unit_cost_display }}
|
|
</b-field>
|
|
|
|
<b-table :data="product.costs">
|
|
<b-table-column label="Vendor"
|
|
field="vendor_name"
|
|
v-slot="props">
|
|
{{ props.row.vendor_name }}
|
|
</b-table-column>
|
|
<b-table-column label="Unit Cost"
|
|
field="unit_cost"
|
|
v-slot="props">
|
|
{{ props.row.unit_cost }}
|
|
</b-table-column>
|
|
</b-table>
|
|
|
|
</div>
|
|
</div>
|
|
</b-collapse>
|
|
|
|
</byjove-model-crud>
|
|
</template>
|
|
|
|
<script>
|
|
import ByjoveModelCrud from '../model-crud'
|
|
|
|
export default {
|
|
name: 'Product',
|
|
props: {
|
|
mode: String,
|
|
allowEdit: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
components: {
|
|
ByjoveModelCrud,
|
|
},
|
|
data: function() {
|
|
return {
|
|
product: {},
|
|
}
|
|
},
|
|
methods: {
|
|
renderLabel(product) {
|
|
return product.product_key
|
|
},
|
|
},
|
|
}
|
|
</script>
|