fix: Refactor Review Area according to new Text Editor (#15536)

- depends on https://github.com/frappe/frappe/pull/6159

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

@@ -18,18 +18,19 @@ export default {
 	},
 	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();
 		}

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 @@ export default {
 	props: ['hub_item_name'],
 	data() {
 		return {
+			user_review: {
+				rating: 0,
+				subject: '',
+				content: ''
+			},
 			reviews: []
 		}
 	},
@@ -35,6 +78,10 @@ export default {
 		this.make_input();
 	},
 	methods: {
+		set_rating(i) {
+			this.user_review.rating = i;
+		},
+
 		when(datetime) {
 			return comment_when(datetime);
 		},
@@ -48,21 +95,37 @@ export default {
 		},
 
 		make_input() {
-			this.review_area = new frappe.ui.ReviewArea({
+			this.review_content = frappe.ui.form.make_control({
-				parent: this.$refs['review-area'],
+				parent: this.$refs['review-content'],
-				mentions: [],
+				on_submit: this.on_submit_review.bind(this),
-				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) {
+		on_submit_review() {
-			this.review_area.reset();
+			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 @@ export default {
 		}
 	}
 }
-</script>
+</script>