[hub][vue] search page
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index 448ca42..0438d6f 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -2,7 +2,6 @@
// pages
import './pages/home';
-import './pages/search';
import './pages/item';
import './pages/seller';
import './pages/profile';
@@ -13,6 +12,7 @@
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.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();
+ }
+}
diff --git a/erpnext/public/js/hub/pages/Search.vue b/erpnext/public/js/hub/pages/Search.vue
new file mode 100644
index 0000000..54aa58a
--- /dev/null
+++ b/erpnext/public/js/hub/pages/Search.vue
@@ -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>
diff --git a/erpnext/public/js/hub/pages/search.js b/erpnext/public/js/hub/pages/search.js
deleted file mode 100644
index 1cdacb6..0000000
--- a/erpnext/public/js/hub/pages/search.js
+++ /dev/null
@@ -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);
- }
-}