58 lines
1.0 KiB
Vue
58 lines
1.0 KiB
Vue
<template>
|
|
<div class="item-cards-container">
|
|
<empty-state
|
|
v-if="items.length === 0"
|
|
:message="empty_state_message"
|
|
:bordered="true"
|
|
:height="80"
|
|
>
|
|
</empty-state>
|
|
<item-card
|
|
v-for="item in items"
|
|
:key="item[item_id_fieldname]"
|
|
:item="item"
|
|
:item_id_fieldname="item_id_fieldname"
|
|
:on_click="on_click"
|
|
:allow_clear="editable"
|
|
@remove-item="$emit('remove-item', item[item_id_fieldname])"
|
|
>
|
|
</item-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ItemCard from './ItemCard.vue';
|
|
import EmptyState from './EmptyState.vue';
|
|
|
|
export default {
|
|
name: 'item-cards-container',
|
|
props: {
|
|
items: Array,
|
|
item_id_fieldname: String,
|
|
on_click: Function,
|
|
editable: Boolean,
|
|
|
|
empty_state_message: String,
|
|
empty_state_height: Number,
|
|
empty_state_bordered: Boolean
|
|
},
|
|
components: {
|
|
ItemCard,
|
|
EmptyState
|
|
},
|
|
watch: {
|
|
items() {
|
|
// TODO: handling doesn't work
|
|
frappe.dom.handle_broken_images($(this.$el));
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.item-cards-container {
|
|
margin: 0 -15px;
|
|
overflow: overlay;
|
|
}
|
|
</style>
|