[feat] new component: ItemPublishDialog
diff --git a/erpnext/public/js/hub/components/item_publish_dialog.js b/erpnext/public/js/hub/components/item_publish_dialog.js
new file mode 100644
index 0000000..f751be0
--- /dev/null
+++ b/erpnext/public/js/hub/components/item_publish_dialog.js
@@ -0,0 +1,39 @@
+function ItemPublishDialog(primary_action, secondary_action) {
+ let dialog = new frappe.ui.Dialog({
+ title: __('Edit Publishing Details'),
+ fields: [
+ {
+ "label": "Item Code",
+ "fieldname": "item_code",
+ "fieldtype": "Data",
+ "read_only": 1
+ },
+ {
+ "label": "Hub Category",
+ "fieldname": "hub_category",
+ "fieldtype": "Autocomplete",
+ "options": ["Agriculture", "Books", "Chemicals", "Clothing",
+ "Electrical", "Electronics", "Energy", "Fashion", "Food and Beverage",
+ "Health", "Home", "Industrial", "Machinery", "Packaging and Printing",
+ "Sports", "Transportation"
+ ],
+ "reqd": 1
+ },
+ {
+ "label": "Images",
+ "fieldname": "image_list",
+ "fieldtype": "MultiSelect",
+ "options": [],
+ "reqd": 1
+ }
+ ],
+ primary_action_label: primary_action.label || __('Set Details'),
+ primary_action: primary_action.fn,
+ secondary_action: secondary_action.fn
+ });
+ return dialog;
+}
+
+export {
+ ItemPublishDialog
+}
diff --git a/erpnext/public/js/hub/components/publishing_area.js b/erpnext/public/js/hub/components/publishing_area.js
new file mode 100644
index 0000000..4775c3b
--- /dev/null
+++ b/erpnext/public/js/hub/components/publishing_area.js
@@ -0,0 +1,36 @@
+function get_publishing_header() {
+ const title_html = `<h5>${__('Select Products to Publish')}</h5>`;
+
+ const subtitle_html = `<p class="text-muted">
+ ${__(`Only products with an image, description and category can be published.
+ 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" disabled>
+ <i class="visible-xs octicon octicon-check"></i>
+ <span class="hidden-xs">${__('Publish')}</span>
+ </button>`;
+
+ return $(`
+ <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>
+ ${subtitle_html}
+ </div>
+ </div>
+ `);
+}
+
+export {
+ get_publishing_header
+}
diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js
index 8de7b38..98b0a61 100644
--- a/erpnext/public/js/hub/pages/publish.js
+++ b/erpnext/public/js/hub/pages/publish.js
@@ -2,12 +2,13 @@
import { get_item_card_container_html } from '../components/items_container';
import { get_local_item_card_html } from '../components/item_card';
import { make_search_bar } from '../components/search_bar';
-
+import { get_publishing_header } from '../components/publishing_area';
+import { ItemPublishDialog } from '../components/item_publish_dialog';
erpnext.hub.Publish = class Publish extends SubPage {
make_wrapper() {
super.make_wrapper();
- this.items_to_publish = {};
+ this.items_data_to_publish = {};
this.unpublished_items = [];
this.fetched_items = [];
this.fetched_items_dict = {};
@@ -41,7 +42,7 @@
make_publish_ready_state() {
this.$wrapper.empty();
- this.$wrapper.append(this.get_publishing_header());
+ this.$wrapper.append(get_publishing_header());
make_search_bar({
wrapper: this.$wrapper,
@@ -53,46 +54,15 @@
});
this.setup_publishing_events();
+ this.show_last_sync_message();
+ this.get_items_and_render();
+ }
+ show_last_sync_message() {
if(hub.settings.last_sync_datetime) {
this.show_message(`Last sync was <a href="#marketplace/profile">${comment_when(hub.settings.last_sync_datetime)}</a>.
<a href="#marketplace/my-products">See your Published Products</a>.`);
}
-
- this.get_items_and_render();
- }
-
- get_publishing_header() {
- const title_html = `<h5>${__('Select Products to Publish')}</h5>`;
-
- const subtitle_html = `<p class="text-muted">
- ${__(`Only products with an image, description and category can be published.
- 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" disabled>
- <i class="visible-xs octicon octicon-check"></i>
- <span class="hidden-xs">${__('Publish')}</span>
- </button>`;
-
- return $(`
- <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>
- ${subtitle_html}
- </div>
- </div>
- `);
}
setup_publishing_events() {
@@ -118,69 +88,54 @@
}
make_publishing_dialog() {
- this.publishing_dialog = new frappe.ui.Dialog({
- title: __('Edit Publishing Details'),
- fields: [
- {
- "label": "Item Code",
- "fieldname": "item_code",
- "fieldtype": "Data",
- "read_only": 1
- },
- {
- "label": "Hub Category",
- "fieldname": "hub_category",
- "fieldtype": "Autocomplete",
- "options": ["Agriculture", "Books", "Chemicals", "Clothing",
- "Electrical", "Electronics", "Energy", "Fashion", "Food and Beverage",
- "Health", "Home", "Industrial", "Machinery", "Packaging and Printing",
- "Sports", "Transportation"
- ],
- "reqd": 1
- },
- {
- "label": "Images",
- "fieldname": "image_list",
- "fieldtype": "MultiSelect",
- "options": [],
- "reqd": 1
+ this.item_publish_dialog = ItemPublishDialog(
+ {
+ fn: (values) => {
+ this.add_item_to_publish(values);
+ this.item_publish_dialog.hide();
}
- ],
- primary_action_label: __('Set Details'),
- primary_action: () => {
- const values = this.publishing_dialog.get_values(true);
- this.items_to_publish[values.item_code] = values;
-
- 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: () => {
- const values = this.publishing_dialog.get_values(true);
- this.items_to_publish[values.item_code] = values;
+ {
+ fn: () => {
+ const values = this.item_publish_dialog.get_values(true);
+ this.update_items_data_to_publish(values);
+ }
}
- });
+ );
+ }
+
+ add_item_to_publish(values) {
+ this.update_items_data_to_publish(values);
+ this.select_current_card()
+ }
+
+ update_items_data_to_publish(values) {
+ this.items_data_to_publish[values.item_code] = values;
+ }
+
+ select_current_card() {
+ this.$current_selected_card.appendTo(this.selected_items_container);
+ this.$current_selected_card.find('.hub-card').toggleClass('active');
+
+ this.update_selected_items_count();
}
show_publishing_dialog_for_item(item_code) {
- let item_data = this.items_to_publish[item_code];
+ let item_data = this.items_data_to_publish[item_code];
if(!item_data) { item_data = { item_code }; };
- this.publishing_dialog.clear();
+ this.item_publish_dialog.clear();
const item_doc = this.fetched_items_dict[item_code];
if(item_doc) {
- this.publishing_dialog.fields_dict.image_list.set_data(
+ this.item_publish_dialog.fields_dict.image_list.set_data(
item_doc.attachments.map(attachment => attachment.file_url)
);
}
- this.publishing_dialog.set_values(item_data);
- this.publishing_dialog.show();
+ this.item_publish_dialog.set_values(item_data);
+ this.item_publish_dialog.show();
}
update_selected_items_count() {
@@ -204,14 +159,6 @@
this.$wrapper.find('.publish-area').toggleClass('filled', !is_empty);
}
- add_item_to_publish() {
- //
- }
-
- remove_item_from_publish() {
- //
- }
-
make_publish_in_progress_state() {
this.$wrapper.empty();
@@ -238,8 +185,8 @@
}
show_publish_progress() {
- const items_to_publish = this.items_to_publish.length
- ? this.items_to_publish
+ const items_to_publish = this.items_data_to_publish.length
+ ? this.items_data_to_publish
: JSON.parse(hub.settings.custom_data);
const $publish_progress = $(`<div class="sync-progress">
@@ -302,17 +249,7 @@
item_codes_to_publish.push($(this).attr("data-id"));
});
- // this.unpublished_items = this.fetched_items.filter(item => {
- // return !item_codes_to_publish.includes(item.item_code);
- // });
-
- // const items_to_publish = this.fetched_items.filter(item => {
- // return item_codes_to_publish.includes(item.item_code);
- // });
-
- // this.items_to_publish = items_to_publish;
-
- const items_data_to_publish = item_codes_to_publish.map(item_code => this.items_to_publish[item_code])
+ const items_data_to_publish = item_codes_to_publish.map(item_code => this.items_data_to_publish[item_code])
return frappe.call(
'erpnext.hub_node.api.publish_selected_items',