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

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

@ -5,6 +5,26 @@
<button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button>
</div>
</div>
<div v-if="show_skeleton" class="row margin-bottom">
<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 v-else>
<div class="row margin-bottom">
<div class="col-md-3">
<div class="hub-item-image">
@ -32,6 +52,7 @@
<p class="col-md-12" v-html="section.content">
</p>
</div>
</div>
</div>
</template>
@ -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')

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());
}