[hub] Favourites UI

- remove from listing
- add to favourites

erpnext/public/js/hub/components/item_card.js

@@ -17,15 +17,24 @@ function get_item_card_html(item) {
 
 	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"
-				<div class="hub-card-header">
+				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 @@ function get_local_item_card_html(item) {
 	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-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">

erpnext/public/js/hub/pages/favourites.js

@@ -2,6 +2,22 @@ import SubPage from './subpage';
 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 @@ erpnext.hub.Favourites = class Favourites extends SubPage {
 	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) { }
 }

erpnext/public/less/hub.less

@@ -68,6 +68,18 @@ body[data-route^="marketplace/"] {
 		&: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 {