Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[hub][vue] add skeleton state to DetailView

Browse Source
This commit is contained in:
Prateeksha Singh 2018-08-26 18:06:25 +05:30
parent 9e8d7bbeda
commit 5c9b13f5e5
6 changed files with 123 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
erpnext/public/js/hub/components/DetailView.vue
View File

@ -5,32 +5,53 @@
<button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button> <button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button>
</div> </div>
</div> </div>
<div class="row margin-bottom">
<div v-if="show_skeleton" class="row margin-bottom">
<div class="col-md-3"> <div class="col-md-3">
<div class="hub-item-image"> <div class="hub-item-skeleton-image"></div>
<img :src="image">
</div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h2>{{ title }}</h2> <h2 class="hub-skeleton" style="width: 75%;">Name</h2>
<div class="text-muted"> <div class="text-muted">
<p v-for="subtitle in subtitles" <p class="hub-skeleton" style="width: 35%;">Details</p>
:key="subtitle" <p class="hub-skeleton" style="width: 50%;">Ratings</p>
v-html="subtitle" </div>
> <hr>
</p> <div class="hub-item-description">
<p class="hub-skeleton">Desc</p>
<p class="hub-skeleton" style="width: 85%;">Desc</p>
</div> </div>
</div> </div>
</div> </div>
<div v-for="section in sections" class="row hub-item-description margin-bottom"
:key="section.title" <div v-else>
> <div class="row margin-bottom">
<h6 class="col-md-12 margin-top"> <div class="col-md-3">
<b class="text-muted">{{ section.title }}</b> <div class="hub-item-image">
</h6> <img :src="image">
<p class="col-md-12" v-html="section.content"> </div>
</p> </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>
</div> </div>
@ -40,7 +61,7 @@
export default { export default {
name: 'detail-view', name: 'detail-view',
props: ['title', 'subtitles', 'image', 'sections'], props: ['title', 'subtitles', 'image', 'sections', 'show_skeleton'],
data() { data() {
return { return {
back_to_home_text: __('Back to Home') back_to_home_text: __('Back to Home')

130
erpnext/public/js/hub/components/profile_dialog.js
View File

@ -1,75 +1,75 @@
const ProfileDialog = (title = __('Edit Profile'), action={}, initial_values={}) => { const ProfileDialog = (title = __('Edit Profile'), action={}, initial_values={}) => {
const fields = [ const fields = [
{ {
fieldtype: 'Link', fieldtype: 'Link',
fieldname: 'company', fieldname: 'company',
label: __('Company'), label: __('Company'),
options: 'Company', options: 'Company',
onchange: () => { onchange: () => {
const value = dialog.get_value('company'); const value = dialog.get_value('company');
if (value) { if (value) {
frappe.db.get_doc('Company', value) frappe.db.get_doc('Company', value)
.then(company => { .then(company => {
dialog.set_values({ dialog.set_values({
country: company.country, country: company.country,
company_email: company.email, company_email: company.email,
currency: company.default_currency currency: company.default_currency
}); });
}); });
} }
} }
}, },
{ {
fieldname: 'company_email', fieldname: 'company_email',
label: __('Email'), label: __('Email'),
fieldtype: 'Data' fieldtype: 'Data'
}, },
{ {
fieldname: 'country', fieldname: 'country',
label: __('Country'), label: __('Country'),
fieldtype: 'Read Only' fieldtype: 'Read Only'
}, },
{ {
fieldname: 'currency', fieldname: 'currency',
label: __('Currency'), label: __('Currency'),
fieldtype: 'Read Only' fieldtype: 'Read Only'
}, },
{ {
fieldtype: 'Text', fieldtype: 'Text',
label: __('About your Company'), label: __('About your Company'),
fieldname: 'company_description' fieldname: 'company_description'
} }
]; ];
let dialog = new frappe.ui.Dialog({ let dialog = new frappe.ui.Dialog({
title: title, title: title,
fields: fields, fields: fields,
primary_action_label: action.label || __('Update'), primary_action_label: action.label || __('Update'),
primary_action: () => { primary_action: () => {
const form_values = dialog.get_values(); const form_values = dialog.get_values();
let values_filled = true; let values_filled = true;
const mandatory_fields = ['company', 'company_email', 'company_description']; const mandatory_fields = ['company', 'company_email', 'company_description'];
mandatory_fields.forEach(field => { mandatory_fields.forEach(field => {
const value = form_values[field]; const value = form_values[field];
if (!value) { if (!value) {
dialog.set_df_property(field, 'reqd', 1); dialog.set_df_property(field, 'reqd', 1);
values_filled = false; values_filled = false;
} }
}); });
if (!values_filled) return; 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 // Post create
const default_company = frappe.defaults.get_default('company'); const default_company = frappe.defaults.get_default('company');
dialog.set_value('company', default_company); dialog.set_value('company', default_company);
return dialog; return dialog;
} }
export { export {

27
erpnext/public/js/hub/components/skeleton_state.js
View File

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

9
erpnext/public/js/hub/pages/Profile.vue
View File

@ -2,13 +2,15 @@
<div <div
class="marketplace-page" class="marketplace-page"
:data-page-name="page_name" :data-page-name="page_name"
v-if="init || profile"
> >
<detail-view v-if="profile" <detail-view
:title="title" :title="title"
:subtitles="subtitles" :subtitles="subtitles"
:image="image" :image="image"
:sections="sections" :sections="sections"
:show_skeleton="init"
> >
</detail-view> </detail-view>
</div> </div>
@ -25,6 +27,9 @@ export default {
data() { data() {
return { return {
page_name: frappe.get_route()[1], page_name: frappe.get_route()[1],
init: true,
profile: null, profile: null,
title: null, title: null,
subtitles: [], subtitles: [],
@ -41,6 +46,8 @@ export default {
'get_hub_seller_profile', 'get_hub_seller_profile',
{ hub_seller: hub.settings.company_email } { hub_seller: hub.settings.company_email }
).then(profile => { ).then(profile => {
this.init = false;
this.profile = profile; this.profile = profile;
this.title = profile.company; this.title = profile.company;
this.subtitles = [ this.subtitles = [

10
erpnext/public/js/hub/pages/Seller.vue
View File

@ -2,17 +2,18 @@
<div <div
class="marketplace-page" class="marketplace-page"
:data-page-name="page_name" :data-page-name="page_name"
v-if="init || profile"
> >
<detail-view
<detail-view v-if="profile"
:title="title" :title="title"
:subtitles="subtitles" :subtitles="subtitles"
:image="image" :image="image"
:sections="sections" :sections="sections"
:show_skeleton="init"
> >
</detail-view> </detail-view>
<h5>{{ item_container_heading }}</h5> <h5 v-if="profile">{{ item_container_heading }}</h5>
<item-cards-container <item-cards-container
:container_name="item_container_heading" :container_name="item_container_heading"
:items="items" :items="items"
@ -38,6 +39,8 @@ export default {
page_name: frappe.get_route()[1], page_name: frappe.get_route()[1],
seller_company: frappe.get_route()[2], seller_company: frappe.get_route()[2],
init: true,
profile: null, profile: null,
items:[], items:[],
item_id_fieldname: 'hub_item_code', item_id_fieldname: 'hub_item_code',
@ -62,6 +65,7 @@ export default {
'get_hub_seller_page_info', 'get_hub_seller_page_info',
{ company: this.seller_company } { company: this.seller_company }
).then(data => { ).then(data => {
this.init = false;
this.profile = data.profile; this.profile = data.profile;
this.items = data.items; this.items = data.items;

4
erpnext/public/js/hub/pages/item.js
View File

@ -1,6 +1,6 @@
import SubPage from './subpage'; import SubPage from './subpage';
import { get_detail_view_html } from '../components/detail_view'; 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'; import { get_review_html } from '../components/reviews';
erpnext.hub.Item = class Item extends SubPage { erpnext.hub.Item = class Item extends SubPage {
@ -20,7 +20,7 @@ erpnext.hub.Item = class Item extends SubPage {
show_skeleton() { show_skeleton() {
this.$wrapper.html(get_detail_skeleton_html()); // this.$wrapper.html(get_detail_skeleton_html());
} }