[hub][vue] search page
This commit is contained in:
parent
0be2859f5b
commit
53fada1ae9
@ -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();
|
||||
}
|
||||
}
|
||||
|
77
erpnext/public/js/hub/pages/Search.vue
Normal file
77
erpnext/public/js/hub/pages/Search.vue
Normal 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>
|
@ -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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user