fix: Refactor Review Area according to new Text Editor (#15536)
- depends on https://github.com/frappe/frappe/pull/6159
diff --git a/erpnext/public/js/hub/components/CommentInput.vue b/erpnext/public/js/hub/components/CommentInput.vue
index cc430d0..31562c7 100644
--- a/erpnext/public/js/hub/components/CommentInput.vue
+++ b/erpnext/public/js/hub/components/CommentInput.vue
@@ -18,18 +18,19 @@
},
methods: {
make_input() {
- this.message_input = new frappe.ui.CommentArea({
+ this.message_input = frappe.ui.form.make_control({
parent: this.$refs['comment-input'],
on_submit: (message) => {
this.message_input.reset();
this.$emit('change', message);
},
+ only_input: true,
no_wrapper: true
});
},
submit_input() {
if (!this.message_input) return;
- const value = this.message_input.val();
+ const value = this.message_input.get_value();
if (!value) return;
this.message_input.submit();
}
diff --git a/erpnext/public/js/hub/components/ReviewArea.vue b/erpnext/public/js/hub/components/ReviewArea.vue
index 159fdd1..51b9ab1 100644
--- a/erpnext/public/js/hub/components/ReviewArea.vue
+++ b/erpnext/public/js/hub/components/ReviewArea.vue
@@ -1,6 +1,44 @@
<template>
<div>
- <div ref="review-area" class="timeline-head"></div>
+ <div class="timeline-head">
+ <div class="comment-input-wrapper">
+ <div class="comment-input-header">
+ <span class="text-muted">{{ __('Add your review') }}</span>
+ <div class="btn btn-default btn-xs pull-right"
+ @click="on_submit_review"
+ :disabled="!(user_review.rating && user_review.subject)"
+ >
+ {{ __('Submit Review') }}
+ </div>
+ </div>
+ <div class="comment-input-container">
+ <div class="rating-area text-muted">
+ <span>{{ __('Your rating:') }}</span>
+ <div
+ v-for="i in [1, 2, 3, 4, 5]"
+ :key="i"
+ :class="['fa fa-fw', user_review.rating < i ? 'fa-star-o' : 'fa-star']"
+ :data-index="i"
+ @click="set_rating(i)"
+ >
+ </div>
+ </div>
+ <div class="comment-input-body margin-top" v-show="user_review.rating">
+ <input
+ type="text"
+ placeholder="Subject"
+ class="form-control margin-bottom"
+ style="border-color: #ebeff2"
+ v-model="user_review.subject"
+ >
+ <div ref="review-content"></div>
+ <div>
+ <span class="text-muted text-small">{{ __('Ctrl+Enter to submit') }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="timeline-items">
<review-timeline-item v-for="review in reviews"
:key="review.user"
@@ -22,6 +60,11 @@
props: ['hub_item_name'],
data() {
return {
+ user_review: {
+ rating: 0,
+ subject: '',
+ content: ''
+ },
reviews: []
}
},
@@ -35,6 +78,10 @@
this.make_input();
},
methods: {
+ set_rating(i) {
+ this.user_review.rating = i;
+ },
+
when(datetime) {
return comment_when(datetime);
},
@@ -48,21 +95,37 @@
},
make_input() {
- this.review_area = new frappe.ui.ReviewArea({
- parent: this.$refs['review-area'],
- mentions: [],
- on_submit: this.on_submit_review.bind(this)
+ this.review_content = frappe.ui.form.make_control({
+ parent: this.$refs['review-content'],
+ on_submit: this.on_submit_review.bind(this),
+ no_wrapper: true,
+ only_input: true,
+ render_input: true,
+ df: {
+ fieldtype: 'Comment',
+ fieldname: 'comment'
+ }
});
},
- on_submit_review(values) {
- this.review_area.reset();
+ on_submit_review() {
+ const review = Object.assign({}, this.user_review, {
+ content: this.review_content.get_value()
+ });
hub.call('add_item_review', {
hub_item_name: this.hub_item_name,
- review: JSON.stringify(values)
+ review: JSON.stringify(review)
})
.then(this.push_review.bind(this));
+
+ this.reset_user_review();
+ },
+
+ reset_user_review() {
+ this.user_review.rating = 0;
+ this.user_review.subject = '';
+ this.review_content.set_value('');
},
push_review(review){
@@ -70,4 +133,4 @@
}
}
}
-</script>
+</script>
\ No newline at end of file