[hub][vue] search page

This commit is contained in:
Prateeksha Singh 2018-08-25 20:31:48 +05:30
parent 0be2859f5b
commit 53fada1ae9
3 changed files with 95 additions and 41 deletions

View File

@ -2,7 +2,6 @@ import Vue from 'vue/dist/vue.js';
// pages
import './pages/home';
import './pages/search';
import './pages/item';
import './pages/seller';
import './pages/profile';
@ -13,6 +12,7 @@ import './pages/not_found';
import SavedProducts from './pages/SavedProducts.vue';
import Publish from './pages/Publish.vue';
import Category from './pages/Category.vue';
import Search from './pages/Search.vue';
import PublishedProducts from './pages/PublishedProducts.vue';
// components
@ -340,3 +340,20 @@ erpnext.hub.PublishedProductsPage = class {
}
}
erpnext.hub.SearchPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-search">`).appendTo($(parent));
new Vue({
render: h => h(Search)
}).$mount('#vue-area-search');
}
show() {
$('[data-page-name="search"]').show();
}
hide() {
$('[data-page-name="search"]').hide();
}
}

View File

@ -0,0 +1,77 @@
<template>
<div
class="marketplace-page"
:data-page-name="page_name"
>
<search-input
:placeholder="search_placeholder"
:on_search="set_route"
v-model="search_value"
>
</search-input>
<h5>{{ page_title }}</h5>
<item-cards-container
:items="items"
:item_id_fieldname="item_id_fieldname"
:on_click="go_to_item_details_page"
:empty_state_message="empty_state_message"
>
</item-cards-container>
</div>
</template>
<script>
import SearchInput from '../components/SearchInput.vue';
import ItemCardsContainer from '../components/ItemCardsContainer.vue';
export default {
name: 'saved-products-page',
components: {
SearchInput,
ItemCardsContainer
},
data() {
return {
page_name: frappe.get_route()[1],
items: [],
search_value: frappe.get_route()[2],
item_id_fieldname: 'hub_item_code',
// Constants
search_placeholder: __('Search for anything ...'),
empty_state_message: __('')
};
},
computed: {
page_title() {
return this.items.length
? __(`Results for "${this.search_value}"`)
: __(`No Products found.`);
}
},
created() {
this.get_items();
},
methods: {
get_items() {
hub.call('get_items', { keyword: this.search_value })
.then((items) => {
this.items = items;
})
},
set_route() {
frappe.set_route('marketplace', 'search', this.search_value);
this.get_items();
},
go_to_item_details_page(hub_item_code) {
frappe.set_route(`marketplace/item/${hub_item_code}`);
}
}
}
</script>
<style scoped></style>

View File

@ -1,40 +0,0 @@
import SubPage from './subpage';
import { make_search_bar } from '../components/search_bar';
import { get_item_card_container_html } from '../components/items_container';
erpnext.hub.SearchPage = class SearchPage extends SubPage {
make_wrapper() {
super.make_wrapper();
make_search_bar({
wrapper: this.$wrapper,
on_search: keyword => {
frappe.set_route('marketplace', 'search', keyword);
}
});
}
refresh() {
this.keyword = frappe.get_route()[2] || '';
this.$wrapper.find('input').val(this.keyword);
this.get_items_by_keyword(this.keyword)
.then(items => this.render(items));
}
get_items_by_keyword(keyword) {
return hub.call('get_items', { keyword });
}
render(items) {
this.$wrapper.find('.hub-items-container').remove();
const title = !items.length
? __('No results found')
: this.keyword
? __('Search results for "{0}"', [this.keyword])
: '';
const html = get_item_card_container_html(items, title);
this.$wrapper.append(html);
}
}