[hub][vue] add action object in empty state, make NotFound page
diff --git a/erpnext/public/js/hub/components/EmptyState.vue b/erpnext/public/js/hub/components/EmptyState.vue
index c0ad971..3d35efc 100644
--- a/erpnext/public/js/hub/components/EmptyState.vue
+++ b/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 @@
message: String,
bordered: Boolean,
height: Number,
- // action: Function
+ action: Object
}
}
</script>
diff --git a/erpnext/public/js/hub/components/empty_state.js b/erpnext/public/js/hub/components/empty_state.js
deleted file mode 100644
index 0e1ad46..0000000
--- a/erpnext/public/js/hub/components/empty_state.js
+++ /dev/null
@@ -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
-}
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index c61814d..00b6aee 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -4,7 +4,6 @@
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 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 @@
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.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();
+ }
+}
+
diff --git a/erpnext/public/js/hub/pages/NotFound.vue b/erpnext/public/js/hub/pages/NotFound.vue
new file mode 100644
index 0000000..7a76437
--- /dev/null
+++ b/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>
diff --git a/erpnext/public/js/hub/pages/messages.js b/erpnext/public/js/hub/pages/messages.js
index f8faa99..6222f53 100644
--- a/erpnext/public/js/hub/pages/messages.js
+++ b/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 @@
}
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 @@
}
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 @@
<p>${message.content}</p>
</div>
`;
-}
\ No newline at end of file
+}
diff --git a/erpnext/public/js/hub/pages/not_found.js b/erpnext/public/js/hub/pages/not_found.js
deleted file mode 100644
index f7ccc2f..0000000
--- a/erpnext/public/js/hub/pages/not_found.js
+++ /dev/null
@@ -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>`
- ));
- }
-}