fix: Refactor Review Area according to new Text Editor (#15536)
- depends on https://github.com/frappe/frappe/pull/6159
This commit is contained in:
parent
1cf71d96b1
commit
6575e52942
@ -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();
|
||||
}
|
||||
|
@ -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({
|
||||
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 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
Loading…
x
Reference in New Issue
Block a user