[hub][feat] stateful publishing area

This commit is contained in:
Prateeksha Singh 2018-08-20 10:07:56 +05:30
parent fe67508d60
commit 96fdbd467d
2 changed files with 39 additions and 9 deletions

View File

@ -70,21 +70,27 @@ erpnext.hub.Publish = class Publish extends SubPage {
Please update them if an item in your inventory does not appear.`)} Please update them if an item in your inventory does not appear.`)}
</p>`; </p>`;
const publish_button_html = `<button class="btn btn-primary btn-sm publish-items"> const publish_button_html = `<button class="btn btn-primary btn-sm publish-items" disabled>
<i class="visible-xs octicon octicon-check"></i> <i class="visible-xs octicon octicon-check"></i>
<span class="hidden-xs">${__('Publish')}</span> <span class="hidden-xs">${__('Publish')}</span>
</button>`; </button>`;
return $(` return $(`
<div class="subpage-title flex"><h5>${__('Selected Products')}</h5></div> <div class="publish-area empty">
<div class="row hub-items-container selected-items"></div> <div class="flex justify-between align-flex-end">
${title_html}
${publish_button_html}
</div>
<div class="empty-items-container flex align-center flex-column justify-center">
<p class="text-muted">${__('No Items Selected')}</p>
</div>
<div class="row hub-items-container selected-items"></div>
</div>
<div class='subpage-title flex'> <div class='subpage-title flex'>
<div> <div>
${title_html}
${subtitle_html} ${subtitle_html}
</div> </div>
${publish_button_html}
</div> </div>
`); `);
} }
@ -108,8 +114,6 @@ erpnext.hub.Publish = class Publish extends SubPage {
this.$current_selected_card = $target.parent(); this.$current_selected_card = $target.parent();
this.update_selected_items_count()
}); });
} }
@ -150,6 +154,8 @@ erpnext.hub.Publish = class Publish extends SubPage {
this.$current_selected_card.appendTo(this.selected_items_container); this.$current_selected_card.appendTo(this.selected_items_container);
this.$current_selected_card.find('.hub-card').toggleClass('active'); this.$current_selected_card.find('.hub-card').toggleClass('active');
this.update_selected_items_count();
this.publishing_dialog.hide(); this.publishing_dialog.hide();
}, },
secondary_action: () => { secondary_action: () => {
@ -180,6 +186,8 @@ erpnext.hub.Publish = class Publish extends SubPage {
update_selected_items_count() { update_selected_items_count() {
const total_items = this.$wrapper.find('.hub-card.active').length; const total_items = this.$wrapper.find('.hub-card.active').length;
const is_empty = total_items === 0;
let button_label; let button_label;
if (total_items > 0) { if (total_items > 0) {
const more_than_one = total_items > 1; const more_than_one = total_items > 1;
@ -190,7 +198,10 @@ erpnext.hub.Publish = class Publish extends SubPage {
this.$wrapper.find('.publish-items') this.$wrapper.find('.publish-items')
.text(button_label) .text(button_label)
.prop('disabled', total_items === 0); .prop('disabled', is_empty);
this.$wrapper.find('.publish-area').toggleClass('empty', is_empty);
this.$wrapper.find('.publish-area').toggleClass('filled', !is_empty);
} }
add_item_to_publish() { add_item_to_publish() {
@ -230,7 +241,7 @@ erpnext.hub.Publish = class Publish extends SubPage {
this.$wrapper.append(subtitle_html); this.$wrapper.append(subtitle_html);
// Show search list with only desctiption, and don't set any events // Show search list with only description, and don't set any events
make_search_bar({ make_search_bar({
wrapper: this.$wrapper, wrapper: this.$wrapper,
on_search: keyword => { on_search: keyword => {

View File

@ -211,6 +211,25 @@ body[data-route^="marketplace/"] {
height: 500px; height: 500px;
} }
.empty-items-container {
height: 80px;
border-radius: 4px;
border: 1px solid @border-color;
margin: 15px 0px;
}
.publish-area.filled {
.empty-items-container {
display: none;
}
}
.publish-area.empty {
.hub-items-container {
display: none;
}
}
.form-container { .form-container {
.frappe-control { .frappe-control {
max-width: 100% !important; max-width: 100% !important;