Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[hub] Favourites UI

Browse Source 
- remove from listing
- add to favourites
This commit is contained in:
Prateeksha Singh 2018-08-14 11:42:40 +05:30
parent 1a0fb5b63a
commit 460e2798cd
3 changed files with 81 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
erpnext/public/js/hub/components/item_card.js
View File

@ -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-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 @@ 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-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">

52
erpnext/public/js/hub/pages/favourites.js
View File

@ -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) { }
}

12
erpnext/public/less/hub.less
View File

@ -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 {