[hub][vue] search page

erpnext/public/js/hub/marketplace.js

@@ -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();
+	}
+}

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>

erpnext/public/js/hub/pages/search.js

@@ -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);
-	}
-}