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>
</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')

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

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

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
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 @@ export default {
data() {
return {
page_name: frappe.get_route()[1],
init: true,
profile: null,
title: null,
subtitles: [],
@ -41,6 +46,8 @@ export default {
'get_hub_seller_profile',
{ hub_seller: hub.settings.company_email }
).then(profile => {
this.init = false;
this.profile = profile;
this.title = profile.company;
this.subtitles = [

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

@ -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 @@ export default {
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 @@ export default {
'get_hub_seller_page_info',
{ company: this.seller_company }
).then(data => {
this.init = false;
this.profile = data.profile;
this.items = data.items;

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

@ -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 @@ erpnext.hub.Item = class Item extends SubPage {
show_skeleton() {
this.$wrapper.html(get_detail_skeleton_html());
// this.$wrapper.html(get_detail_skeleton_html());
}