[hub][feat] stateful publishing area
diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js
index fcbd0f8..46e4545 100644
--- a/erpnext/public/js/hub/pages/publish.js
+++ b/erpnext/public/js/hub/pages/publish.js
@@ -70,21 +70,27 @@
Please update them if an item in your inventory does not appear.`)}
</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>
<span class="hidden-xs">${__('Publish')}</span>
</button>`;
return $(`
- <div class="subpage-title flex"><h5>${__('Selected Products')}</h5></div>
- <div class="row hub-items-container selected-items"></div>
+ <div class="publish-area empty">
+ <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>
- ${title_html}
${subtitle_html}
</div>
- ${publish_button_html}
</div>
`);
}
@@ -108,8 +114,6 @@
this.$current_selected_card = $target.parent();
- this.update_selected_items_count()
-
});
}
@@ -150,6 +154,8 @@
this.$current_selected_card.appendTo(this.selected_items_container);
this.$current_selected_card.find('.hub-card').toggleClass('active');
+ this.update_selected_items_count();
+
this.publishing_dialog.hide();
},
secondary_action: () => {
@@ -180,6 +186,8 @@
update_selected_items_count() {
const total_items = this.$wrapper.find('.hub-card.active').length;
+ const is_empty = total_items === 0;
+
let button_label;
if (total_items > 0) {
const more_than_one = total_items > 1;
@@ -190,7 +198,10 @@
this.$wrapper.find('.publish-items')
.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() {
@@ -230,7 +241,7 @@
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({
wrapper: this.$wrapper,
on_search: keyword => {
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 0859ae6..2bfb109 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -211,6 +211,25 @@
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 {
.frappe-control {
max-width: 100% !important;