[hub][vue] add action object in empty state, make NotFound page

erpnext/public/js/hub/components/EmptyState.vue

@@ -4,6 +4,13 @@
 		:style="{ height: height + 'px' }"
 	>
 		<p class="text-muted">{{ message }}</p>
+		<p v-if="action">
+			<button class="btn btn-default btn-xs"
+				@click="action.on_click"
+			>
+				{{ action.label }}
+			</button>
+		</p>
 	</div>
 </template>
 
@@ -15,7 +22,7 @@ export default {
 		message: String,
 		bordered: Boolean,
 		height: Number,
-		// action: Function
+		action: Object
 	}
 }
 </script>

erpnext/public/js/hub/components/empty_state.js

@@ -1,10 +0,0 @@
-function get_empty_state(message, action) {
-	return `<div class="empty-state flex align-center flex-column justify-center">
-		<p class="text-muted">${message}</p>
-		${action ? `<p>${action}</p>`: ''}
-	</div>`;
-}
-
-export {
-    get_empty_state
-}

erpnext/public/js/hub/marketplace.js

@@ -4,7 +4,6 @@ import Vue from 'vue/dist/vue.js';
 import './pages/item';
 import './pages/messages';
 import './pages/buying_messages';
-import './pages/not_found';
 
 import PageContainer from './PageContainer.vue';
 import Home from './pages/Home.vue';
@@ -15,6 +14,7 @@ import Search from './pages/Search.vue';
 import PublishedProducts from './pages/PublishedProducts.vue';
 import Profile from './pages/Profile.vue';
 import Seller from './pages/Seller.vue';
+import NotFound from './pages/NotFound.vue';
 
 // components
 import { ProfileDialog } from './components/profile_dialog';
@@ -243,7 +243,7 @@ erpnext.hub.Marketplace = class Marketplace {
 
 		if (!Object.keys(this.subpages).includes(route[1])) {
 			if (!this.subpages.not_found) {
-				this.subpages.not_found = new erpnext.hub.NotFound(this.$body);
+				this.subpages.not_found = new erpnext.hub.NotFoundPage(this.$body);
 			}
 			route[1] = 'not_found';
 		}
@@ -423,3 +423,21 @@ erpnext.hub.SellerPage = class {
 	}
 }
 
+erpnext.hub.NotFoundPage = class {
+	constructor(parent) {
+		this.$wrapper = $(`<div id="vue-area-not-found">`).appendTo($(parent));
+
+		new Vue({
+			render: h => h(NotFound)
+		}).$mount('#vue-area-not-found');
+	}
+
+	show() {
+		$('[data-page-name="not-found"]').show();
+	}
+
+	hide() {
+		$('[data-page-name="not-found"]').hide();
+	}
+}
+

erpnext/public/js/hub/pages/NotFound.vue

@@ -0,0 +1,41 @@
+<template>
+	<div
+		class="marketplace-page"
+		:data-page-name="page_name"
+	>
+		<empty-state
+			:message="empty_state_message"
+			:height="500"
+			:action="action"
+		>
+		</empty-state>
+
+	</div>
+</template>
+
+<script>
+import EmptyState from '../components/EmptyState.vue';
+
+export default {
+	name: 'not-found-page',
+	components: {
+		EmptyState
+	},
+	data() {
+		return {
+			page_name: 'not-found',
+			action: {
+				label: __('Back to Home'),
+				on_click: () => {
+					frappe.set_route(`marketplace/home`);
+				}
+			},
+
+			// Constants
+			empty_state_message: __(`Sorry! I could not find what you were looking for.`)
+		};
+	},
+}
+</script>
+
+<style scoped></style>

erpnext/public/js/hub/pages/messages.js

@@ -1,5 +1,5 @@
 import SubPage from './subpage';
-import { get_item_card_container_html } from '../components/items_container';
+// import { get_item_card_container_html } from '../components/items_container';
 import { get_buying_item_message_card_html } from '../components/item_card';
 import { get_selling_item_message_card_html } from '../components/item_card';
 import { get_empty_state } from '../components/empty_state';
@@ -22,7 +22,7 @@ erpnext.hub.Buying = class Buying extends SubPage {
 	}
 
 	render(items = [], title) {
-		const html = get_item_card_container_html(items, title, get_buying_item_message_card_html);
+		// const html = get_item_card_container_html(items, title, get_buying_item_message_card_html);
 		this.$wrapper.append(html);
 	}
 
@@ -54,7 +54,7 @@ erpnext.hub.Selling = class Selling extends SubPage {
 	}
 
 	render(items = [], title) {
-		const html = get_item_card_container_html(items, title, get_selling_item_message_card_html);
+		// const html = get_item_card_container_html(items, title, get_selling_item_message_card_html);
 		this.$wrapper.append(html);
 	}
 
@@ -101,4 +101,4 @@ function get_message_html(message) {
 			<p>${message.content}</p>
 		</div>
 	`;
-}
+}

erpnext/public/js/hub/pages/not_found.js

@@ -1,11 +0,0 @@
-import SubPage from './subpage';
-import { get_empty_state } from '../components/empty_state';
-
-erpnext.hub.NotFound = class NotFound extends SubPage {
-	refresh() {
-		this.$wrapper.html(get_empty_state(
-			__('Sorry! I could not find what you were looking for.'),
-			`<button class="btn btn-default btn-xs" data-route="marketplace/home">${__('Back to home')}</button>`
-		));
-	}
-}