[hub] Favourites UI
- remove from listing
- add to favourites
diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index 262ed21..f7f5975 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -17,15 +17,24 @@
const item_html = `
<div class="col-md-3 col-sm-4 col-xs-6">
- <div class="hub-card" data-route="marketplace/item/${item.hub_item_code}">
- <div class="hub-card-header">
- <div class="hub-card-title ellipsis bold">${title}</div>
- <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+ <div class="hub-card"
+ data-hub-item-code="${item.hub_item_code}"
+ data-route="marketplace/item/${item.hub_item_code}">
+
+ <div class="hub-card-header level">
+ <div class="ellipsis">
+ <div class="hub-card-title ellipsis bold">${title}</div>
+ <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+ </div>
+ <i class="octicon octicon-x text-extra-muted"
+ data-hub-item-code="${item.hub_item_code}">
+ </i>
</div>
<div class="hub-card-body">
<img class="hub-card-image" src="${img_url}" />
<div class="overlay hub-card-overlay"></div>
</div>
+
</div>
</div>
`;
@@ -62,9 +71,11 @@
const item_html = `
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="hub-card is-local ${is_active ? 'active' : ''}" data-id="${id}">
- <div class="hub-card-header">
- <div class="hub-card-title ellipsis bold">${title}</div>
- <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+ <div class="hub-card-header flex">
+ <div>
+ <div class="hub-card-title ellipsis bold">${title}</div>
+ <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+ </div>
<i class="octicon octicon-check text-success"></i>
</div>
<div class="hub-card-body">
diff --git a/erpnext/public/js/hub/pages/favourites.js b/erpnext/public/js/hub/pages/favourites.js
index d4a8cb3..6c2fd65 100644
--- a/erpnext/public/js/hub/pages/favourites.js
+++ b/erpnext/public/js/hub/pages/favourites.js
@@ -2,6 +2,22 @@
import { get_item_card_container_html } from '../components/items_container';
erpnext.hub.Favourites = class Favourites extends SubPage {
+ make_wrapper() {
+ super.make_wrapper();
+ this.bind_events();
+ }
+
+ bind_events() {
+ this.$wrapper.on('click', '.hub-card', (e) => {
+ const $target = $(e.target);
+ if($target.hasClass('octicon-x')) {
+ e.stopPropagation();
+ const hub_item_code = $target.attr('data-hub-item-code');
+ this.on_item_remove(hub_item_code);
+ }
+ });
+ }
+
refresh() {
this.get_favourites()
.then(items => {
@@ -18,6 +34,40 @@
render(items) {
this.$wrapper.find('.hub-card-container').empty();
const html = get_item_card_container_html(items, __('Favourites'));
- this.$wrapper.append(html)
+ this.$wrapper.append(html);
+
+ this.$wrapper.find('.hub-card').addClass('closable');
}
+
+ on_item_remove(hub_item_code, $hub_card = '') {
+ const $message = $(__(`<span>${hub_item_code} removed.
+ <a href="#" data-action="undo-remove"><b>Undo</b></a></span>`));
+
+ frappe.show_alert($message);
+
+ $hub_card = this.$wrapper.find(`.hub-card[data-hub-item-code="${hub_item_code}"]`);
+
+ $hub_card.hide();
+
+ const grace_period = 5000;
+
+ setTimeout(() => {
+ this.remove_item(hub_item_code, $hub_card);
+ }, grace_period);
+ }
+
+ remove_item(hub_item_code, $hub_card) {
+ hub.call('remove_item_from_seller_favourites', {
+ hub_item_code,
+ hub_seller: hub.settings.company_email
+ })
+ .then(() => {
+ $hub_card.remove();
+ })
+ .catch(e => {
+ console.log(e);
+ });
+ }
+
+ undo_remove(hub_item_code) { }
}
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 7ac1684..51fe340 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -68,6 +68,18 @@
&:hover .hub-card-overlay {
display: block;
}
+
+ .octicon-x {
+ display: none;
+ margin-left: 10px;
+ font-size: 20px;
+ }
+ }
+
+ .hub-card.closable {
+ .octicon-x {
+ display: block;
+ }
}
.hub-card.is-local {