[hub] add data-driven notification message

This commit is contained in:
Prateeksha Singh 2018-08-23 22:42:41 +05:30
parent b696b2965d
commit 67e0374261
7 changed files with 65 additions and 66 deletions

View File

@ -20,4 +20,18 @@ export default {
}
</script>
<style scoped></style>
<style lang="less" scoped>
@import "../../../../../../frappe/frappe/public/less/variables.less";
.empty-state {
height: 500px;
margin: 15px 0px;
}
.empty-state.bordered {
border-radius: 4px;
border: 1px solid @border-color;
border-style: dashed;
}
</style>

View File

@ -1,8 +1,11 @@
<template>
<div class="subpage-message">
<div v-if="message" class="subpage-message">
<p class="text-muted flex">
<span v-html="message"></span>
<i class="octicon octicon-x text-extra-muted"></i>
<i class="octicon octicon-x text-extra-muted"
@click="$emit('remove-message')"
>
</i>
</p>
</div>
</template>
@ -10,11 +13,26 @@
<script>
export default {
name: ' notification-message',
name: 'notification-message',
props: {
message: String,
}
}
}
</script>
<style scoped></style>
<style lang="less" scoped>
.subpage-message {
p {
padding: 10px 15px;
margin-top: 0px;
margin-bottom: 15px;
background-color: #f9fbf7;
border-radius: 4px;
justify-content: space-between;
}
.octicon-x {
cursor: pointer;
}
}
</style>

View File

@ -3,6 +3,12 @@
class="marketplace-page"
:data-page-name="page_name"
>
<notification-message
v-if="last_sync_message"
:message="last_sync_message"
@remove-message="clear_last_sync_message"
></notification-message>
<div class="flex justify-between align-flex-end">
<h5>{{ page_title }}</h5>
@ -41,6 +47,7 @@
<script>
import SearchInput from './SearchInput.vue';
import ItemCardsContainer from './ItemCardsContainer.vue';
import NotificationMessage from './NotificationMessage.vue';
export default {
name: 'publish-page',
@ -58,12 +65,20 @@ export default {
Browse and click on products below to publish.`),
valid_products_instruction: __(`Only products with an image, description
and category can be published. Please update them if an item in your
inventory does not appear.`)
inventory does not appear.`),
last_sync_message: (hub.settings.last_sync_datetime)
? __(`Last sync was
<a href="#marketplace/profile">
${comment_when(hub.settings.last_sync_datetime)}</a>.
<a href="#marketplace/my-products">
See your Published Products</a>.`)
: ''
};
},
components: {
SearchInput,
ItemCardsContainer
ItemCardsContainer,
NotificationMessage
},
computed: {
no_selected_items() {
@ -96,6 +111,10 @@ export default {
.then((r) => {
this.valid_items = r.message;
})
},
clear_last_sync_message() {
this.last_sync_message = '';
}
}
}

View File

@ -1,20 +0,0 @@
const NotificationMessage = (message) => {
const $message = $(`<div class="subpage-message">
<p class="text-muted flex">
<span>
${message}
</span>
<i class="octicon octicon-x text-extra-muted"></i>
</p>
</div>`);
$message.find('.octicon-x').on('click', () => {
$message.remove();
});
return $message;
}
export {
NotificationMessage
}

View File

@ -66,12 +66,12 @@ erpnext.hub.Publish = class Publish {
this.get_items_and_render();
}
show_last_sync_message() {
if(hub.settings.last_sync_datetime) {
this.show_message(`Last sync was <a href="#marketplace/profile">${comment_when(hub.settings.last_sync_datetime)}</a>.
<a href="#marketplace/my-products">See your Published Products</a>.`);
}
}
// show_last_sync_message() {
// if(hub.settings.last_sync_datetime) {
// this.show_message(`Last sync was <a href="#marketplace/profile">${comment_when(hub.settings.last_sync_datetime)}</a>.
// <a href="#marketplace/my-products">See your Published Products</a>.`);
// }
// }
setup_publishing_events() {
this.$wrapper.find('.publish-items').on('click', () => {

View File

@ -1,5 +1,3 @@
import { NotificationMessage } from '../components/notification_message';
export default class SubPage {
constructor(parent, options) {
this.$parent = $(parent);
@ -84,8 +82,4 @@ export default class SubPage {
hide() {
this.$wrapper.hide();
}
show_message(message) {
this.$wrapper.prepend(NotificationMessage(message));
}
}

View File

@ -44,21 +44,6 @@ body[data-route^="marketplace/"] {
justify-content: space-between;
}
.subpage-message {
p {
padding: 10px 15px;
margin-top: 0px;
margin-bottom: 15px;
background-color: #f9fbf7;
border-radius: 4px;
justify-content: space-between;
}
.octicon-x {
cursor: pointer;
}
}
.hub-card {
margin-bottom: 25px;
position: relative;
@ -211,17 +196,6 @@ body[data-route^="marketplace/"] {
padding: 15px 25px;
}
.empty-state {
height: 500px;
margin: 15px 0px;
}
.empty-state.bordered {
border-radius: 4px;
border: 1px solid @border-color;
border-style: dashed;
}
.publish-area.filled {
.empty-items-container {
display: none;