[hub][vue] Seller Page
diff --git a/erpnext/public/js/hub/App.vue b/erpnext/public/js/hub/App.vue
deleted file mode 100644
index 37ec4f3..0000000
--- a/erpnext/public/js/hub/App.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
- <div class="app">
- <hello></hello>
- </div>
-</template>
-
-<script>
-import ItemCardsContainer from './components/ItemCardsContainer.vue';
-export default {
- name: 'app',
- components: {
- ItemCardsContainer
- }
-}
-</script>
-
-<style>
-body {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- margin: 0;
-}
-.app {
- color: #444;
- margin-top: 100px;
- max-width: 600px;
- font-family: Helvetica, sans-serif;
- text-align: center;
- display: flex;
- align-items: center;
-}
-</style>
diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue
index ae6e8ab..1a2207e 100644
--- a/erpnext/public/js/hub/components/DetailView.vue
+++ b/erpnext/public/js/hub/components/DetailView.vue
@@ -23,7 +23,7 @@
</div>
</div>
- <div v-for="section in sections" class="row hub-item-description"
+ <div v-for="section in sections" class="row hub-item-description margin-bottom"
:key="section.title"
>
<h6 class="col-md-12 margin-top">
diff --git a/erpnext/public/js/hub/components/TimelineItem.vue b/erpnext/public/js/hub/components/TimelineItem.vue
new file mode 100644
index 0000000..97b5a0d
--- /dev/null
+++ b/erpnext/public/js/hub/components/TimelineItem.vue
@@ -0,0 +1,9 @@
+/* Saving this for later */
+<template>
+ <div class="media timeline-item notification-content">
+ <div class="small">
+ <i class="octicon octicon-bookmark fa-fw"></i>
+ <span title="Administrator"><b>4 weeks ago</b> Published 1 product to Marketplace</span>
+ </div>
+ </div>
+</template>
diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index 7cb2281..fdf2690 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -1,108 +1,3 @@
-function get_item_card_html(item) {
- const item_name = item.item_name || item.name;
- const title = strip_html(item_name);
- const img_url = item.image;
- const company_name = item.company;
-
- // Subtitle
- let subtitle = [comment_when(item.creation)];
- const rating = item.average_rating;
-
- if (rating > 0) {
- subtitle.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
- }
-
- subtitle.push(company_name);
-
- let dot_spacer = '<span aria-hidden="true"> · </span>';
- subtitle = subtitle.join(dot_spacer);
-
- // route
- if (!item.route) {
- item.route = `marketplace/item/${item.hub_item_code}`
- }
-
- const item_html = `
- <div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
- <div class="hub-card"
- data-hub-item-code="${item.hub_item_code}"
- data-route="${item.route}">
-
- <div class="hub-card-header level">
- <div class="ellipsis">
- <div class="hub-card-title ellipsis bold">${title}</div>
- <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
- </div>
- <i class="octicon octicon-x text-extra-muted"
- data-hub-item-code="${item.hub_item_code}">
- </i>
- </div>
- <div class="hub-card-body">
- <img class="hub-card-image" src="${img_url}" />
- <div class="overlay hub-card-overlay"></div>
- </div>
- </div>
- </div>
- `;
-
- return item_html;
-}
-
-function get_local_item_card_html(item) {
- const item_name = item.item_name || item.name;
- const title = strip_html(item_name);
- const img_url = item.image;
- const company_name = item.company;
-
- const is_active = item.publish_in_hub;
- const id = item.hub_item_code || item.item_code;
-
- // Subtitle
- let subtitle = [comment_when(item.creation)];
- const rating = item.average_rating;
-
- if (rating > 0) {
- subtitle.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
- }
-
- if (company_name) {
- subtitle.push(company_name);
- }
-
- let dot_spacer = '<span aria-hidden="true"> · </span>';
- subtitle = subtitle.join(dot_spacer);
-
- const edit_item_button = `<div class="hub-card-overlay-button" data-route="Form/Item/${item.item_name}">
- <button class="btn btn-default zoom-view">
- <i class="octicon octicon-pencil text-muted"></i>
- </button>
- </div>`;
-
- const item_html = `
- <div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
- <div class="hub-card is-local ${is_active ? 'active' : ''}" data-id="${id}">
- <div class="hub-card-header flex">
- <div class="ellipsis">
- <div class="hub-card-title ellipsis bold">${title}</div>
- <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
- </div>
- <i class="octicon octicon-check text-success"></i>
- </div>
- <div class="hub-card-body">
- <img class="hub-card-image" src="${img_url}" />
- <div class="hub-card-overlay">
- <div class="hub-card-overlay-body">
- ${edit_item_button}
- </div>
- </div>
- </div>
- </div>
- </div>
- `;
-
- return item_html;
-}
-
function get_buying_item_message_card_html(item) {
const item_name = item.item_name || item.name;
const title = strip_html(item_name);
diff --git a/erpnext/public/js/hub/components/items_container.js b/erpnext/public/js/hub/components/items_container.js
deleted file mode 100644
index 61b8af6..0000000
--- a/erpnext/public/js/hub/components/items_container.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { get_item_card_html } from './item_card';
-
-function get_item_card_container_html(items, title='', get_item_html = get_item_card_html, action='') {
- const items_html = (items || []).map(item => get_item_html(item)).join('');
- const title_html = title
- ? `<div class="hub-items-header flex">
- <h4>${title}</h4>
- ${action}
- </div>`
- : '';
-
- const html = `<div class="row hub-items-container">
- ${title_html}
- ${items_html}
- </div>`;
-
- return html;
-}
-
-export {
- get_item_card_container_html
-}
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index 0b0e1be..c61814d 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -2,7 +2,6 @@
// pages
import './pages/item';
-import './pages/seller';
import './pages/messages';
import './pages/buying_messages';
import './pages/not_found';
@@ -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';
// components
import { ProfileDialog } from './components/profile_dialog';
@@ -198,7 +198,7 @@
}
if (route[1] === 'seller' && !this.subpages['seller']) {
- this.subpages['seller'] = new erpnext.hub.Seller(this.$body);
+ this.subpages['seller'] = new erpnext.hub.SellerPage(this.$body);
}
if (route[1] === 'register' && !this.subpages.register) {
@@ -404,3 +404,22 @@
$('[data-page-name="profile"]').hide();
}
}
+
+erpnext.hub.SellerPage = class {
+ constructor(parent) {
+ this.$wrapper = $(`<div id="vue-area-seller">`).appendTo($(parent));
+
+ new Vue({
+ render: h => h(Seller)
+ }).$mount('#vue-area-seller');
+ }
+
+ show() {
+ $('[data-page-name="seller"]').show();
+ }
+
+ hide() {
+ $('[data-page-name="seller"]').hide();
+ }
+}
+
diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue
index 2f3c9d5..394136e 100644
--- a/erpnext/public/js/hub/pages/Profile.vue
+++ b/erpnext/public/js/hub/pages/Profile.vue
@@ -18,7 +18,7 @@
import DetailView from '../components/DetailView.vue';
export default {
- name: 'saved-products-page',
+ name: 'profile-page',
components: {
DetailView
},
diff --git a/erpnext/public/js/hub/pages/Seller.vue b/erpnext/public/js/hub/pages/Seller.vue
new file mode 100644
index 0000000..d4aa2a2
--- /dev/null
+++ b/erpnext/public/js/hub/pages/Seller.vue
@@ -0,0 +1,95 @@
+<template>
+ <div
+ class="marketplace-page"
+ :data-page-name="page_name"
+ >
+
+ <detail-view v-if="profile"
+ :title="title"
+ :subtitles="subtitles"
+ :image="image"
+ :sections="sections"
+ >
+ </detail-view>
+
+ <h5>{{ item_container_heading }}</h5>
+ <item-cards-container
+ :container_name="item_container_heading"
+ :items="items"
+ :item_id_fieldname="item_id_fieldname"
+ :on_click="go_to_item_details_page"
+ >
+ </item-cards-container>
+ </div>
+</template>
+
+<script>
+import DetailView from '../components/DetailView.vue';
+import ItemCardsContainer from '../components/ItemCardsContainer.vue';
+
+export default {
+ name: 'seller-page',
+ components: {
+ DetailView,
+ ItemCardsContainer
+ },
+ data() {
+ return {
+ page_name: frappe.get_route()[1],
+ seller_company: frappe.get_route()[2],
+
+ profile: null,
+ items:[],
+ item_id_fieldname: 'hub_item_code',
+
+ title: null,
+ subtitles: [],
+ image: null,
+ sections: [],
+ };
+ },
+ created() {
+ this.get_seller_profile_and_items();
+ },
+ computed: {
+ item_container_heading() {
+ return __('Products by ' + this.seller_company);
+ }
+ },
+ methods: {
+ get_seller_profile_and_items() {
+ hub.call(
+ 'get_hub_seller_page_info',
+ { company: this.seller_company }
+ ).then(data => {
+ this.profile = data.profile;
+ this.items = data.items;
+
+ const profile = this.profile;
+
+ this.title = profile.company;
+ this.subtitles = [
+ __(profile.country),
+ __(profile.site_name),
+ __(`Joined ${comment_when(profile.creation)}`)
+ ];
+ this.image = profile.logo;
+ this.sections = [
+ {
+ title: __('About the Company'),
+ content: profile.company_description
+ ? __(profile.company_description)
+ : __('No description')
+ }
+ ];
+ });
+ },
+
+ 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/seller.js b/erpnext/public/js/hub/pages/seller.js
deleted file mode 100644
index b86e46e..0000000
--- a/erpnext/public/js/hub/pages/seller.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import SubPage from './subpage';
-import { get_profile_html } from '../components/detail_view';
-import { get_item_card_container_html } from '../components/items_container';
-import { get_detail_skeleton_html } from '../components/skeleton_state';
-
-erpnext.hub.Seller = class Seller extends SubPage {
- make_wrapper() {
- super.make_wrapper();
- }
-
- refresh() {
- this.show_skeleton();
- this.company = frappe.get_route()[2];
- this.get_hub_seller_profile()
- .then(this.render.bind(this));
- }
-
- get_hub_seller_profile() {
- return hub.call('get_hub_seller_page_info', { company: this.company });
- }
-
- show_skeleton() {
- this.$wrapper.html(get_detail_skeleton_html());
- }
-
- render(data) {
- this.$wrapper.html(get_profile_html(data.profile));
-
- let html = get_item_card_container_html(data.items, __('Products by ' + p.company));
- this.$wrapper.append(html);
- }
-}