[hub] add review timeline element

erpnext/public/js/hub/components/ReviewArea.vue

@@ -1,16 +1,52 @@
 <template>
 	<div>
 		<div ref="review-area" class="timeline-head"></div>
-		<div class="timeline-items"></div>
+		<div class="timeline-items">
+			<review-timeline-item v-for="review in reviews"
+				:key="review.user"
+				:username="review.username"
+				:avatar="review.user_image"
+				:comment_when="when(review.modified)"
+				:rating="review.rating"
+				:subject="review.subject"
+				:content="review.content"
+			>
+			</review-timeline-item>
+		</div>
 	</div>
 </template>
 <script>
+import ReviewTimelineItem from '../components/ReviewTimelineItem.vue';
+
 export default {
-	props: ['hub_item_name', 'reviews'],
+	props: ['hub_item_name'],
+	data() {
+		return {
+			reviews: []
+		}
+	},
+	components: {
+		ReviewTimelineItem
+	},
+	created() {
+		this.get_item_reviews();
+	},
 	mounted() {
 		this.make_input();
 	},
 	methods: {
+		when(datetime) {
+			return comment_when(datetime);
+		},
+
+		get_item_reviews() {
+			hub.call('get_item_reviews', { hub_item_name: this.hub_item_name })
+				.then(reviews => {
+					this.reviews = reviews;
+				})
+				.catch(() => {});
+		},
+
 		make_input() {
 			this.review_area = new frappe.ui.ReviewArea({
 				parent: this.$refs['review-area'],
@@ -31,8 +67,8 @@ export default {
 			.then(this.push_review.bind(this));
 		},
 
-		push_review(){
-			//
+		push_review(review){
+			this.reviews.unshift(review);
 		}
 	}
 }

erpnext/public/js/hub/components/ReviewTimelineItem.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="media timeline-item user-content" data-doctype="${''}" data-name="${''}">
+		<span class="pull-left avatar avatar-medium hidden-xs" style="margin-top: 1px">
+			<!-- ${image_html} -->
+		</span>
+		<div class="pull-left media-body">
+			<div class="media-content-wrapper">
+				<div class="action-btns">
+                    <!-- ${edit_html} -->
+                </div>
+
+				<div class="comment-header clearfix">
+					<span class="pull-left avatar avatar-small visible-xs">
+						<!-- ${image_html} -->
+					</span>
+
+					<div class="asset-details">
+						<span class="author-wrap">
+							<i class="octicon octicon-quote hidden-xs fa-fw"></i>
+							<span>
+                                {{ username }}
+                            </span>
+						</span>
+						<a class="text-muted">
+							<span class="text-muted hidden-xs">&ndash;</span>
+							<span class="hidden-xs" v-html="comment_when"></span>
+						</a>
+					</div>
+				</div>
+				<div class="reply timeline-content-show">
+					<div class="timeline-item-content">
+						<p class="text-muted">
+							<rating :rating="rating" :max_rating="5"></rating>
+						</p>
+						<h6 class="bold">{{ subject }}</h6>
+						<p class="text-muted" v-html="content"></p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Rating from '../components/Rating.vue';
+
+export default {
+    props: ['username', 'comment_when', 'avatar', 'rating', 'subject', 'content'],
+    components: {
+        Rating
+    }
+}
+</script>
+

erpnext/public/js/hub/pages/Item.vue

@@ -68,12 +68,12 @@ export default {
 				{
 					label: __('Edit Details'),
 					condition: this.is_own_item,
-					action: this.report_item
+					action: this.edit_details
 				},
 				{
 					label: __('Unpublish Product'),
 					condition: this.is_own_item,
-					action: this.report_item
+					action: this.unpublish_item
 				}
 			]
 		};
@@ -161,6 +161,7 @@ export default {
 				this.item = item;
 
 				this.build_data();
+				this.make_dialogs();
 			});
 		},
 
@@ -185,8 +186,8 @@ export default {
 			];
 		},
 
-		report_item() {
-			//
+		make_dialogs() {
+			this.make_contact_seller_dialog();
 		},
 
 		add_to_saved_items() {
@@ -204,8 +205,8 @@ export default {
 			});
 		},
 
-		contact_seller() {
-			const d = new frappe.ui.Dialog({
+		make_contact_seller_dialog() {
+			this.contact_seller_dialog = new frappe.ui.Dialog({
 				title: __('Send a message'),
 				fields: [
 					{
@@ -236,8 +237,18 @@ export default {
 						});
 				}
 			});
+		},
 
-			d.show();
+		contact_seller() {
+			this.contact_seller_dialog.show();
+		},
+
+		edit_details() {
+			//
+		},
+
+		unpublish_item() {
+			//
 		}
 	}
 }