[hub][vue] add skeleton state to DetailView
diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue
index 1a2207e..b86468b 100644
--- a/erpnext/public/js/hub/components/DetailView.vue
+++ b/erpnext/public/js/hub/components/DetailView.vue
@@ -5,32 +5,53 @@
<button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button>
</div>
</div>
- <div class="row margin-bottom">
+
+ <div v-if="show_skeleton" class="row margin-bottom">
<div class="col-md-3">
- <div class="hub-item-image">
- <img :src="image">
- </div>
+ <div class="hub-item-skeleton-image"></div>
</div>
<div class="col-md-6">
- <h2>{{ title }}</h2>
+ <h2 class="hub-skeleton" style="width: 75%;">Name</h2>
<div class="text-muted">
- <p v-for="subtitle in subtitles"
- :key="subtitle"
- v-html="subtitle"
- >
- </p>
+ <p class="hub-skeleton" style="width: 35%;">Details</p>
+ <p class="hub-skeleton" style="width: 50%;">Ratings</p>
</div>
-
+ <hr>
+ <div class="hub-item-description">
+ <p class="hub-skeleton">Desc</p>
+ <p class="hub-skeleton" style="width: 85%;">Desc</p>
+ </div>
</div>
</div>
- <div v-for="section in sections" class="row hub-item-description margin-bottom"
- :key="section.title"
- >
- <h6 class="col-md-12 margin-top">
- <b class="text-muted">{{ section.title }}</b>
- </h6>
- <p class="col-md-12" v-html="section.content">
- </p>
+
+ <div v-else>
+ <div class="row margin-bottom">
+ <div class="col-md-3">
+ <div class="hub-item-image">
+ <img :src="image">
+ </div>
+ </div>
+ <div class="col-md-6">
+ <h2>{{ title }}</h2>
+ <div class="text-muted">
+ <p v-for="subtitle in subtitles"
+ :key="subtitle"
+ v-html="subtitle"
+ >
+ </p>
+ </div>
+
+ </div>
+ </div>
+ <div v-for="section in sections" class="row hub-item-description margin-bottom"
+ :key="section.title"
+ >
+ <h6 class="col-md-12 margin-top">
+ <b class="text-muted">{{ section.title }}</b>
+ </h6>
+ <p class="col-md-12" v-html="section.content">
+ </p>
+ </div>
</div>
</div>
@@ -40,7 +61,7 @@
export default {
name: 'detail-view',
- props: ['title', 'subtitles', 'image', 'sections'],
+ props: ['title', 'subtitles', 'image', 'sections', 'show_skeleton'],
data() {
return {
back_to_home_text: __('Back to Home')
diff --git a/erpnext/public/js/hub/components/profile_dialog.js b/erpnext/public/js/hub/components/profile_dialog.js
index 800e8c6..e76abfa 100644
--- a/erpnext/public/js/hub/components/profile_dialog.js
+++ b/erpnext/public/js/hub/components/profile_dialog.js
@@ -1,75 +1,75 @@
const ProfileDialog = (title = __('Edit Profile'), action={}, initial_values={}) => {
- const fields = [
- {
- fieldtype: 'Link',
- fieldname: 'company',
- label: __('Company'),
- options: 'Company',
- onchange: () => {
- const value = dialog.get_value('company');
+ const fields = [
+ {
+ fieldtype: 'Link',
+ fieldname: 'company',
+ label: __('Company'),
+ options: 'Company',
+ onchange: () => {
+ const value = dialog.get_value('company');
- if (value) {
- frappe.db.get_doc('Company', value)
- .then(company => {
- dialog.set_values({
- country: company.country,
- company_email: company.email,
- currency: company.default_currency
- });
- });
- }
- }
- },
- {
- fieldname: 'company_email',
- label: __('Email'),
- fieldtype: 'Data'
- },
- {
- fieldname: 'country',
- label: __('Country'),
- fieldtype: 'Read Only'
- },
- {
- fieldname: 'currency',
- label: __('Currency'),
- fieldtype: 'Read Only'
- },
- {
- fieldtype: 'Text',
- label: __('About your Company'),
- fieldname: 'company_description'
- }
- ];
+ if (value) {
+ frappe.db.get_doc('Company', value)
+ .then(company => {
+ dialog.set_values({
+ country: company.country,
+ company_email: company.email,
+ currency: company.default_currency
+ });
+ });
+ }
+ }
+ },
+ {
+ fieldname: 'company_email',
+ label: __('Email'),
+ fieldtype: 'Data'
+ },
+ {
+ fieldname: 'country',
+ label: __('Country'),
+ fieldtype: 'Read Only'
+ },
+ {
+ fieldname: 'currency',
+ label: __('Currency'),
+ fieldtype: 'Read Only'
+ },
+ {
+ fieldtype: 'Text',
+ label: __('About your Company'),
+ fieldname: 'company_description'
+ }
+ ];
- let dialog = new frappe.ui.Dialog({
- title: title,
- fields: fields,
- primary_action_label: action.label || __('Update'),
- primary_action: () => {
- const form_values = dialog.get_values();
- let values_filled = true;
- const mandatory_fields = ['company', 'company_email', 'company_description'];
- mandatory_fields.forEach(field => {
- const value = form_values[field];
- if (!value) {
- dialog.set_df_property(field, 'reqd', 1);
- values_filled = false;
- }
- });
- if (!values_filled) return;
+ let dialog = new frappe.ui.Dialog({
+ title: title,
+ fields: fields,
+ primary_action_label: action.label || __('Update'),
+ primary_action: () => {
+ const form_values = dialog.get_values();
+ let values_filled = true;
+ const mandatory_fields = ['company', 'company_email', 'company_description'];
+ mandatory_fields.forEach(field => {
+ const value = form_values[field];
+ if (!value) {
+ dialog.set_df_property(field, 'reqd', 1);
+ values_filled = false;
+ }
+ });
+ if (!values_filled) return;
- action.on_submit(form_values);
- }
- });
+ action.on_submit(form_values);
+ }
+ });
- dialog.set_values(initial_values);
+ dialog.set_values(initial_values);
- // Post create
- const default_company = frappe.defaults.get_default('company');
- dialog.set_value('company', default_company);
+ // Post create
+ const default_company = frappe.defaults.get_default('company');
+ dialog.set_value('company', default_company);
- return dialog;
+ return dialog;
}
export {
diff --git a/erpnext/public/js/hub/components/skeleton_state.js b/erpnext/public/js/hub/components/skeleton_state.js
deleted file mode 100644
index 7c68802..0000000
--- a/erpnext/public/js/hub/components/skeleton_state.js
+++ /dev/null
@@ -1,27 +0,0 @@
-function get_detail_skeleton_html() {
- const skeleton = `<div class="hub-item-container">
- <div class="row">
- <div class="col-md-3">
- <div class="hub-item-skeleton-image"></div>
- </div>
- <div class="col-md-6">
- <h2 class="hub-skeleton" style="width: 75%;">Name</h2>
- <div class="text-muted">
- <p class="hub-skeleton" style="width: 35%;">Details</p>
- <p class="hub-skeleton" style="width: 50%;">Ratings</p>
- </div>
- <hr>
- <div class="hub-item-description">
- <p class="hub-skeleton">Desc</p>
- <p class="hub-skeleton" style="width: 85%;">Desc</p>
- </div>
- </div>
- </div>
- </div>`;
-
- return skeleton;
-}
-
-export {
- get_detail_skeleton_html
-}
diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue
index 394136e..1767796 100644
--- a/erpnext/public/js/hub/pages/Profile.vue
+++ b/erpnext/public/js/hub/pages/Profile.vue
@@ -2,13 +2,15 @@
<div
class="marketplace-page"
:data-page-name="page_name"
+ v-if="init || profile"
>
- <detail-view v-if="profile"
+ <detail-view
:title="title"
:subtitles="subtitles"
:image="image"
:sections="sections"
+ :show_skeleton="init"
>
</detail-view>
</div>
@@ -25,6 +27,9 @@
data() {
return {
page_name: frappe.get_route()[1],
+
+ init: true,
+
profile: null,
title: null,
subtitles: [],
@@ -41,6 +46,8 @@
'get_hub_seller_profile',
{ hub_seller: hub.settings.company_email }
).then(profile => {
+ this.init = false;
+
this.profile = profile;
this.title = profile.company;
this.subtitles = [
diff --git a/erpnext/public/js/hub/pages/Seller.vue b/erpnext/public/js/hub/pages/Seller.vue
index d4aa2a2..5a35812 100644
--- a/erpnext/public/js/hub/pages/Seller.vue
+++ b/erpnext/public/js/hub/pages/Seller.vue
@@ -2,17 +2,18 @@
<div
class="marketplace-page"
:data-page-name="page_name"
+ v-if="init || profile"
>
-
- <detail-view v-if="profile"
+ <detail-view
:title="title"
:subtitles="subtitles"
:image="image"
:sections="sections"
+ :show_skeleton="init"
>
</detail-view>
- <h5>{{ item_container_heading }}</h5>
+ <h5 v-if="profile">{{ item_container_heading }}</h5>
<item-cards-container
:container_name="item_container_heading"
:items="items"
@@ -38,6 +39,8 @@
page_name: frappe.get_route()[1],
seller_company: frappe.get_route()[2],
+ init: true,
+
profile: null,
items:[],
item_id_fieldname: 'hub_item_code',
@@ -62,6 +65,7 @@
'get_hub_seller_page_info',
{ company: this.seller_company }
).then(data => {
+ this.init = false;
this.profile = data.profile;
this.items = data.items;
diff --git a/erpnext/public/js/hub/pages/item.js b/erpnext/public/js/hub/pages/item.js
index 618c958..f15d1be 100644
--- a/erpnext/public/js/hub/pages/item.js
+++ b/erpnext/public/js/hub/pages/item.js
@@ -1,6 +1,6 @@
import SubPage from './subpage';
import { get_detail_view_html } from '../components/detail_view';
-import { get_detail_skeleton_html } from '../components/skeleton_state';
+// import { get_detail_skeleton_html } from '../components/skeleton_state';
import { get_review_html } from '../components/reviews';
erpnext.hub.Item = class Item extends SubPage {
@@ -20,7 +20,7 @@
show_skeleton() {
- this.$wrapper.html(get_detail_skeleton_html());
+ // this.$wrapper.html(get_detail_skeleton_html());
}