[hub] Favourites UI
- remove from listing - add to favourites
This commit is contained in:
parent
1a0fb5b63a
commit
460e2798cd
@ -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-header">
|
||||
<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 @@ 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">
|
||||
|
@ -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) { }
|
||||
}
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user