[feat] new component: ItemPublishDialog
This commit is contained in:
Prateeksha Singh
parent
4ce54b0011
commit
6faffa5007
39
erpnext/public/js/hub/components/item_publish_dialog.js
Normal file
39
erpnext/public/js/hub/components/item_publish_dialog.js
Normal file
@ -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
|
||||
}
|
||||
36
erpnext/public/js/hub/components/publishing_area.js
Normal file
36
erpnext/public/js/hub/components/publishing_area.js
Normal file
@ -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
|
||||
}
|
||||
@ -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 <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 @@ 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 = $(`<div class="sync-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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user