[hub] form (info) view for items
diff --git a/erpnext/public/css/hub.css b/erpnext/public/css/hub.css
index 559c203..5f86cf4 100644
--- a/erpnext/public/css/hub.css
+++ b/erpnext/public/css/hub.css
@@ -1,3 +1,29 @@
+body[data-route^="Hub/"] .freeze .image-view-container .list-row-col {
+ background-color: #fafbfc;
+ color: #fafbfc;
+}
+body[data-route^="Hub/"] .freeze .image-view-container .placeholder-text {
+ color: #fafbfc;
+}
+body[data-route^="Hub/"] .freeze {
+ display: none;
+}
+body[data-route^="Hub/"] .image-view-container {
+ justify-content: space-around;
+}
+.img-wrapper {
+ border: 1px solid #d1d8dd;
+ border-radius: 3px;
+ padding: 12px;
+ overflow: hidden;
+ text-align: center;
+ white-space: nowrap;
+}
+.img-wrapper .helper {
+ height: 100%;
+ display: inline-block;
+ vertical-align: middle;
+}
/* hub */
div[data-page-route="hub"] .page-head {
height: 80px;
diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css
index e2d301d..bc81182 100644
--- a/erpnext/public/css/pos.css
+++ b/erpnext/public/css/pos.css
@@ -169,8 +169,5 @@
height: 60px;
}
.grand-total .grand-total-value {
- font-size: 18px;
-}
-.rounded-total-value {
- font-size: 18px;
+ font-size: 24px;
}
diff --git a/erpnext/public/js/hub/hub_factory.js b/erpnext/public/js/hub/hub_factory.js
index f260fcc..a341c22 100644
--- a/erpnext/public/js/hub/hub_factory.js
+++ b/erpnext/public/js/hub/hub_factory.js
@@ -5,9 +5,22 @@
const page_name = frappe.get_route_str();
const page = route[1];
+ const assets = {
+ 'List': [
+ '/assets/erpnext/js/hub/hub_page.js',
+ '/assets/erpnext/css/hub.css',
+ ],
+ 'Form': [
+ '/assets/erpnext/js/hub/hub_form.js',
+ '/assets/erpnext/css/hub.css',
+ ]
+ };
+ console.log("make factory?");
+
if (!erpnext.hub.pages[page_name]) {
+ console.log("pages?");
if (page === 'Item' && !route[2]) {
- frappe.require('/assets/erpnext/js/hub/hub_page.js', () => {
+ frappe.require(assets['List'], () => {
erpnext.hub.pages[page_name] = new erpnext.hub.HubPage({
doctype: 'Hub Settings',
parent: this.make_page(true, page_name)
@@ -15,7 +28,8 @@
window.hub_page = erpnext.hub.pages[page_name];
});
} else if(route[2]) {
- frappe.require('/assets/erpnext/js/hub/hub_form.js', () => {
+ console.log("form?");
+ frappe.require(assets['Form'], () => {
erpnext.hub.pages[page_name] = new erpnext.hub.HubForm({
hub_item_code: route[2],
doctype: 'Hub Settings',
@@ -25,6 +39,7 @@
});
}
} else {
+ console.log("else?");
frappe.container.change_to(page_name);
window.hub_page = erpnext.hub.pages[page_name];
}
diff --git a/erpnext/public/js/hub/hub_form.js b/erpnext/public/js/hub/hub_form.js
index 0a8b5b0..208af41 100644
--- a/erpnext/public/js/hub/hub_form.js
+++ b/erpnext/public/js/hub/hub_form.js
@@ -8,7 +8,7 @@
}
setup_fields() {
-
+ this.fields = ['hub_item_code', 'item_name', 'item_code', 'description', 'seller', 'company_name', 'country'];
}
set_breadcrumbs() {
@@ -40,9 +40,12 @@
};
}
+ prepare_data(r) {
+ this.data = r.message;
+ }
+
update_data(r) {
- const data = r.message;
- this.data = data;
+ this.data = r.message;
}
render() {
@@ -51,13 +54,14 @@
});
let fields = [];
- for (let fieldname in this.data) {
+ this.fields.map(fieldname => {
fields.push({
- label: toTitle(fieldname),
+ label: toTitle(frappe.model.unscrub(fieldname)),
fieldname,
- fieldtype: 'Data'
+ fieldtype: 'Data',
+ read_only: 1
});
- }
+ });
this.form = new frappe.ui.FieldGroup({
parent: this.$result,
diff --git a/erpnext/public/js/hub/hub_page.js b/erpnext/public/js/hub/hub_page.js
index 8ecd28b..9b6c4f4 100644
--- a/erpnext/public/js/hub/hub_page.js
+++ b/erpnext/public/js/hub/hub_page.js
@@ -8,10 +8,22 @@
const route = frappe.get_route();
this.page_name = route[1];
+
+ return this.get_hub_item_meta()
+ .then(r => {
+ this.meta = r.message || this.meta;
+ this.doctype = 'Hub Item';
+ frappe.model.sync(this.meta);
+ });
+ }
+
+ get_hub_item_meta() {
+ return new Promise(resolve =>
+ frappe.call('erpnext.hub_node.get_hub_item_meta', {}, resolve));
}
setup_fields() {
-
+ this.fields = ['name', 'hub_item_code', 'image', 'item_name', 'item_code'];
}
set_breadcrumbs() {
@@ -23,13 +35,32 @@
}
setup_filter_area() {
-
+ this.custom_filter_configs = [
+ {
+ fieldtype: 'Data',
+ label: 'Company',
+ condition: 'like',
+ fieldname: 'company_name',
+ },
+ {
+ fieldtype: 'Link',
+ label: 'Country',
+ options: 'Country',
+ condition: 'like',
+ fieldname: 'country'
+ }
+ ];
+ this.filter_area = new FilterArea(this);
}
setup_sort_selector() {
}
+ setup_view() {
+
+ }
+
get_args() {
return {
start: this.start,
@@ -37,18 +68,33 @@
category: this.category || '',
order_by: this.order_by,
company: this.company || '',
- text: this.search_text || ''
+ text: this.search_text || '',
+ fields: this.fields
};
}
update_data(r) {
const data = r.message;
+ console.log('update data', data);
if (this.start === 0) {
this.data = data;
} else {
this.data = this.data.concat(data);
}
+
+ }
+
+ freeze(toggle) {
+ this.$freeze.toggle(toggle);
+ if (this.$freeze.find('.image-view-container').length) return;
+
+ const html = Array.from(new Array(4)).map(d => this.card_html({
+ name: 'freeze',
+ item_name: 'freeze'
+ })).join('');
+
+ this.$freeze.html(`<div class="image-view-container border-top">${html}</div>`);
}
render() {
@@ -56,13 +102,15 @@
}
render_image_view() {
- var html = this.data.map(this.card_html.bind(this)).join("");
+ let data = this.data;
+ console.log('this.data render', this.data);
+ if (this.start === 0) {
+ this.$result.html('<div class="image-view-container small padding-top">');
+ data = this.data.slice(this.start);
+ }
- this.$result.html(`
- <div class="image-view-container small">
- ${html}
- </div>
- `);
+ var html = data.map(this.card_html.bind(this)).join("");
+ this.$result.find('.image-view-container').append(html);
}
card_html(item) {
@@ -70,39 +118,28 @@
const encoded_name = item._name;
const title = strip_html(item['item_name' || 'item_code']);
- const _class = !item.image ? 'no-image' : '';
- const _html = item.image ?
- `<img data-name="${encoded_name}" src="${ item.image }" alt="${ title }">` :
- `<span class="placeholder-text">
- ${ frappe.get_abbr(title) }
- </span>`;
+ const route = `#Hub/Item/${item.hub_item_code}`;
+
+ const image_html = item.image ?
+ `<img src="${item.image}">
+ <span class="helper"></span>` :
+ `<div class="standard-image">${frappe.get_abbr(title)}</div>`;
return `
- <div class="image-view-item">
- <div class="image-view-header">
- <div class="list-row-col list-subject ellipsis level">
- <div class="list-row-col">
- <span>${title}</span>
+ <div class="hub-item-wrapper margin-bottom" style="width: 200px;">
+ <a href="${route}">
+ <div class="hub-item-image">
+ <div class="img-wrapper" style="height: 200px; width: 200px">
+ ${image_html}
</div>
</div>
- </div>
- <div class="image-view-body">
- <a data-name="${encoded_name}"
- title="${encoded_name}"
- href="#Hub/Item/${item.hub_item_code}"
- >
- <div class="image-field ${_class}"
- data-name="${encoded_name}"
- >
- ${_html}
- </div>
- </a>
- </div>
+ <div class="hub-item-title">
+ <h5 class="bold">
+ ${ title }
+ </h5>
+ </div>
+ </a>
</div>
`;
}
-
- show_hub_form() {
-
- }
-};
+};
\ No newline at end of file
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 1cae692..66199a4 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -1,5 +1,41 @@
@import "../../../../frappe/frappe/public/less/variables.less";
+body[data-route^="Hub/"] {
+ .freeze .image-view-container {
+ .list-row-col {
+ background-color: @light-bg;
+ color: @light-bg;
+ }
+
+ .placeholder-text {
+ color: @light-bg;
+ }
+ }
+
+ .freeze {
+ display: none;
+ }
+
+ .image-view-container {
+ justify-content: space-around;
+ }
+}
+
+.img-wrapper {
+ border: 1px solid #d1d8dd;
+ border-radius: 3px;
+ padding: 12px;
+ overflow: hidden;
+ text-align: center;
+ white-space: nowrap;
+
+ .helper {
+ height: 100%;
+ display: inline-block;
+ vertical-align: middle;
+ }
+}
+
/* hub */
div[data-page-route="hub"] {
.page-head {