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 0000000000..f751be0145 --- /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 0000000000..4775c3b16e --- /dev/null +++ b/erpnext/public/js/hub/components/publishing_area.js @@ -0,0 +1,36 @@ +function get_publishing_header() { + const title_html = `
${__('Select Products to Publish')}
`; + + const subtitle_html = `

+ ${__(`Only products with an image, description and category can be published. + Please update them if an item in your inventory does not appear.`)} +

`; + + const publish_button_html = ``; + + return $(` +
+
+ ${title_html} + ${publish_button_html} +
+
+

${__('No Items Selected')}

+
+
+
+ +
+
+ ${subtitle_html} +
+
+ `); +} + +export { + get_publishing_header +} diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js index 8de7b3844c..98b0a61845 100644 --- a/erpnext/public/js/hub/pages/publish.js +++ b/erpnext/public/js/hub/pages/publish.js @@ -2,12 +2,13 @@ import SubPage from './subpage'; 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 @@ erpnext.hub.Publish = class Publish extends SubPage { 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 @@ erpnext.hub.Publish = class Publish extends SubPage { }); 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 ${comment_when(hub.settings.last_sync_datetime)}. See your Published Products.`); } - - this.get_items_and_render(); - } - - get_publishing_header() { - const title_html = `
${__('Select Products to Publish')}
`; - - const subtitle_html = `

- ${__(`Only products with an image, description and category can be published. - Please update them if an item in your inventory does not appear.`)} -

`; - - const publish_button_html = ``; - - return $(` -
-
- ${title_html} - ${publish_button_html} -
-
-

${__('No Items Selected')}

-
-
-
- -
-
- ${subtitle_html} -
-
- `); } setup_publishing_events() { @@ -118,69 +88,54 @@ erpnext.hub.Publish = class Publish extends SubPage { } 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 @@ erpnext.hub.Publish = class Publish extends SubPage { 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 @@ erpnext.hub.Publish = class Publish extends SubPage { } 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 = $(`
@@ -302,17 +249,7 @@ erpnext.hub.Publish = class Publish extends SubPage { 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',