brotherton-erpnext/erpnext/public/js/hub/pages/Home.vue

104 lines
2.1 KiB
Vue

<template>
<div
class="marketplace-page"
:data-page-name="page_name"
>
<search-input
:placeholder="search_placeholder"
:on_search="set_search_route"
v-model="search_value"
>
</search-input>
<div v-for="section in sections"
:key="section.title"
>
<div class="hub-items-header margin-bottom level">
<h4>{{ section.title }}</h4>
<p :data-route="'marketplace/category/' + section.title">{{ 'See All' }}</p>
</div>
<item-cards-container
:container_name="section.title"
:items="section.items"
:item_id_fieldname="item_id_fieldname"
:on_click="go_to_item_details_page"
>
</item-cards-container>
</div>
</div>
</template>
<script>
import SearchInput from '../components/SearchInput.vue';
import ItemCardsContainer from '../components/ItemCardsContainer.vue';
export default {
name: 'home-page',
components: {
SearchInput,
ItemCardsContainer
},
data() {
return {
page_name: frappe.get_route()[1],
item_id_fieldname: 'hub_item_code',
search_value: '',
sections: [],
// Constants
search_placeholder: __('Search for anything ...'),
};
},
created() {
// refreshed
this.search_value = '';
this.get_items();
},
methods: {
get_items() {
hub.call('get_data_for_homepage', {
country: frappe.defaults.get_user_default('country')
})
.then((data) => {
this.sections.push({
title: __('Explore'),
items: data.random_items
});
if (data.items_by_country.length) {
this.sections.push({
title: __('Near you'),
items: data.items_by_country
});
}
const category_items = data.category_items;
if (category_items) {
Object.keys(category_items).map(category => {
const items = category_items[category];
this.sections.push({
title: __(category),
items
});
});
}
})
},
go_to_item_details_page(hub_item_code) {
frappe.set_route(`marketplace/item/${hub_item_code}`);
},
set_search_route() {
frappe.set_route('marketplace', 'search', this.search_value);
},
}
}
</script>
<style scoped></style>